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

carbon-design-system · Jan 2, 2025 · 1abaf5a · 1abaf5a
1 parent 96b5a47
commit 1abaf5a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git 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
@@ -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,