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; + } }