diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md index 5e95dfa51580ce..48fdf6a4c6f6b3 100644 --- a/packages/components/src/font-size-picker/README.md +++ b/packages/components/src/font-size-picker/README.md @@ -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`. - Type: `Boolean` - Required: no diff --git a/packages/components/src/font-size-picker/stories/index.js b/packages/components/src/font-size-picker/stories/index.js index a1ee37c036df53..c124fb03acc559 100644 --- a/packages/components/src/font-size-picker/stories/index.js +++ b/packages/components/src/font-size-picker/stories/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { number, object, boolean } from '@storybook/addon-knobs'; - /** * WordPress dependencies */ @@ -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 ( { ); }; -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 ; +const TwoFontSizePickersWithState = ( { fontSizes, ...props } ) => { + return ( + <> +

Fewer font sizes

+ + +

More font sizes

+ + + ); }; -export const withSlider = () => { - const fontSizes = object( 'Font Sizes', [ +export const Default = FontSizePickerWithState.bind( {} ); +Default.args = { + disableCustomFontSizes: false, + fontSizes: [ { name: 'Small', slug: 'small', @@ -71,45 +78,37 @@ export const withSlider = () => { slug: 'big', size: 26, }, - ] ); - const fallbackFontSize = number( 'Fallback Font Size - Slider Only', 16 ); - return ( - - ); + ], + 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 ( - - ); + }, }; -export const differentControlBySize = () => { - const options = [ +export const WithMoreFontSizes = FontSizePickerWithState.bind( {} ); +WithMoreFontSizes.args = { + ...Default.args, + fontSizes: [ { name: 'Tiny', slug: 'tiny', @@ -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 ( - - ); + } ) ), + 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', @@ -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 ( -
- -
- ); + ], + 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()`.', + }, + }, };