From 75bec56be96497785d7997d9f61b43533e09f9a8 Mon Sep 17 00:00:00 2001 From: Dwayne Williams <44102414+DwayneGit@users.noreply.github.com> Date: Sun, 3 Mar 2024 13:40:10 -0600 Subject: [PATCH 1/6] Update DatePickerInputWithoutModal.tsx remove extra hideValidation constraint and root styling that caused container to fill space. --- src/Date/DatePickerInputWithoutModal.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Date/DatePickerInputWithoutModal.tsx b/src/Date/DatePickerInputWithoutModal.tsx index d86d6ef8..c19ba529 100644 --- a/src/Date/DatePickerInputWithoutModal.tsx +++ b/src/Date/DatePickerInputWithoutModal.tsx @@ -100,7 +100,7 @@ function DatePickerInputWithoutModal( inputButton={inputButton} /> - {error && !hideValidationErrors ? ( + {!hideValidationErrors ? ( {error} @@ -140,8 +140,6 @@ function getLabel({ const styles = StyleSheet.create({ root: { - flex: 1, - flexGrow: 1, justifyContent: 'center', alignItems: 'flex-start', width: '100%', From 0de78b880139d977a13aefd931e66407d1d64c92 Mon Sep 17 00:00:00 2001 From: Dwayne Williams <44102414+DwayneGit@users.noreply.github.com> Date: Sun, 3 Mar 2024 14:12:55 -0600 Subject: [PATCH 2/6] Update DatePickerInputWithoutModal.tsx add an option to hide HelperText completely unless there is an error --- src/Date/DatePickerInputWithoutModal.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/Date/DatePickerInputWithoutModal.tsx b/src/Date/DatePickerInputWithoutModal.tsx index c19ba529..94e0bfa0 100644 --- a/src/Date/DatePickerInputWithoutModal.tsx +++ b/src/Date/DatePickerInputWithoutModal.tsx @@ -18,6 +18,7 @@ function DatePickerInputWithoutModal( withDateFormatInLabel = true, hasError, hideValidationErrors, + showHelperTextOnError, onValidationError, modal, inputButton, @@ -100,11 +101,13 @@ function DatePickerInputWithoutModal( inputButton={inputButton} /> - {!hideValidationErrors ? ( - - {error} - - ) : null} + {(!!!showHelperTextOnError || !!hasError) ? ( + !hideValidationErrors ? ( + + {error} + + ) : null + ): null} {modal?.({ value, From d6f3f3c1a2d3ed9083ad1383106f8b0872643bf9 Mon Sep 17 00:00:00 2001 From: Dwayne Williams <44102414+DwayneGit@users.noreply.github.com> Date: Sun, 3 Mar 2024 14:13:50 -0600 Subject: [PATCH 3/6] Update DatePickerInput.shared.tsx add showHelperTextOnError to props --- src/Date/DatePickerInput.shared.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Date/DatePickerInput.shared.tsx b/src/Date/DatePickerInput.shared.tsx index 44b71df0..46c65c1b 100644 --- a/src/Date/DatePickerInput.shared.tsx +++ b/src/Date/DatePickerInput.shared.tsx @@ -11,6 +11,7 @@ export type DatePickerInputProps = { withModal?: boolean withDateFormatInLabel?: boolean hideValidationErrors?: boolean + showHelperTextOnError?: boolean hasError?: boolean onValidationError?: ((error: string | null) => void) | undefined calendarIcon?: string From 2685c93e82b4303ff1179d997e09200f3683256d Mon Sep 17 00:00:00 2001 From: Dwayne Williams <44102414+DwayneGit@users.noreply.github.com> Date: Sun, 3 Mar 2024 14:24:32 -0600 Subject: [PATCH 4/6] Update input-date-picker.md update docs with new flag and missing withModal option --- docusaurus/docs/date-picker/input-date-picker.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/docusaurus/docs/date-picker/input-date-picker.md b/docusaurus/docs/date-picker/input-date-picker.md index 74a1eadd..f7ef143a 100644 --- a/docusaurus/docs/date-picker/input-date-picker.md +++ b/docusaurus/docs/date-picker/input-date-picker.md @@ -91,13 +91,21 @@ Limits which dates the user can navigate to and where events can go. Dates outsi `Type: boolean | undefined` Flag indicating if the date format should be inside the components label. +**withModal** +`Type: boolean | undefined` +Flag indicating if the `datepicker` component is available from the input. + **hasError** `Type: boolean | undefined` -Flag indicating if the the component should display error styles. +Flag indicating if the component should display error styles. **hideValidationErrors** `Type: boolean | undefined` -Flag indicating if the the component should hide error styles along with the `helperText` component displaying the error message. +Flag indicating if the component should hide error styles along with the `helperText` component displaying the error message. + +**showHelperTextOnError** +`Type: boolean | undefined` +Flag indicating if the `helperText` component should be hidden if there is an error or always (hide empty line caused by empty`helperText` component). **onValidationError** `Type: Function | undefined` @@ -128,7 +136,7 @@ Flag indicating if the component should be enabled or not. Behavior similarly to Flag indicating if the status bar padding should be enabled or not. Defaults to `false`. **presentationStyle** -`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'` +`Type: ''pageSheet' | 'overFullScreen'` Determines the visual presentation style of the date picker modal. This prop allows you to define how the modal appears on the screen when it is displayed. - `'fullScreen'`: Presents the modal as a full-screen overlay. From 22fe96cc4b34c3a88bd3b8fb7036a65e97fbb14d Mon Sep 17 00:00:00 2001 From: Dwayne Williams <44102414+DwayneGit@users.noreply.github.com> Date: Sun, 3 Mar 2024 15:20:46 -0600 Subject: [PATCH 5/6] Update input-date-picker.md rm extra space --- docusaurus/docs/date-picker/input-date-picker.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docusaurus/docs/date-picker/input-date-picker.md b/docusaurus/docs/date-picker/input-date-picker.md index f7ef143a..baa949a6 100644 --- a/docusaurus/docs/date-picker/input-date-picker.md +++ b/docusaurus/docs/date-picker/input-date-picker.md @@ -97,11 +97,11 @@ Flag indicating if the `datepicker` component is available from the input. **hasError** `Type: boolean | undefined` -Flag indicating if the component should display error styles. +Flag indicating if the component should display error styles. **hideValidationErrors** `Type: boolean | undefined` -Flag indicating if the component should hide error styles along with the `helperText` component displaying the error message. +Flag indicating if the component should hide error styles along with the `helperText` component displaying the error message. **showHelperTextOnError** `Type: boolean | undefined` From 476d948b6d1d071a64517c0eaf0d3db4d0647772 Mon Sep 17 00:00:00 2001 From: Dwayne Williams <44102414+DwayneGit@users.noreply.github.com> Date: Tue, 5 Mar 2024 10:21:08 -0600 Subject: [PATCH 6/6] Update DatePickerInputWithoutModal.tsx fix prettier complaint --- src/Date/DatePickerInputWithoutModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Date/DatePickerInputWithoutModal.tsx b/src/Date/DatePickerInputWithoutModal.tsx index 94e0bfa0..bada81db 100644 --- a/src/Date/DatePickerInputWithoutModal.tsx +++ b/src/Date/DatePickerInputWithoutModal.tsx @@ -101,7 +101,7 @@ function DatePickerInputWithoutModal( inputButton={inputButton} /> - {(!!!showHelperTextOnError || !!hasError) ? ( + {!!!showHelperTextOnError || !!hasError ? ( !hideValidationErrors ? ( {error}