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.

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

Add FontSizePicker component to Storybook #18149

Merged
merged 2 commits into from Oct 31, 2019
Merged

Conversation

@brentswisher
Copy link
Contributor

brentswisher commented Oct 28, 2019

Description

Add the FontSizePicker component to Storybook as part of #17973.
Added with the following "stories":

  • Default
  • With Slider Control
  • With Disabled Custom Sizes

Note: The last story brought to my attention a bug, which is in the process of being resolved in #18049. Once that is merged the story should look correct.

How has this been tested?

run npm run design-system:dev
Browse to the local Storybook instance
See FontSizePicker component is rendered with various options when selected in left-hand navigation

Types of changes

New feature (non-breaking change which adds functionality)

@brentswisher

This comment has been minimized.

Copy link
Contributor Author

brentswisher commented Oct 28, 2019

Hmm, this story is not looking right from a design perspective, is there a step I am missing for importing CSS from somewhere @gziolo? Still pretty new to working with Storybook.
FontSizePicker_-_Default_⋅_Storybook

@gziolo

This comment has been minimized.

Copy link
Member

gziolo commented Oct 29, 2019

Hmm, this story is not looking right from a design perspective, is there a step I am missing for importing CSS from somewhere @gziolo? Still pretty new to working with Storybook.
FontSizePicker_-_Default_⋅_Storybook

All styles should be included with the following import statement:

import '../build-style/style.css';

I filed an issue that describes very similar issues with the ColorPicker component in #18129. I would expect that it's going to be a case for a few more components. Can you open a follow-up issue?

@mkaz

This comment has been minimized.

Copy link
Member

mkaz commented Oct 29, 2019

The "Choose preset" text will be fixed with #18165 which converts the base-control to use VisuallHidden component

Copy link
Member

mkaz left a comment

Looks good, a couple minor changes and it'll be good to go

@brentswisher brentswisher force-pushed the add/font-size-picker-stories branch from 9c50eb8 to 89c1d02 Oct 30, 2019
export default { title: 'FontSizePicker', component: FontSizePicker };

const FontSizePickerWithState = ( { ...props } ) => {
const [ fontSize, setFontSize ] = useState( 16 );

This comment has been minimized.

Copy link
@gziolo

gziolo Oct 30, 2019

Member

Actually, you could use knobs with the value and the fontSizes. This way folks could play with the default font size and all the possible font sizes provided. What do you think? @ItsJonQ will be able to help if that makes sense.

This comment has been minimized.

Copy link
@brentswisher

brentswisher Oct 30, 2019

Author Contributor

I added the fontSizes to a knob, but the value I left as it was. The default 16 is only used on page load, after which point the state takes over. Since changing a knob doesn't reload the component in storybook, there wouldn't be any point in making the value a knob. Because changing it wouldn't reload the component, and reloading the page would reset it to the initial value. Unless I am mistaken about something? (Which is entirely possible 😄 )

This comment has been minimized.

Copy link
@gziolo

gziolo Oct 31, 2019

Member

I gave it a spin and you are 100% correct. It isn't entirely what I assumed 🙂

Let's leave it as is. I need to double-check other stories and update those which set the initial state with knobs as it doesn't reload as you pointed out.

@brentswisher brentswisher force-pushed the add/font-size-picker-stories branch from 89c1d02 to cb5da51 Oct 30, 2019
@gziolo
gziolo approved these changes Oct 31, 2019
Copy link
Member

gziolo left a comment

Let's merge it as. We will need to have another pass on the existing stories at some point and add some visuals. In this case, it could be helpful to have a text which dynamically changes when a new value is applied.

There are also two issues with the component I discovered while testing:

  1. The selected preset doesn't change to Custom when I pick a random value:
    Screen Shot 2019-10-31 at 10 39 23
  2. The example which has the custom sizes disabled works only partially, since, in the dropdown, there is still
    an option labeled Custom:
    Screen Shot 2019-10-31 at 10 40 33
@gziolo gziolo merged commit a1bc23e into master Oct 31, 2019
6 of 7 checks passed
6 of 7 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Canceled
Details
Header rules - gutenberg-playground No header rules processed
Details
Pages changed - gutenberg-playground 7 new files uploaded
Details
Redirect rules - gutenberg-playground No redirect rules processed
Details
Mixed content - gutenberg-playground No mixed content detected
Details
netlify/gutenberg-playground/deploy-preview Deploy preview ready!
Details
@gziolo gziolo deleted the add/font-size-picker-stories branch Oct 31, 2019
@gziolo

This comment has been minimized.

Copy link
Member

gziolo commented Oct 31, 2019

I opened follow-up issues: #18211 and #18212.

CreativeDive added a commit to CreativeDive/gutenberg that referenced this pull request Nov 12, 2019
* Add FontSizePicker component to Storybook

* Move fontSizes array into a knob so that it can be customized and some small code quality improvements
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.