From c18d0e6d8442f8ea41d19dd4e30efd4b2ce3c108 Mon Sep 17 00:00:00 2001 From: bryancunningham-okta Date: Fri, 2 Aug 2024 13:21:02 -0400 Subject: [PATCH 1/3] refactor(odyssey-react-mui): add isOptionalProp --- packages/odyssey-react-mui/src/labs/DatePicker.tsx | 5 ++++- .../odyssey-labs/DatePicker/DatePicker.stories.tsx | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/odyssey-react-mui/src/labs/DatePicker.tsx b/packages/odyssey-react-mui/src/labs/DatePicker.tsx index 157b6ae42b..49a421e296 100644 --- a/packages/odyssey-react-mui/src/labs/DatePicker.tsx +++ b/packages/odyssey-react-mui/src/labs/DatePicker.tsx @@ -154,7 +154,7 @@ export type DatePickerProps = { } & OdysseyDateFieldProps & Pick< FieldComponentProps, - "errorMessage" | "hint" | "isDisabled" | "isReadOnly" + "errorMessage" | "hint" | "isDisabled" | "isReadOnly" | "isOptional" >; const DatePicker = ({ @@ -163,6 +163,7 @@ const DatePicker = ({ hint, isDateEnabled = () => true, isDisabled, + isOptional, isReadOnly, isMonthEnabled = () => true, isYearEnabled = () => true, @@ -268,6 +269,7 @@ const DatePicker = ({ hint={hint} inputRef={inputRef} isDisabled={isDisabled} + isOptional={isOptional} isReadOnly={isReadOnly} label={label} onBlur={onBlur} @@ -284,6 +286,7 @@ const DatePicker = ({ hint, internalTimeZone, isDisabled, + isOptional, isReadOnly, label, onBlur, diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx index 86528bd9cb..e2b981cdbe 100644 --- a/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx @@ -52,6 +52,7 @@ const storybookMeta: Meta = { }, }, isDisabled: fieldComponentPropsMetaData.isDisabled, + isOptional: fieldComponentPropsMetaData.isOptional, isReadOnly: fieldComponentPropsMetaData.isReadOnly, minDate: { description: "the minimum selectable date enabled in the calendar", From a746868242f07f98506cb1f0c8ef1e909a3d7cad Mon Sep 17 00:00:00 2001 From: bryancunningham-okta Date: Fri, 2 Aug 2024 13:21:45 -0400 Subject: [PATCH 2/3] refactor(odyssey-react-mui): use two words for time zone label --- .../components/odyssey-labs/DatePicker/DatePicker.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx index e2b981cdbe..b645766783 100644 --- a/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx @@ -161,7 +161,7 @@ export const MaxDateWithError: StoryObj = { export const WithTimeZonePicker: StoryObj = { args: { - timeZonePickerLabel: "Timezone picker label", + timeZonePickerLabel: "Time zone picker label", timeZoneOptions: [ { label: "New York", value: "America/New_York" }, { label: "Johannesburg", value: "Africa/Johannesburg" }, @@ -172,7 +172,7 @@ export const WithTimeZonePicker: StoryObj = { export const Controlled: StoryObj = { args: { - timeZonePickerLabel: "Timezone picker label", + timeZonePickerLabel: "Time zone picker label", timeZone: "America/New_York", timeZoneOptions: [ { label: "LA", value: "America/Los_Angeles" }, From 3f5b556187ee1e58030b4ad57ec5f4abb51aa937 Mon Sep 17 00:00:00 2001 From: bryancunningham-okta Date: Fri, 2 Aug 2024 15:08:25 -0400 Subject: [PATCH 3/3] refactor(odyssey-react-mui): adding missing props to Storybook --- .../odyssey-react-mui/src/labs/DateField.tsx | 3 ++ .../odyssey-react-mui/src/labs/DatePicker.tsx | 10 ++++- .../DatePicker/DatePicker.stories.tsx | 37 ++++++++++++++----- 3 files changed, 40 insertions(+), 10 deletions(-) diff --git a/packages/odyssey-react-mui/src/labs/DateField.tsx b/packages/odyssey-react-mui/src/labs/DateField.tsx index 9e1966b78b..a9450664b4 100644 --- a/packages/odyssey-react-mui/src/labs/DateField.tsx +++ b/packages/odyssey-react-mui/src/labs/DateField.tsx @@ -43,6 +43,7 @@ export type DateFieldProps = { | "errorMessage" | "hasInitialFocus" | "hint" + | "HintLinkComponent" | "id" | "isDisabled" | "isOptional" @@ -71,6 +72,7 @@ const DateField = ({ errorMessage, hasInitialFocus, hint, + HintLinkComponent, id: idOverride, inputRef, isDisabled = false, @@ -253,6 +255,7 @@ const DateField = ({ fieldType="single" hasVisibleLabel hint={hint} + HintLinkComponent={HintLinkComponent} id={idOverride} isDisabled={isDisabled} isOptional={isOptional} diff --git a/packages/odyssey-react-mui/src/labs/DatePicker.tsx b/packages/odyssey-react-mui/src/labs/DatePicker.tsx index 49a421e296..f3a537dfd5 100644 --- a/packages/odyssey-react-mui/src/labs/DatePicker.tsx +++ b/packages/odyssey-react-mui/src/labs/DatePicker.tsx @@ -154,13 +154,19 @@ export type DatePickerProps = { } & OdysseyDateFieldProps & Pick< FieldComponentProps, - "errorMessage" | "hint" | "isDisabled" | "isReadOnly" | "isOptional" + | "errorMessage" + | "hint" + | "HintLinkComponent" + | "isDisabled" + | "isReadOnly" + | "isOptional" >; const DatePicker = ({ defaultValue: defaultValueProp, errorMessage, hint, + HintLinkComponent, isDateEnabled = () => true, isDisabled, isOptional, @@ -267,6 +273,7 @@ const DatePicker = ({ } errorMessage={errorMessage} hint={hint} + HintLinkComponent={HintLinkComponent} inputRef={inputRef} isDisabled={isDisabled} isOptional={isOptional} @@ -284,6 +291,7 @@ const DatePicker = ({ [ errorMessage, hint, + HintLinkComponent, internalTimeZone, isDisabled, isOptional, diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx index b645766783..91f2b57dc2 100644 --- a/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx @@ -42,15 +42,8 @@ const storybookMeta: Meta = { }, }, errorMessage: fieldComponentPropsMetaData.errorMessage, - hint: { - control: "text", - description: "The hint text for the autocomplete input", - table: { - type: { - summary: "string", - }, - }, - }, + hint: fieldComponentPropsMetaData.hint, + HintLinkComponent: fieldComponentPropsMetaData.HintLinkComponent, isDisabled: fieldComponentPropsMetaData.isDisabled, isOptional: fieldComponentPropsMetaData.isOptional, isReadOnly: fieldComponentPropsMetaData.isReadOnly, @@ -70,6 +63,32 @@ const storybookMeta: Meta = { }, }, }, + timeZone: { + description: "an IANA time zone applied to the DatePicker", + table: { + type: { + summary: "string", + }, + }, + }, + timeZonePickerLabel: { + description: + "label applied to the `TimeZonePicker` field if `TimeZonePicker` field is rendered", + table: { + type: { + summary: "string", + }, + }, + }, + timeZoneOptions: { + control: "none", + description: "an array of options for the TimeZonePicker", + table: { + type: { + summary: "[{label: string, value: string(valid IANA time zone)}]", + }, + }, + }, }, args: { label: "Date picker label",