[Components] Update FontSize control (#35395)

* temp

* show custom control on `custom` select option + show hints only if is simple css value

* switch conditionally to ToggleGroupControl

* add story part 1

* Update comments.

* fix styles + rename var

* update README

* small fixes and update unit tests

* update e2e tests part 1

* update current e2e tests + add aria label to toggle group button

* update toggle custom size label

* add tests + reorganise them

* Polish icon size and position, polish font size in dropdown.

Co-authored-by: Matías Ventura <mv@matiasventura.com>
Co-authored-by: jasmussen <joen@automattic.com>

packages/components/src/custom-select-control/index.js

@@ -14,7 +14,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { Button, VisuallyHidden } from '../';
 
-const itemToString = ( item ) => item && item.name;
+const itemToString = ( item ) => item?.name;
 // This is needed so that in Windows, where
 // the menu does not necessarily open on
 // key up/down, you can still switch between
@@ -98,14 +98,9 @@ export default function CustomSelectControl( {
 		className: 'components-custom-select-control__menu',
 		'aria-hidden': ! isOpen,
 	} );
-	// We need this here, because the null active descendant is not
-	// fully ARIA compliant.
+	// We need this here, because the null active descendant is not fully ARIA compliant.
 	if (
-		menuProps[ 'aria-activedescendant' ] &&
-		menuProps[ 'aria-activedescendant' ].slice(
-			0,
-			'downshift-null'.length
-		) === 'downshift-null'
+		menuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )
 	) {
 		delete menuProps[ 'aria-activedescendant' ];
 	}
@@ -161,12 +156,18 @@ export default function CustomSelectControl( {
 									{
 										'is-highlighted':
 											index === highlightedIndex,
+										'has-hint': !! item.hint,
 									}
 								),
 								style: item.style,
 							} ) }
 						>
 							{ item.name }
+							{ item.hint && (
+								<span className="components-custom-select-control__item-hint">
+									{ item.hint }
+								</span>
+							) }
 							{ item === selectedItem && (
 								<Icon
 									icon={ check }

packages/components/src/custom-select-control/style.scss

@@ -58,19 +58,25 @@
 
 .components-custom-select-control__item {
 	align-items: center;
-	display: flex;
+	display: grid;
+	grid-template-columns: auto auto;
 	list-style-type: none;
 	padding: $grid-unit-10;
 	cursor: default;
 	line-height: $icon-size + $grid-unit-05;
 
-
+	&.has-hint {
+		grid-template-columns: auto auto 30px;
+	}
 	&.is-highlighted {
 		background: $gray-300;
 	}
-
+	.components-custom-select-control__item-hint {
+		color: $gray-700;
+		text-align: right;
+		padding-right: $grid-unit-05;
+	}
 	.components-custom-select-control__item-icon {
-		margin-right: 0;
 		margin-left: auto;
 	}
 

packages/components/src/font-size-picker/README.md

@@ -97,3 +97,12 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.
 -   Type: `Boolean`
 -   Required: no
 -   Default: `false`
+
+### withReset
+
+If `true`, a reset button will be displayed alongside the predefined and custom
+font size fields.
+
+-   Type: `Boolean`
+-   Required: no
+-   Default: `true`