fix(data-range-picker): update style when field is disabled

Updates the styles to pick up correctly when the field is disabled and also leaves the calendar button disabled fix #2048
vtex · Jan 3, 2025 · 6bb77c8 · 6bb77c8
1 parent c687c6c
commit 6bb77c8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/packages/shoreline/src/components/date-range-picker/date-range-picker.tsx b/packages/shoreline/src/components/date-range-picker/date-range-picker.tsx
@@ -71,6 +71,7 @@ export function DateRangePicker<T extends DateValue>(
                 aria-describedby={buttonProps['aria-describedby']}
                 variant="tertiary"
                 data-sl-date-range-picker-icon-button
+                disabled={buttonProps.isDisabled}
               >
                 <IconCalendarBlank />
               </IconButton>

diff --git a/packages/shoreline/src/components/date-range-picker/stories/examples.stories.tsx b/packages/shoreline/src/components/date-range-picker/stories/examples.stories.tsx
@@ -47,3 +47,18 @@ export function Locale() {
     </LocaleProvider>
   )
 }
+
+export function Disabled() {
+  const now = today(getLocalTimeZone())
+
+  return (
+    <Field>
+      <Label>Date</Label>
+      <DateRangePicker
+        value={{ start: now, end: now.add({ days: 2 }) }}
+        isDisabled
+      />
+      <FieldDescription>The event starting date</FieldDescription>
+    </Field>
+  )
+}
diff --git a/packages/shoreline/src/themes/sunrise/components/date-range-picker.css b/packages/shoreline/src/themes/sunrise/components/date-range-picker.css
@@ -46,10 +46,15 @@
     }
   }
 
-  &[data-disabled="true"] {
+  &[aria-disabled="true"] {
     border: var(--sl-border-base-disabled);
     color: var(--sl-fg-base-disabled);
     background-color: var(--sl-bg-base-disabled);
+
+    &:focus-within {
+      box-shadow: none;
+      border: var(--sl-border-base-disabled);
+    }
   }
 
   &:focus {