fix(forms): fix form elements width - FRONT-3993 (#2914)

ec-europa · Jul 4, 2023 · c279669 · c279669 · github-actions · Jul 4, 2023
1 parent 59d2971
commit c279669
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 43 deletions.
diff --git a/src/implementations/vanilla/components/datepicker/_datepicker.scss b/src/implementations/vanilla/components/datepicker/_datepicker.scss
@@ -26,13 +26,9 @@ $_picker-theme-color: null !default;
 .ecl-datepicker {
   margin: 0;
   position: relative;
-  width: 50%;
-
-  @include breakpoints.up('m') {
-    width: 30%;
-  }
+  width: 100%;
 
-  @include breakpoints.up('l') {
+  @include breakpoints.up('s') {
     width: map.get(theme.$form, 's');
   }
 }

diff --git a/src/implementations/vanilla/components/range/_range.scss b/src/implementations/vanilla/components/range/_range.scss
@@ -82,13 +82,9 @@ $_range-margin-top: null !default;
 
 // Width
 .ecl-range--s {
-  width: 50%;
+  width: 100%;
 
   @include breakpoints.up('m') {
-    width: 30%;
-  }
-
-  @include breakpoints.up('l') {
     width: map.get(theme.$form, 's');
   }
 }
@@ -97,18 +93,14 @@ $_range-margin-top: null !default;
   width: 100%;
 
   @include breakpoints.up('m') {
-    width: 50%;
-  }
-
-  @include breakpoints.up('l') {
     width: map.get(theme.$form, 'm');
   }
 }
 
 .ecl-range--l {
   width: 100%;
 
-  @include breakpoints.up('l') {
+  @include breakpoints.up('m') {
     width: map.get(theme.$form, 'l');
   }
 }

diff --git a/src/implementations/vanilla/components/select/_select.scss b/src/implementations/vanilla/components/select/_select.scss
@@ -107,13 +107,9 @@ $_multiple_counter_background: null !default;
 }
 
 .ecl-select__container--s {
-  width: 50%;
+  width: 100%;
 
   @include breakpoints.up('m') {
-    width: 30%;
-  }
-
-  @include breakpoints.up('l') {
     width: map.get(theme.$form, 's');
   }
 }
@@ -122,18 +118,14 @@ $_multiple_counter_background: null !default;
   width: 100%;
 
   @include breakpoints.up('m') {
-    width: 50%;
-  }
-
-  @include breakpoints.up('l') {
     width: map.get(theme.$form, 'm');
   }
 }
 
 .ecl-select__container--l {
   width: 100%;
 
-  @include breakpoints.up('l') {
+  @include breakpoints.up('m') {
     width: map.get(theme.$form, 'l');
   }
 }
@@ -256,6 +248,7 @@ $_multiple_counter_background: null !default;
     cursor: default;
     box-shadow: $_multiple-dropdown-shadow;
     box-sizing: border-box;
+    min-width: map.get(theme.$form, 'm');
     position: absolute;
     z-index: map.get(theme.$z-index, 'dropdown');
   }

diff --git a/src/implementations/vanilla/components/text-area/_text-area.scss b/src/implementations/vanilla/components/text-area/_text-area.scss
@@ -59,22 +59,26 @@ $_padding-horizontal: null !default;
   }
 }
 
-.ecl-text-area--m {
+.ecl-text-area--s {
   width: 100%;
 
   @include breakpoints.up('m') {
-    width: 50%;
+    width: map.get(theme.$form, 's');
   }
+}
 
-  @include breakpoints.up('l') {
+.ecl-text-area--m {
+  width: 100%;
+
+  @include breakpoints.up('m') {
     width: map.get(theme.$form, 'm');
   }
 }
 
 .ecl-text-area--l {
   width: 100%;
 
-  @include breakpoints.up('l') {
+  @include breakpoints.up('m') {
     width: map.get(theme.$form, 'l');
   }
 }

diff --git a/src/implementations/vanilla/components/text-input/_text-input.scss b/src/implementations/vanilla/components/text-input/_text-input.scss
@@ -60,13 +60,9 @@ $_padding-horizontal: null !default;
 }
 
 .ecl-text-input--s {
-  width: 50%;
+  width: 100%;
 
   @include breakpoints.up('m') {
-    width: 30%;
-  }
-
-  @include breakpoints.up('l') {
     width: map.get(theme.$form, 's');
   }
 }
@@ -75,18 +71,14 @@ $_padding-horizontal: null !default;
   width: 100%;
 
   @include breakpoints.up('m') {
-    width: 50%;
-  }
-
-  @include breakpoints.up('l') {
     width: map.get(theme.$form, 'm');
   }
 }
 
 .ecl-text-input--l {
   width: 100%;
 
-  @include breakpoints.up('l') {
+  @include breakpoints.up('m') {
     width: map.get(theme.$form, 'l');
   }
 }

diff --git a/src/playground/addons/story-utils/index.js b/src/playground/addons/story-utils/index.js
@@ -260,9 +260,9 @@ export const getFormControls = (data, type) => {
         label: { s: 'small', m: 'medium', l: 'large' },
       },
       mapping: {
-        s: 'small',
-        m: 'medium',
-        l: 'large',
+        s: 's',
+        m: 'm',
+        l: 'l',
       },
     };
   }