-
Notifications
You must be signed in to change notification settings - Fork 14
Button: add 12px padding and expanded content example #79
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.
100% we will have to remove the extra padding in engine that I / some others added in
src/Button/Button.tsx
Outdated
@@ -425,6 +425,8 @@ export const Button: ComponentWithAs<Props, "button"> = ({ | |||
alignItems: "center", | |||
display: "flex", | |||
justifyContent: "center", | |||
paddingLeft: "12px", |
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.
These changes need to be applied only when buttons are not icon only. Note that the designs don't have the padding applied for icon-only buttons.
Use the iconOnly
variable to conditionally add this padding.
Design
This PR
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 looked into this further; unfortunately this is adding padding to a second spot and will compound with the original padding already applied. I'll send an update.
I'll also send another update that will only add styles to one spot so there's no more confusion!
976a325
to
d64815a
Compare
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 moved the padding and made it only apply to buttons that aren't icon only. Merging!
🚀 PR was released in v2.1.1 🚀 |
Torres pointed out that the buttons did not expand to fit their contents, so this PR adds that padding (12px).