From 40b7b006250624595787f5ac41949d6f51375c78 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Thu, 26 Jan 2023 11:51:18 +0200
Subject: [PATCH] feat(select): Adding separator for grooups in multiselect -
 FRONT-3542

---
 .../vanilla/components/select/_select.scss    | 55 +++++++++++++------
 .../vanilla/components/select/select-ec.scss  |  2 +
 .../vanilla/components/select/select-eu.scss  |  2 +
 3 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/implementations/vanilla/components/select/_select.scss b/src/implementations/vanilla/components/select/_select.scss
index 9e32034493f..d0a1a8bfb6f 100644
--- 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
index 9f76a328eb3..889008bc70a 100644
--- 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
index 833e27b91df..143ddb0b655 100644
--- 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'),