Merge branch 'main' into stepper-input

packages/lab/src/__tests__/__e2e__/date-picker/DatePicker.cy.tsx

@@ -1,5 +1,4 @@
 import { composeStories } from "@storybook/react";
-import { ChangeEvent } from "react";
 import * as datePickerStories from "@stories/date-picker/date-picker.stories";
 import { checkAccessibility } from "../../../../../../cypress/tests/checkAccessibility";
 import {
@@ -82,6 +81,11 @@ describe("GIVEN a DatePicker", () => {
       cy.mount(<Default defaultStartDate={testDate} disabled />);
       cy.findByRole("button").should("be.disabled");
     });
+    it("THEN render read only when prop is passed", () => {
+      cy.mount(<Default defaultStartDate={testDate} readOnly />);
+      cy.findByRole("textbox").should("have.attr", "readonly");
+      cy.findByRole("button").should("be.disabled");
+    });
     it("THEN it should update the selected month when changing selected date", () => {
       cy.mount(<Default defaultStartDate={testDate} />);
       cy.findByRole("textbox").click().clear().type(testInput);
@@ -95,7 +99,6 @@ describe("GIVEN a DatePicker", () => {
       cy.mount(
         <Default
           defaultStartDate={testDate}
-          // @ts-ignore
           CalendarProps={{ visibleMonth: testDate }}
         />
       );

packages/lab/src/date-input/DateInput.css

@@ -105,7 +105,6 @@
   padding: 0;
   text-align: left;
   width: min-content;
-  flex-grow: 1;
 }
 
 /* Reset in the  class */

packages/lab/src/date-picker/DatePicker.tsx

@@ -15,10 +15,7 @@ import { flip, useDismiss, useInteractions } from "@floating-ui/react";
 import { DateInput } from "../date-input";
 import { DateValue, getLocalTimeZone, today } from "@internationalized/date";
 import { CalendarIcon } from "@salt-ds/icons";
-import {
-  UseRangeSelectionCalendarProps,
-  UseSingleSelectionCalendarProps,
-} from "../calendar";
+import { CalendarProps } from "../calendar";
 
 const withBaseName = makePrefixer("saltDatePicker");
 
@@ -55,9 +52,15 @@ export interface DatePickerProps
   /**
    * Props to be passed to the Calendar component.
    */
-  CalendarProps?:
-    | UseRangeSelectionCalendarProps
-    | UseSingleSelectionCalendarProps;
+  CalendarProps?: Partial<
+    Omit<
+      CalendarProps,
+      | "selectionVariant"
+      | "selectedDate"
+      | "defaultSelectedDate"
+      | "onSelectedDateChange"
+    >
+  >;
   /**
    * Function to format the input value.
    */
@@ -70,6 +73,14 @@ export interface DatePickerProps
    * Display or hide the component.
    */
   open?: boolean;
+  /**
+   * Helper text to display in the panel
+   */
+  helperText?: string;
+  /**
+   * If `true`, the component is read only.
+   */
+  readOnly?: boolean;
 }
 
 export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
@@ -87,6 +98,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       className,
       open: openProp,
       onOpenChange: onOpenChangeProp,
+      helperText,
+      readOnly: readOnlyProp,
       ...rest
     },
     ref
@@ -142,6 +155,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     ]);
     const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =
       useFormFieldProps();
+    const isReadOnly = readOnlyProp || formFieldReadOnly;
 
     const getPanelPosition = () => ({
       top: y ?? 0,
@@ -200,11 +214,12 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           endInputRef={endInputRef}
           placeholder={placeholder}
           dateFormatter={dateFormatter}
+          readOnly={isReadOnly}
           endAdornment={
             <Button
               variant="secondary"
               onClick={handleCalendarButton}
-              disabled={disabled || formFieldReadOnly || formFieldDisabled}
+              disabled={disabled || isReadOnly || formFieldDisabled}
               aria-label="Open Calendar"
             >
               <CalendarIcon aria-hidden />
@@ -217,6 +232,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           {...getFloatingProps()}
           onSelect={handleSelect}
           CalendarProps={CalendarProps}
+          helperText={helperText}
         />
       </DatePickerContext.Provider>
     );

packages/lab/src/date-picker/DatePickerPanel.css

@@ -9,3 +9,11 @@
   box-sizing: border-box;
   display: flex;
 }
+.saltDatePickerPanel-container {
+  width: min-content;
+  gap: 1px;
+}
+
+.saltDatePickerPanel-header {
+  padding: var(--salt-spacing-100);
+}

packages/lab/src/date-picker/DatePickerPanel.tsx

@@ -5,7 +5,9 @@ import {
   useState,
 } from "react";
 import {
+  FlexItem,
   FlexLayout,
+  FormFieldHelperText,
   makePrefixer,
   StackLayout,
   useFloatingComponent,
@@ -26,6 +28,7 @@ import { DateValue, endOfMonth, startOfMonth } from "@internationalized/date";
 
 export interface DatePickerPanelProps extends ComponentPropsWithoutRef<"div"> {
   onSelect?: () => void;
+  helperText?: string;
   CalendarProps?: Partial<
     Omit<
       CalendarProps,
@@ -41,7 +44,7 @@ const withBaseName = makePrefixer("saltDatePickerPanel");
 
 export const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>(
   function DatePickerPanel(props, ref) {
-    const { className, onSelect, CalendarProps, ...rest } = props;
+    const { className, onSelect, helperText, CalendarProps, ...rest } = props;
 
     const targetWindow = useWindow();
     useComponentCssInjection({
@@ -141,7 +144,12 @@ export const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>(
         {...a11yProps}
         {...rest}
       >
-        <StackLayout separators gap={0}>
+        <StackLayout separators gap={0} className={withBaseName("container")}>
+          {helperText && (
+            <FlexItem className={withBaseName("header")}>
+              <FormFieldHelperText>{helperText}</FormFieldHelperText>
+            </FlexItem>
+          )}
           <FlexLayout>
             <Calendar
               visibleMonth={startVisibleMonth}

packages/lab/stories/date-picker/date-picker.stories.tsx

@@ -1,5 +1,10 @@
 import { DatePicker, DatePickerProps } from "@salt-ds/lab";
 import { Meta, StoryFn } from "@storybook/react";
+import {
+  FormField,
+  FormFieldHelperText as FormHelperText,
+  FormFieldLabel as FormLabel,
+} from "@salt-ds/core";
 
 export default {
   title: "Lab/Date Picker",
@@ -17,3 +22,14 @@ export const Range = DatePickerTemplate.bind({});
 Range.args = {
   selectionVariant: "range",
 };
+
+export const WithFormField: StoryFn<DatePickerProps> = (args) => {
+  const helperText = "Date format DD MMM YYYY (e.g. 09 Jun 2021)";
+  return (
+    <FormField style={{ width: "200px" }}>
+      <FormLabel>Pick a date</FormLabel>
+      <DatePicker {...args} helperText={helperText} />
+      <FormHelperText>{helperText}</FormHelperText>
+    </FormField>
+  );
+};

site/docs/components/date-picker/accessibility.mdx

@@ -62,7 +62,7 @@ data:
   </KeyboardControl>
   <KeyboardControl keyOrCombos="Shift + Left Arrow / Shift + Right Arrow">
 
-    Drags selection over text characters, one at a time.
+    When the input area has focus, drags selection over text characters, one at a time.
 
   </KeyboardControl>
   <KeyboardControl keyOrCombos="Backspace">

site/docs/components/date-picker/examples.mdx

@@ -9,7 +9,7 @@ data:
 ---
 
 <LivePreviewControls>
-<LivePreview componentName="date-picker" exampleName="Default">
+<LivePreview componentName="date-picker" exampleName="SingleSelect">
 
 ## Single select
 
@@ -21,12 +21,16 @@ The default date picker allows the user to pick a single date, which is committe
 ## With form field
 
 This date picker has a form field label and is configured with validation logic. If an invalid date is entered, the error is detected and a tooltip advises the user of the correct format.
+The default date picker format is "DD MMM YYYY"
 
 </LivePreview>
 <LivePreview componentName="date-picker" exampleName="Range">
 ## Date range
 
 The Date Range Picker enables selection of start and end dates, using the input fields or two calendars displayed. The range is only committed when the user clicks ‘Apply’, and can be reset if the user wants to start again.
 
+</LivePreview>
+<LivePreview componentName="date-picker" exampleName="WithDisabledDates">
+## With disabled dates
 </LivePreview>
 </LivePreviewControls>

site/docs/components/date-picker/usage.mdx

@@ -16,7 +16,7 @@ Use a Date Picker when enabling users to filter data that’s displayed on scree
 
 ### Best practices
 
-To improve consistency and simplify your messaging, consider recommending just one acceptable date format in the label and/or tooltip – ideally, the one most frequently used in your application.
+To improve consistency and simplify your messaging, consider recommending just one acceptable date format in the form field label and helper text – ideally, the one most frequently used in your application.
 
 ## Import
 

site/src/examples/date-picker/Default.tsx → site/src/examples/date-picker/SingleSelect.tsx

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import { DatePicker } from "@salt-ds/lab";
 
-export const Default = (): ReactElement => (
+export const SingleSelect = (): ReactElement => (
   <DatePicker style={{ width: "200px" }} />
 );

site/src/examples/date-picker/WithDisabledDates.tsx

@@ -0,0 +1,13 @@
+import { ReactElement } from "react";
+import { DatePicker } from "@salt-ds/lab";
+import { DateValue, getDayOfWeek } from "@internationalized/date";
+
+const currentLocale = navigator.languages[0];
+const isDayDisabled = (date: DateValue) =>
+  getDayOfWeek(date, currentLocale) >= 5;
+export const WithDisabledDates = (): ReactElement => (
+  <DatePicker
+    style={{ width: "200px" }}
+    CalendarProps={{ isDayDisabled: isDayDisabled }}
+  />
+);

site/src/examples/date-picker/WithFormField.tsx

@@ -5,11 +5,12 @@ import {
   FormFieldHelperText as FormHelperText,
   FormFieldLabel as FormLabel,
 } from "@salt-ds/core";
+const helperText = "Date format DD MMM YYYY (e.g. 09 Jun 2021)";
 
 export const WithFormField = (): ReactElement => (
   <FormField style={{ width: "200px" }}>
     <FormLabel>Pick a date</FormLabel>
-    <DatePicker />
-    <FormHelperText>Date format DD MMM YYYY (e.g. 09 Jun 2021)</FormHelperText>
+    <DatePicker helperText={helperText} />
+    <FormHelperText>{helperText}</FormHelperText>
   </FormField>
 );

site/src/examples/date-picker/index.ts

@@ -1,3 +1,4 @@
-export * from "./Default";
+export * from "./SingleSelect";
 export * from "./WithFormField";
 export * from "./Range";
+export * from "./WithDisabledDates";