feat(lib): Add Select input component (#3256)

Co-authored-by: Vincent Prothais <[email protected]>

Author: louismaximepiton

.bundlewatch.config.json

@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./packages/orange/dist/css/ouds-web-bootstrap.css",
-      "maxSize": "72.0 kB"
+      "maxSize": "72.30 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "68.5 kB"
+      "maxSize": "68.75 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web-grid.css",
@@ -34,11 +34,11 @@
     },
     {
       "path": "./packages/orange/dist/css/ouds-web.css",
-      "maxSize": "62.5 kB"
+      "maxSize": "62.75 kB"
     },
     {
       "path": "./packages/orange/dist/css/ouds-web.min.css",
-      "maxSize": "58.5 kB"
+      "maxSize": "59.25 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.js",

build/vnu-jar.mjs

@@ -42,7 +42,9 @@ execFile('java', ['-version'], (error, stdout, stderr) => {
     'Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.',
     // Allow `switch` attribute.
     'Attribute “switch” not allowed on element “input” at this point.',
-    'Element “style” not allowed as child of element “div” in this context.*'
+    'Element “style” not allowed as child of element “div” in this context.*',
+    // Allow empty option in select
+    'Element “option” without attribute “label” must not be empty.'
     // End mod
   ].join('|')
 

packages/orange/scss/tokens/_composite.scss

@@ -108,6 +108,10 @@ $alert-icon-warning-internal: url("data:image/svg+xml,<svg xmlns='http://www.w3.
 // icon important-fill v1.4
 $alert-icon-important: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.4A9.6 9.6 0 0 0 2.4 12a9.6 9.6 0 0 0 9.6 9.6 9.6 9.6 0 0 0 9.6-9.6A9.6 9.6 0 0 0 12 2.4Zm-1.2 5.631c0-1.187.4-1.758 1.2-1.758.8 0 1.2.57 1.2 1.758v4.535c0 1.188-.385 1.774-1.2 1.774-.8 0-1.2-.585-1.2-1.774V8.031Zm1.187 10.119a1.394 1.394 0 0 1-1.387-1.407 1.38 1.38 0 0 1 1.387-1.391 1.39 1.39 0 0 1 1.388 1.39c0 .768-.622 1.408-1.388 1.408Z'/></svg>") !default;
 
+// Select input
+$select-input-chevron:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.874 9.977 12 17.25l7.125-7.273-2.034-2.079L12 13.095 6.91 7.898 4.874 9.977Z'/></svg>") !default;
+$select-input-expanded-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.124 14.023 12 6.75l-7.125 7.273 2.035 2.079L12 10.905l5.088 5.197 2.037-2.079Z'/></svg>") !default;
+
 //// SVG used several times
 $svg-as-custom-props: (
   "chevron":          $chevron-icon,

packages/sosh/scss/tokens/_composite.scss

@@ -99,6 +99,10 @@ $alert-icon-warning-internal: url("data:image/svg+xml,<svg xmlns='http://www.w3.
 // icon important-fill v1.4
 $alert-icon-important: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.4a9.6 9.6 0 1 1 0 19.2 9.6 9.6 0 0 1 0-19.2Zm0 13.2c-.333 0-.617.12-.85.36-.233.24-.35.52-.35.84 0 .33.117.613.35.847.219.23.528.358.85.353.335 0 .618-.117.851-.353a1.16 1.16 0 0 0 .35-.847c0-.32-.117-.6-.35-.84a1.142 1.142 0 0 0-.85-.36Zm.001-9.6c-.642 0-1.17.455-1.2 1.025l.24 7.135h1.92l.24-7.135C13.17 6.455 12.643 6 12 6Z'/></svg>") !default;
 
+// Select input
+$select-input-chevron:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.019 7.431c-.015.015.015-.019 0 0l-4.905 5.55-4.811-5.55c-.615-.619-1.388-.506-1.913 0-.019.015.015-.019 0 0-.536.566-.506 1.448.008 2.036l5.812 6.709c.48.551 1.286.506 1.808 0L18.9 9.467c.717-.716.574-1.545.094-2.036-.48-.491-1.339-.652-1.976 0Z'/></svg>") !default;
+$select-input-expanded-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.378 16.142c-.015.018.015-.015 0 0l4.905-5.55 4.811 5.55c.615.618 1.388.506 1.913 0-.015.018.019-.015 0 0 .536-.566.506-1.448-.008-2.037l-5.812-6.708c-.48-.552-1.286-.507-1.808 0l-5.883 6.708c-.717.717-.574 1.545-.094 2.037.48.491 1.339.652 1.976 0Z'/></svg>") !default;
+
 //// SVG used several times
 $svg-as-custom-props: (
   "chevron":          $chevron-icon,

scss/_forms.scss

@@ -1,12 +1,12 @@
 @import "forms/labels";
 @import "forms/form-text";
 @import "forms/form-control";
-@import "forms/form-select";
 @import "forms/control-item";
 @import "forms/form-range";
 // OUDS mod: no floating-labels
 @import "forms/input-group";
 @import "forms/star-rating"; // OUDS mod
 @import "forms/validation";
 @import "forms/quantity-selector"; // OUDS mod
+@import "forms/select-input"; // OUDS mod
 @import "forms/text-input"; // OUDS mod