From 83082cad813ee6635e45a98a66836d1105a1296b Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 16 Apr 2024 10:58:26 -0700
Subject: [PATCH] fix(FluidListbox): fix issues with ai-enabled fluid listbox
 components (#16170)

---
 .../fluid-list-box/_fluid-list-box.scss         | 17 ++++++++++++++---
 .../components/fluid-select/_fluid-select.scss  |  9 +++++++++
 .../fluid-text-area/_fluid-text-area.scss       |  7 +++++++
 3 files changed, 30 insertions(+), 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
index 6e73fe1f550e..54640cecec79 100644
--- 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
index 687c096bced1..4955ef43d396 100644
--- 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
index 3f3d13295aaf..2f324ff2bd99 100644
--- 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;
+  }
 }