This repository has been archived by the owner on Jan 23, 2025. It is now read-only.
ui-components: Input #52
Merged
Conversation
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
f5f2785 to
1d41131
Compare
8fb592a to
299f2a3
Compare
Base implementation of Input component - Added Storybook as a playground to validate styles. - Supports only `text` type yet. - Added tests to validate default state and user interaction with component
- TextInput component - NumberInput component - BaseInput - can be used to compose own type of Input component.
It has to be possible to prefix Icon component at the beginning of Input element. Current changes introduce some code refactoring where Input element is always wrapped with outer container. And `prefix` prop is added to consume Icon component with correct positioning and coloring. Helpers module is supposed to contain small components like InputWrapper.
Firefox handled differently <input/> width so spinner group was moved out of container's borders. Applying 'overflow': auto attribute fixes this problem @firefox-only mixin allows to apply styles for Firefox browser only.
- InputProps are extended with HTMLInputElementAttributes to allow provide all allowed props down to <input> element and do not limit usage of component. - `prefix` prop is renamed to avoid naming conflicts with native `prefix` prop.
| const { prefixIcon, disabled, invalid } = props; | ||
| return ( | ||
| <InputWrapper disabled={disabled} invalid={invalid}> | ||
| <InputPrefix>{prefixIcon}</InputPrefix> |
There was a problem hiding this comment.
I don't want to hold up this PR any longer, but wanted to leave a note to come back to. Should we conditionally render this prefixIcon only if an icon is provided? Will React be smart enough to not render empty DOM elements?
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
ui-components // Input
Resolves: #23
Base implementation of
InputcomponentAdded Storybook as a playground to validate styles.
Supports only
texttype yet.<TextInput /><NumberInput /><BaseInput />Checklist