@wordpress/components 19.7.0-next.e230fbab09.0 → 19.8.1

package/src/toggle-group-control/toggle-group-control-option/component.tsx

@@ -1,99 +1,26 @@
-/**
- * External dependencies
- */
-import type { ForwardedRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { Radio } from 'reakit';
-
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../../ui/context';
-import type { ToggleGroupControlOptionProps, WithToolTipProps } from '../types';
-import { useToggleGroupControlContext } from '../context';
-import * as styles from './styles';
-import { useCx } from '../../utils/hooks';
-import Tooltip from '../../tooltip';
-
-const { ButtonContentView, LabelPlaceholderView, LabelView } = styles;
-
-const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
-	if ( showTooltip && text ) {
-		return (
-			<Tooltip text={ text } position="top center">
-				{ children }
-			</Tooltip>
-		);
-	}
-	return <>{ children }</>;
-};
-
-function ToggleGroupControlOption(
-	props: WordPressComponentProps< ToggleGroupControlOptionProps, 'button' >,
-	forwardedRef: ForwardedRef< any >
+import type { WordPressComponentProps } from '../../ui/context';
+import type { ToggleGroupControlOptionProps } from '../types';
+import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
+
+export default function ToggleGroupControlOption(
+	props: WordPressComponentProps<
+		ToggleGroupControlOptionProps,
+		'button',
+		false
+	>
 ) {
-	const toggleGroupControlContext = useToggleGroupControlContext();
-	const id = useInstanceId(
-		ToggleGroupControlOption,
-		toggleGroupControlContext.baseId || 'toggle-group-control-option'
-	) as string;
-	const buttonProps = useContextSystem(
-		{ ...props, id },
-		'ToggleGroupControlOption'
-	);
-
-	const {
-		className,
-		isBlock = false,
-		label,
-		value,
-		showTooltip = false,
-		...radioProps
-	} = {
-		...toggleGroupControlContext,
-		...buttonProps,
-	};
-
-	const isActive = radioProps.state === value;
-	const cx = useCx();
-	const labelViewClasses = cx( isBlock && styles.labelBlock );
-	const classes = cx(
-		styles.buttonView,
-		className,
-		isActive && styles.buttonActive
-	);
-	const optionLabel = !! radioProps[ 'aria-label' ]
-		? radioProps[ 'aria-label' ]
-		: label;
-
+	const { label, ...restProps } = props;
+	const optionLabel = restProps[ 'aria-label' ] || label;
 	return (
-		<LabelView className={ labelViewClasses } data-active={ isActive }>
-			<WithToolTip showTooltip={ showTooltip } text={ optionLabel }>
-				<Radio
-					{ ...radioProps }
-					as="button"
-					aria-label={ optionLabel }
-					className={ classes }
-					data-value={ value }
-					ref={ forwardedRef }
-					value={ value }
-				>
-					<ButtonContentView>{ label }</ButtonContentView>
-					<LabelPlaceholderView aria-hidden>
-						{ label }
-					</LabelPlaceholderView>
-				</Radio>
-			</WithToolTip>
-		</LabelView>
+		<ToggleGroupControlOptionBase
+			{ ...restProps }
+			aria-label={ optionLabel }
+		>
+			{ label }
+		</ToggleGroupControlOptionBase>
 	);
 }
 
@@ -118,9 +45,3 @@ function ToggleGroupControlOption(
  * }
  * ```
  */
-const ConnectedToggleGroupControlOption = contextConnect(
-	ToggleGroupControlOption,
-	'ToggleGroupControlOption'
-);
-
-export default ConnectedToggleGroupControlOption;

package/src/toggle-group-control/toggle-group-control-option-base/README.md

@@ -0,0 +1,27 @@
+# `ToggleGroupControlOptionBase`
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+`ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal, generic component for any children of [`ToggleGroupControl`](<(/packages/components/src/toggle-group-control/toggle-group-control/README.md)>).
+
+## Props
+
+### `children`: `ReactNode`
+
+The children elements.
+
+-   Required: Yes
+
+### `value`: `string | number`
+
+The value of the `ToggleGroupControlOptionBase`.
+
+-   Required: Yes
+
+### `showTooltip`: `boolean`
+
+Whether to show a tooltip when hovering over the option. The tooltip will only show if a label for it is provided using the `aria-label` prop.
+
+-   Required: No

package/src/toggle-group-control/toggle-group-control-option-base/component.tsx

@@ -0,0 +1,129 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { Radio } from 'reakit';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import {
+	contextConnect,
+	useContextSystem,
+	WordPressComponentProps,
+} from '../../ui/context';
+import type {
+	ToggleGroupControlOptionBaseProps,
+	WithToolTipProps,
+} from '../types';
+import { useToggleGroupControlContext } from '../context';
+import * as styles from './styles';
+import { useCx } from '../../utils/hooks';
+import Tooltip from '../../tooltip';
+
+const { ButtonContentView, LabelView } = styles;
+
+const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
+	if ( showTooltip && text ) {
+		return (
+			<Tooltip text={ text } position="top center">
+				{ children }
+			</Tooltip>
+		);
+	}
+	return <>{ children }</>;
+};
+
+function ToggleGroupControlOptionBase(
+	props: WordPressComponentProps<
+		ToggleGroupControlOptionBaseProps,
+		'button',
+		false
+	>,
+	forwardedRef: ForwardedRef< any >
+) {
+	const toggleGroupControlContext = useToggleGroupControlContext();
+	const id = useInstanceId(
+		ToggleGroupControlOptionBase,
+		toggleGroupControlContext.baseId || 'toggle-group-control-option-base'
+	) as string;
+	const buttonProps = useContextSystem(
+		{ ...props, id },
+		'ToggleGroupControlOptionBase'
+	);
+	const {
+		className,
+		isBlock = false,
+		value,
+		children,
+		showTooltip = false,
+		...radioProps
+	} = {
+		...toggleGroupControlContext,
+		...buttonProps,
+	};
+
+	const isActive = radioProps.state === value;
+	const cx = useCx();
+	const labelViewClasses = cx( isBlock && styles.labelBlock );
+	const classes = cx(
+		styles.buttonView,
+		className,
+		isActive && styles.buttonActive
+	);
+
+	return (
+		<LabelView className={ labelViewClasses } data-active={ isActive }>
+			<WithToolTip
+				showTooltip={ showTooltip }
+				text={ radioProps[ 'aria-label' ] }
+			>
+				<Radio
+					{ ...radioProps }
+					as="button"
+					aria-label={ radioProps[ 'aria-label' ] }
+					className={ classes }
+					data-value={ value }
+					ref={ forwardedRef }
+					value={ value }
+				>
+					<ButtonContentView>{ children }</ButtonContentView>
+				</Radio>
+			</WithToolTip>
+		</LabelView>
+	);
+}
+
+/**
+ * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,
+ * generic component for any children of `ToggleGroupControl`.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalToggleGroupControl as ToggleGroupControl,
+ *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
+ *       <ToggleGroupControlOption value="vertical" label="Vertical" />
+ *     </ToggleGroupControl>
+ *   );
+ * }
+ * ```
+ */
+const ConnectedToggleGroupControlOptionBase = contextConnect(
+	ToggleGroupControlOptionBase,
+	'ToggleGroupControlOptionBase'
+);
+
+export default ConnectedToggleGroupControlOptionBase;

package/src/toggle-group-control/toggle-group-control-option-base/index.ts

@@ -0,0 +1 @@
+export { default as ToggleGroupControlOptionBase } from './component';

package/src/toggle-group-control/{toggle-group-control-option → toggle-group-control-option-base}/styles.ts

@@ -27,6 +27,7 @@ export const buttonView = css`
 	border: none;
 	border-radius: ${ CONFIG.controlBorderRadius };
 	color: ${ COLORS.gray[ 700 ] };
+	fill: currentColor;
 	cursor: pointer;
 	display: flex;
 	font-family: inherit;
@@ -55,30 +56,20 @@ export const buttonView = css`
 
 export const buttonActive = css`
 	color: ${ COLORS.white };
-	background-color: ${ COLORS.gray[ 900 ] };
+	&:active {
+		background: transparent;
+	}
 `;
 
 export const ButtonContentView = styled.div`
 	font-size: ${ CONFIG.fontSize };
 	line-height: 1;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate( -50%, -50% );
 `;
 
 export const separatorActive = css`
 	background: transparent;
 `;
 
-export const LabelPlaceholderView = styled.div`
-	font-size: ${ CONFIG.fontSize };
-	font-weight: bold;
-	height: 0;
-	overflow: hidden;
-	visibility: hidden;
-`;
-
 export const medium = css`
 	min-height: ${ CONFIG.controlHeight };
 `;

package/src/toggle-group-control/toggle-group-control-option-icon/README.md

@@ -0,0 +1,56 @@
+# `ToggleGroupControlOptionIcon`
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+`ToggleGroupControlOptionIcon` is a form component which is meant to be used as a child of [`ToggleGroupControl`] and displays an icon(<(/packages/components/src/toggle-group-control/toggle-group-control/README.md)>).
+
+## Usage
+
+```js
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
+import { formatLowercase, formatUppercase } from '@wordpress/icons';
+
+function Example() {
+	return (
+		<ToggleGroupControl label="my label" value="lowercase" isBlock>
+			<ToggleGroupControlOptionIcon
+				value="uppercase"
+				icon={ formatUppercase }
+				showTooltip={ true }
+				aria-label="Uppercase"
+			/>
+			<ToggleGroupControlOptionIcon
+				value="lowercase"
+				icon={ formatLowercase }
+				showTooltip={ true }
+				aria-label="Lowercase"
+			/>
+		</ToggleGroupControl>
+	);
+}
+```
+
+## Props
+
+### `value`: `string | number`
+
+The value of the `ToggleGroupControlOption`.
+
+-   Required: Yes
+
+### `icon`: `WPComponent`
+
+Icon displayed as the content of the option. Usually one of the icons from the `@wordpress/icons` package, or a custom React `<svg>` icon.
+
+-   Required: Yes
+
+### `showTooltip`: `boolean`
+
+Whether to show a tooltip when hovering over the option. The tooltip will only show if a label for it is provided using the `aria-label` prop.
+
+-   Required: No

package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../../ui/context';
+import type { ToggleGroupControlOptionIconProps } from '../types';
+import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
+
+export default function ToggleGroupControlOptionIcon(
+	props: WordPressComponentProps<
+		ToggleGroupControlOptionIconProps,
+		'button',
+		false
+	>
+) {
+	const { icon, ...restProps } = props;
+	return (
+		<ToggleGroupControlOptionBase { ...restProps }>
+			<Icon icon={ icon } />
+		</ToggleGroupControlOptionBase>
+	);
+}
+
+/**
+ * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a
+ * child of `ToggleGroupControl` and displays an icon.
+ *
+ * @example
+ * ```jsx
+ *
+ * import {
+ *	__experimentalToggleGroupControl as ToggleGroupControl,
+ *	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+ * from '@wordpress/components';
+ * import { formatLowercase, formatUppercase } from '@wordpress/icons';
+ *
+ * function Example() {
+ *	return (
+ *		<ToggleGroupControl label="my label" value="vertical" isBlock>
+ *			<ToggleGroupControlOptionIcon
+ *				value="uppercase"
+ *				icon={ formatUppercase }
+ *			/>
+ *			<ToggleGroupControlOptionIcon
+ *				value="lowercase"
+ *				icon={ formatLowercase }
+ *			/>
+ *		</ToggleGroupControl>
+ *	);
+ * }
+ ** ```
+ */

package/src/toggle-group-control/toggle-group-control-option-icon/index.ts

@@ -0,0 +1 @@
+export { default as ToggleGroupControlOptionIcon } from './component';

package/src/toggle-group-control/types.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ReactNode, ReactText } from 'react';
+import type { MutableRefObject, ReactNode, ReactText } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type { RadioStateReturn } from 'reakit';
 
@@ -10,13 +10,9 @@ import type { RadioStateReturn } from 'reakit';
  */
 import type { FormElementProps } from '../utils/types';
 
-export type ToggleGroupControlOptionProps = {
+export type ToggleGroupControlOptionBaseProps = {
+	children: ReactNode;
 	value: ReactText;
-	/**
-	 * Label for the option. If needed, the `aria-label` prop can be used in addition
-	 * to specify a different label for assistive technologies.
-	 */
-	label: string;
 	/**
 	 * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will
 	 * show the aria-label or the label prop text.
@@ -26,6 +22,28 @@ export type ToggleGroupControlOptionProps = {
 	showTooltip?: boolean;
 };
 
+export type ToggleGroupControlOptionIconProps = Omit<
+	ToggleGroupControlOptionBaseProps,
+	'children'
+> & {
+	/**
+	 * Icon displayed as the content of the option. Usually one of the icons from
+	 * the `@wordpress/icons` package, or a custom React `<svg>` icon.
+	 */
+	icon: JSX.Element;
+};
+
+export type ToggleGroupControlOptionProps = Omit<
+	ToggleGroupControlOptionBaseProps,
+	'children'
+> & {
+	/**
+	 * Label for the option. If needed, the `aria-label` prop can be used in addition
+	 * to specify a different label for assistive technologies.
+	 */
+	label: string;
+};
+
 export type WithToolTipProps = {
 	/**
 	 * React children
@@ -34,7 +52,7 @@ export type WithToolTipProps = {
 	/**
 	 * Label for the Tooltip component.
 	 */
-	text: string;
+	text?: string;
 	/**
 	 * Whether to wrap the control option in a Tooltip component.
 	 *
@@ -96,3 +114,10 @@ export type ToggleGroupControlContextProps = RadioStateReturn & {
 	 */
 	isBlock?: boolean;
 };
+
+export type ToggleGroupControlBackdropProps = {
+	containerRef: MutableRefObject< HTMLElement | undefined >;
+	containerWidth?: number | null;
+	isAdaptiveWidth?: boolean;
+	state?: any;
+};

package/src/toolbar-dropdown-menu/index.js

@@ -19,7 +19,7 @@ function ToolbarDropdownMenu( props, ref ) {
 
 	// ToobarItem will pass all props to the render prop child, which will pass
 	// all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu
-	// has the same API as DrpodownMenu.
+	// has the same API as DropdownMenu.
 	return (
 		<ToolbarItem ref={ ref } { ...props.toggleProps }>
 			{ ( toolbarItemProps ) => (

package/src/toolbar-group/style.scss

@@ -64,76 +64,3 @@ div.components-toolbar {
 		}
 	}
 }
-
-// Size multiple sequential buttons to be optically balanced.
-// Icons are 36px, as set by a 24px icon and 12px padding.
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot, // When a plugin adds to a slot, the segment has a `components-toolbar` class.
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot, // When no plugin adds to slots, the segment has a `components-toolbar-group` class.
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar, // The nesting order is sometimes reversed.
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown, // Targets unique markup for the "Replace" button.
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group { // Inline formatting tools use this class.
-
-	// Segments with just a single button.
-	> .components-button:first-child:last-child,
-	> .components-dropdown:first-child:last-child .components-button,
-	&.components-dropdown > .components-button.components-button, // Single segments where the dropdown is also the toolbar group (such as text align).
-	&.components-dropdown > * .components-button {
-		min-width: $block-toolbar-height;
-		padding-left: $grid-unit-15;
-		padding-right: $grid-unit-15;
-
-		&::before {
-			left: $grid-unit-10;
-			right: $grid-unit-10;
-		}
-	}
-
-	// First.
-	// @todo, this unnamed div only shows up when plugins add to slots. We should remove the fragment.
-	> .components-button:first-child,
-	> div:first-child > .components-button,
-	> .components-dropdown:first-child .components-button {
-		min-width: $block-toolbar-height - $grid-unit-15 * 0.5;
-		padding-left: $grid-unit-15 - $border-width;
-		padding-right: $grid-unit-15 * 0.5;
-
-		&::before {
-			left: $grid-unit-10;
-			right: 2px;
-		}
-	}
-
-	// Middle.
-	// @todo, this unnamed div only shows up when plugins add to slots. We should remove the fragment.
-	> .components-button,
-	> div > .components-button,
-	> .components-dropdown .components-button {
-		min-width: $block-toolbar-height - $grid-unit-15;
-		padding-left: $grid-unit-15 * 0.5; // 6px.
-		padding-right: $grid-unit-15 * 0.5;
-
-		svg {
-			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
-		}
-
-		&::before {
-			left: 2px;
-			right: 2px;
-		}
-	}
-
-	// Last.
-	// @todo, this unnamed div only shows up when plugins add to slots. We should remove the fragment.
-	> .components-button:last-child,
-	> div:last-child > .components-button,
-	> .components-dropdown:last-child .components-button {
-		min-width: $block-toolbar-height - $grid-unit-15 * 0.5;
-		padding-left: $grid-unit-15 * 0.5;
-		padding-right: $grid-unit-15 - $border-width;
-
-		&::before {
-			left: 2px;
-			right: $grid-unit-10;
-		}
-	}
-}

package/src/tools-panel/test/__snapshots__/index.js.snap

@@ -89,15 +89,15 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
   max-width: 100%;
 }
 
-.emotion-6.emotion-6 .e1puf3u4 {
+.emotion-6.emotion-6 .ej5x27r4 {
   margin-bottom: 0;
 }
 
-.emotion-6.emotion-6 .e1puf3u4 .e1puf3u3:last-child {
+.emotion-6.emotion-6 .ej5x27r4 .ej5x27r3:last-child {
   margin-bottom: 0;
 }
 
-.emotion-6 .e1puf3u1 {
+.emotion-6 .ej5x27r1 {
   margin-bottom: 0;
 }
 
@@ -106,7 +106,7 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
 }
 
 .emotion-6 .components-custom-select-control__label,
-.emotion-6 .e1puf3u2 {
+.emotion-6 .ej5x27r2 {
   line-height: 1.4em;
 }
 
@@ -121,15 +121,15 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
   max-width: 100%;
 }
 
-.emotion-8.emotion-8 .e1puf3u4 {
+.emotion-8.emotion-8 .ej5x27r4 {
   margin-bottom: 0;
 }
 
-.emotion-8.emotion-8 .e1puf3u4 .e1puf3u3:last-child {
+.emotion-8.emotion-8 .ej5x27r4 .ej5x27r3:last-child {
   margin-bottom: 0;
 }
 
-.emotion-8 .e1puf3u1 {
+.emotion-8 .ej5x27r1 {
   margin-bottom: 0;
 }
 
@@ -138,7 +138,7 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
 }
 
 .emotion-8 .components-custom-select-control__label,
-.emotion-8 .e1puf3u2 {
+.emotion-8 .ej5x27r2 {
   line-height: 1.4em;
 }
 

package/src/tree-grid/README.md

@@ -114,7 +114,7 @@ Aside from the documented callback functions, any props specified will be passed
 
 ###### onFocusRow( event: Event, startRow: HTMLElement, destinationRow: HTMLElement )
 
-Callback that fires when focus is shifted from one row to another via the UP and DOWN keys.
+Callback that fires when focus is shifted from one row to another via the Up and Down keys. Callback is also fired on Home and End keys which move focus from the beginning row to the end row.
 The callback is passed the event, the start row element that the focus was on originally, and
 the destination row element after the focus has moved.
 

package/src/tree-grid/index.js

@@ -275,6 +275,10 @@ function TreeGrid(
 				);
 				focusablesInNextRow[ nextIndex ].focus();
 
+				// Let consumers know the row that was originally focused,
+				// and the row that is now in focus.
+				onFocusRow( event, activeRow, rows[ nextRowIndex ] );
+
 				// Prevent key use for anything else. This ensures Voiceover
 				// doesn't try to handle key navigation.
 				event.preventDefault();