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

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
Copy link
Contributor Author

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 gziolo added [Feature] UI Components Impacts or related to the UI component system Storybook Storybook and its stories for components Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code labels Oct 29, 2019
@gziolo
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
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 mkaz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

packages/components/src/font-size-picker/stories/index.js Outdated Show resolved Hide resolved
packages/components/src/font-size-picker/stories/index.js Outdated Show resolved Hide resolved
export default { title: 'FontSizePicker', component: FontSizePicker };

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 😄 )

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Member

gziolo commented Oct 31, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] UI Components Impacts or related to the UI component system Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code Storybook Storybook and its stories for components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants