Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Adds validation styles to datepicker #2398

Merged
merged 8 commits into from
May 23, 2023
17 changes: 13 additions & 4 deletions src/components/forms/DatePicker/DatePicker.stories.tsx
Original file line number Diff line number Diff line change
@@ -13,6 +13,13 @@ export default {
argTypes: {
onSubmit: { action: 'submitted' },
disabled: { control: { type: 'boolean' } },
validationStatus: {
control: {
type: 'select',
options: [undefined, 'success', 'error'],
},
defaultValue: undefined,
}
},
parameters: {
docs: {
@@ -45,14 +52,15 @@ We may find that we want to expose props for custom event handlers or even a ref
type StorybookArguments = {
onSubmit: React.FormEventHandler<HTMLFormElement>
disabled?: boolean
validationStatus: 'success' | 'error' | undefined
}

export const completeDatePicker = (
argTypes: StorybookArguments
): React.ReactElement => (
<Form onSubmit={argTypes.onSubmit}>
<FormGroup>
<Label id="appointment-date-label" htmlFor="appointment-date">
<FormGroup error={argTypes.validationStatus === 'error'}>
<Label id="appointment-date-label" htmlFor="appointment-date" error={argTypes.validationStatus === 'error'}>
Appointment date
</Label>
<div className="usa-hint" id="appointment-date-hint">
@@ -64,10 +72,11 @@ export const completeDatePicker = (
aria-describedby="appointment-date-hint"
aria-labelledby="appointment-date-label"
disabled={argTypes.disabled}
validationStatus={argTypes.validationStatus}
/>
<Label htmlFor="otherInput">Another unrelated input</Label>
<TextInput id="otherInput" name="otherInput" type="text" />
</FormGroup>
<Label htmlFor="otherInput">Another unrelated input</Label>
<TextInput id="otherInput" name="otherInput" type="tel" />
</Form>
)

15 changes: 14 additions & 1 deletion src/components/forms/DatePicker/DatePicker.tsx
Original file line number Diff line number Diff line change
@@ -29,6 +29,7 @@ type BaseDatePickerProps = {
id: string
name: string
className?: string
validationStatus?: 'error' | 'success'
werdnanoslen marked this conversation as resolved.
Show resolved Hide resolved
disabled?: boolean
required?: boolean
defaultValue?: string
@@ -54,6 +55,7 @@ export const DatePicker = ({
id,
name,
className,
validationStatus,
defaultValue,
disabled,
required,
@@ -68,6 +70,9 @@ export const DatePicker = ({
const datePickerEl = useRef<HTMLDivElement>(null)
const externalInputEl = useRef<HTMLInputElement>(null)

const isError = validationStatus === 'error'
const isSuccess = validationStatus === 'success'

const [internalValue, setInternalValue] = useState('')
const [externalValue, setExternalValue] = useState('')
const [showCalendar, setShowCalendar] = useState(false)
@@ -241,6 +246,14 @@ export const DatePicker = ({
},
className
)
const datePickerInputClasses = classnames(
'usa-input',
'usa-date-picker__external-input',
{
'usa-input--error': isError,
'usa-input--success': isSuccess,
},
)

const toggleCalendar = i18n.toggleCalendar

@@ -272,7 +285,7 @@ export const DatePicker = ({
{...inputProps}
id={id}
data-testid="date-picker-external-input"
className="usa-input usa-date-picker__external-input"
className={datePickerInputClasses}
type="text"
disabled={disabled}
required={required}