fix: adjust date-picker disabled prop (#2049)

vtex · Jan 6, 2025 · 78cd16e · 78cd16e
2 parents 287b560 + 6bb77c8
commit 78cd16e
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 2 deletions.
diff --git a/packages/shoreline/src/components/date-picker/date-picker.tsx b/packages/shoreline/src/components/date-picker/date-picker.tsx
@@ -67,6 +67,7 @@ export function DatePicker<T extends DateValue>(props: DatePickerProps<T>) {
                 label={buttonProps['aria-label']}
                 aria-describedby={buttonProps['aria-describedby']}
                 variant="tertiary"
+                disabled={buttonProps.isDisabled}
               >
                 <IconCalendarBlank />
               </IconButton>

diff --git a/packages/shoreline/src/components/date-picker/stories/examples.stories.tsx b/packages/shoreline/src/components/date-picker/stories/examples.stories.tsx
@@ -65,3 +65,13 @@ export function AsField() {
     </Field>
   )
 }
+
+export function Disabled() {
+  return (
+    <Field>
+      <Label>Date</Label>
+      <DatePicker value={today(getLocalTimeZone())} isDisabled />
+      <FieldDescription>The event starting date</FieldDescription>
+    </Field>
+  )
+}
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-picker.css b/packages/shoreline/src/themes/sunrise/components/date-picker.css
@@ -40,10 +40,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 {

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 {