use incremental sequence of numbers as labels

WordPress · Dec 14, 2021 · be498f4 · be498f4
1 parent a2803ed
commit be498f4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -25,7 +25,7 @@
 
 -   Wrapped `Modal` in a `forwardRef` call ([#36831](https://github.com/WordPress/gutenberg/pull/36831)).
 -   Unify styles for `ColorIndicator` with how they appear in Global Styles ([#37028](https://github.com/WordPress/gutenberg/pull/37028))
--   Show a `T-shirt size` alias (S/M/L/XL/XXL) as a label of the font size, when we have at most five font sizes, where at least one the them contains a complex css value(clamp, var, etc..). We do this because complex css values cannot be calculated properly and the `T-shirt size` alias can help the user better mentally map the different available font sizes. ([#37038](https://github.com/WordPress/gutenberg/pull/37038))
+-   Show an incremental sequence of numbers (1/2/3/4/5) as a label of the font size, when we have at most five font sizes, where at least one the them contains a complex css value(clamp, var, etc..). We do this because complex css values cannot be calculated properly and the incremental sequence of numbers as labels can help the user better mentally map the different available font sizes. ([#37038](https://github.com/WordPress/gutenberg/pull/37038))
 
 ## 19.1.3 (2021-12-06)
 
@@ -74,14 +74,14 @@
 ### Enhancements
 
 -   Removed the separator shown between `ToggleGroupControl` items ([#35497](https://github.com/WordPress/gutenberg/pull/35497)).
--   The `ColorPicker` component property `onChangeComplete`, a function accepting a color object, was replaced with the property `onChange`, a function accepting a  string on  ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
+-   The `ColorPicker` component property `onChangeComplete`, a function accepting a color object, was replaced with the property `onChange`, a function accepting a string on ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
 -   The property `disableAlpha`, was removed from the `ColorPicker` component. Use the new opposite property `enableAlpha` instead ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
 
 ### Experimental
 
 -   Removed the `fieldset` wrapper from the `FontAppearanceControl` component ([35461](https://github.com/WordPress/gutenberg/pull/35461)).
 -   Refactored the `ToggleGroupControl` component's structure and embedded `ToggleGroupControlButton` directly into `ToggleGroupControlOption` ([#35600](https://github.com/WordPress/gutenberg/pull/35600)).
--   Added support for showing an experimental hint in `CustomSelectControl`  ([#35673](https://github.com/WordPress/gutenberg/pull/35673)).
+-   Added support for showing an experimental hint in `CustomSelectControl` ([#35673](https://github.com/WordPress/gutenberg/pull/35673)).
 
 ### Breaking Changes
 

diff --git a/packages/components/src/font-size-picker/test/index.js b/packages/components/src/font-size-picker/test/index.js
@@ -206,7 +206,7 @@ describe( 'FontSizePicker', () => {
 				expect( element.children ).toHaveLength( 2 );
 				expect( element.children[ 0 ].textContent ).toBe( '1.7' );
 			} );
-			it( 'should use `T-shirt` sizes aliases if we have complex css', () => {
+			it( 'should use incremental sequence of numbers as labels if we have complex css', () => {
 				const fontSizes = [
 					...options,
 					{
@@ -224,7 +224,7 @@ describe( 'FontSizePicker', () => {
 				const element = screen.getByLabelText( 'Large' );
 				expect( element ).toBeInTheDocument();
 				expect( element.children ).toHaveLength( 2 );
-				expect( element.children[ 0 ].textContent ).toBe( 'L' );
+				expect( element.children[ 0 ].textContent ).toBe( '3' );
 			} );
 		} );
 	} );

diff --git a/packages/components/src/font-size-picker/utils.js b/packages/components/src/font-size-picker/utils.js
@@ -16,12 +16,12 @@ const CUSTOM_FONT_SIZE_OPTION = {
 
 /**
  * In case we have at most five font sizes, where at least one the them
- * contain a complex css value(clamp, var, etc..) show a `T-shirt size`
- * alias as a label of the font size. We do this because complex css values
- * cannot be caluclated properly and the `T-shirt size` alias can help the
- * user better mentally map the different available font sizes.
+ * contain a complex css value(clamp, var, etc..) show a incremental sequence
+ * of numbers as a label of the font size. We do this because complex css values
+ * cannot be caluclated properly and the incremental sequence of numbers as labels
+ * can help the user better mentally map the different available font sizes.
  */
-const FONT_SIZES_ALIASES = [ 'S', 'M', 'L', 'XL', 'XXL' ];
+const FONT_SIZES_ALIASES = [ '1', '2', '3', '4', '5' ];
 
 /**
  * Helper util to split a font size to its numeric value