diff --git a/docusaurus/docs/date-picker/input-date-picker.md b/docusaurus/docs/date-picker/input-date-picker.md index 74a1eadd..baa949a6 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. 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 diff --git a/src/Date/DatePickerInputWithoutModal.tsx b/src/Date/DatePickerInputWithoutModal.tsx index d86d6ef8..bada81db 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} /> - {error && !hideValidationErrors ? ( - - {error} - - ) : null} + {!!!showHelperTextOnError || !!hasError ? ( + !hideValidationErrors ? ( + + {error} + + ) : null + ): null} {modal?.({ value, @@ -140,8 +143,6 @@ function getLabel({ const styles = StyleSheet.create({ root: { - flex: 1, - flexGrow: 1, justifyContent: 'center', alignItems: 'flex-start', width: '100%',