feat(design-system): add NumberInput component and stories #2267
Conversation
karrui
force-pushed
the
form-v2/number-input-component
branch
from
62ef520 to
caaff52
Compare
karrui
force-pushed
the
form-v2/number-input-component
branch
from
caaff52 to
e8c6dc9
Compare
|
i saw that there was a lock on disabled but it's not present in the storybook - should we add it in? |
|
Design changes, moving to draft again |
# Conflicts: # frontend/src/theme/components/index.ts
|
|
||
| return ( | ||
| <Box {...htmlProps} ref={ref} __css={styles.root}> | ||
| <chakra.input |
There was a problem hiding this comment.
why are we using chakra's internal input here?
There was a problem hiding this comment.
the Input component performs more transformation of inputProps, removing some important variables such as aria-invalid, etc. Resulting in some styles not being provided. I'll add a comment
There was a problem hiding this comment.
Possible to patch upstream, i will open an issue if I have time....
| const controlProps = useFormControlProps(props) | ||
| const { | ||
| htmlProps, | ||
| getInputProps, | ||
| getIncrementButtonProps, | ||
| getDecrementButtonProps, | ||
| } = useNumberInput({ ...controlProps, clampValueOnBlur }) |
There was a problem hiding this comment.
I find it EXTREMELY frustrating that chakra doesn't have any documentation on this. how do you know to use useFormControlProps? how dyou know what args it takes, and that the return value can be passed back into useNumberInput?
There was a problem hiding this comment.
I looked at the source code for their own NumberInput implementation.
Reason for using useFormControlProps is so that this component can be wrapped with a FormControl component and be able to access their relevant props, such as whether the field is disabled, readOnly, invalid, etc.
There was a problem hiding this comment.
Possible to patch upstream, i will open an issue if I have time....
# Conflicts: # frontend/src/theme/components/index.ts
Problem
This PR adds the
NumberInputcomponent, as well as stories depicting its various states and how to use it withreact-hook-form.Closes #2004
Solution
Features:
Before & After Screenshots
In generated storybook.