@wordpress/components 22.0.0 → 22.1.0

package/src/font-size-picker/utils.ts

@@ -6,42 +6,8 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type {
-	FontSize,
-	FontSizeOption,
-	FontSizeSelectOption,
-	FontSizeToggleGroupOption,
-	FontSizePickerProps,
-} from './types';
-
-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' ),
-};
-
-/**
- * In case we have at most five font sizes, show a `T-shirt size`
- * alias as a label of the font size. The label assumes that the font sizes
- * are ordered accordingly - from smallest to largest.
- */
-const FONT_SIZES_ALIASES = [
-	/* translators: S stands for 'small' and is a size label. */
-	__( 'S' ),
-	/* translators: M stands for 'medium' and is a size label. */
-	__( 'M' ),
-	/* translators: L stands for 'large' and is a size label. */
-	__( 'L' ),
-	/* translators: XL stands for 'extra large' and is a size label. */
-	__( 'XL' ),
-	/* translators: XXL stands for 'extra extra large' and is a size label. */
-	__( 'XXL' ),
-];
+import type { FontSizePickerProps, FontSize } from './types';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 
 /**
  * Some themes use css vars for their font sizes, so until we
@@ -58,75 +24,23 @@ export function isSimpleCssValue(
 }
 
 /**
- * Return font size options in the proper format depending
- * on the currently used control (select, toggle group).
+ * If all of the given font sizes have the same unit (e.g. 'px'), return that
+ * unit. Otherwise return null.
  *
- * @param  useSelectControl       Whether to use a select control.
- * @param  optionsArray           Array of available font sizes objects.
- * @param  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
- * @return Array of font sizes in proper format for the used control.
+ * @param  fontSizes List of font sizes.
+ * @return The common unit, or null.
  */
-export function getFontSizeOptions(
-	useSelectControl: boolean,
-	optionsArray: FontSize[],
-	disableCustomFontSizes: boolean
-): FontSizeSelectOption[] | FontSizeToggleGroupOption[] | null {
-	if ( disableCustomFontSizes && ! optionsArray.length ) {
+export function getCommonSizeUnit( fontSizes: FontSize[] ) {
+	const [ firstFontSize, ...otherFontSizes ] = fontSizes;
+	if ( ! firstFontSize ) {
 		return null;
 	}
-	return useSelectControl
-		? getSelectOptions( optionsArray, disableCustomFontSizes )
-		: getToggleGroupOptions( optionsArray );
-}
-
-function getSelectOptions(
-	optionsArray: FontSize[],
-	disableCustomFontSizes: boolean
-): FontSizeSelectOption[] {
-	const options: FontSizeOption[] = [
-		DEFAULT_FONT_SIZE_OPTION,
-		...optionsArray,
-		...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),
-	];
-	return options.map( ( { slug, name, size } ) => ( {
-		key: slug,
-		name: name || slug,
-		size,
-		__experimentalHint:
-			size && isSimpleCssValue( size ) && parseFloat( String( size ) ),
-	} ) );
-}
-
-/**
- * Build options for the toggle group options.
- *
- * @param  optionsArray An array of font size options.
- * @param  labelAliases An array of alternative labels.
- * @return Remapped optionsArray.
- */
-export function getToggleGroupOptions(
-	optionsArray: FontSize[],
-	labelAliases: string[] = FONT_SIZES_ALIASES
-): FontSizeToggleGroupOption[] {
-	return optionsArray.map( ( { slug, size, name }, index ) => {
-		return {
-			key: slug,
-			value: size,
-			label: labelAliases[ index ],
-			name: name || labelAliases[ index ],
-		};
-	} );
-}
-
-export function getSelectedOption(
-	fontSizes: FontSize[],
-	value: FontSizePickerProps[ 'value' ]
-): FontSizeOption {
-	if ( ! value ) {
-		return DEFAULT_FONT_SIZE_OPTION;
-	}
-	return (
-		fontSizes.find( ( font ) => font.size === value ) ||
-		CUSTOM_FONT_SIZE_OPTION
+	const [ , firstUnit ] = parseQuantityAndUnitFromRawValue(
+		firstFontSize.size
 	);
+	const areAllSizesSameUnit = otherFontSizes.every( ( fontSize ) => {
+		const [ , unit ] = parseQuantityAndUnitFromRawValue( fontSize.size );
+		return unit === firstUnit;
+	} );
+	return areAllSizesSameUnit ? firstUnit : null;
 }

package/src/form-toggle/style.scss

@@ -38,13 +38,13 @@ $toggle-border-width: 1px;
 
 	// Checked state.
 	&.is-checked .components-form-toggle__track {
-		background-color: var(--wp-admin-theme-color);
-		border: $toggle-border-width solid var(--wp-admin-theme-color);
+		background-color: $components-color-accent;
+		border: $toggle-border-width solid $components-color-accent;
 		border: #{ $toggle-height * 0.5 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode.
 	}
 
 	.components-form-toggle__input:focus + .components-form-toggle__track {
-		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) $components-color-accent;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;

package/src/form-token-field/index.tsx

@@ -169,10 +169,18 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	function onKeyDown( event: KeyboardEvent ) {
 		let preventDefault = false;
 
-		if ( event.defaultPrevented ) {
+		if (
+			event.defaultPrevented ||
+			// Ignore keydowns from IMEs
+			event.nativeEvent.isComposing ||
+			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+			// is `isComposing=false`, even though it's technically still part of the composition.
+			// These can only be detected by keyCode.
+			event.keyCode === 229
+		) {
 			return;
 		}
-		switch ( event.code ) {
+		switch ( event.key ) {
 			case 'Backspace':
 				preventDefault = handleDeleteKey( deleteTokenBeforeInput );
 				break;
@@ -213,9 +221,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 	function onKeyPress( event: KeyboardEvent ) {
 		let preventDefault = false;
-		// TODO: replace to event.code;
-		switch ( event.charCode ) {
-			case 44: // Comma.
+
+		switch ( event.key ) {
+			case ',':
 				preventDefault = handleCommaKey();
 				break;
 			default:

package/src/form-token-field/style.scss

@@ -88,7 +88,7 @@
 
 		.components-form-token-field__token-text {
 			background: transparent;
-			color: var(--wp-admin-theme-color);
+			color: $components-color-accent;
 		}
 
 		.components-form-token-field__remove-token {
@@ -183,7 +183,7 @@
 	cursor: pointer;
 
 	&.is-selected {
-		background: var(--wp-admin-theme-color);
+		background: $components-color-accent;
 		color: $white;
 	}
 }

package/src/form-token-field/test/index.tsx

@@ -277,8 +277,8 @@ describe( 'FormTokenField', () => {
 
 			// There should be 1 "remove item" button for the "bergamot" token
 			expect(
-				screen.getAllByRole( 'button', { name: 'Remove item' } )
-			).toHaveLength( 1 );
+				screen.getByRole( 'button', { name: 'Remove item' } )
+			).toBeInTheDocument();
 
 			// Click the "X" button for the "bergamot" token (the only one)
 			await user.click(
@@ -827,10 +827,10 @@ describe( 'FormTokenField', () => {
 
 			// Currently, none of the suggestions are selected
 			expect(
-				within( suggestionList ).queryAllByRole( 'option', {
+				within( suggestionList ).queryByRole( 'option', {
 					selected: true,
 				} )
-			).toHaveLength( 0 );
+			).not.toBeInTheDocument();
 
 			// Pressing the down arrow will select "Salmon"
 			await user.keyboard( '[ArrowDown]' );
@@ -900,10 +900,10 @@ describe( 'FormTokenField', () => {
 
 			// Currently, none of the suggestions are selected
 			expect(
-				within( suggestionList ).queryAllByRole( 'option', {
+				within( suggestionList ).queryByRole( 'option', {
 					selected: true,
 				} )
-			).toHaveLength( 0 );
+			).not.toBeInTheDocument();
 
 			const tigerOption = within( suggestionList ).getByRole( 'option', {
 				name: 'Tiger',

package/src/higher-order/navigate-regions/index.js

@@ -15,6 +15,10 @@ const defaultShortcuts = {
 			modifier: 'ctrlShift',
 			character: '`',
 		},
+		{
+			modifier: 'ctrlShift',
+			character: '~',
+		},
 		{
 			modifier: 'access',
 			character: 'p',

package/src/higher-order/navigate-regions/style.scss

@@ -3,30 +3,82 @@
 	position: relative;
 }
 
-.is-focusing-regions [role="region"] {
-	// For browsers that don't support outline-offset (IE11).
-	&:focus::after {
-		content: "";
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		pointer-events: none;
-		outline: 4px solid transparent; // Shown in Windows High Contrast mode.
-		box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color);
+.is-focusing-regions {
+	[role="region"]:focus {
+		outline: 4px solid $components-color-accent;
+		outline-offset: -4px;
+
+		.interface-navigable-region__stacker {
+			position: relative;
+			z-index: z-index(".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker");
+		}
+	}
+
+	// Fixes for edge cases.
+	// Some of the regions are currently used for layout purposes as 'interface skeleton'
+	// items. When they're absolutely positioned or when they contain absolutely
+	// positioned elements, they may have no size therefore the focus style is not
+	// visible. For the future, it's important to take into consideration that
+	// the navigable regions should always have a computed size. For now, we can
+	// fix some edge cases but these CSS rules should be later removed in favor of
+	// a more abstracted approach to make the navigabel regions focus style work
+	// regardles of the CSS used on other components.
+
+	// Header top bar when Distraction free mode is on.
+	&.is-distraction-free .interface-interface-skeleton__header {
+		.interface-navigable-region__stacker,
+		.edit-post-header {
+			outline: inherit;
+			outline-offset: inherit;
+		}
 	}
 
-	@supports ( outline-offset: 1px ) {
-		&:focus::after {
-			content: none;
+	// Sidebar toggle button shown when navigating regions.
+	.interface-interface-skeleton__sidebar {
+		.interface-navigable-region__stacker,
+		.edit-post-layout__toggle-sidebar-panel {
+			outline: inherit;
+			outline-offset: inherit;
 		}
+	}
 
-		&:focus {
-			outline-style: solid;
-			outline-color: var(--wp-admin-theme-color);
-			outline-width: 4px;
-			outline-offset: -4px;
+	// Publish sidebar toggle button shown when navigating regions.
+	.interface-interface-skeleton__actions {
+		.interface-navigable-region__stacker,
+		.edit-post-layout__toggle-publish-panel {
+			outline: inherit;
+			outline-offset: inherit;
 		}
 	}
+
+	// Publish sidebar.
+	[role="region"].interface-interface-skeleton__actions:focus  .editor-post-publish-panel {
+		outline: 4px solid $components-color-accent;
+		outline-offset: -4px;
+	}
+
+	// Edit site Navigation Drawer.
+	.interface-interface-skeleton__drawer {
+		z-index: z-index(".edit-site-navigation-toggle");
+
+		.interface-navigable-region__stacker,
+		.edit-site-navigation-toggle {
+			outline: inherit;
+			outline-offset: inherit;
+		}
+
+		.edit-site-navigation-toggle.is-open {
+			outline: none;
+		}
+
+		.edit-site-navigation-toggle__button {
+			z-index: -1;
+		}
+	}
+}
+
+// Fixes for edge cases.
+// Edit site Drawer.
+.interface-interface-skeleton__drawer .interface-navigable-region__stacker {
+	height: 100%;
 }

package/src/higher-order/with-notices/test/index.js

@@ -49,7 +49,7 @@ const BaseComponent = ( { noticeOperations, noticeUI, notifications } ) => {
 				noticeOperations.createNotice( item )
 			);
 		}
-	}, [] );
+	}, [ noticeOperations, notifications ] );
 	return (
 		<div>
 			{ noticeUI }

package/src/icon/index.tsx

@@ -33,7 +33,7 @@ interface BaseProps< P > {
 	/**
 	 * The size (width and height) of the icon.
 	 *
-	 * @default 24
+	 * @default `20` when a Dashicon is rendered, `24` for all other icons.
 	 */
 	size?: number;
 }
@@ -48,13 +48,14 @@ export type Props< P > = BaseProps< P > & AdditionalProps< IconType< P > >;
 
 function Icon< P >( {
 	icon = null,
-	size = 24,
+	size = 'string' === typeof icon ? 20 : 24,
 	...additionalProps
 }: Props< P > ) {
 	if ( 'string' === typeof icon ) {
 		return (
 			<Dashicon
 				icon={ icon }
+				size={ size }
 				{ ...( additionalProps as HTMLProps< HTMLSpanElement > ) }
 			/>
 		);

package/src/icon/test/index.js

@@ -32,6 +32,16 @@ describe( 'Icon', () => {
 		);
 	} );
 
+	it( 'renders a dashicon with custom size', () => {
+		render(
+			<Icon data-testid={ testId } icon="format-image" size={ 10 } />
+		);
+
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'width:10px' );
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'height:10px' );
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'font-size:10px' );
+	} );
+
 	it( 'renders a function', () => {
 		render( <Icon icon={ () => <span data-testid={ testId } /> } /> );
 

package/src/index.js

@@ -126,6 +126,7 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
+export { positionToPlacement as __experimentalPopoverPositionToPlacement } from './popover/utils';
 export { default as QueryControls } from './query-controls';
 export { default as __experimentalRadio } from './radio-group/radio';
 export { default as __experimentalRadioGroup } from './radio-group';

package/src/item-group/stories/index.js

@@ -150,7 +150,7 @@ const ItemWithChevron = ( {
 
 	const itemClassName = useMemo(
 		() => cx( ! alwaysVisible && appearingChevron, className ),
-		[ alwaysVisible, className, cx ]
+		[ alwaysVisible, className, cx, appearingChevron ]
 	);
 
 	const chevronIconClassName = useMemo(

package/src/menu-group/{index.js → index.tsx}

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
@@ -10,7 +9,27 @@ import classnames from 'classnames';
 import { Children } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
-export function MenuGroup( props ) {
+/**
+ * Internal dependencies
+ */
+import type { MenuGroupProps } from './types';
+
+/**
+ * `MenuGroup` wraps a series of related `MenuItem` components into a common
+ * section.
+ *
+ * ```jsx
+ * import { MenuGroup, MenuItem } from '@wordpress/components';
+ *
+ * const MyMenuGroup = () => (
+ *   <MenuGroup label="Settings">
+ *     <MenuItem>Setting 1</MenuItem>
+ *     <MenuItem>Setting 2</MenuItem>
+ *   </MenuGroup>
+ * );
+ * ```
+ */
+export function MenuGroup( props: MenuGroupProps ) {
 	const { children, className = '', label, hideSeparator } = props;
 	const instanceId = useInstanceId( MenuGroup );
 
@@ -34,7 +53,7 @@ export function MenuGroup( props ) {
 					{ label }
 				</div>
 			) }
-			<div role="group" aria-labelledby={ label ? labelId : null }>
+			<div role="group" aria-labelledby={ label ? labelId : undefined }>
 				{ children }
 			</div>
 		</div>

package/src/menu-group/types.ts

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type MenuGroupProps = {
+	/**
+	 * A CSS `class` to give to the container element.
+	 */
+	className?: string;
+	/**
+	 * Hide the top border on the container.
+	 */
+	hideSeparator?: boolean;
+	/**
+	 * Text to be displayed as the menu group header.
+	 */
+	label?: string;
+	/**
+	 * The children elements.
+	 */
+	children?: ReactNode;
+};

package/src/menu-item/style.scss

@@ -45,7 +45,7 @@
 		// Override the button component's tertiary background and color.
 		&.is-tertiary {
 			background: none;
-			color: var(--wp-admin-theme-color-darker-10);
+			color: $components-color-accent-darker-10;
 			opacity: 0.3;
 		}
 	}

package/src/mobile/bottom-sheet/test/range-cell.native.js

@@ -33,7 +33,7 @@ afterAll( () => {
 
 it( 'allows modifying units via a11y actions', async () => {
 	const mockOpenUnitPicker = jest.fn();
-	const { getByA11yLabel } = render(
+	const { getByLabelText } = render(
 		<RangeCell
 			label="Opacity"
 			minimumValue={ 0 }
@@ -44,7 +44,7 @@ it( 'allows modifying units via a11y actions', async () => {
 		/>
 	);
 
-	const opacityControl = getByA11yLabel( /Opacity/ );
+	const opacityControl = getByLabelText( /Opacity/ );
 	fireEvent( opacityControl, 'accessibilityAction', {
 		nativeEvent: { actionName: 'activate' },
 	} );
@@ -54,7 +54,7 @@ it( 'allows modifying units via a11y actions', async () => {
 
 describe( 'when range lacks an adjustable unit', () => {
 	it( 'disallows modifying units via a11y actions', async () => {
-		const { getByA11yLabel } = render(
+		const { getByLabelText } = render(
 			<RangeCell
 				label="Opacity"
 				minimumValue={ 0 }
@@ -64,7 +64,7 @@ describe( 'when range lacks an adjustable unit', () => {
 			/>
 		);
 
-		const opacityControl = getByA11yLabel( /Opacity/ );
+		const opacityControl = getByLabelText( /Opacity/ );
 		const { onAccessibilityAction } = opacityControl.props;
 		expect( () =>
 			onAccessibilityAction( { nativeEvent: { actionName: 'activate' } } )

package/src/mobile/html-text-input/test/index.native.js

@@ -10,12 +10,12 @@ import { HTMLTextInput } from '..';
 
 // Finds the Content TextInput in our HTMLInputView.
 const findContentTextInput = ( screen ) => {
-	return screen.getByA11yLabel( 'html-view-content' );
+	return screen.getByLabelText( 'html-view-content' );
 };
 
 // Finds the Title TextInput in our HTMLInputView.
 const findTitleTextInput = ( screen ) => {
-	return screen.getByA11yLabel( 'html-view-title' );
+	return screen.getByLabelText( 'html-view-title' );
 };
 
 const getStylesFromColorScheme = () => {