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

Updates to the Font Size Picker #9802

Merged
merged 11 commits into from Oct 4, 2018

Conversation

Projects
None yet
6 participants
@mtias
Contributor

mtias commented Sep 11, 2018

This PR aims to add a bit more clarity and simplify the font-size control. It removed the S M L XL denotations in favor of size reference. It also groups the custom size input with the reset and on the same line. Furthermore, it disabled the display of the slider by default.

Sizes are rendered at their correct value (as supplied by the theme). "Normal" is the same as "Reset".

image

In Progress

To Do:

  • Use NavigableMenu?.
  • Figure out what components should exist here (Select based on Dropdown?)
@drw158

This comment has been minimized.

Show comment
Hide comment
@drw158

drw158 Sep 12, 2018

Does the size progression of the 'A' hinder accessibility? Seems like now, the UI relies on vision.

drw158 commented Sep 12, 2018

Does the size progression of the 'A' hinder accessibility? Seems like now, the UI relies on vision.

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Sep 12, 2018

Contributor

Does the size progression of the 'A' hinder accessibility? Seems like now, the UI relies on vision.

The buttons have tooltips for "Small", "Medium", "Large".

Contributor

mtias commented Sep 12, 2018

Does the size progression of the 'A' hinder accessibility? Seems like now, the UI relies on vision.

The buttons have tooltips for "Small", "Medium", "Large".

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Sep 25, 2018

Contributor

I'm thinking of revisiting this and going with a selector like this:

image

Scales better to what the theme supplies (more options) and is arguably clearer than iconography.

Contributor

mtias commented Sep 25, 2018

I'm thinking of revisiting this and going with a selector like this:

image

Scales better to what the theme supplies (more options) and is arguably clearer than iconography.

@mtias mtias added this to the 4.0 milestone Sep 28, 2018

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Sep 28, 2018

Contributor

@jasmussen should we make the input match the height of the select now?

Contributor

mtias commented Sep 28, 2018

@jasmussen should we make the input match the height of the select now?

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 28, 2018

Contributor

Yes I think so.

Contributor

jasmussen commented Sep 28, 2018

Yes I think so.

@mcsf

This comment has been minimized.

Show comment
Hide comment
@mcsf

mcsf Oct 3, 2018

Contributor

Pushed 6a4f92d.

Worth noting that navigating in a <NavigableMenu /> breaks in Safari when using ArrowUp. See also this mention in Slack.

Contributor

mcsf commented Oct 3, 2018

Pushed 6a4f92d.

Worth noting that navigating in a <NavigableMenu /> breaks in Safari when using ArrowUp. See also this mention in Slack.

mtias and others added some commits Sep 10, 2018

Add label, relax margins, tighten help text for switch, fix color
This commit does a few things:

1. It makes the panel heading the same color as the down chevron.
2. It adds a label to the font size picker, grouping it all together
3. It tightens the margins between switch and contextual help text.
4. It relaxes the margins for base controls inside panels, to make them a bit lighter.

Together with #9784 it reduces the weight of panels in the sidebar.
Convert font picker to a dropdown select showing real visual sizes.
- Add "huge" and "normal" variants.
- Normal equals a "reset".
@afercia

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Oct 3, 2018

Contributor

Worth noting that navigating in a breaks in Safari when using ArrowUp. See also this mention in Slack.

In Safari, I see the arrows just triggers WritingFlow in the selected block. In Chrome, I've seen the page was scrolling but can't reproduce consistently. I guess the event propagation should be stopped.

Contributor

afercia commented Oct 3, 2018

Worth noting that navigating in a breaks in Safari when using ArrowUp. See also this mention in Slack.

In Safari, I see the arrows just triggers WritingFlow in the selected block. In Chrome, I've seen the page was scrolling but can't reproduce consistently. I guess the event propagation should be stopped.

renderContent={ () => (
<NavigableMenu aria-labelledby={ labelId }>
{ map( fontSizes, ( { name, size, slug } ) => (
<Button

This comment has been minimized.

@afercia

afercia Oct 3, 2018

Contributor

As the NavigableMenu uses a role="menu", all the menu items within it should have a role="menuitem".

@afercia

afercia Oct 3, 2018

Contributor

As the NavigableMenu uses a role="menu", all the menu items within it should have a role="menuitem".

This comment has been minimized.

@mcsf

mcsf Oct 4, 2018

Contributor

It'd be great to have a lint rule that checks for role="menu" in children of any NavigableMenu.

@mcsf

mcsf Oct 4, 2018

Contributor

It'd be great to have a lint rule that checks for role="menu" in children of any NavigableMenu.

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Oct 4, 2018

Contributor

Not certain how to reproduce the Safari bug, for me Up/down arrows only navigate the font picker.

Contributor

youknowriad commented Oct 4, 2018

Not certain how to reproduce the Safari bug, for me Up/down arrows only navigate the font picker.

@mcsf

mcsf approved these changes Oct 4, 2018

@youknowriad youknowriad merged commit e5ed1b1 into master Oct 4, 2018

2 checks passed

codecov/project No report found to compare against
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment