{
- 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 && (
+ } }
+ onSelectCustom={ () =>
+ setCurrentPickerType( 'custom' )
+ }
+ />
+ ) }
+
+ { currentPickerType === 'togglegroup' && (
) }
- { ! disableCustomFontSizes && showCustomValueControl && (
+
+ { currentPickerType === 'custom' && (
= ( {
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',
};
/**
diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx
index 9bb3b2d8677b69..20f47389f5e3db 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 "all"', () => {
+ 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 () => {
@@ -640,4 +654,10 @@ describe( 'FontSizePicker', () => {
expect( units[ 2 ] ).toHaveAccessibleName( 'ex' );
} );
}
+
+ describe( 'pickerModes', () => {
+ it( 'should pass', async () => {
+ expect( 5 ).toBeGreaterThan( 4 );
+ } );
+ } );
} );
diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts
index 6b4ed4b7ee75a5..41da1ece9e5b40 100644
--- a/packages/components/src/font-size-picker/types.ts
+++ b/packages/components/src/font-size-picker/types.ts
@@ -1,9 +1,26 @@
+export type FontSizePickerMode = 'predefined' | 'custom' | 'all';
+
+export type FontSizePickerType = 'select' | 'togglegroup' | 'custom';
+
export type FontSizePickerProps = {
/**
- * 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.
+ * 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.
+ *
+ * @default 'all'
+ */
+ pickerMode?: FontSizePickerMode;
+ /**
+ * _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.
*
* @default false
+ * @deprecated
*/
disableCustomFontSizes?: boolean;
/**
@@ -29,7 +46,7 @@ export type FontSizePickerProps = {
/**
* Available units for custom font size selection.
*
- * @default `[ 'px', 'em', 'rem' ]`
+ * @default [ 'px', 'em', 'rem' ]
*/
units?: string[];
/**
@@ -37,8 +54,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
*/
@@ -46,7 +63,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
*/
@@ -98,9 +115,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;