@wordpress/components 19.6.1 → 19.8.0

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,7 +56,9 @@ export const buttonView = css`
 
 export const buttonActive = css`
 	color: ${ COLORS.white };
-	background-color: ${ COLORS.gray[ 900 ] };
+	&:active {
+		background: transparent;
+	}
 `;
 
 export const ButtonContentView = styled.div`

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/unit-control/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-UnitControl allows the user to set a value as well as a unit (e.g. `px`).
+`UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
 
 ## Usage
 
@@ -61,19 +61,23 @@ The position of the label (`top`, `side`, `bottom`, or `edge`).
 
 -   Required: No
 
+### `onBlur`: `FocusEventHandler< HTMLInputElement | HTMLSelectElement >`
+
+Callback invoked when either the quantity or unit inputs fire the `blur` event.
+
+-   Required: No
+
 ### `onChange`: `UnitControlOnChangeCallback`
 
 Callback when the `value` changes.
 
 -   Required: No
--   Default: `noop`
 
 ### `onUnitChange`: `UnitControlOnChangeCallback`
 
 Callback when the `unit` changes.
 
 -   Required: No
--   Default: `noop`
 
 ### `size`: `string`