-
Notifications
You must be signed in to change notification settings - Fork 2
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
Migrate <Button> #14
Migrate <Button> #14
Conversation
By passing everything unknown to their underlying <div>s
src/Button.js
Outdated
const BLACK = 'black'; | ||
export const BUTTON_COLOR = { BLUE, RED, WHITE, BLACK }; | ||
|
||
function Button(props) { |
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.
Direct extract props from param?
function Button({ color, solid, className, children, ...buttonProps }) {
// ...
}
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.
ok
|
||
Button.propTypes = { | ||
color: PropTypes.oneOf(Object.values(BUTTON_COLOR)), | ||
solid: PropTypes.bool, |
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.
trailing comma?
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.
It's now recommended in Airbnb style guide, because it can make git diffs cleaner
https://github.com/airbnb/javascript#commas--dangling
|
||
Button.defaultProps = { | ||
color: BLUE, | ||
solid: false, |
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.
trailing comma?
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.
Go Go Power Ranger
Purpose
Bring back
<Button>
from ic-framework-react.Note this does not contain the icon-only variant, as I plan to split it to an independent component.
Implement
<Button>
which supportscolor
andsolid
modifiersrowComp()
is refactored to set default props of<RowComp>
<Tag>
now inherits color from parent nodes.Demo