From c501f377b49c8a76d75a8b0b24ae61100d62fa95 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Jul 2024 09:37:36 +0200 Subject: [PATCH 01/12] Add pickeMode unit tests --- packages/components/src/font-size-picker/test/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx index 9bb3b2d8677b69..cf093880347527 100644 --- a/packages/components/src/font-size-picker/test/index.tsx +++ b/packages/components/src/font-size-picker/test/index.tsx @@ -640,4 +640,10 @@ describe( 'FontSizePicker', () => { expect( units[ 2 ] ).toHaveAccessibleName( 'ex' ); } ); } + + describe( 'pickerModes', () => { + it( 'should pass', async () => { + expect( 5 ).toBeGreaterThan( 4 ); + } ); + } ); } ); From 258236907d07dc243a012fc6248636250acbfadb Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Jul 2024 00:25:19 +0200 Subject: [PATCH 02/12] Deprecate disableCustomFontSizes, replace with new pickerMode prop --- .../components/src/font-size-picker/index.tsx | 200 +++++++++++------- .../components/src/font-size-picker/types.ts | 9 + 2 files changed, 136 insertions(+), 73 deletions(-) diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index cb17b7a16e3637..a375e9505edc5d 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -8,7 +8,7 @@ import type { ForwardedRef } from 'react'; */ import { __ } from '@wordpress/i18n'; import { settings } from '@wordpress/icons'; -import { useState, useMemo, forwardRef } from '@wordpress/element'; +import { useState, forwardRef } from '@wordpress/element'; /** * Internal dependencies @@ -23,7 +23,7 @@ import { } from '../unit-control'; import { VisuallyHidden } from '../visually-hidden'; import { getCommonSizeUnit } from './utils'; -import type { FontSizePickerProps } from './types'; +import type { FontSize, FontSizePickerProps } from './types'; import { Container, Header, @@ -35,9 +35,60 @@ import { Spacer } from '../spacer'; import FontSizePickerSelect from './font-size-picker-select'; import FontSizePickerToggleGroup from './font-size-picker-toggle-group'; import { T_SHIRT_NAMES } from './constants'; +import deprecated from '@wordpress/deprecated'; const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ]; +type PickerMode = 'predefined' | 'custom' | 'both'; +type PickerType = 'select' | 'togglegroup' | 'custom'; + +const shouldUseSelectOverToggle = ( howManyfontSizes: number ) => + howManyfontSizes > 5; + +const getPickerType = ( + pickerMode: PickerMode, + isCustomValue: boolean, + fontSizes: FontSize[] +): PickerType => { + if ( + pickerMode === 'custom' || + ( pickerMode !== 'predefined' && isCustomValue ) + ) { + return 'custom'; + } + + return shouldUseSelectOverToggle( fontSizes.length ) || isCustomValue + ? 'select' + : 'togglegroup'; +}; + +const getHeaderHint = ( + currentPickerType: PickerType, + selectedFontSize: FontSize | undefined, + fontSizes: FontSize[] +) => { + if ( currentPickerType === 'custom' ) { + return __( 'Custom' ); + } + + if ( ! shouldUseSelectOverToggle( fontSizes.length ) ) { + if ( selectedFontSize ) { + return ( + selectedFontSize.name || + T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ] + ); + } + return ''; + } + + const commonUnit = getCommonSizeUnit( fontSizes ); + if ( commonUnit ) { + return `(${ commonUnit })`; + } + + return ''; +}; + const UnforwardedFontSizePicker = ( props: FontSizePickerProps, ref: ForwardedRef< any > @@ -46,61 +97,55 @@ const UnforwardedFontSizePicker = ( __next40pxDefaultSize = false, fallbackFontSize, fontSizes = [], - disableCustomFontSizes = false, onChange, + pickerMode = 'both', size = 'default', units: unitsProp = DEFAULT_UNITS, value, withSlider = false, withReset = true, + + // deprecated + disableCustomFontSizes, } = props; - const units = useCustomUnits( { - availableUnits: unitsProp, - } ); + let computedPickerMode = pickerMode; + if ( disableCustomFontSizes !== undefined ) { + deprecated( + '`disableCustomFontSizes` prop in wp.components.FontSizePicker', + { + since: '6.7', + version: '6.9', + alternative: '`pickerMode` prop', + } + ); + + computedPickerMode = disableCustomFontSizes ? 'predefined' : 'both'; + } - const shouldUseSelectControl = fontSizes.length > 5; const selectedFontSize = fontSizes.find( ( fontSize ) => fontSize.size === value ); const isCustomValue = !! value && ! selectedFontSize; - const [ showCustomValueControl, setShowCustomValueControl ] = useState( - ! disableCustomFontSizes && isCustomValue - ); - - const headerHint = useMemo( () => { - if ( showCustomValueControl ) { - return __( 'Custom' ); - } - - if ( ! shouldUseSelectControl ) { - if ( selectedFontSize ) { - return ( - selectedFontSize.name || - T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ] - ); - } - return ''; - } - - const commonUnit = getCommonSizeUnit( fontSizes ); - if ( commonUnit ) { - return `(${ commonUnit })`; - } + const [ currentPickerType, setCurrentPickerType ] = useState< + 'select' | 'togglegroup' | 'custom' + >( getPickerType( computedPickerMode, isCustomValue, fontSizes ) ); - return ''; - }, [ - showCustomValueControl, - shouldUseSelectControl, - selectedFontSize, - fontSizes, - ] ); + const units = useCustomUnits( { + availableUnits: unitsProp, + } ); - if ( fontSizes.length === 0 && disableCustomFontSizes ) { + if ( fontSizes.length === 0 && computedPickerMode === 'predefined' ) { return null; } + const headerHint = getHeaderHint( + currentPickerType, + selectedFontSize, + fontSizes + ); + // If neither the value or first font size is a string, then FontSizePicker // operates in a legacy "unitless" mode where UnitControl can only be used // to select px values and onChange() is always called with number values. @@ -130,56 +175,64 @@ const UnforwardedFontSizePicker = ( ) } - { ! disableCustomFontSizes && ( + { /* Show toggle button only when both picker modes are enabled */ } + { computedPickerMode === 'both' && ( { - setShowCustomValueControl( - ! showCustomValueControl + setCurrentPickerType( + getPickerType( + currentPickerType === 'custom' + ? 'predefined' + : 'custom', + isCustomValue, + fontSizes + ) ); } } - isPressed={ showCustomValueControl } + isPressed={ currentPickerType === 'custom' } size="small" /> ) }
- { !! fontSizes.length && - shouldUseSelectControl && - ! showCustomValueControl && ( - { - if ( newValue === undefined ) { - onChange?.( undefined ); - } else { - onChange?.( - hasUnits - ? newValue - : Number( newValue ), - fontSizes.find( - ( fontSize ) => - fontSize.size === newValue - ) - ); - } - } } - onSelectCustom={ () => - setShowCustomValueControl( true ) + { currentPickerType === 'select' && ( + { + if ( newValue === undefined ) { + onChange?.( undefined ); + } else { + onChange?.( + hasUnits ? newValue : Number( newValue ), + fontSizes.find( + ( fontSize ) => + fontSize.size === newValue + ) + ); } - /> - ) } - { ! shouldUseSelectControl && ! showCustomValueControl && ( + } } + // TODO: "Custom" shouldn't be shown if + // computedPickerMode is "predefined-only" + onSelectCustom={ () => + setCurrentPickerType( 'custom' ) + } + /> + ) } + + { currentPickerType === 'togglegroup' && ( ) } - { ! disableCustomFontSizes && showCustomValueControl && ( + + { currentPickerType === 'custom' && ( Date: Tue, 2 Jul 2024 08:21:00 +0200 Subject: [PATCH 03/12] Fix showing custom option in the select dropdown --- .../src/font-size-picker/font-size-picker-select.tsx | 4 ++-- packages/components/src/font-size-picker/index.tsx | 6 +----- packages/components/src/font-size-picker/types.ts | 4 +--- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/components/src/font-size-picker/font-size-picker-select.tsx b/packages/components/src/font-size-picker/font-size-picker-select.tsx index c5dca6bdb37a04..8b33275753d10e 100644 --- a/packages/components/src/font-size-picker/font-size-picker-select.tsx +++ b/packages/components/src/font-size-picker/font-size-picker-select.tsx @@ -30,7 +30,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => { __next40pxDefaultSize, fontSizes, value, - disableCustomFontSizes, + pickerMode, size, onChange, onSelectCustom, @@ -59,7 +59,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => { __experimentalHint: hint, }; } ), - ...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ), + ...( pickerMode === 'both' ? [ CUSTOM_OPTION ] : [] ), ]; const selectedOption = value diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index a375e9505edc5d..120c2a1d427bbd 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -207,9 +207,7 @@ const UnforwardedFontSizePicker = ( __next40pxDefaultSize={ __next40pxDefaultSize } fontSizes={ fontSizes } value={ value } - disableCustomFontSizes={ - preferredPickerMode === 'predefined' - } + pickerMode={ computedPickerMode } size={ size } onChange={ ( newValue ) => { if ( newValue === undefined ) { @@ -224,8 +222,6 @@ const UnforwardedFontSizePicker = ( ); } } } - // TODO: "Custom" shouldn't be shown if - // computedPickerMode is "predefined-only" onSelectCustom={ () => setCurrentPickerType( 'custom' ) } diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts index 1db69adbf950cd..83ebdfb9bf7f01 100644 --- a/packages/components/src/font-size-picker/types.ts +++ b/packages/components/src/font-size-picker/types.ts @@ -107,9 +107,7 @@ export type FontSizePickerSelectProps = Pick< 'value' | 'size' > & { fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >; - disableCustomFontSizes: NonNullable< - FontSizePickerProps[ 'disableCustomFontSizes' ] - >; + pickerMode: NonNullable< FontSizePickerProps[ 'pickerMode' ] >; onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >; onSelectCustom: () => void; __next40pxDefaultSize: boolean; From 99134dbb6691348d8f708b2d54719406f54f99f9 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Jul 2024 08:21:14 +0200 Subject: [PATCH 04/12] Improve tests --- .../src/font-size-picker/test/index.tsx | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx index cf093880347527..c3d7d3b93ed901 100644 --- a/packages/components/src/font-size-picker/test/index.tsx +++ b/packages/components/src/font-size-picker/test/index.tsx @@ -539,16 +539,30 @@ describe( 'FontSizePicker', () => { expect( onChange ).toHaveBeenCalledWith( '80px' ); } ); - it( 'does not allow custom values when disableCustomFontSizes is set', () => { - render( + it( 'does not allow custom values when the pickerMode mode is not "both"', () => { + const { rerender } = render( ); expect( screen.queryByRole( 'button', { name: 'Set custom size' } ) ).not.toBeInTheDocument(); + + rerender( + + ); + expect( + screen.queryByRole( 'button', { name: 'Set custom size' } ) + ).not.toBeInTheDocument(); + + rerender( + + ); + expect( + screen.getByRole( 'button', { name: 'Set custom size' } ) + ).toBeVisible(); } ); it( 'does not display a slider by default', async () => { From 3f688377ea75b8f2360c74d883efe135c0a96f96 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Jul 2024 09:04:32 +0200 Subject: [PATCH 05/12] Keep picker type up to date --- packages/components/src/font-size-picker/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 120c2a1d427bbd..3ba92fa03fdd41 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -8,7 +8,7 @@ import type { ForwardedRef } from 'react'; */ import { __ } from '@wordpress/i18n'; import { settings } from '@wordpress/icons'; -import { useState, forwardRef } from '@wordpress/element'; +import { useState, forwardRef, useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -132,6 +132,12 @@ const UnforwardedFontSizePicker = ( 'select' | 'togglegroup' | 'custom' >( getPickerType( computedPickerMode, isCustomValue, fontSizes ) ); + useEffect( () => { + setCurrentPickerType( + getPickerType( computedPickerMode, isCustomValue, fontSizes ) + ); + }, [ computedPickerMode, isCustomValue, fontSizes ] ); + const units = useCustomUnits( { availableUnits: unitsProp, } ); From 4468d0d931f2fb5054f2c4776e8ee39ef6653e5c Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Jul 2024 09:06:18 +0200 Subject: [PATCH 06/12] Do not use isCustomValue as a factor in deciding select vs toggle --- packages/components/src/font-size-picker/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 3ba92fa03fdd41..870829755e0ecd 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -57,7 +57,7 @@ const getPickerType = ( return 'custom'; } - return shouldUseSelectOverToggle( fontSizes.length ) || isCustomValue + return shouldUseSelectOverToggle( fontSizes.length ) ? 'select' : 'togglegroup'; }; From f666b558dc8d29252f68106b1d0358e40970974e Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Jul 2024 09:06:48 +0200 Subject: [PATCH 07/12] Stop using disableCustomFontSizes in Storybook --- .../components/src/font-size-picker/stories/index.story.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/src/font-size-picker/stories/index.story.tsx b/packages/components/src/font-size-picker/stories/index.story.tsx index eec8f5173d9655..b8bb22529a50ec 100644 --- a/packages/components/src/font-size-picker/stories/index.story.tsx +++ b/packages/components/src/font-size-picker/stories/index.story.tsx @@ -66,7 +66,6 @@ const TwoFontSizePickersWithState: StoryFn< typeof FontSizePicker > = ( { export const Default: StoryFn< typeof FontSizePicker > = FontSizePickerWithState.bind( {} ); Default.args = { - disableCustomFontSizes: false, fontSizes: [ { name: 'Small', @@ -98,14 +97,14 @@ WithSlider.args = { }; /** - * With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will + * With the `pickerMode` set to `'predefined'`, the user will * only be able to pick one of the predefined sizes passed in `fontSizes`. */ export const WithCustomSizesDisabled: StoryFn< typeof FontSizePicker > = FontSizePickerWithState.bind( {} ); WithCustomSizesDisabled.args = { ...Default.args, - disableCustomFontSizes: true, + pickerMode: 'predefined', }; /** From b64c5e47834e3f1e295b45b9fc27da1ef03a8d55 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Jul 2024 09:26:31 +0200 Subject: [PATCH 08/12] Update docs --- .../components/src/font-size-picker/README.md | 27 ++++++++++++------- .../components/src/font-size-picker/types.ts | 18 ++++++++----- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md index 2a342d3de9114d..3cbb71088f359b 100644 --- a/packages/components/src/font-size-picker/README.md +++ b/packages/components/src/font-size-picker/README.md @@ -48,13 +48,6 @@ const MyFontSizePicker = () => { The component accepts the following props: -### `disableCustomFontSizes`: `boolean` - -If `true`, it will not be possible to choose a custom fontSize. The user will be forced to pick one of the pre-defined sizes passed in fontSizes. - -- Required: no -- Default: `false` - ### `fallbackFontSize`: `number` If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`. @@ -80,6 +73,13 @@ If onChange is called without any parameter, it should reset the value, attendin - Required: Yes +### `pickerMode`: `'predefined' | 'custom' | 'both` + +When set to `predefined`, the user will be only able to pick a font size from the predefined list passed via the `fontSizes` prop. When set to `custom`, the user will be only able to choose a custom font size. When set to `both`, the user will be able to access both UIs through a toggle. + +- Required: No +- Default: `'both'` + ### `size`: `'default' | '__unstable-large'` Size of the control. @@ -102,14 +102,23 @@ The current font size value. ### `withReset`: `boolean` -If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`. +If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `pickerMode` is `'predefined'` or `withSlider` is `true`. - Required: no - Default: `true` ### `withSlider`: `boolean` -If `true`, a slider will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`. +If `true`, a slider will be displayed alongside the input field when a custom font size is active. Has no effect when `pickerMode` is `predefined`. + +- Required: no +- Default: `false` + +### `disableCustomFontSizes`: `boolean` + +_Note: this prop is deprecated. Please use the `pickerMode` prop instead._ + +If `true`, it will not be possible to choose a custom font size. The user will be forced to pick one of the pre-defined sizes passed via the `fontSizes` prop. - Required: no - Default: `false` diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts index 83ebdfb9bf7f01..2561d31b2cd27f 100644 --- a/packages/components/src/font-size-picker/types.ts +++ b/packages/components/src/font-size-picker/types.ts @@ -1,6 +1,9 @@ export type FontSizePickerProps = { /** - * TBD description + * When set to `predefined`, the user will be only able to pick a font size + * from the predefined list passed via the `fontSizes` prop. When set to + * `custom`, the user will be only able to choose a custom font size. When + * set to `both`, the user will be able to access both UIs through a toggle. * * @default 'both' */ @@ -8,8 +11,9 @@ export type FontSizePickerProps = { /** * _Note: this prop is deprecated. Please use the `pickerMode` prop instead._ * - * If `true`, it will not be possible to choose a custom fontSize. The user - * will be forced to pick one of the pre-defined sizes passed in fontSizes. + * If `true`, it will not be possible to choose a custom font size. The user + * will be forced to pick one of the pre-defined sizes passed via the + * `fontSizes` prop. * * @default false * @deprecated @@ -38,7 +42,7 @@ export type FontSizePickerProps = { /** * Available units for custom font size selection. * - * @default `[ 'px', 'em', 'rem' ]` + * @default [ 'px', 'em', 'rem' ] */ units?: string[]; /** @@ -46,8 +50,8 @@ export type FontSizePickerProps = { */ value?: number | string; /** - * If `true`, the UI will contain a slider, instead of a numeric text input - * field. If `false`, no slider will be present. + * If `true`, a slider will be displayed alongside the input field when a + * custom font size is active. Has no effect when `pickerMode` is `predefined`. * * @default false */ @@ -55,7 +59,7 @@ export type FontSizePickerProps = { /** * 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`. + * `pickerMode` is `'predefined'` or `withSlider` is `true`. * * @default true */ From 81d39365d3debc6ef57806aa59f1f6d1541ee62e Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Jul 2024 09:29:23 +0200 Subject: [PATCH 09/12] Update usages in the editor --- packages/block-editor/src/components/font-sizes/README.md | 2 +- .../src/components/font-sizes/font-size-picker.js | 2 +- .../src/components/global-styles/typography-panel.js | 6 ++++-- packages/components/src/font-size-picker/index.native.js | 1 + 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/font-sizes/README.md b/packages/block-editor/src/components/font-sizes/README.md index 69354b90f2a351..2a54ec7bccbe0f 100644 --- a/packages/block-editor/src/components/font-sizes/README.md +++ b/packages/block-editor/src/components/font-sizes/README.md @@ -2,7 +2,7 @@ FontSizePicker is a React component that renders a UI that allows users to select a font size. The component renders a user interface that allows the user to select predefined (common) font sizes and contains an option that allows users to select custom font sizes (by choosing the value) if that functionality is enabled. -There is an equivalent component exposed under @wordpress/components. The difference between this component and the @wordpress components one is that this component does not require the `fontSizes` and `disableCustomFontSizes` properties. The editor settings are used to compute the value of these props. +There is an equivalent component exposed under @wordpress/components. The difference between this component and the @wordpress components one is that this component does not require the `fontSizes` and `pickerMode` properties. The editor settings are used to compute the value of these props. ## Usage diff --git a/packages/block-editor/src/components/font-sizes/font-size-picker.js b/packages/block-editor/src/components/font-sizes/font-size-picker.js index 959b2c23806ded..91d97f70d72db4 100644 --- a/packages/block-editor/src/components/font-sizes/font-size-picker.js +++ b/packages/block-editor/src/components/font-sizes/font-size-picker.js @@ -18,7 +18,7 @@ function FontSizePicker( props ) { ); } diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index 12ceadeb758df2..b60481a7d5594f 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -209,7 +209,9 @@ export default function TypographyPanel( { // Font Size const hasFontSizeEnabled = useHasFontSizeControl( settings ); - const disableCustomFontSizes = ! settings?.typography?.customFontSize; + const fontSizePickerMode = ! settings?.typography?.customFontSize + ? 'predefined' + : 'both'; const mergedFontSizes = getMergedFontSizes( settings ); const fontSize = decodeValue( inheritedValue?.typography?.fontSize ); @@ -443,7 +445,7 @@ export default function TypographyPanel( { value={ fontSize } onChange={ setFontSize } fontSizes={ mergedFontSizes } - disableCustomFontSizes={ disableCustomFontSizes } + pickerMode={ fontSizePickerMode } withReset={ false } withSlider size="__unstable-large" diff --git a/packages/components/src/font-size-picker/index.native.js b/packages/components/src/font-size-picker/index.native.js index b12a27296ca297..48af2092e36092 100644 --- a/packages/components/src/font-size-picker/index.native.js +++ b/packages/components/src/font-size-picker/index.native.js @@ -23,6 +23,7 @@ const DEFAULT_FONT_SIZE = 16; function FontSizePicker( { fontSizes = [], + // Can this be kept as-is? disableCustomFontSizes = false, onChange, value: selectedValue, From cfb5c291f8898f281dd55bed6e543f670d3aff2e Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Jul 2024 09:48:54 +0200 Subject: [PATCH 10/12] Tidy up types and imports --- .../components/src/font-size-picker/index.tsx | 24 ++++++++++--------- .../components/src/font-size-picker/types.ts | 6 ++++- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 870829755e0ecd..f2482b89ce8133 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -9,6 +9,7 @@ import type { ForwardedRef } from 'react'; import { __ } from '@wordpress/i18n'; import { settings } from '@wordpress/icons'; import { useState, forwardRef, useEffect } from '@wordpress/element'; +import deprecated from '@wordpress/deprecated'; /** * Internal dependencies @@ -23,7 +24,6 @@ import { } from '../unit-control'; import { VisuallyHidden } from '../visually-hidden'; import { getCommonSizeUnit } from './utils'; -import type { FontSize, FontSizePickerProps } from './types'; import { Container, Header, @@ -35,21 +35,23 @@ import { Spacer } from '../spacer'; import FontSizePickerSelect from './font-size-picker-select'; import FontSizePickerToggleGroup from './font-size-picker-toggle-group'; import { T_SHIRT_NAMES } from './constants'; -import deprecated from '@wordpress/deprecated'; +import type { + FontSize, + FontSizePickerProps, + FontSizePickerMode, + FontSizePickerType, +} from './types'; const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ]; -type PickerMode = 'predefined' | 'custom' | 'both'; -type PickerType = 'select' | 'togglegroup' | 'custom'; - const shouldUseSelectOverToggle = ( howManyfontSizes: number ) => howManyfontSizes > 5; const getPickerType = ( - pickerMode: PickerMode, + pickerMode: FontSizePickerMode, isCustomValue: boolean, fontSizes: FontSize[] -): PickerType => { +): FontSizePickerType => { if ( pickerMode === 'custom' || ( pickerMode !== 'predefined' && isCustomValue ) @@ -63,7 +65,7 @@ const getPickerType = ( }; const getHeaderHint = ( - currentPickerType: PickerType, + currentPickerType: FontSizePickerType, selectedFontSize: FontSize | undefined, fontSizes: FontSize[] ) => { @@ -128,9 +130,9 @@ const UnforwardedFontSizePicker = ( ); const isCustomValue = !! value && ! selectedFontSize; - const [ currentPickerType, setCurrentPickerType ] = useState< - 'select' | 'togglegroup' | 'custom' - >( getPickerType( computedPickerMode, isCustomValue, fontSizes ) ); + const [ currentPickerType, setCurrentPickerType ] = useState( + getPickerType( computedPickerMode, isCustomValue, fontSizes ) + ); useEffect( () => { setCurrentPickerType( diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts index 2561d31b2cd27f..bd8ea09391038a 100644 --- a/packages/components/src/font-size-picker/types.ts +++ b/packages/components/src/font-size-picker/types.ts @@ -1,3 +1,7 @@ +export type FontSizePickerMode = 'predefined' | 'custom' | 'both'; + +export type FontSizePickerType = 'select' | 'togglegroup' | 'custom'; + export type FontSizePickerProps = { /** * When set to `predefined`, the user will be only able to pick a font size @@ -7,7 +11,7 @@ export type FontSizePickerProps = { * * @default 'both' */ - pickerMode?: 'custom' | 'predefined' | 'both'; + pickerMode?: FontSizePickerMode; /** * _Note: this prop is deprecated. Please use the `pickerMode` prop instead._ * From 99495e487a93ee7e14d8770a798a490d25891a91 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Jul 2024 11:56:10 +0200 Subject: [PATCH 11/12] passive deprecation --- packages/components/src/font-size-picker/index.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index f2482b89ce8133..8356154da0f4d6 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -9,7 +9,6 @@ import type { ForwardedRef } from 'react'; import { __ } from '@wordpress/i18n'; import { settings } from '@wordpress/icons'; import { useState, forwardRef, useEffect } from '@wordpress/element'; -import deprecated from '@wordpress/deprecated'; /** * Internal dependencies @@ -113,15 +112,6 @@ const UnforwardedFontSizePicker = ( let computedPickerMode = pickerMode; if ( disableCustomFontSizes !== undefined ) { - deprecated( - '`disableCustomFontSizes` prop in wp.components.FontSizePicker', - { - since: '6.7', - version: '6.9', - alternative: '`pickerMode` prop', - } - ); - computedPickerMode = disableCustomFontSizes ? 'predefined' : 'both'; } From 79175aad8d02810c23de4037890e0d59f6e02e64 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Jul 2024 11:57:57 +0200 Subject: [PATCH 12/12] both => all --- packages/components/src/font-size-picker/README.md | 6 +++--- .../src/font-size-picker/font-size-picker-select.tsx | 2 +- packages/components/src/font-size-picker/index.tsx | 8 ++++---- packages/components/src/font-size-picker/test/index.tsx | 4 ++-- packages/components/src/font-size-picker/types.ts | 6 +++--- 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md index 3cbb71088f359b..3206cc7a7deb3e 100644 --- a/packages/components/src/font-size-picker/README.md +++ b/packages/components/src/font-size-picker/README.md @@ -73,12 +73,12 @@ If onChange is called without any parameter, it should reset the value, attendin - Required: Yes -### `pickerMode`: `'predefined' | 'custom' | 'both` +### `pickerMode`: `'predefined' | 'custom' | 'all` -When set to `predefined`, the user will be only able to pick a font size from the predefined list passed via the `fontSizes` prop. When set to `custom`, the user will be only able to choose a custom font size. When set to `both`, the user will be able to access both UIs through a toggle. +When set to `predefined`, the user will be only able to pick a font size from the predefined list passed via the `fontSizes` prop. When set to `custom`, the user will be only able to choose a custom font size. When set to `all`, the user will be able to access all UIs through a toggle. - Required: No -- Default: `'both'` +- Default: `'all'` ### `size`: `'default' | '__unstable-large'` diff --git a/packages/components/src/font-size-picker/font-size-picker-select.tsx b/packages/components/src/font-size-picker/font-size-picker-select.tsx index 8b33275753d10e..4799c3c95ffacb 100644 --- a/packages/components/src/font-size-picker/font-size-picker-select.tsx +++ b/packages/components/src/font-size-picker/font-size-picker-select.tsx @@ -59,7 +59,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => { __experimentalHint: hint, }; } ), - ...( pickerMode === 'both' ? [ CUSTOM_OPTION ] : [] ), + ...( pickerMode === 'all' ? [ CUSTOM_OPTION ] : [] ), ]; const selectedOption = value diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index 8356154da0f4d6..4cc50400d963b6 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -99,7 +99,7 @@ const UnforwardedFontSizePicker = ( fallbackFontSize, fontSizes = [], onChange, - pickerMode = 'both', + pickerMode = 'all', size = 'default', units: unitsProp = DEFAULT_UNITS, value, @@ -112,7 +112,7 @@ const UnforwardedFontSizePicker = ( let computedPickerMode = pickerMode; if ( disableCustomFontSizes !== undefined ) { - computedPickerMode = disableCustomFontSizes ? 'predefined' : 'both'; + computedPickerMode = disableCustomFontSizes ? 'predefined' : 'all'; } const selectedFontSize = fontSizes.find( @@ -173,8 +173,8 @@ const UnforwardedFontSizePicker = ( ) } - { /* Show toggle button only when both picker modes are enabled */ } - { computedPickerMode === 'both' && ( + { /* Show toggle button only when all picker modes are enabled */ } + { computedPickerMode === 'all' && ( { expect( onChange ).toHaveBeenCalledWith( '80px' ); } ); - it( 'does not allow custom values when the pickerMode mode is not "both"', () => { + it( 'does not allow custom values when the pickerMode mode is not "all"', () => { const { rerender } = render( { ).not.toBeInTheDocument(); rerender( - + ); expect( screen.getByRole( 'button', { name: 'Set custom size' } ) diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts index bd8ea09391038a..41da1ece9e5b40 100644 --- a/packages/components/src/font-size-picker/types.ts +++ b/packages/components/src/font-size-picker/types.ts @@ -1,4 +1,4 @@ -export type FontSizePickerMode = 'predefined' | 'custom' | 'both'; +export type FontSizePickerMode = 'predefined' | 'custom' | 'all'; export type FontSizePickerType = 'select' | 'togglegroup' | 'custom'; @@ -7,9 +7,9 @@ export type FontSizePickerProps = { * When set to `predefined`, the user will be only able to pick a font size * from the predefined list passed via the `fontSizes` prop. When set to * `custom`, the user will be only able to choose a custom font size. When - * set to `both`, the user will be able to access both UIs through a toggle. + * set to `all`, the user will be able to access all UIs through a toggle. * - * @default 'both' + * @default 'all' */ pickerMode?: FontSizePickerMode; /**