fix(fluid-date-picker): decorator styles (#18290)

Author: ariellalgilmore

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',
     },
   },
 };

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,