-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Checkbox #35
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great overall and nice refactor. Just missed 1 thing with the outline when the selector is focused.
@@ -61,14 +61,18 @@ export const Radio = styled.div` | |||
transition: background-color ${ANIMATION.defaultTiming}; | |||
width: ${SPACING.medium}; | |||
|
|||
${({ selector }) => selector === 'checkbox' && css` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i'd move the other border-radius
from L55 next to this so that it's clear it's being overwritten.
Actually probably better practice not to declare the same CSS attribute on the same class so maybe switch it out for a ternary based on the selector
@@ -23,14 +23,14 @@ export const OuterContainer = styled.div` | |||
|
|||
:focus { | |||
outline: none; | |||
${RadioContainer} { | |||
${SelectorContainer} { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@snags88 Updated. |
@benkolde could you approve from a design stand point for the radio button and check button |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
minor nit changes. Otherwise looks good.
docs/checkbox.md
Outdated
```jsx | ||
import { Checkbox } from 'radiance-ui'; | ||
|
||
<Checkbox type='primary' checked> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[nit] extra space at the beginning of the line
const defaultProps = { | ||
onClick: () => {}, | ||
type: 'primary', | ||
selector: "radio", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[nit] single quotes over double quotes unless it's a JSX prop
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great guys. 🤙
This PR adds the component as is on the master design system sketch file.
Sketch file:
Storybook:
https://curology-radiance-pr-35.herokuapp.com/?selectedKind=Checkbox&selectedStory=Usage&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybooks%2Fstorybook-addon-knobs