-
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
Feature/add button full width prop #129
Merged
michaeljaltamirano
merged 15 commits into
master
from
feature/add-button-full-width-prop
Jul 8, 2019
Merged
Changes from all commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
bef542c
Add fullWidth prop (WIP)
michaeljaltamirano 6374788
Merge branch 'master' into feature/add-button-full-width-prop
michaeljaltamirano b1c6121
Merge branch 'master' into feature/add-button-full-width-prop
michaeljaltamirano 6d58730
Add Full Button Width story buttons
michaeljaltamirano 964b481
Update button width styling when fullWidth prop is added
michaeljaltamirano a81cfe3
Update snapshots
michaeljaltamirano 1b7665d
Add fullWidth button to readme
michaeljaltamirano 1dfa35b
Add fullWidth to prop table
michaeljaltamirano 00ac668
Rename fullWidth to isFullWidth
michaeljaltamirano 7becf5e
Add ESLint fix for stories error, resolve markdown file extension
michaeljaltamirano c0a8e0b
Merge branch 'master' into feature/add-button-full-width-prop
michaeljaltamirano e57a4d0
Add small fix for loading fullWidth icon button height issue
michaeljaltamirano 418bae3
Add Loader styling for button when full width
michaeljaltamirano b8dc124
Add TODO re: Loader component
michaeljaltamirano f71b24e
Expand on isFullWidth prop table note to mention mobile style preference
michaeljaltamirano File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
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
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
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
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
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
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -118,6 +118,7 @@ export const baseButtonStyles = ({ | |
buttonType, | ||
isLoading, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
textColor, | ||
isFullWidth, | ||
}) => css` | ||
${TYPOGRAPHY_STYLE.button}; | ||
appearance: none; | ||
|
@@ -127,15 +128,12 @@ export const baseButtonStyles = ({ | |
cursor: pointer; | ||
display: block; | ||
margin: 0; | ||
max-width: 325px; | ||
min-height: 52px; | ||
min-width: 208px; | ||
opacity: 1; | ||
padding: 0 ${SPACER.large}; | ||
position: relative; | ||
transition: all ${ANIMATION.defaultTiming} ease-in-out; | ||
text-decoration: none; | ||
width: max-content; | ||
|
||
&:hover { | ||
transition: all ${ANIMATION.defaultTiming} ease-in-out; | ||
|
@@ -155,12 +153,32 @@ export const baseButtonStyles = ({ | |
color: ${textColor}; | ||
fill: ${textColor}; | ||
`}; | ||
|
||
${isFullWidth | ||
? ` | ||
width: 100%; | ||
` | ||
: ` | ||
min-width: 208px; | ||
max-width: 325px; | ||
width: max-content; | ||
|
||
`}; | ||
`; | ||
|
||
export const ButtonBase = styled.button(baseButtonStyles); | ||
|
||
// align-items conditional fixes slight button height misalignment for truthy scenario | ||
// See screenshot in: https://github.com/PocketDerm/radiance-ui/pull/129#issue-292994081 | ||
export const ButtonContents = styled.div` | ||
align-items: center; | ||
align-items: ${({ hasIcon, isFullWidth, isLoading }) => { | ||
if (isFullWidth && isLoading && hasIcon) { | ||
return 'baseline'; | ||
} | ||
|
||
return 'center'; | ||
}}; | ||
|
||
display: flex; | ||
height: 100%; | ||
justify-content: center; | ||
|
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
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.
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.
25% was fairly arbitrary but was relatively close for very wide buttons (which isn't a pattern we want to use, since we're adding this for mobile), but also close enough with narrower viewports (320-400px).