From 1abaf5a0bffcd42490095e0c4bf7e4fa3a3d8374 Mon Sep 17 00:00:00 2001
From: Ariella Gilmore <ariellalgilmore@gmail.com>
Date: Thu, 2 Jan 2025 12:26:40 -0800
Subject: [PATCH] fix(fluid-date-picker): decorator styles (#18290)

---
 .../react/src/components/Form/Form.stories.js     |  4 ++--
 .../fluid-date-picker/_fluid-date-picker.scss     | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/Form/Form.stories.js b/packages/react/src/components/Form/Form.stories.js
index ac7d51780a1f..b13468eb39c8 100644
--- a/packages/react/src/components/Form/Form.stories.js
+++ b/packages/react/src/components/Form/Form.stories.js
@@ -390,7 +390,7 @@ export const withAILabel = (args) => {
               labelText="Date Picker label"
               size="md"
               id="fluid-date-picker"
-              slug={aiLabel}
+              decorator={aiLabel}
               {...rest}
             />
           </FluidDatePicker>
@@ -544,7 +544,7 @@ withAILabel.argTypes = {
       type: 'boolean',
     },
     table: {
-      category: 'Slug',
+      category: 'AILabel',
     },
   },
 };
diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
index 6224b9503521..4a3532806eb4 100644
--- a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
+++ b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
@@ -399,7 +399,11 @@
     border-inline-start-color: $border-subtle;
   }
 
-  // Slug styles
+  // AI Label styles
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--decorator
+    .#{$prefix}--date-picker-input-inner-wrapper--decorator
+    > *,
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper--slug
     .#{$prefix}--ai-label,
@@ -439,6 +443,15 @@
     border-block-end-color: $ai-border-strong;
   }
 
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--decorator
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker-input__wrapper--decorator
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker-input__wrapper--decorator
+    .#{$prefix}--date-picker__input,
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper--slug
     .#{$prefix}--date-picker__input,