fix(FluidListbox): fix issues with ai-enabled fluid listbox components (

#16170)
carbon-design-system · Apr 16, 2024 · 83082ca · 83082ca
1 parent b82d843
commit 83082ca
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 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
@@ -191,9 +191,10 @@
   }
 
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__invalid-icon,
   .#{$prefix}--list-box__wrapper--fluid
-    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box.#{$prefix}--list-box--warning
     .#{$prefix}--list-box__invalid-icon {
     inset-block-start: convert.to-rem(81px);
     inset-inline-end: $spacing-05;
@@ -355,11 +356,21 @@
 
   .#{$prefix}--list-box__wrapper--fluid:has(.#{$prefix}--multi-select)
     .#{$prefix}--list-box__menu-icon {
-    inset-inline-end: calc($spacing-04);
+    inset-inline-end: $spacing-04;
   }
 
   .#{$prefix}--list-box__wrapper--fluid:has(.#{$prefix}--dropdown)
     .#{$prefix}--list-box__menu-icon {
-    inset-inline-end: calc($spacing-04);
+    inset-inline-end: $spacing-04;
+  }
+
+  // remove slug divider when element is invalid and fluid
+  .#{$prefix}--list-box__wrapper--fluid.#{$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::before {
+    display: none;
   }
 }
diff --git a/packages/styles/scss/components/fluid-select/_fluid-select.scss b/packages/styles/scss/components/fluid-select/_fluid-select.scss
@@ -153,9 +153,11 @@
 
   .#{$prefix}--select--fluid
     .#{$prefix}--select--invalid
+    .#{$prefix}--select-input__wrapper[data-invalid]
     .#{$prefix}--select__invalid-icon,
   .#{$prefix}--select--fluid
     .#{$prefix}--select--warning
+    .#{$prefix}--select-input__wrapper
     .#{$prefix}--select__invalid-icon {
     inset-block-start: convert.to-rem(73px);
     inset-inline-end: $spacing-05;
@@ -208,4 +210,11 @@
     .#{$prefix}--select-input {
     padding-inline-end: $spacing-10;
   }
+
+  // remove slug divider when element is invalid and fluid
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--slug:has(.#{$prefix}--select__invalid-icon)
+    .#{$prefix}--slug::before {
+    display: none;
+  }
 }
diff --git a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
@@ -236,4 +236,11 @@
     ~ .#{$prefix}--slug {
     inset-inline-end: $spacing-05;
   }
+
+  // Remove ai border when invalid
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--slug
+    .#{$prefix}--text-area--invalid {
+    border-block-end-color: transparent;
+  }
 }