feat: input component #221
Conversation
🦋 Changeset detectedLatest commit: e642045 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Thank you @jaimefps this is a great start,
I took the liberty of adding the vue implementation.
I have a few questions that you could probably answser easily.
The typescript engine seems to work for me, I did not see your issues. Mybe it's a matter of restarting the TS server, maybe it's a git clean problem.
| const usePropagateFocusProps = () => { | ||
| const [hasFocus, setHasFocus] = React.useState(false) | ||
| const enableFocusStyle = React.useCallback(() => setHasFocus(true), []) | ||
| const disableFocusStyle = React.useCallback(() => setHasFocus(false), []) | ||
| const propagateFocusProps = React.useMemo(() => { | ||
| return { | ||
| onFocus: enableFocusStyle, | ||
| onMouseEnter: enableFocusStyle, | ||
| onMouseOver: enableFocusStyle, | ||
| onBlur: disableFocusStyle, | ||
| onMouseLeave: disableFocusStyle, | ||
| onMouseOut: disableFocusStyle, | ||
| } | ||
| }, [enableFocusStyle, disableFocusStyle]) | ||
| return { | ||
| propagateFocusProps, | ||
| hasFocus, | ||
| } | ||
| } |
There was a problem hiding this comment.
Changing the style on focus is usually easier to build using tools like focus-within.
There was a problem hiding this comment.
Is there an example of it in a react component at this time, it seems you've only done it in vue atm?
There was a problem hiding this comment.
it is actually pure css... I'll modify this with an example.
| const Contrast = ({ children }) => ( | ||
| <div className="bg-white p-[2px] rounded">{children}</div> | ||
| ) |
There was a problem hiding this comment.
Since we had to create this blob, my guts tell me that "by default" inputs should have a background. That's an opinion though.
Why did you decide to not add it?
There was a problem hiding this comment.
The disabled state doesn't contrast well with the default color of the container in the first generated sample, but I'll remove since we don't need it anymore. Moreover, from the figma designs, it seems that the only think distinguishing dark/light mode inputs is the background, so I'll add that based on the same pattern you did for the dark-mode in the tabs component.
Creates Text Input component as shown in Figma.