Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Two tier button text #1385

Closed
3 tasks done
toni-sharpe opened this issue Jul 3, 2017 · 0 comments
Closed
3 tasks done

Two tier button text #1385

toni-sharpe opened this issue Jul 3, 2017 · 0 comments
Assignees
@toni-sharpe
Labels
Enhancement New Designs
Milestone
v1.2.0

Comments

@toni-sharpe
Copy link

toni-sharpe commented Jul 3, 2017 •
edited
Loading

PR

#1391

Problem

Buttons are currently very restricted in what they can accept, with fixed height, fixed vertical alignment and one line only allowed.

We want to allow a little bit more flexibility here while simultaneously keeping away from the free style that accepting any children would allow.

Solution

In order to do this we will accept a prop called labelSubtext which will take the secondary text for the button. We might also need to tweak line-height and button padding values only in this context.

  • Will alter the text size to that of a regular button for the main Button text
  • Will only apply to large buttons
  • If label sub-text is applied to smaller buttons then the subtext won't render but a warning will be provided

Done means

  • Specs are written and component edited accordingly.
  • Definition and demo site example works.
  • Demo site text is added to.

Related Issues

#1386
@toni-sharpe toni-sharpe added this to the v1.2.0 milestone Jul 3, 2017
@toni-sharpe toni-sharpe self-assigned this Jul 3, 2017
@toni-sharpe toni-sharpe mentioned this issue Jul 3, 2017
Closed
3 tasks
@toni-sharpe toni-sharpe mentioned this issue Jul 4, 2017
Merged
9 tasks
toni-sharpe pushed a commit that referenced this issue Jul 4, 2017
Uses display: flex for Button text vertical centring
d8ea3eb 
* In preparation for #1385 and #1386 where the text size will become more flexible
toni-sharpe pushed a commit that referenced this issue Jul 4, 2017
Allows two-tier button with subtext #1385
a019c34 
* Text internal to button is positioned one pixel higher due to allowing flex to centre, rather than using a one pixel offset
toni-sharpe pushed a commit that referenced this issue Jul 5, 2017
PR Comments #1385 & #1386
bc7c679 
* Alphabetise private `Button` functions.
* Correct comments.
* Check for Boolean type explicitly in `smallFont` proptype function
* Ensure nice deafult for `smallFont`
toni-sharpe pushed a commit that referenced this issue Jul 5, 2017
Move release notes to v1.3.0 #1385 #1386
eee624b
toni-sharpe pushed a commit that referenced this issue Jul 10, 2017
PR Comments #1385
354a729 
* Font size setting was not needed on large button
* Release note for font size
toni-sharpe pushed a commit that referenced this issue Jul 24, 2017
Fixes flex bugs from QA #1385
4f97dff 
* We need to use an internal wrapper when there are multiple children in the button
* This is because flex will not apply to certain HTML elements in certain browsers
* [link for more](https://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-element-in-safari)

* Set the same flex definitions on the internal wrapper so if it exists it applies to those children
* `column` is also applied as our children are stacked for this quite tightly controlled contents

* Also fix demo site menu spacing
toni-sharpe pushed a commit that referenced this issue Jul 24, 2017
Remove un-needed prop #1385
10386b2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@toni-sharpe toni-sharpe

Labels
Enhancement New Designs
Milestone
v1.2.0
Development

No branches or pull requests
2 participants
@SeanArmstrong @toni-sharpe