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

FontSizePicker: Refactor stories to use Controls #38727

Merged
merged 7 commits into from
Mar 2, 2022
Merged

FontSizePicker: Refactor stories to use Controls #38727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fdce407
FontSizePicker: Refactor stories to use Controls
mirka Feb 11, 2022
b3928bb
Fix docs for `withReset`
mirka Feb 18, 2022
7daac71
Expand code snippets and show descriptions in Controls
mirka Feb 18, 2022
06bfa77
Tweak `withReset` setup for better code snippets
mirka Feb 18, 2022
71130fa
Add manual descriptions for confusing props
mirka Feb 18, 2022
ad5a988
Add descriptions to confusing stories
mirka Feb 18, 2022
a2b660e
Improve story description
mirka Mar 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/components/src/font-size-picker/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,7 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.

### withReset

If `true`, a reset button will be displayed alongside the predefined and custom
font size fields.
If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` or `withSlider` is `true`.
ciampo marked this conversation as resolved.
Show resolved Hide resolved

- Type: `Boolean`
- Required: no
Expand Down
211 changes: 104 additions & 107 deletions packages/components/src/font-size-picker/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import { number, object, boolean } from '@storybook/addon-knobs';

/**
* WordPress dependencies
*/
Expand All @@ -16,14 +11,30 @@ import FontSizePicker from '../';
export default {
title: 'Components/FontSizePicker',
component: FontSizePicker,
argTypes: {
initialValue: { table: { disable: true } }, // hide prop because it's not actually part of FontSizePicker
fallbackFontSize: {
description:
'If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`.',
},
withReset: {
description:
'If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` or `withSlider` is `true`.',
control: { type: 'boolean' },
table: {
type: 'boolean',
defaultValue: { summary: true },
},
},
},
parameters: {
knobs: { disable: false },
controls: { expanded: true },
docs: { source: { state: 'open' } },
},
};

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

const [ fontSize, setFontSize ] = useState( initialValue );
return (
<FontSizePicker
{ ...props }
Expand All @@ -33,29 +44,25 @@ const FontSizePickerWithState = ( { initialValue, ...props } ) => {
);
};

export const _default = () => {
const fontSizes = object( 'Font Sizes', [
{
name: 'Small',
slug: 'small',
size: 12,
},
{
name: 'Normal',
slug: 'normal',
size: 16,
},
{
name: 'Big',
slug: 'big',
size: 26,
},
] );
return <FontSizePickerWithState fontSizes={ fontSizes } />;
const TwoFontSizePickersWithState = ( { fontSizes, ...props } ) => {
return (
<>
<h2>Fewer font sizes</h2>
<FontSizePickerWithState
{ ...props }
fontSizes={ fontSizes.slice( 0, 4 ) }
/>

<h2>More font sizes</h2>
<FontSizePickerWithState { ...props } fontSizes={ fontSizes } />
</>
);
};

export const withSlider = () => {
const fontSizes = object( 'Font Sizes', [
export const Default = FontSizePickerWithState.bind( {} );
Default.args = {
disableCustomFontSizes: false,
fontSizes: [
{
name: 'Small',
slug: 'small',
Expand All @@ -71,45 +78,37 @@ export const withSlider = () => {
slug: 'big',
size: 26,
},
] );
const fallbackFontSize = number( 'Fallback Font Size - Slider Only', 16 );
return (
<FontSizePickerWithState
fontSizes={ fontSizes }
fallbackFontSize={ fallbackFontSize }
withSlider
/>
);
],
initialValue: 16,
withSlider: false,
};

export const withoutCustomSizes = () => {
const fontSizes = object( 'Font Sizes', [
{
name: 'Small',
slug: 'small',
size: 12,
},
{
name: 'Normal',
slug: 'normal',
size: 16,
},
{
name: 'Big',
slug: 'big',
size: 26,
export const WithSlider = FontSizePickerWithState.bind( {} );
WithSlider.args = {
...Default.args,
fallbackFontSize: 16,
initialValue: undefined,
withSlider: true,
};

export const WithCustomSizesDisabled = FontSizePickerWithState.bind( {} );
WithCustomSizesDisabled.args = {
...Default.args,
disableCustomFontSizes: true,
};
WithCustomSizesDisabled.parameters = {
docs: {
description: {
story:
'With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will only be able to pick one of the predefined sizes passed in `fontSizes`.',
},
] );
return (
<FontSizePickerWithState
fontSizes={ fontSizes }
disableCustomFontSizes
/>
);
},
};

export const differentControlBySize = () => {
const options = [
export const WithMoreFontSizes = FontSizePickerWithState.bind( {} );
WithMoreFontSizes.args = {
...Default.args,
fontSizes: [
{
name: 'Tiny',
slug: 'tiny',
Expand Down Expand Up @@ -140,29 +139,45 @@ export const differentControlBySize = () => {
slug: 'huge',
size: 36,
},
];
const optionsWithUnits = options.map( ( option ) => ( {
],
initialValue: 8,
};
WithMoreFontSizes.parameters = {
docs: {
description: {
story:
'When there are more than 5 font size options, the UI is no longer a toggle group.',
},
},
};

export const WithUnits = TwoFontSizePickersWithState.bind( {} );
WithUnits.args = {
...WithMoreFontSizes.args,
fontSizes: WithMoreFontSizes.args.fontSizes.map( ( option ) => ( {
...option,
size: `${ option.size }px`,
} ) );
const showMoreFontSizes = boolean( 'Add more font sizes', false );
const addUnitsToSizes = boolean( 'Add units to font sizes', false );
const _options = addUnitsToSizes ? optionsWithUnits : options;
const fontSizes = _options.slice(
0,
showMoreFontSizes ? _options.length : 4
);
return (
<FontSizePickerWithState fontSizes={ fontSizes } initialValue={ 8 } />
);
} ) ),
initialValue: '8px',
};
WithUnits.parameters = {
docs: {
description: {
story:
'When units like `px` are specified explicitly, it will be shown as a label hint.',
},
},
};

export const withComplexCSSValues = () => {
const options = [
export const WithComplexCSSValues = TwoFontSizePickersWithState.bind( {} );
WithComplexCSSValues.args = {
...Default.args,
fontSizes: [
{
name: 'Small',
slug: 'small',
size: '0.65rem',
// Adding just one complex css value is enough
size: 'clamp(1.75rem, 3vw, 2.25rem)',
},
{
name: 'Medium',
Expand All @@ -189,32 +204,14 @@ export const withComplexCSSValues = () => {
slug: 'huge',
size: '2.8rem',
},
];
const showMoreFontSizes = boolean( 'Add more font sizes', false );
const addComplexCssValues = boolean(
'Add some complex css values(calc, var, etc..)',
true
);

const _options = options.map( ( option, index ) => {
const _option = { ...option };
// Adding just one complex css value is enough (first element);
if ( addComplexCssValues && ! index ) {
_option.size = 'clamp(1.75rem, 3vw, 2.25rem)';
}
return _option;
} );

const fontSizes = _options.slice(
0,
showMoreFontSizes ? _options.length : 5
);
return (
<div style={ { maxWidth: '248px' } }>
<FontSizePickerWithState
fontSizes={ fontSizes }
initialValue={ '1.125rem' }
/>
</div>
);
],
initialValue: '1.125rem',
};
WithComplexCSSValues.parameters = {
docs: {
description: {
story:
'The label hint will not be shown if it is a complex CSS value. Some examples of complex CSS values in this context are CSS functions like `calc()`, `clamp()`, and `var()`.',
},
},
};