-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Number input first pass * Add number field * Update libs/ui/lib/number-input/NumberInput.stories.tsx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update libs/ui/lib/number-input/NumberInput.tsx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Bot commit: format with prettier * fix defaultValue and onChange (mostly), only use number input on number fields * actually fix the type error by getting rid of the spread * props cleanup * update e2es * fix date picker state type error, use isInvalid (validationState deprecated) --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: David Crespo <[email protected]>
- Loading branch information
3 people
authored
Oct 5, 2023
1 parent
0cc1e03
commit 1ccff37
Showing
12 changed files
with
3,339 additions
and
1,818 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| /* | ||
| * This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, you can obtain one at https://mozilla.org/MPL/2.0/. | ||
| * | ||
| * Copyright Oxide Computer Company | ||
| */ | ||
| import cn from 'classnames' | ||
| import { useId } from 'react' | ||
| import type { FieldPathByValue, FieldValues } from 'react-hook-form' | ||
| import { Controller } from 'react-hook-form' | ||
|
|
||
| import { FieldLabel, TextInputHint, NumberInput as UINumberField } from '@oxide/ui' | ||
| import { capitalize } from '@oxide/util' | ||
|
|
||
| import { ErrorMessage } from './ErrorMessage' | ||
| import type { TextFieldProps } from './TextField' | ||
|
|
||
| export function NumberField< | ||
| TFieldValues extends FieldValues, | ||
| // can only be used on fields with number values | ||
| TName extends FieldPathByValue<TFieldValues, number> | ||
| >({ | ||
| name, | ||
| label = capitalize(name), | ||
| units, | ||
| description, | ||
| helpText, | ||
| required, | ||
| ...props | ||
| }: Omit<TextFieldProps<TFieldValues, TName>, 'id'>) { | ||
| // id is omitted from props because we generate it here | ||
| const id = useId() | ||
| return ( | ||
| <div className="max-w-lg"> | ||
| <div className="mb-2"> | ||
| <FieldLabel id={`${id}-label`} tip={description} optional={!required}> | ||
| {label} {units && <span className="ml-1 text-secondary">({units})</span>} | ||
| </FieldLabel> | ||
| {helpText && ( | ||
| <TextInputHint id={`${id}-help-text`} className="mb-2"> | ||
| {helpText} | ||
| </TextInputHint> | ||
| )} | ||
| </div> | ||
| {/* passing the generated id is very important for a11y */} | ||
| <NumberFieldInner name={name} {...props} id={id} /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| /** | ||
| * Primarily exists for `NumberField`, but we occasionally also need a plain field | ||
| * without a label on it. | ||
| * | ||
| * Note that `id` is an allowed prop, unlike in `TextField`, where it is always | ||
| * generated from `name`. This is because we need to pass the generated ID in | ||
| * from there to here. For the case where `TextFieldInner` is used | ||
| * independently, we also generate an ID for use only if none is passed in. | ||
| */ | ||
| export const NumberFieldInner = < | ||
| TFieldValues extends FieldValues, | ||
| TName extends FieldPathByValue<TFieldValues, number> | ||
| >({ | ||
| name, | ||
| label = capitalize(name), | ||
| validate, | ||
| control, | ||
| description, | ||
| required, | ||
| id: idProp, | ||
| }: TextFieldProps<TFieldValues, TName>) => { | ||
| const generatedId = useId() | ||
| const id = idProp || generatedId | ||
|
|
||
| return ( | ||
| <Controller | ||
| name={name} | ||
| control={control} | ||
| rules={{ required, validate }} | ||
| render={({ field: { value, ...fieldRest }, fieldState: { error } }) => { | ||
| return ( | ||
| <> | ||
| <UINumberField | ||
| id={id} | ||
| error={!!error} | ||
| aria-labelledby={cn(`${id}-label`, { | ||
| [`${id}-help-text`]: !!description, | ||
| })} | ||
| aria-describedby={description ? `${id}-label-tip` : undefined} | ||
| defaultValue={value} | ||
| {...fieldRest} | ||
| /> | ||
| <ErrorMessage error={error} label={label} /> | ||
| </> | ||
| ) | ||
| }} | ||
| /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| /* | ||
| * This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, you can obtain one at https://mozilla.org/MPL/2.0/. | ||
| * | ||
| * Copyright Oxide Computer Company | ||
| */ | ||
| import { NumberInput } from './NumberInput' | ||
|
|
||
| export const Default = () => ( | ||
| <div className="max-w-lg"> | ||
| <NumberInput defaultValue={6} /> | ||
| </div> | ||
| ) | ||
|
|
||
| export const WithUnit = () => ( | ||
| <div className="max-w-lg"> | ||
| <NumberInput | ||
| defaultValue={6} | ||
| formatOptions={{ | ||
| style: 'unit', | ||
| unit: 'inch', | ||
| unitDisplay: 'long', | ||
| }} | ||
| /> | ||
| </div> | ||
| ) | ||
|
|
||
| export const StepValues = () => ( | ||
| <div className="max-w-lg space-y-4 text-sans-md children:space-y-2"> | ||
| <div> | ||
| <div>Step</div> | ||
| <NumberInput step={10} /> | ||
| </div> | ||
| <div> | ||
| <div>Step + minValue</div> | ||
| <NumberInput minValue={2} step={2} /> | ||
| </div> | ||
| <div> | ||
| <div>Step + minValue + maxValue</div> | ||
| <NumberInput minValue={2} maxValue={20} step={2} /> | ||
| </div> | ||
| </div> | ||
| ) |
Oops, something went wrong.