FontSizePicker: Refactor stories to use Controls (#38727)

* FontSizePicker: Refactor stories to use Controls * Fix docs for `withReset` * Expand code snippets and show descriptions in Controls * Tweak `withReset` setup for better code snippets These can be removed once the component is TS converted * Add manual descriptions for confusing props These can be removed once the component is TS converted * Add descriptions to confusing stories This would be more convenient https://github.com/izhan/storybook-description-loader * Improve story description Co-authored-by: Marco Ciampini <[email protected]> Co-authored-by: Marco Ciampini <[email protected]>
WordPress · Mar 2, 2022 · 3041b45 · 3041b45
1 parent 0441260
commit 3041b45
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 109 deletions.
diff --git 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
@@ -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 (
 		<FontSizePicker
 			{ ...props }
@@ -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',
@@ -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',
@@ -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',
@@ -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()`.',
+		},
+	},
 };