Added divider to ComboBox and Filterrable MultiSelect (carbon-des…

…ign-system#15878) * feat: added dividers to combo-box * feat: added divider to filterable multiselect * feat: remove divider in search * feat: changed color for search icon * feat(ListBox): add dividers to AI list box components * fix(ListBox): use convert function * fix: fixed pixel * fix: removed control to use pseudo-elements * fix: fixed stories * fix: changed from spacing-11 to 75px * fix: fix pixels * fix: fix * fix: fixed pixels --------- Co-authored-by: TJ Egan <[email protected]>
guidari · Mar 11, 2024 · 0897b64 · 0897b64
1 parent 2e53484
commit 0897b64
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 24 deletions.
diff --git a/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss
@@ -330,4 +330,32 @@
     .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty) {
     padding-inline-end: $spacing-12;
   }
+
+  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__selection {
+    inset-inline-end: convert.to-rem(41px);
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box--warning,
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--invalid[data-invalid] {
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__menu-icon)
+      .#{$prefix}--list-box__selection::before {
+      position: absolute;
+      background-color: transparent;
+      block-size: convert.to-rem(16px);
+      content: '';
+      inline-size: convert.to-rem(1px);
+      margin-inline-end: convert.to-rem(33px);
+    }
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid:has(.#{$prefix}--multi-select)
+    .#{$prefix}--list-box__menu-icon {
+    inset-inline-end: calc($spacing-04);
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid:has(.#{$prefix}--dropdown)
+    .#{$prefix}--list-box__menu-icon {
+    inset-inline-end: calc($spacing-04);
+  }
 }
diff --git a/packages/styles/scss/components/fluid-search/_fluid-search.scss b/packages/styles/scss/components/fluid-search/_fluid-search.scss
@@ -59,6 +59,7 @@
   }
 
   .#{$prefix}--search--fluid .#{$prefix}--search-magnifier-icon {
+    color: $icon-primary;
     inset: auto 1rem convert.to-rem(13px) auto;
     transform: none;
   }
@@ -71,16 +72,6 @@
     transition: background-color $duration-fast-01 motion(standard, productive);
   }
 
-  .#{$prefix}--search--fluid .#{$prefix}--search-close::before {
-    position: absolute;
-    display: block;
-    background: $border-subtle;
-    block-size: 1rem;
-    content: '';
-    inline-size: convert.to-rem(1px);
-    inset: auto convert.to-rem(-1px) convert.to-rem(14px) auto;
-  }
-
   .#{$prefix}--search--fluid
     .#{$prefix}--search-input:focus
     ~ .#{$prefix}--search-close:hover {

diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
@@ -331,7 +331,7 @@ $list-box-menu-width: convert.to-rem(300px);
 
   // populated input field
   .#{$prefix}--list-box__field .#{$prefix}--text-input {
-    padding-inline-end: convert.to-rem(72px);
+    padding-inline-end: convert.to-rem(80px);
   }
 
   // invalid && populated input field
@@ -342,7 +342,7 @@ $list-box-menu-width: convert.to-rem(300px);
     .#{$prefix}--list-box__field
     .#{$prefix}--text-input {
     // to account for clear input button outline
-    padding-inline-end: convert.to-rem(98px);
+    padding-inline-end: convert.to-rem(105px);
   }
 
   .#{$prefix}--list-box[data-invalid]
@@ -354,7 +354,7 @@ $list-box-menu-width: convert.to-rem(300px);
     .#{$prefix}--text-input
     + .#{$prefix}--list-box__invalid-icon {
     // to account for clear input button outline
-    inset-inline-end: convert.to-rem(66px);
+    inset-inline-end: convert.to-rem(82px);
   }
 
   // empty input field
@@ -434,7 +434,7 @@ $list-box-menu-width: convert.to-rem(300px);
     inline-size: convert.to-rem(24px);
     inset-block-start: 50%;
     /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
-    inset-inline-end: convert.to-rem(36px);
+    inset-inline-end: convert.to-rem(45px);
     transform: translateY(-50%);
     transition: background-color $duration-fast-01 motion(standard, productive);
     user-select: none;
@@ -893,10 +893,30 @@ $list-box-menu-width: convert.to-rem(300px);
   .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug {
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-end: $spacing-08;
+    inset-inline-end: calc($spacing-08 + 9px);
+    margin-block-start: convert.to-rem(0.5px);
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::after,
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::before {
+    position: absolute;
+    background-color: $border-subtle-01;
+    block-size: convert.to-rem(16px);
+    content: '';
+    inline-size: convert.to-rem(1px);
+  }
+
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::before {
+    display: none;
+    inset-inline-start: convert.to-rem(-9px);
+  }
+
+  .#{$prefix}--list-box__wrapper--slug .#{$prefix}--slug::after {
+    display: block;
+    inset-inline-end: convert.to-rem(-9px);
+  }
+
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box:not(:has(.#{$prefix}--slug--revert)) {
     @include ai-gradient;
@@ -939,33 +959,50 @@ $list-box-menu-width: convert.to-rem(300px);
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--warning
     .#{$prefix}--text-input:not(.#{$prefix}--text-input--empty) {
-    padding-inline-end: convert.to-rem(120px);
+    padding-inline-end: convert.to-rem(141px);
   }
 
   .#{$prefix}--list-box__wrapper--slug
-    .#{$prefix}--list-box--invalid
-    .#{$prefix}--slug,
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--text-input--empty
+    + .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__invalid-icon.#{$prefix}--list-box__invalid-icon--warning {
+    inset-inline-end: convert.to-rem(83px);
+  }
+
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--invalid[data-invalid]
+    .#{$prefix}--slug::before,
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--warning
-    .#{$prefix}--slug {
-    inset-inline-end: $spacing-10;
+    .#{$prefix}--slug::before {
+    display: block;
   }
 
   .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
+    ~ .#{$prefix}--slug,
+  .#{$prefix}--list-box__wrapper--slug
+    .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
     ~ .#{$prefix}--slug {
-    inset-inline-end: $spacing-10;
+    inset-inline-end: calc($spacing-10 + 18px);
   }
 
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--invalid
     .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
-    ~ .#{$prefix}--slug,
+    .#{$prefix}--list-box__invalid-icon,
   .#{$prefix}--list-box__wrapper--slug
     .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__selection)
-    ~ .#{$prefix}--slug {
-    inset-inline-end: convert.to-rem(88px);
+    .#{$prefix}--list-box__invalid-icon {
+    inset-inline-end: convert.to-rem(116px);
   }
 
   // Windows HCM fix
@@ -987,4 +1024,37 @@ $list-box-menu-width: convert.to-rem(300px);
   .#{$prefix}--list-box__selection--multi > svg {
     @include high-contrast-mode('icon-fill');
   }
+
+  .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__menu-icon)
+    .#{$prefix}--list-box__selection::after {
+    position: absolute;
+    background-color: $border-subtle-01;
+    block-size: convert.to-rem(16px);
+    content: '';
+    inline-size: convert.to-rem(1px);
+    margin-inline-start: convert.to-rem(33px);
+  }
+
+  .#{$prefix}--list-box--warning,
+  .#{$prefix}--list-box--invalid[data-invalid] {
+    .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__menu-icon)
+      .#{$prefix}--list-box__selection::before {
+      position: absolute;
+      background-color: $border-subtle-01;
+      block-size: convert.to-rem(16px);
+      content: '';
+      inline-size: convert.to-rem(1px);
+      margin-inline-end: convert.to-rem(33px);
+    }
+  }
+
+  .#{$prefix}--list-box__wrapper--slug:has(.#{$prefix}--multi-select)
+    .#{$prefix}--list-box__menu-icon {
+    inset-inline-end: calc($spacing-04 - 4px);
+  }
+
+  .#{$prefix}--list-box__wrapper--slug:has(.#{$prefix}--dropdown)
+    .#{$prefix}--list-box__menu-icon {
+    inset-inline-end: calc($spacing-04 - 4px);
+  }
 }