From f0732b43ffe910266fea5a074a7c94a8841ecc6e Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 6 Oct 2021 12:57:24 +0300 Subject: [PATCH 01/13] temp --- .../src/custom-select-control/index.js | 17 +- .../src/custom-select-control/style.scss | 14 +- .../components/src/font-size-picker/index.js | 185 ++++++++++++------ .../src/font-size-picker/style.scss | 19 +- 4 files changed, 155 insertions(+), 80 deletions(-) diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js index 0c40f485594e75..5fa74367aa7d45 100644 --- a/packages/components/src/custom-select-control/index.js +++ b/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 && ( + + { item.hint } + + ) } { item === selectedItem && ( font.size === value ) || + CUSTOM_FONT_SIZE_OPTION + ); +} function getSelectValueFromFontSize( fontSizes, value ) { if ( value ) { @@ -36,8 +54,10 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) { return null; } optionsArray = [ + // TODO: check what to do with `default` option. { slug: DEFAULT_FONT_SIZE, name: __( 'Default' ) }, ...optionsArray, + // TODO: check the `custom` one.. probably remove as well ...( disableCustomFontSizes ? [] : [ { slug: CUSTOM_FONT_SIZE, name: __( 'Custom' ) } ] ), @@ -46,9 +66,7 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) { key: option.slug, name: option.name, size: option.size, - style: { - fontSize: `min( ${ option.size }, ${ MAX_FONT_SIZE_DISPLAY } )`, - }, + hint: option.size && parseInt( option.size ), } ) ); } @@ -60,6 +78,7 @@ function FontSizePicker( onChange, value, withSlider = false, + withReset = true, }, ref ) { @@ -67,16 +86,13 @@ function FontSizePicker( isString( value ) || ( fontSizes[ 0 ] && isString( fontSizes[ 0 ].size ) ); - let noUnitsValue; - if ( ! hasUnits ) { - noUnitsValue = value; - } else { - noUnitsValue = parseInt( value ); - } + const noUnitsValue = ! hasUnits ? value : parseInt( value ); + // TODO: check the below logic const isPixelValue = isNumber( value ) || ( isString( value ) && value.endsWith( 'px' ) ); + // TODO: check to use supplied available font size units const units = useCustomUnits( { availableUnits: [ 'px', 'em', 'rem' ], } ); @@ -85,6 +101,12 @@ function FontSizePicker( () => getSelectOptions( fontSizes, disableCustomFontSizes ), [ fontSizes, disableCustomFontSizes ] ); + const selectedOption = getSelectedOption( fontSizes, value ); + const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE; + // const isDefaultValue = selectedOption.slug === DEFAULT_FONT_SIZE; + const [ showCustomValueControl, setShowCustomValueControl ] = useState( + isCustomValue + ); if ( ! options ) { return null; @@ -98,16 +120,48 @@ function FontSizePicker( options.find( ( option ) => option.key === selectedFontSizeSlug ).name ); + const baseClassName = 'components-font-size-picker'; + const getHeaderHint = ( _selectedOption, _showCustomValueControl ) => { + if ( _showCustomValueControl ) { + return __( 'custom' ); + } + return _selectedOption ? selectedOption.size : 'hi'; + }; + const headerHint = getHeaderHint( selectedOption, showCustomValueControl ); return ( -
+
{ __( 'Font size' ) } -
- { fontSizes.length > 0 && ( + + + { __( 'Size' ) } + { headerHint && ( + + ({ headerHint }) + + ) } + + { ! disableCustomFontSizes && ( + + + + ) } + +
+ { fontSizes.length > 0 && ! showCustomValueControl && ( option.key === selectedFontSizeSlug ) } onChange={ ( { selectedItem } ) => { - if ( hasUnits ) { - onChange( selectedItem.size ); - } else { - onChange( Number( selectedItem.size ) ); - } + onChange( + hasUnits + ? selectedItem.size + : Number( selectedItem.size ) + ); } } + hideLabelFromVision /> ) } - { ! withSlider && ! disableCustomFontSizes && ( - { - if ( 0 === parseFloat( nextSize ) || ! nextSize ) { - onChange( undefined ); - } else { - onChange( - hasUnits - ? nextSize - : parseInt( nextSize, 10 ) - ); - } - } } - units={ hasUnits ? units : false } - /> - ) } - + { ! withSlider && + ! disableCustomFontSizes && + showCustomValueControl && ( + + + { + if ( + 0 === parseFloat( nextSize ) || + ! nextSize + ) { + onChange( undefined ); + } else { + onChange( + hasUnits + ? nextSize + : parseInt( nextSize, 10 ) + ); + } + } } + units={ hasUnits ? units : false } + /> + + { withReset && ( + + + + ) } + + ) }
{ withSlider && ( ) }
diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss index 690942858c9d37..d2a5c2d8855b17 100644 --- a/packages/components/src/font-size-picker/style.scss +++ b/packages/components/src/font-size-picker/style.scss @@ -1,12 +1,16 @@ +.components-font-size-picker__header { + &__hint { + padding-left: $grid-unit-05; + font-weight: 200; + } +} .components-font-size-picker__controls { max-width: $sidebar-width - ( 2 * $grid-unit-20 ); - display: flex; - flex-wrap: wrap; align-items: center; margin-bottom: $grid-unit-30; .components-unit-control-wrapper { - margin-right: $grid-unit-10; + margin-top: $grid-unit-10; // to be removed... .components-input-control__label { font-weight: 300; @@ -16,7 +20,7 @@ } .components-custom-select-control__button { - min-width: 120px; + width: 100%; } // Apply the same height as the isSmall Reset button. @@ -44,14 +48,9 @@ } } - // Allow the font-size picker dropdown to grow in width. - .components-font-size-picker__select { - margin-right: $grid-unit-10; - } - .components-color-palette__clear { height: 30px; - margin-top: 26px; + margin-top: $grid-unit-10; } } From b96d06db5cea3558915f0afe46f36622ab33812a Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 7 Oct 2021 14:21:15 +0300 Subject: [PATCH 02/13] show custom control on `custom` select option + show hints only if is simple css value --- .../components/src/font-size-picker/index.js | 30 +++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index c1887cc776372f..9f3bd5ce85123b 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -66,10 +66,25 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) { key: option.slug, name: option.name, size: option.size, - hint: option.size && parseInt( option.size ), + hint: + option.size && + isSimpleCssValue( option.size ) && + parseInt( option.size ), } ) ); } +/** + * Some themes use css vars for their font sizes, so until we + * have the way of calculating them don't display them. + * + * @param {*} value The value that is checked. + * @return {boolean} Whether the value is a simple css value. + */ +function isSimpleCssValue( value ) { + const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i; + return sizeRegex.test( value ); +} + function FontSizePicker( { fallbackFontSize, @@ -121,11 +136,19 @@ function FontSizePicker( ); const baseClassName = 'components-font-size-picker'; + // TODO: check to remove function or put it outside the component.. const getHeaderHint = ( _selectedOption, _showCustomValueControl ) => { if ( _showCustomValueControl ) { return __( 'custom' ); } - return _selectedOption ? selectedOption.size : 'hi'; + // TODO take into account if control is `select` or `toggleGroup`.. + let hint = _selectedOption?.size; + if ( selectedOption.slug === CUSTOM_FONT_SIZE ) { + hint = value; + } + if ( isSimpleCssValue( hint ) ) { + return hint; + } }; const headerHint = getHeaderHint( selectedOption, showCustomValueControl ); return ( @@ -174,6 +197,9 @@ function FontSizePicker( ? selectedItem.size : Number( selectedItem.size ) ); + if ( selectedItem.key === CUSTOM_FONT_SIZE ) { + setShowCustomValueControl( true ); + } } } hideLabelFromVision /> From 13c98e558f8d2ca42479f12b51ea2858667421e1 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 8 Oct 2021 12:40:25 +0300 Subject: [PATCH 03/13] switch conditionally to ToggleGroupControl --- .../components/src/font-size-picker/index.js | 225 ++++++++---------- .../src/font-size-picker/style.scss | 4 +- .../components/src/font-size-picker/utils.js | 100 ++++++++ 3 files changed, 205 insertions(+), 124 deletions(-) create mode 100644 packages/components/src/font-size-picker/utils.js diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index 9f3bd5ce85123b..9bf90ed36f5b32 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { isNumber, isString } from 'lodash'; - /** * WordPress dependencies */ @@ -19,71 +14,17 @@ import { Flex, FlexItem } from '../flex'; import { default as UnitControl, useCustomUnits } from '../unit-control'; import CustomSelectControl from '../custom-select-control'; import { VisuallyHidden } from '../visually-hidden'; - -const DEFAULT_FONT_SIZE = 'default'; -const DEFAULT_FONT_SIZE_OPTION = { - slug: DEFAULT_FONT_SIZE, - name: __( 'Default' ), -}; -const CUSTOM_FONT_SIZE = 'custom'; -const CUSTOM_FONT_SIZE_OPTION = { - slug: CUSTOM_FONT_SIZE, - name: __( 'Custom' ), -}; - -function getSelectedOption( fontSizes, value ) { - if ( ! value ) { - return DEFAULT_FONT_SIZE_OPTION; - } - return ( - fontSizes.find( ( font ) => font.size === value ) || - CUSTOM_FONT_SIZE_OPTION - ); -} - -function getSelectValueFromFontSize( fontSizes, value ) { - if ( value ) { - const fontSizeValue = fontSizes.find( ( font ) => font.size === value ); - return fontSizeValue ? fontSizeValue.slug : CUSTOM_FONT_SIZE; - } - return DEFAULT_FONT_SIZE; -} - -function getSelectOptions( optionsArray, disableCustomFontSizes ) { - if ( disableCustomFontSizes && ! optionsArray.length ) { - return null; - } - optionsArray = [ - // TODO: check what to do with `default` option. - { slug: DEFAULT_FONT_SIZE, name: __( 'Default' ) }, - ...optionsArray, - // TODO: check the `custom` one.. probably remove as well - ...( disableCustomFontSizes - ? [] - : [ { slug: CUSTOM_FONT_SIZE, name: __( 'Custom' ) } ] ), - ]; - return optionsArray.map( ( option ) => ( { - key: option.slug, - name: option.name, - size: option.size, - hint: - option.size && - isSimpleCssValue( option.size ) && - parseInt( option.size ), - } ) ); -} - -/** - * Some themes use css vars for their font sizes, so until we - * have the way of calculating them don't display them. - * - * @param {*} value The value that is checked. - * @return {boolean} Whether the value is a simple css value. - */ -function isSimpleCssValue( value ) { - const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i; - return sizeRegex.test( value ); -} +import { + ToggleGroupControl, + ToggleGroupControlOption, +} from '../toggle-group-control'; +import { + getFontSizeOptions, + getSelectedOption, + splitValueAndUnitFromSize, + isSimpleCssValue, + CUSTOM_FONT_SIZE, +} from './utils'; function FontSizePicker( { @@ -97,60 +38,78 @@ function FontSizePicker( }, ref ) { - const hasUnits = - isString( value ) || - ( fontSizes[ 0 ] && isString( fontSizes[ 0 ].size ) ); - + const hasUnits = [ typeof value, typeof fontSizes?.[ 0 ].size ].includes( + 'string' + ); const noUnitsValue = ! hasUnits ? value : parseInt( value ); - - // TODO: check the below logic - const isPixelValue = - isNumber( value ) || ( isString( value ) && value.endsWith( 'px' ) ); - - // TODO: check to use supplied available font size units + const isPixelValue = typeof value === 'number' || value?.endsWith?.( 'px' ); const units = useCustomUnits( { availableUnits: [ 'px', 'em', 'rem' ], } ); + /** + * We use the select control if the available font sizes are `more` than five + * and when are `less` than five but there is at least on font size that has + * not a simple css var (eg. 'calc', 'var', etc..). + * + * This will need to be updated when we'll have the way of calculating them. + */ + const useSelectControl = + fontSizes?.length > 5 || + fontSizes.some( ( { size } ) => ! isSimpleCssValue( size ) ); + const options = useMemo( - () => getSelectOptions( fontSizes, disableCustomFontSizes ), - [ fontSizes, disableCustomFontSizes ] + () => + getFontSizeOptions( + useSelectControl, + fontSizes, + disableCustomFontSizes + ), + [ useSelectControl, fontSizes, disableCustomFontSizes ] ); const selectedOption = getSelectedOption( fontSizes, value ); const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE; - // const isDefaultValue = selectedOption.slug === DEFAULT_FONT_SIZE; const [ showCustomValueControl, setShowCustomValueControl ] = useState( - isCustomValue + ! disableCustomFontSizes && isCustomValue ); + const headerHint = useMemo( () => { + if ( showCustomValueControl ) { + return `(${ __( 'custom' ) })`; + } + /** + * If we have a custom value that is not available in + * the font sizes, show it as a hint if a simple css value. + */ + if ( isCustomValue ) { + return isSimpleCssValue( value ) && `(${ value })`; + } + if ( useSelectControl ) { + return ( + isSimpleCssValue( selectedOption?.size ) && + `(${ selectedOption?.size })` + ); + } + // Calculate the `hint` for toggle group control. + let hint = selectedOption.name; + if ( typeof selectedOption.size === 'string' ) { + const [ , unit ] = splitValueAndUnitFromSize( selectedOption.size ); + hint += `(${ unit })`; + } + return hint; + }, [ showCustomValueControl, selectedOption?.slug, value, isCustomValue ] ); if ( ! options ) { return null; } - const selectedFontSizeSlug = getSelectValueFromFontSize( fontSizes, value ); - + // This is used for select control only. We need to add support + // for ToggleGroupControl. const currentFontSizeSR = sprintf( // translators: %s: Currently selected font size. __( 'Currently selected font size: %s' ), - options.find( ( option ) => option.key === selectedFontSizeSlug ).name + selectedOption.name ); - const baseClassName = 'components-font-size-picker'; - // TODO: check to remove function or put it outside the component.. - const getHeaderHint = ( _selectedOption, _showCustomValueControl ) => { - if ( _showCustomValueControl ) { - return __( 'custom' ); - } - // TODO take into account if control is `select` or `toggleGroup`.. - let hint = _selectedOption?.size; - if ( selectedOption.slug === CUSTOM_FONT_SIZE ) { - hint = value; - } - if ( isSimpleCssValue( hint ) ) { - return hint; - } - }; - const headerHint = getHeaderHint( selectedOption, showCustomValueControl ); return (
{ __( 'Font size' ) } @@ -162,7 +121,7 @@ function FontSizePicker( { __( 'Size' ) } { headerHint && ( - ({ headerHint }) + { headerHint } ) } @@ -182,27 +141,51 @@ function FontSizePicker( ) }
- { fontSizes.length > 0 && ! showCustomValueControl && ( - option.key === selectedOption.slug + ) } + onChange={ ( { selectedItem } ) => { + onChange( + hasUnits + ? selectedItem.size + : Number( selectedItem.size ) + ); + if ( selectedItem.key === CUSTOM_FONT_SIZE ) { + setShowCustomValueControl( true ); + } + } } + /> + ) } + { ! useSelectControl && ! showCustomValueControl && ( + option.key === selectedFontSizeSlug - ) } - onChange={ ( { selectedItem } ) => { + hideLabelFromVision + value={ value } + onChange={ ( newValue ) => { + // TODO: related to `reset`. Should we show the button? onChange( - hasUnits - ? selectedItem.size - : Number( selectedItem.size ) + hasUnits ? newValue : Number( newValue ) ); - if ( selectedItem.key === CUSTOM_FONT_SIZE ) { - setShowCustomValueControl( true ); - } } } - hideLabelFromVision - /> + isBlock + > + { options.map( ( option ) => ( + + ) ) } + ) } { ! withSlider && ! disableCustomFontSizes && diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss index d2a5c2d8855b17..76e16f420a9aba 100644 --- a/packages/components/src/font-size-picker/style.scss +++ b/packages/components/src/font-size-picker/style.scss @@ -7,11 +7,10 @@ .components-font-size-picker__controls { max-width: $sidebar-width - ( 2 * $grid-unit-20 ); align-items: center; + margin-top: $grid-unit-10; margin-bottom: $grid-unit-30; .components-unit-control-wrapper { - margin-top: $grid-unit-10; // to be removed... - .components-input-control__label { font-weight: 300; padding-bottom: 0 !important; @@ -50,7 +49,6 @@ .components-color-palette__clear { height: 30px; - margin-top: $grid-unit-10; } } diff --git a/packages/components/src/font-size-picker/utils.js b/packages/components/src/font-size-picker/utils.js new file mode 100644 index 00000000000000..038ce9efda361e --- /dev/null +++ b/packages/components/src/font-size-picker/utils.js @@ -0,0 +1,100 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +const DEFAULT_FONT_SIZE = 'default'; +const DEFAULT_FONT_SIZE_OPTION = { + slug: DEFAULT_FONT_SIZE, + name: __( 'Default' ), +}; +export const CUSTOM_FONT_SIZE = 'custom'; +const CUSTOM_FONT_SIZE_OPTION = { + slug: CUSTOM_FONT_SIZE, + name: __( 'Custom' ), +}; + +/** + * Helper util to split a font size to its numeric value + * and its `unit`, if exists. + * + * @param {string|number} size Font size. + * @return {[number, string]} An array with the numeric value and the unit if exists. + */ +export function splitValueAndUnitFromSize( size ) { + /** + * The first matched result is ignored as it's the left + * hand side of the capturing group in the regex. + */ + const [ , numericValue, unit ] = size.split( /(\d+)/ ); + return [ numericValue, unit ]; +} + +/** + * Some themes use css vars for their font sizes, so until we + * have the way of calculating them don't display them. + * + * @param {string|number} value The value that is checked. + * @return {boolean} Whether the value is a simple css value. + */ +export function isSimpleCssValue( value ) { + const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i; + return sizeRegex.test( value ); +} + +/** + * Return font size options in the proper format depending + * on the currently used control (select, toggle group). + * + * @param {boolean} useSelectControl Whether to use a select control. + * @param {Object[]} optionsArray Array of available font sizes objects. + * @param {*} disableCustomFontSizes Flag that indicates if custom font sizes are disabled. + * @return {Object[]|null} Array of font sizes in proper format for the used control. + */ +export function getFontSizeOptions( + useSelectControl, + optionsArray, + disableCustomFontSizes +) { + if ( disableCustomFontSizes && ! optionsArray.length ) { + return null; + } + return useSelectControl + ? getSelectOptions( optionsArray, disableCustomFontSizes ) + : getToggleGroupOptions( optionsArray ); +} + +function getSelectOptions( optionsArray, disableCustomFontSizes ) { + const options = [ + DEFAULT_FONT_SIZE_OPTION, + ...optionsArray, + ...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ), + ]; + return options.map( ( { slug, name, size } ) => ( { + key: slug, + name, + size, + hint: size && isSimpleCssValue( size ) && parseInt( size ), + } ) ); +} + +function getToggleGroupOptions( optionsArray ) { + return optionsArray.map( ( { slug, size } ) => { + let label = size; + if ( typeof size === 'string' ) { + const [ numericValue ] = splitValueAndUnitFromSize( size ); + label = numericValue; + } + return { key: slug, value: size, label }; + } ); +} + +export function getSelectedOption( fontSizes, value ) { + if ( ! value ) { + return DEFAULT_FONT_SIZE_OPTION; + } + return ( + fontSizes.find( ( font ) => font.size === value ) || + CUSTOM_FONT_SIZE_OPTION + ); +} From 9b2e02de1cd12d3f3af4a6f95e4443a1cecd03c9 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 8 Oct 2021 13:06:53 +0300 Subject: [PATCH 04/13] add story part 1 --- .../src/font-size-picker/stories/index.js | 55 ++++++++++++++++++- 1 file changed, 52 insertions(+), 3 deletions(-) diff --git a/packages/components/src/font-size-picker/stories/index.js b/packages/components/src/font-size-picker/stories/index.js index b90fc69a0b1520..050ea47aa851de 100644 --- a/packages/components/src/font-size-picker/stories/index.js +++ b/packages/components/src/font-size-picker/stories/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { number, object } from '@storybook/addon-knobs'; +import { number, object, boolean } from '@storybook/addon-knobs'; /** * WordPress dependencies @@ -18,8 +18,8 @@ export default { component: FontSizePicker, }; -const FontSizePickerWithState = ( { ...props } ) => { - const [ fontSize, setFontSize ] = useState( 16 ); +const FontSizePickerWithState = ( { initialValue, ...props } ) => { + const [ fontSize, setFontSize ] = useState( initialValue || 16 ); return ( { /> ); }; + +export const differentControlBySize = () => { + const options = [ + { + name: 'Tiny', + slug: 'tiny', + size: 8, + }, + { + name: 'Small', + slug: 'small', + size: 12, + }, + { + name: 'Normal', + slug: 'normal', + size: 16, + }, + { + name: 'Big', + slug: 'big', + size: 26, + }, + { + name: 'Bigger', + slug: 'bigger', + size: 30, + }, + { + name: 'Huge', + slug: 'huge', + size: 36, + }, + ]; + const optionsWithUnits = options.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 ( + + ); +}; From e7c292eeae40e631f9c8aff7c8830b21610294c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Fri, 8 Oct 2021 17:13:44 +0200 Subject: [PATCH 05/13] Update comments. --- .../components/src/font-size-picker/index.js | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index 9bf90ed36f5b32..01e208c69214ef 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -47,13 +47,11 @@ function FontSizePicker( availableUnits: [ 'px', 'em', 'rem' ], } ); - /** - * We use the select control if the available font sizes are `more` than five - * and when are `less` than five but there is at least on font size that has - * not a simple css var (eg. 'calc', 'var', etc..). - * - * This will need to be updated when we'll have the way of calculating them. - */ + // The main font size UI displays a toggle group when the presets are less + // than six and a select control when they are more. + // + // A select control is also used when the value of a preset cannot be + // immediately computed (eg. 'calc', 'var'). const useSelectControl = fontSizes?.length > 5 || fontSizes.some( ( { size } ) => ! isSimpleCssValue( size ) ); @@ -74,12 +72,11 @@ function FontSizePicker( ); const headerHint = useMemo( () => { if ( showCustomValueControl ) { - return `(${ __( 'custom' ) })`; + return `(${ __( 'Custom' ) })`; } - /** - * If we have a custom value that is not available in - * the font sizes, show it as a hint if a simple css value. - */ + + // If we have a custom value that is not available in the font sizes, + // show it as a hint as long as it's a simple CSS value. if ( isCustomValue ) { return isSimpleCssValue( value ) && `(${ value })`; } From e666227111bad0f398e2e73c57d942e26fbf0026 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 12 Oct 2021 12:36:27 +0300 Subject: [PATCH 06/13] fix styles + rename var --- packages/components/src/font-size-picker/index.js | 12 ++++++------ packages/components/src/font-size-picker/style.scss | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index 01e208c69214ef..b77ce92af437c4 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -52,18 +52,18 @@ function FontSizePicker( // // A select control is also used when the value of a preset cannot be // immediately computed (eg. 'calc', 'var'). - const useSelectControl = + const shouldUseSelectControl = fontSizes?.length > 5 || fontSizes.some( ( { size } ) => ! isSimpleCssValue( size ) ); const options = useMemo( () => getFontSizeOptions( - useSelectControl, + shouldUseSelectControl, fontSizes, disableCustomFontSizes ), - [ useSelectControl, fontSizes, disableCustomFontSizes ] + [ shouldUseSelectControl, fontSizes, disableCustomFontSizes ] ); const selectedOption = getSelectedOption( fontSizes, value ); const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE; @@ -80,7 +80,7 @@ function FontSizePicker( if ( isCustomValue ) { return isSimpleCssValue( value ) && `(${ value })`; } - if ( useSelectControl ) { + if ( shouldUseSelectControl ) { return ( isSimpleCssValue( selectedOption?.size ) && `(${ selectedOption?.size })` @@ -139,7 +139,7 @@ function FontSizePicker(
{ !! fontSizes.length && - useSelectControl && + shouldUseSelectControl && ! showCustomValueControl && ( ) } - { ! useSelectControl && ! showCustomValueControl && ( + { ! shouldUseSelectControl && ! showCustomValueControl && ( Date: Wed, 13 Oct 2021 16:30:42 +0300 Subject: [PATCH 07/13] update README --- packages/components/src/font-size-picker/README.md | 9 +++++++++ packages/components/src/font-size-picker/index.js | 1 - 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md index 0b9f050394cf87..5e95dfa51580ce 100644 --- a/packages/components/src/font-size-picker/README.md +++ b/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` diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index b77ce92af437c4..5f99261da406b8 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -168,7 +168,6 @@ function FontSizePicker( hideLabelFromVision value={ value } onChange={ ( newValue ) => { - // TODO: related to `reset`. Should we show the button? onChange( hasUnits ? newValue : Number( newValue ) ); From 4c3b875f69d908b074d6c741dd37aa93bbefbe3c Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 13 Oct 2021 17:50:15 +0300 Subject: [PATCH 08/13] small fixes and update unit tests --- packages/components/src/font-size-picker/index.js | 8 +++++--- packages/components/src/font-size-picker/test/index.js | 9 +++++++++ 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index 5f99261da406b8..e320e576b9f458 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -38,7 +38,7 @@ function FontSizePicker( }, ref ) { - const hasUnits = [ typeof value, typeof fontSizes?.[ 0 ].size ].includes( + const hasUnits = [ typeof value, typeof fontSizes?.[ 0 ]?.size ].includes( 'string' ); const noUnitsValue = ! hasUnits ? value : parseInt( value ); @@ -53,7 +53,7 @@ function FontSizePicker( // A select control is also used when the value of a preset cannot be // immediately computed (eg. 'calc', 'var'). const shouldUseSelectControl = - fontSizes?.length > 5 || + fontSizes.length > 5 || fontSizes.some( ( { size } ) => ! isSimpleCssValue( size ) ); const options = useMemo( @@ -125,6 +125,8 @@ function FontSizePicker( { ! disableCustomFontSizes && ( + /> ) } diff --git a/packages/components/src/font-size-picker/test/index.js b/packages/components/src/font-size-picker/test/index.js index f26d6144f930c9..daa9c4116dca11 100644 --- a/packages/components/src/font-size-picker/test/index.js +++ b/packages/components/src/font-size-picker/test/index.js @@ -13,6 +13,13 @@ const getUnitSelect = () => const getUnitLabel = () => document.body.querySelector( '.components-unit-control__unit-label' ); +const toggleCustomInput = () => { + const toggleCustom = screen.getByLabelText( 'Toggle custom size display', { + selector: 'button', + } ); + fireEvent.click( toggleCustom ); +}; + describe( 'FontSizePicker', () => { describe( 'onChange values', () => { it( 'should not use units when the initial value is a number', () => { @@ -84,6 +91,7 @@ describe( 'FontSizePicker', () => { /> ); + toggleCustomInput(); const unitSelect = getUnitSelect(); const unitLabel = getUnitLabel(); const input = screen.getByLabelText( 'Custom', { @@ -119,6 +127,7 @@ describe( 'FontSizePicker', () => { /> ); + toggleCustomInput(); const unitSelect = getUnitSelect(); const unitLabel = getUnitLabel(); const input = screen.getByLabelText( 'Custom', { From fe2e84452647fa6d0b72e16968fe383b6a9cfe25 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 13 Oct 2021 19:35:30 +0300 Subject: [PATCH 09/13] update e2e tests part 1 --- .../__snapshots__/editor-modes.test.js.snap | 7 ---- .../editor/various/change-detection.test.js | 24 ++++---------- .../specs/editor/various/editor-modes.test.js | 33 +++++++++---------- .../specs/widgets/customizing-widgets.test.js | 12 +++---- 4 files changed, 28 insertions(+), 48 deletions(-) delete mode 100644 packages/e2e-tests/specs/editor/various/__snapshots__/editor-modes.test.js.snap diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/editor-modes.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/editor-modes.test.js.snap deleted file mode 100644 index 8b5044aeff308a..00000000000000 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/editor-modes.test.js.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Editing modes (visual/HTML) saves content when using the shortcut in the Code Editor 1`] = ` -" -

Hi world!

-" -`; diff --git a/packages/e2e-tests/specs/editor/various/change-detection.test.js b/packages/e2e-tests/specs/editor/various/change-detection.test.js index d3694734d2db5e..0d92f96e1f0fe3 100644 --- a/packages/e2e-tests/specs/editor/various/change-detection.test.js +++ b/packages/e2e-tests/specs/editor/various/change-detection.test.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { first } from 'lodash'; - /** * WordPress dependencies */ @@ -15,7 +10,6 @@ import { saveDraft, openDocumentSettingsSidebar, isCurrentURL, - pressKeyTimes, } from '@wordpress/e2e-test-utils'; describe( 'Change detection', () => { @@ -371,8 +365,6 @@ describe( 'Change detection', () => { } ); it( 'consecutive edits to the same attribute should mark the post as dirty after a save', async () => { - const FONT_SIZE_LABEL_SELECTOR = - "//label[contains(text(), 'Font size')]"; // Open the sidebar block settings. await openDocumentSettingsSidebar(); await page.click( '.edit-post-sidebar__panel-tab[data-label="Block"]' ); @@ -387,11 +379,12 @@ describe( 'Change detection', () => { pressKeyWithModifier( 'primary', 'S' ), ] ); - // Increase the paragraph's font size. + // Change the paragraph's `drop cap`. await page.click( '[data-type="core/paragraph"]' ); - await first( await page.$x( FONT_SIZE_LABEL_SELECTOR ) ).click(); - await pressKeyTimes( 'ArrowDown', 2 ); - await page.keyboard.press( 'Enter' ); + const [ dropCapToggle ] = await page.$x( + "//label[contains(text(), 'Drop cap')]" + ); + await dropCapToggle.click(); await page.click( '[data-type="core/paragraph"]' ); // Check that the post is dirty. @@ -403,12 +396,9 @@ describe( 'Change detection', () => { pressKeyWithModifier( 'primary', 'S' ), ] ); - // Increase the paragraph's font size again. - await page.click( '[data-type="core/paragraph"]' ); - await first( await page.$x( FONT_SIZE_LABEL_SELECTOR ) ).click(); - await pressKeyTimes( 'ArrowDown', 3 ); - await page.keyboard.press( 'Enter' ); + // Change the paragraph's `drop cap` again. await page.click( '[data-type="core/paragraph"]' ); + await dropCapToggle.click(); // Check that the post is dirty. await page.waitForSelector( '.editor-post-save-draft' ); diff --git a/packages/e2e-tests/specs/editor/various/editor-modes.test.js b/packages/e2e-tests/specs/editor/various/editor-modes.test.js index 01d6137ae89055..e8817f0566817c 100644 --- a/packages/e2e-tests/specs/editor/various/editor-modes.test.js +++ b/packages/e2e-tests/specs/editor/various/editor-modes.test.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { first } from 'lodash'; - /** * WordPress dependencies */ @@ -57,12 +52,13 @@ describe( 'Editing modes (visual/HTML)', () => { await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Edit as HTML' ); - // The font size picker for the paragraph block should appear, even in + // The `drop cap` toggle for the paragraph block should appear, even in // HTML editing mode. - const fontSizePicker = await page.$x( - "//label[contains(text(), 'Font size')]" + const dropCapToggle = await page.$x( + "//label[contains(text(), 'Drop cap')]" ); - expect( fontSizePicker ).toHaveLength( 1 ); + + expect( dropCapToggle ).toHaveLength( 1 ); } ); it( 'should update HTML in HTML mode when sidebar is used', async () => { @@ -77,12 +73,11 @@ describe( 'Editing modes (visual/HTML)', () => { ); expect( htmlBlockContent ).toEqual( '

Hello world!

' ); - // Change the font size using the sidebar. - await first( - await page.$x( "//label[contains(text(), 'Font size')]" ) - ).click(); - await pressKeyTimes( 'ArrowDown', 4 ); - await page.keyboard.press( 'Enter' ); + // Change the `drop cap` using the sidebar. + const [ dropCapToggle ] = await page.$x( + "//label[contains(text(), 'Drop cap')]" + ); + await dropCapToggle.click(); // Make sure the HTML content updated. htmlBlockContent = await page.$eval( @@ -90,7 +85,7 @@ describe( 'Editing modes (visual/HTML)', () => { ( node ) => node.textContent ); expect( htmlBlockContent ).toEqual( - '

Hello world!

' + '

Hello world!

' ); } ); @@ -152,6 +147,10 @@ describe( 'Editing modes (visual/HTML)', () => { await switchEditorModeTo( 'Visual' ); - expect( await getCurrentPostContent() ).toMatchSnapshot(); + expect( await getCurrentPostContent() ).toMatchInlineSnapshot( ` + " +

Hi world!

+ " + ` ); } ); } ); diff --git a/packages/e2e-tests/specs/widgets/customizing-widgets.test.js b/packages/e2e-tests/specs/widgets/customizing-widgets.test.js index b999e28baa1fef..c9bb9635ad6a3e 100644 --- a/packages/e2e-tests/specs/widgets/customizing-widgets.test.js +++ b/packages/e2e-tests/specs/widgets/customizing-widgets.test.js @@ -17,7 +17,6 @@ import { */ // eslint-disable-next-line no-restricted-imports import { find, findAll } from 'puppeteer-testing-library'; -import { first } from 'lodash'; const twentyTwentyError = `Stylesheet twentytwenty-block-editor-styles-css was not properly added. For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style). @@ -831,12 +830,11 @@ describe( 'Widgets Customizer', () => { } ); await showMoreSettingsButton.click(); - // Change font size (Any change made in this section is sufficient; not required to be font size) - const CUSTOM_FONT_SIZE_LABEL_SELECTOR = - "//fieldset[legend[contains(text(),'Font size')]]//label[contains(text(), 'Custom')]"; - await first( await page.$x( CUSTOM_FONT_SIZE_LABEL_SELECTOR ) ).click(); - await page.keyboard.type( '23' ); - await page.keyboard.press( 'Enter' ); + // Change `drop cap` (Any change made in this section is sufficient; not required to be `drop cap`). + const [ dropCapToggle ] = await page.$x( + "//label[contains(text(), 'Drop cap')]" + ); + await dropCapToggle.click(); // Now that we've made a change: // (1) Publish button should be active From 0961ee0e8e5ac10a4b67f70e5a15b7fdafb0904f Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 14 Oct 2021 12:19:49 +0300 Subject: [PATCH 10/13] update current e2e tests + add aria label to toggle group button --- .../components/src/font-size-picker/index.js | 1 + .../components/src/font-size-picker/utils.js | 4 +- .../font-size-picker.test.js.snap | 37 ----- .../editor/various/font-size-picker.test.js | 153 +++++++++--------- 4 files changed, 84 insertions(+), 111 deletions(-) delete mode 100644 packages/e2e-tests/specs/editor/various/__snapshots__/font-size-picker.test.js.snap diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index e320e576b9f458..9c6346536c2ab4 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -181,6 +181,7 @@ function FontSizePicker( key={ option.key } value={ option.value } label={ option.label } + aria-label={ option.name } /> ) ) } diff --git a/packages/components/src/font-size-picker/utils.js b/packages/components/src/font-size-picker/utils.js index 038ce9efda361e..3310257de1ff75 100644 --- a/packages/components/src/font-size-picker/utils.js +++ b/packages/components/src/font-size-picker/utils.js @@ -79,13 +79,13 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) { } function getToggleGroupOptions( optionsArray ) { - return optionsArray.map( ( { slug, size } ) => { + return optionsArray.map( ( { slug, size, name } ) => { let label = size; if ( typeof size === 'string' ) { const [ numericValue ] = splitValueAndUnitFromSize( size ); label = numericValue; } - return { key: slug, value: size, label }; + return { key: slug, value: size, label, name }; } ); } diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/font-size-picker.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/font-size-picker.test.js.snap deleted file mode 100644 index 3bf9468e2a0f14..00000000000000 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/font-size-picker.test.js.snap +++ /dev/null @@ -1,37 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Font Size Picker should apply a custom font size using the font size input 1`] = ` -" -

Paragraph to be made \\"small\\"

-" -`; - -exports[`Font Size Picker should apply a named font size using the font size buttons 1`] = ` -" -

Paragraph to be made \\"large\\"

-" -`; - -exports[`Font Size Picker should apply a named font size using the font size input 1`] = ` -" -

Paragraph to be made \\"small\\"

-" -`; - -exports[`Font Size Picker should reset a custom font size using input field 1`] = ` -" -

Paragraph to be made \\"small\\"

-" -`; - -exports[`Font Size Picker should reset a named font size using input field 1`] = ` -" -

Paragraph with font size reset using input field

-" -`; - -exports[`Font Size Picker should reset a named font size using the reset button 1`] = ` -" -

Paragraph with font size reset using button

-" -`; diff --git a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js b/packages/e2e-tests/specs/editor/various/font-size-picker.test.js index c8bf9a1b5063b8..f37b20f3538bcd 100644 --- a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js +++ b/packages/e2e-tests/specs/editor/various/font-size-picker.test.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { first } from 'lodash'; - /** * WordPress dependencies */ @@ -10,13 +5,45 @@ import { clickBlockAppender, getEditedPostContent, createNewPost, - pressKeyTimes, + pressKeyWithModifier, } from '@wordpress/e2e-test-utils'; +const FONT_SIZE_TOGGLE_GROUP_SELECTOR = + "//div[contains(@class, 'components-font-size-picker__controls')]//div[contains(@class, 'components-toggle-group-control')]"; + +// Applies when ToggleGroupControl is used. +const getActiveButtonLabel = async () => { + const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//div[@data-active='true']//button`; + const [ activeButton ] = await page.$x( buttonSelector ); + return page.evaluate( + ( element ) => element?.getAttribute( 'aria-label' ), + activeButton + ); +}; + +// Click a button by its label - applies when ToggleGroupControl is used. +const clickFontSizeButtonByLabel = async ( label ) => { + const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//button[@aria-label='${ label }']`; + const button = await page.waitForXPath( buttonSelector ); + return button.click(); +}; + +// Clicks the button to toggle between custom size input and the control for the presets. +const toggleCustomInput = async () => { + const toggleButton = await page.waitForXPath( + "//button[@aria-label='Toggle custom size display']" + ); + return toggleButton.click(); +}; + +const clickCustomInput = async () => { + const customInput = await page.waitForXPath( + "//input[@aria-label='Custom']" + ); + return customInput.click(); +}; + describe( 'Font Size Picker', () => { - const FONT_SIZE_LABEL_SELECTOR = "//label[contains(text(), 'Font size')]"; - const CUSTOM_FONT_SIZE_LABEL_SELECTOR = - "//fieldset[legend[contains(text(),'Font size')]]//label[contains(text(), 'Custom')]"; beforeEach( async () => { await createNewPost(); } ); @@ -25,28 +52,15 @@ describe( 'Font Size Picker', () => { // Create a paragraph block with some content. await clickBlockAppender(); await page.keyboard.type( 'Paragraph to be made "large"' ); - await first( await page.$x( FONT_SIZE_LABEL_SELECTOR ) ).click(); - await pressKeyTimes( 'ArrowDown', 4 ); - await page.keyboard.press( 'Enter' ); - const selectedFontSize = await page.evaluate( - ( selector ) => - document - .evaluate( - selector, - document, - null, - XPathResult.ANY_TYPE, - null - ) - .iterateNext().control.textContent, - FONT_SIZE_LABEL_SELECTOR - ); - expect( selectedFontSize ).toBe( 'Large' ); + await clickFontSizeButtonByLabel( 'Large' ); + expect( await getActiveButtonLabel() ).toEqual( 'Large' ); - // Ensure content matches snapshot. - const content = await getEditedPostContent(); - expect( content ).toMatchSnapshot(); + expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` + " +

Paragraph to be made \\"large\\"

+ " + ` ); } ); it( 'should apply a named font size using the font size input', async () => { @@ -54,14 +68,15 @@ describe( 'Font Size Picker', () => { await clickBlockAppender(); await page.keyboard.type( 'Paragraph to be made "small"' ); - await first( await page.$x( CUSTOM_FONT_SIZE_LABEL_SELECTOR ) ).click(); + await toggleCustomInput(); + await clickCustomInput(); // This should be the "small" font-size of the editor defaults. await page.keyboard.type( '13' ); - await page.keyboard.press( 'Enter' ); - - // Ensure content matches snapshot. - const content = await getEditedPostContent(); - expect( content ).toMatchSnapshot(); + expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` + " +

Paragraph to be made \\"small\\"

+ " + ` ); } ); it( 'should apply a custom font size using the font size input', async () => { @@ -69,13 +84,14 @@ describe( 'Font Size Picker', () => { await clickBlockAppender(); await page.keyboard.type( 'Paragraph to be made "small"' ); - await first( await page.$x( CUSTOM_FONT_SIZE_LABEL_SELECTOR ) ).click(); + await toggleCustomInput(); + await clickCustomInput(); await page.keyboard.type( '23' ); - await page.keyboard.press( 'Enter' ); - - // Ensure content matches snapshot. - const content = await getEditedPostContent(); - expect( content ).toMatchSnapshot(); + expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` + " +

Paragraph to be made \\"small\\"

+ " + ` ); } ); it( 'should reset a named font size using the reset button', async () => { @@ -85,24 +101,19 @@ describe( 'Font Size Picker', () => { 'Paragraph with font size reset using button' ); - await first( await page.$x( FONT_SIZE_LABEL_SELECTOR ) ).click(); - - // Disable reason: Wait for changes to apply. - // eslint-disable-next-line no-restricted-syntax - await page.waitForTimeout( 100 ); - - await pressKeyTimes( 'ArrowDown', 2 ); - await page.keyboard.press( 'Enter' ); + await clickFontSizeButtonByLabel( 'Small' ); + await toggleCustomInput(); await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Enter' ); - - // Ensure content matches snapshot. - const content = await getEditedPostContent(); - expect( content ).toMatchSnapshot(); + expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` + " +

Paragraph with font size reset using button

+ " + ` ); } ); it( 'should reset a named font size using input field', async () => { @@ -112,22 +123,21 @@ describe( 'Font Size Picker', () => { 'Paragraph with font size reset using input field' ); - await first( await page.$x( FONT_SIZE_LABEL_SELECTOR ) ).click(); - await pressKeyTimes( 'ArrowDown', 2 ); - await page.keyboard.press( 'Enter' ); - - await first( await page.$x( CUSTOM_FONT_SIZE_LABEL_SELECTOR ) ).click(); - await pressKeyTimes( 'ArrowRight', 5 ); - await pressKeyTimes( 'Backspace', 5 ); - await page.keyboard.press( 'Enter' ); + await clickFontSizeButtonByLabel( 'Small' ); + await toggleCustomInput(); + await clickCustomInput(); + await pressKeyWithModifier( 'primary', 'A' ); + await page.keyboard.press( 'Backspace' ); // Disable reason: Wait for changes to apply. // eslint-disable-next-line no-restricted-syntax await page.waitForTimeout( 1000 ); - // Ensure content matches snapshot. - const content = await getEditedPostContent(); - expect( content ).toMatchSnapshot(); + expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` + " +

Paragraph with font size reset using input field

+ " + ` ); } ); it( 'should reset a custom font size using input field', async () => { @@ -135,17 +145,16 @@ describe( 'Font Size Picker', () => { await clickBlockAppender(); await page.keyboard.type( 'Paragraph to be made "small"' ); - await first( await page.$x( CUSTOM_FONT_SIZE_LABEL_SELECTOR ) ).click(); + await toggleCustomInput(); + await clickCustomInput(); await page.keyboard.type( '23' ); - await page.keyboard.press( 'Enter' ); - - await first( await page.$x( CUSTOM_FONT_SIZE_LABEL_SELECTOR ) ).click(); await page.keyboard.press( 'Backspace' ); await page.keyboard.press( 'Backspace' ); - await page.keyboard.press( 'Enter' ); - // Ensure content matches snapshot. - const content = await getEditedPostContent(); - expect( content ).toMatchSnapshot(); + expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` + " +

Paragraph to be made \\"small\\"

+ " + ` ); } ); } ); From e123e7a6de1c9155cc52559654c5aa30943948f6 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 14 Oct 2021 12:35:31 +0300 Subject: [PATCH 11/13] update toggle custom size label --- packages/components/src/font-size-picker/index.js | 6 +++++- .../components/src/font-size-picker/test/index.js | 11 +++++------ .../specs/editor/various/font-size-picker.test.js | 15 ++++++++------- 3 files changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js index 9c6346536c2ab4..548eb2265f508f 100644 --- a/packages/components/src/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -125,7 +125,11 @@ function FontSizePicker( { ! disableCustomFontSizes && (