Updates to the Font Size Picker (#9802)

* Rework font-size selection to improve clarity of options and the UI. * Add label, relax margins, tighten help text for switch, fix color This commit does a few things: 1. It makes the panel heading the same color as the down chevron. 2. It adds a label to the font size picker, grouping it all together 3. It tightens the margins between switch and contextual help text. 4. It relaxes the margins for base controls inside panels, to make them a bit lighter. Together with #9784 it reduces the weight of panels in the sidebar. * Tweak the reset button, make it disabled until a number is input. * Fix reset clearing input value. * Use different sizes for buttons and render. * Convert font picker to a dropdown select showing real visual sizes. - Add "huge" and "normal" variants. - Normal equals a "reset". * Remove unusued CSS code. * FontSizePicker: a11y: Wrap with NavigableMenu * e2e: Update to accommodate new font size picker * Amend editor-modes test * Accessibility improvements to the FontSizePicker component
WordPress · Oct 4, 2018 · e5ed1b1 · e5ed1b1
1 parent 579f584
commit e5ed1b1
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 62 deletions.
diff --git a/edit-post/components/sidebar/block-sidebar/style.scss b/edit-post/components/sidebar/block-sidebar/style.scss
@@ -4,9 +4,9 @@
 	margin: 0 -16px;
 
 	.components-base-control {
-		margin: 0 0 1em 0;
+		margin: 0 0 1.5em 0;
 		&:last-child {
-			margin-bottom: 0;
+			margin-bottom: 0.5em;
 		}
 	}
 

diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
@@ -110,17 +110,17 @@
 }
 
 .has-small-font-size {
-	font-size: 14px;
+	font-size: 13px;
 }
 
 .has-regular-font-size {
-	font-size: 16px;
+	font-size: 20px;
 }
 
 .has-large-font-size {
 	font-size: 36px;
 }
 
 .has-larger-font-size {
-	font-size: 48px;
+	font-size: 42px;
 }
diff --git a/packages/components/src/base-control/index.js b/packages/components/src/base-control/index.js
@@ -7,7 +7,8 @@ function BaseControl( { id, label, help, className, children } ) {
 	return (
 		<div className={ classnames( 'components-base-control', className ) }>
 			<div className="components-base-control__field">
-				{ label && <label className="components-base-control__label" htmlFor={ id }>{ label }</label> }
+				{ label && id && <label className="components-base-control__label" htmlFor={ id }>{ label }</label> }
+				{ label && ! id && <span className="components-base-control__label">{ label }</span> }
 				{ children }
 			</div>
 			{ !! help && <p id={ id + '__help' } className="components-base-control__help">{ help }</p> }

diff --git a/packages/components/src/base-control/style.scss b/packages/components/src/base-control/style.scss
@@ -1,22 +1,23 @@
 .components-base-control {
 	font-family: $default-font;
 	font-size: $default-font-size;
-}
 
-.components-base-control__field {
-	margin-bottom: $grid-size;
+	.components-base-control__field {
+		margin-bottom: $grid-size;
 
-	.components-panel__row & {
-		margin-bottom: inherit;
+		.components-panel__row & {
+			margin-bottom: inherit;
+		}
 	}
-}
 
-.components-base-control__label {
-	display: block;
-	margin-bottom: $grid-size-small;
-}
+	.components-base-control__label {
+		display: block;
+		margin-bottom: $grid-size-small;
+	}
 
-.components-base-control__help {
-	font-style: italic;
-	margin-bottom: 0;
+	.components-base-control__help {
+		margin-top: -$grid-size;
+		font-style: italic;
+		margin-bottom: 0;
+	}
 }
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
@@ -6,51 +6,110 @@ import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { withInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import Dashicon from '../dashicon';
+import BaseControl from '../base-control';
 import Button from '../button';
-import ButtonGroup from '../button-group';
+import Dropdown from '../dropdown';
 import RangeControl from '../range-control';
+import { NavigableMenu } from '../navigable-container';
+
+function FontSizePicker( {
+	fallbackFontSize,
+	fontSizes = [],
+	onChange,
+	value,
+	withSlider,
+} ) {
+	const onChangeValue = ( event ) => {
+		const newValue = event.target.value;
+		if ( newValue === '' ) {
+			onChange( undefined );
+			return;
+		}
+		onChange( Number( newValue ) );
+	};
+
+	const currentFont = fontSizes.find( ( font ) => font.size === value );
 
-export default function FontSizePicker( { fontSizes = [], fallbackFontSize, value, onChange } ) {
 	return (
-		<Fragment>
+		<BaseControl label={ __( 'Font Size' ) }>
 			<div className="components-font-size-picker__buttons">
-				<ButtonGroup aria-label={ __( 'Font Size' ) }>
-					{ map( fontSizes, ( { name, size, shortName } ) => (
+				<Dropdown
+					className="components-font-size-picker__dropdown"
+					contentClassName="components-font-size-picker__dropdown-content"
+					position="bottom"
+					renderToggle={ ( { isOpen, onToggle } ) => (
 						<Button
-							key={ size }
+							className="components-font-size-picker__selector"
 							isLarge
-							isPrimary={ value === size }
-							aria-pressed={ value === size }
-							onClick={ () => onChange( size ) }
+							onClick={ onToggle }
+							aria-expanded={ isOpen }
+							aria-label={ __( 'Custom font size' ) }
 						>
-							{ shortName || name }
+							{ ( currentFont && currentFont.name ) || ( ! value && 'Normal' ) || 'Custom' }
 						</Button>
-					) ) }
-				</ButtonGroup>
+					) }
+					renderContent={ () => (
+						<NavigableMenu>
+							{ map( fontSizes, ( { name, size, slug } ) => (
+								<Button
+									key={ slug }
+									onClick={ () => onChange( slug === 'normal' ? undefined : size ) }
+									className={ 'is-font-' + slug }
+									role="menuitem"
+								>
+									{ ( value === size || ( ! value && slug === 'normal' ) ) &&	<Dashicon icon="saved" /> }
+									<span className="components-font-size-picker__dropdown-text-size" style={ { fontSize: size } }>
+										{ name }
+									</span>
+								</Button>
+							) ) }
+						</NavigableMenu>
+					) }
+				/>
+				{ ! withSlider &&
+					<input
+						className="components-range-control__number"
+						type="number"
+						onChange={ onChangeValue }
+						aria-label={ __( 'Custom font size' ) }
+						value={ value || '' }
+					/>
+				}
 				<Button
-					isLarge
+					className="components-color-palette__clear"
+					type="button"
+					disabled={ value === undefined }
 					onClick={ () => onChange( undefined ) }
+					isButton
+					isSmall
+					isDefault
+					aria-label={ __( 'Reset font size' ) }
 				>
 					{ __( 'Reset' ) }
 				</Button>
 			</div>
-			<RangeControl
-				className="components-font-size-picker__custom-input"
-				label={ __( 'Custom Size' ) }
-				value={ value || '' }
-				initialPosition={ fallbackFontSize }
-				onChange={ onChange }
-				min={ 12 }
-				max={ 100 }
-				beforeIcon="editor-textcolor"
-				afterIcon="editor-textcolor"
-			/>
-		</Fragment>
+			{ withSlider &&
+				<RangeControl
+					className="components-font-size-picker__custom-input"
+					label={ __( 'Custom Size' ) }
+					value={ value || '' }
+					initialPosition={ fallbackFontSize }
+					onChange={ onChange }
+					min={ 12 }
+					max={ 100 }
+					beforeIcon="editor-textcolor"
+					afterIcon="editor-textcolor"
+				/>
+			}
+		</BaseControl>
 	);
 }
+
+export default withInstanceId( FontSizePicker );
diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss
@@ -1,7 +1,20 @@
 .components-font-size-picker__buttons {
 	display: flex;
 	justify-content: space-between;
-	margin-bottom: 1em;
+	align-items: center;
+
+	// Apply the same height as the isSmall Reset button.
+	.components-range-control__number {
+		height: 24px;
+		line-height: 22px;
+
+		// Show the reset button as disabled until a value is entered.
+		&[value=""] + .components-button {
+			cursor: default;
+			opacity: 0.3;
+			pointer-events: none;
+		}
+	}
 }
 
 .components-font-size-picker__custom-input {
@@ -10,3 +23,37 @@
 		height: 30px;
 	}
 }
+
+.components-font-size-picker__dropdown-content .components-button {
+	display: block;
+	position: relative;
+	padding: 10px 20px 10px 40px;
+	width: 100%;
+	text-align: left;
+
+	.dashicon {
+		position: absolute;
+		top: calc(50% - 10px);
+		left: 10px;
+	}
+}
+
+.components-font-size-picker__buttons .components-font-size-picker__selector {
+	border: 1px solid;
+	background: none;
+	position: relative;
+	width: 110px;
+
+	@include input-style__neutral();
+
+	&:focus {
+		@include input-style__focus();
+	}
+
+	&::after {
+		@include dropdown-arrow();
+		right: 8px;
+		top: 12px;
+		position: absolute;
+	}
+}
diff --git a/packages/editor/src/store/defaults.js b/packages/editor/src/store/defaults.js
@@ -81,27 +81,28 @@ export const EDITOR_SETTINGS_DEFAULTS = {
 	fontSizes: [
 		{
 			name: __( 'Small' ),
-			shortName: __( 'S' ),
-			size: 14,
+			size: 13,
 			slug: 'small',
 		},
 		{
-			name: __( 'Regular' ),
-			shortName: __( 'M' ),
+			name: __( 'Normal' ),
 			size: 16,
-			slug: 'regular',
+			slug: 'normal',
+		},
+		{
+			name: __( 'Medium' ),
+			size: 20,
+			slug: 'medium',
 		},
 		{
 			name: __( 'Large' ),
-			shortName: __( 'L' ),
 			size: 36,
 			slug: 'large',
 		},
 		{
-			name: __( 'Larger' ),
-			shortName: __( 'XL' ),
+			name: __( 'Huge' ),
 			size: 48,
-			slug: 'larger',
+			slug: 'huge',
 		},
 	],
 

diff --git a/test/e2e/specs/editor-modes.test.js b/test/e2e/specs/editor-modes.test.js
@@ -73,7 +73,8 @@ describe( 'Editing modes (visual/HTML)', () => {
 		expect( htmlBlockContent ).toEqual( '<p>Hello world!</p>' );
 
 		// Change the font size using the sidebar.
-		const changeSizeButton = await page.waitForXPath( '//button[text()="L"]' );
+		await page.click( '.components-font-size-picker__selector' );
+		const changeSizeButton = await page.waitForSelector( '.components-button.is-font-large' );
 		await changeSizeButton.click();
 
 		// Make sure the HTML content updated.

diff --git a/test/e2e/specs/font-size-picker.test.js b/test/e2e/specs/font-size-picker.test.js
@@ -17,8 +17,9 @@ describe( 'Font Size Picker', () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'Paragraph to be made "large"' );
 
-		const largeButton = ( await page.$x( '//*[contains(concat(" ", @class, " "), " components-font-size-picker__buttons ")]//*[text()=\'L\']' ) )[ 0 ];
-		await largeButton.click();
+		await page.click( '.components-font-size-picker__selector' );
+		const changeSizeButton = await page.waitForSelector( '.components-button.is-font-large' );
+		await changeSizeButton.click();
 
 		// Ensure content matches snapshot.
 		const content = await getEditedPostContent();
@@ -31,7 +32,7 @@ describe( 'Font Size Picker', () => {
 		await page.keyboard.type( 'Paragraph to be made "small"' );
 
 		await page.click( '.blocks-font-size .components-range-control__number' );
-		await page.keyboard.type( '14' );
+		await page.keyboard.type( '13' );
 
 		// Ensure content matches snapshot.
 		const content = await getEditedPostContent();
@@ -57,7 +58,10 @@ describe( 'Font Size Picker', () => {
 		await page.keyboard.type( 'Paragraph with font size reset using button' );
 
 		await page.click( '.blocks-font-size .components-range-control__number' );
-		await page.keyboard.type( '14' );
+		await page.keyboard.type( '13' );
+
+		// Blur the range control
+		await page.click( '.components-base-control__label' );
 
 		const resetButton = ( await page.$x( '//*[contains(concat(" ", @class, " "), " components-font-size-picker__buttons ")]//*[text()=\'Reset\']' ) )[ 0 ];
 		await resetButton.click();
@@ -72,8 +76,9 @@ describe( 'Font Size Picker', () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'Paragraph with font size reset using input field' );
 
-		const largeButton = ( await page.$x( '//*[contains(concat(" ", @class, " "), " components-font-size-picker__buttons ")]//*[text()=\'L\']' ) )[ 0 ];
-		await largeButton.click();
+		await page.click( '.components-font-size-picker__selector' );
+		const changeSizeButton = await page.waitForSelector( '.components-button.is-font-large' );
+		await changeSizeButton.click();
 
 		await page.click( '.blocks-font-size .components-range-control__number' );
 		await page.keyboard.press( 'Backspace' );