Feature 7 - Input Component [Dev]#78
Conversation
…omponent requirements
…ute, getting dates inside form tag
|
You remember add the info to Side Bar as: Reviewers, assigners, Labels, Projects, Milestone and Issue. too, add screenshot of the component in the PR. |
| } | ||
| }, | ||
| "dependencies": { | ||
| "@lerna/bootstrap": "^4.0.0", |
| const useStyleSheet = createStyleSheet( | ||
| (theme, { required, type }) => ({ | ||
| inputDefault: { | ||
| width: 199, |
There was a problem hiding this comment.
This, and the height are givin issues with the checkbox type. They make it looks huge.
There was a problem hiding this comment.
We could provide these styles conditionally.
| inputDefault: { | ||
| width: 199, | ||
| height: 40, | ||
| borderRadius: 5, |
There was a problem hiding this comment.
Don't we have this in the theme?
| width: 199, | ||
| height: 40, | ||
| borderRadius: 5, | ||
| display: 'flex', |
There was a problem hiding this comment.
I not gettin this one, I removed those styles and the input behave the same. What are you trying to achieve here?
| height: 40, | ||
| borderRadius: 5, | ||
| display: 'flex', | ||
| alignContent: 'center', |
There was a problem hiding this comment.
This also applies to the point above.
| borderRadius: 5, | ||
| display: 'flex', | ||
| alignContent: 'center', | ||
| alignItems: 'center', |
| inputStyle: { | ||
| padding: theme.spacing(2), | ||
| }, | ||
| }), { key: 'padding' }); |
There was a problem hiding this comment.
Whe could use here DocsInput instead of padding
There was a problem hiding this comment.
The mean of the key is to give a classname prefix.
| const { required, type, placeholder, disabled, otherProps } = props; | ||
|
|
||
| return <Input | ||
| className={classes.inputStyle} |
There was a problem hiding this comment.
Good use of the useStyleSheet hook 😁. We could change the classname to input instead.
| }, | ||
| "dependencies": { | ||
| "@platzily-ui/icons": "0.1.0", | ||
| "@lerna/bootstrap": "^4.0.0", |
There was a problem hiding this comment.
Why do we need this package?
|
|
||
| const InputComponent = () => { | ||
|
|
||
| return <Input type="checkbox" />; |
There was a problem hiding this comment.
This is the one I'm talking that the weight and height are giving troubles. Making it looks huge.
| semver "^7.3.4" | ||
|
|
||
| "@lerna/bootstrap@4.0.0": | ||
| "@lerna/bootstrap@4.0.0", "@lerna/bootstrap@^4.0.0": |
danielvaldivv
changed the title
danielvaldivv
added
documentation
| const useStyleSheet = createStyleSheet( | ||
| (theme, { width, height }) => ({ | ||
| inputDefault: { | ||
| width: width || 199, |
There was a problem hiding this comment.
Instead of doing this why dont we pass a new class when the button is of type checkbox? 🤔
| (theme, { width, height }) => ({ | ||
| inputDefault: { | ||
| width: width || 199, | ||
| height: height || 40, |
| paper: { | ||
| backgroundColor: detectColor(theme, color || 'neutral-tertiary'), | ||
| padding: theme.spacing(), | ||
| padding: theme.spacing(1), |
There was a problem hiding this comment.
No needed when the value is one.
edanfesi
added
the
carry-over-5
4 participants
Checklist ✅
resolves [#7 ]