feat(select): Adding separator for grooups in multiselect - FRONT-3542

ec-europa · Jan 26, 2023 · 40b7b00 · 40b7b00
1 parent 84b0262
commit 40b7b00
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 16 deletions.
diff --git a/src/implementations/vanilla/components/select/_select.scss b/src/implementations/vanilla/components/select/_select.scss
@@ -18,7 +18,9 @@ $_border-width: 1px;
 $_border-width-focus: null !default;
 $_color-input: null !default;
 $_color-placeholder: null !default;
+$_group-separator-color: null !default;
 $_group-title-font: null !default;
+$_group-title-color: null !default;
 $_shadow: null !default;
 $_shadow-hover: null !default;
 $_arrow-background-invalid-focus: null !default;
@@ -269,12 +271,48 @@ $_multiple_counter_background: null !default;
   .ecl-select__multiple-options {
     max-height: $_multiple-dropdown-container-max-height;
     overflow-y: auto;
+    padding: map.get(theme.$spacing, 's') 0;
+  }
+
+  .ecl-checkbox__label {
+    padding-bottom: $_multiple-checkbox-label-vertical-padding;
+    padding-inline-start: map.get(theme.$spacing, 's');
+    padding-inline-end: map.get(theme.$spacing, 's');
+    padding-top: $_multiple-checkbox-label-vertical-padding;
+    width: calc(
+      100% - #{map.get(theme.$spacing, 's')} - #{map.get(theme.$spacing, 's')}
+    );
+  }
+
+  .ecl-checkbox__label:hover,
+  .ecl-checkbox__label:focus {
+    background-color: $_multiple-checkbox-background-hover-color;
+  }
+
+  .ecl-select__multiple-group {
+    border-bottom: 1px solid $_group-separator-color;
+    margin: 0 map.get(theme.$spacing, 's');
+    padding: map.get(theme.$spacing, 's') 0;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    .ecl-checkbox__label {
+      padding-inline-start: 0;
+      padding-inline-end: 0;
+    }
+  }
+
+  .ecl-select__multiple-group + .ecl-checkbox {
+    margin-top: map.get(theme.$spacing, 's');
   }
 
   .ecl-select__multiple-group__title {
+    color: $_group-title-color;
     font: $_group-title-font;
     font-weight: map.get(theme.$font-weight, 'bold');
-    margin: map.get(theme.$spacing, 's');
+    margin: map.get(theme.$spacing, 'xs') 0;
   }
 
   .ecl-select__multiple-no-results {
@@ -288,21 +326,6 @@ $_multiple_counter_background: null !default;
     width: 100%;
   }
 
-  .ecl-checkbox__label {
-    padding-bottom: $_multiple-checkbox-label-vertical-padding;
-    padding-inline-start: map.get(theme.$spacing, 's');
-    padding-inline-end: map.get(theme.$spacing, 's');
-    padding-top: $_multiple-checkbox-label-vertical-padding;
-    width: calc(
-      100% - #{map.get(theme.$spacing, 's')} - #{map.get(theme.$spacing, 's')}
-    );
-  }
-
-  .ecl-checkbox__label:hover,
-  .ecl-checkbox__label:focus {
-    background-color: $_multiple-checkbox-background-hover-color;
-  }
-
   .ecl-select-multiple-toolbar {
     border-top: 1px solid $_multiple-dropdown-separator-color;
     display: flex;

diff --git a/src/implementations/vanilla/components/select/select-ec.scss b/src/implementations/vanilla/components/select/select-ec.scss
@@ -10,7 +10,9 @@
   $_border-width-focus: 3px,
   $_color-input: map.get(theme.$color, 'grey-100'),
   $_color-placeholder: map.get(theme.$color, 'grey-50'),
+  $_group-separator-color: map.get(theme.$color, 'grey-25'),
   $_group-title-font: map.get(theme.$font-prolonged, 'm'),
+  $_group-title-color: map.get(theme.$color, 'grey-75'),
   $_shadow: none,
   $_shadow-hover: none,
   $_arrow-background-color: map.get(theme.$color, 'grey-100'),

diff --git a/src/implementations/vanilla/components/select/select-eu.scss b/src/implementations/vanilla/components/select/select-eu.scss
@@ -10,7 +10,9 @@
   $_border-width-focus: 2px,
   $_color-input: map.get(theme.$color, 'grey-140'),
   $_color-placeholder: map.get(theme.$color, 'grey-40'),
+  $_group-separator-color: map.get(theme.$color, 'blue-20'),
   $_group-title-font: map.get(theme.$font, 'm'),
+  $_group-title-color: map.get(theme.$color, 'grey-80'),
   $_shadow: inset 0 0 6px rgba(9, 49, 142, 0.2),
   $_shadow-hover: inset 0 0 6px rgba(9, 49, 142, 0.4),
   $_arrow-background-invalid-focus: map.get(theme.$color, 'red-100'),