@wordpress/components 19.15.0 → 20.0.0

package/src/toggle-group-control/test/__snapshots__/{index.js.snap → index.tsx.snap}

@@ -4,6 +4,13 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {
@@ -15,25 +22,30 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-4 {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
   display: inline-block;
   margin-bottom: calc(4px * 2);
+  padding: 0;
 }
 
 .emotion-6 {
   background: #fff;
-  border: 1px solid;
-  border-color: #757575;
+  border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 36px;
   min-width: 0;
   padding: 2px;
   position: relative;
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
+  min-height: 36px;
+  border-color: #757575;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -42,17 +54,17 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   }
 }
 
-.emotion-6:hover {
-  border-color: #757575;
-}
-
 .emotion-6:focus-within {
-  border-color: var( --wp-admin-theme-color-darker-10, #007cba);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
+  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
+  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
   outline: none;
   z-index: 1;
 }
 
+.emotion-6:hover {
+  border-color: #757575;
+}
+
 .emotion-8 {
   background: #1e1e1e;
   border-radius: 2px;
@@ -140,14 +152,20 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-13 {
+  width: 30px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.emotion-14 {
   color: #fff;
 }
 
-.emotion-13:active {
+.emotion-14:active {
   background: transparent;
 }
 
-.emotion-14 {
+.emotion-15 {
   font-size: 13px;
   line-height: 1;
 }
@@ -167,7 +185,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
     </div>
     <div
       aria-label="Test Toggle Group Control"
-      class="medium components-toggle-group-control emotion-6 emotion-7"
+      class="components-toggle-group-control emotion-6 emotion-7"
       data-wp-c16t="true"
       data-wp-component="ToggleGroupControl"
       id="toggle-group-control-1"
@@ -189,7 +207,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         <button
           aria-checked="true"
           aria-label="Uppercase"
-          class="emotion-12 components-toggle-group-control-option-base emotion-13"
+          class="emotion-12 emotion-13 components-toggle-group-control-option-base emotion-14"
           data-value="uppercase"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -198,7 +216,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
           tabindex="0"
         >
           <div
-            class="emotion-14 emotion-15"
+            class="emotion-15 emotion-16"
           >
             <svg
               aria-hidden="true"
@@ -222,7 +240,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         <button
           aria-checked="false"
           aria-label="Lowercase"
-          class="emotion-12 components-toggle-group-control-option-base"
+          class="emotion-12 emotion-13 components-toggle-group-control-option-base"
           data-value="lowercase"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -231,7 +249,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
           tabindex="-1"
         >
           <div
-            class="emotion-14 emotion-15"
+            class="emotion-15 emotion-16"
           >
             <svg
               aria-hidden="true"
@@ -257,6 +275,13 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {
@@ -268,25 +293,30 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-4 {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
   display: inline-block;
   margin-bottom: calc(4px * 2);
+  padding: 0;
 }
 
 .emotion-6 {
   background: #fff;
-  border: 1px solid;
-  border-color: #757575;
+  border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 36px;
   min-width: 0;
   padding: 2px;
   position: relative;
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
+  min-height: 36px;
+  border-color: #757575;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -295,17 +325,17 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   }
 }
 
-.emotion-6:hover {
-  border-color: #757575;
-}
-
 .emotion-6:focus-within {
-  border-color: var( --wp-admin-theme-color-darker-10, #007cba);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
+  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
+  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
   outline: none;
   z-index: 1;
 }
 
+.emotion-6:hover {
+  border-color: #757575;
+}
+
 .emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -393,7 +423,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
     </div>
     <div
       aria-label="Test Toggle Group Control"
-      class="medium components-toggle-group-control emotion-6 emotion-7"
+      class="components-toggle-group-control emotion-6 emotion-7"
       data-wp-c16t="true"
       data-wp-component="ToggleGroupControl"
       id="toggle-group-control-0"

package/src/toggle-group-control/test/{index.js → index.tsx}

@@ -59,14 +59,12 @@ describe( 'ToggleGroupControl', () => {
 					<ToggleGroupControlOptionIcon
 						value="uppercase"
 						icon={ formatUppercase }
-						showTooltip={ true }
-						aria-label="Uppercase"
+						label="Uppercase"
 					/>
 					<ToggleGroupControlOptionIcon
 						value="lowercase"
 						icon={ formatLowercase }
-						showTooltip={ true }
-						aria-label="Lowercase"
+						label="Lowercase"
 					/>
 				</ToggleGroupControl>
 			);

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

@@ -6,6 +6,8 @@ This feature is still experimental. “Experimental” means this is an early im
 
 `ToggleGroupControl` is a form component that lets users choose options represented in horizontal segments. To render options for this control use [`ToggleGroupControlOption`](/packages/components/src/toggle-group-control/toggle-group-control-option/README.md) component.
 
+This component is intended for selecting a single persistent value from a set of options, similar to a how a radio button group would work. If you simply want a toggle to switch between views, use a [`TabPanel`](/packages/components/src/tab-panel/README.md) instead.
+
 Only use this control when you know for sure the labels of items inside won't wrap. For items with longer labels, you can consider a [`SelectControl`](/packages/components/src/select-control/README.md) or a [`CustomSelectControl`](/packages/components/src/custom-select-control/README.md) component instead.
 
 ## Usage

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

@@ -35,18 +35,21 @@ import * as styles from './styles';
 
 const noop = () => {};
 
-function ToggleGroupControl(
-	props: WordPressComponentProps< ToggleGroupControlProps, 'input' >,
+function UnconnectedToggleGroupControl(
+	props: WordPressComponentProps< ToggleGroupControlProps, 'input', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
+		__nextHasNoMarginBottom = false,
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
+		__experimentalIsIconGroup = false,
 		label,
 		hideLabelFromVision = false,
 		help,
 		onChange = noop,
+		size = 'default',
 		value,
 		children,
 		...otherProps
@@ -83,17 +86,20 @@ function ToggleGroupControl(
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.ToggleGroupControl,
+				styles.ToggleGroupControl( { size } ),
+				! __experimentalIsIconGroup && styles.border,
 				isBlock && styles.block,
-				'medium',
 				className
 			),
-		[ className, cx, isBlock ]
+		[ className, cx, isBlock, __experimentalIsIconGroup, size ]
 	);
 	return (
-		<BaseControl help={ help }>
+		<BaseControl
+			help={ help }
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+		>
 			<ToggleGroupControlContext.Provider
-				value={ { ...radio, isBlock: ! isAdaptiveWidth } }
+				value={ { ...radio, isBlock: ! isAdaptiveWidth, size } }
 			>
 				{ ! hideLabelFromVision && (
 					<div>
@@ -129,11 +135,14 @@ function ToggleGroupControl(
  * represented in horizontal segments. To render options for this control use
  * `ToggleGroupControlOption` component.
  *
+ * This component is intended for selecting a single persistent value from a set of options,
+ * similar to a how a radio button group would work. If you simply want a toggle to switch between views,
+ * use a `TabPanel` instead.
+ *
  * Only use this control when you know for sure the labels of items inside won't
  * wrap. For items with longer labels, you can consider a `SelectControl` or a
  * `CustomSelectControl` component instead.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalToggleGroupControl as ToggleGroupControl,
@@ -150,9 +159,9 @@ function ToggleGroupControl(
  * }
  * ```
  */
-const ConnectedToggleGroupControl = contextConnect(
-	ToggleGroupControl,
+export const ToggleGroupControl = contextConnect(
+	UnconnectedToggleGroupControl,
 	'ToggleGroupControl'
 );
 
-export default ConnectedToggleGroupControl;
+export default ToggleGroupControl;

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

@@ -8,22 +8,24 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { CONFIG, COLORS, reduceMotion } from '../../utils';
+import type { ToggleGroupControlProps } from '../types';
 
-export const ToggleGroupControl = css`
+export const ToggleGroupControl = ( {
+	size,
+}: {
+	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
+} ) => css`
 	background: ${ COLORS.ui.background };
-	border: 1px solid;
-	border-color: ${ COLORS.ui.border };
+	border: 1px solid transparent;
 	border-radius: ${ CONFIG.controlBorderRadius };
 	display: inline-flex;
-	min-height: ${ CONFIG.controlHeight };
 	min-width: 0;
 	padding: 2px;
 	position: relative;
 	transition: transform ${ CONFIG.transitionDurationFastest } linear;
 	${ reduceMotion( 'transition' ) }
-	&:hover {
-		border-color: ${ COLORS.ui.borderHover };
-	}
+
+	${ toggleGroupControlSize( size ) }
 
 	&:focus-within {
 		border-color: ${ COLORS.ui.borderFocus };
@@ -33,6 +35,27 @@ export const ToggleGroupControl = css`
 	}
 `;
 
+export const border = css`
+	border-color: ${ COLORS.ui.border };
+
+	&:hover {
+		border-color: ${ COLORS.ui.borderHover };
+	}
+`;
+
+export const toggleGroupControlSize = (
+	size: NonNullable< ToggleGroupControlProps[ 'size' ] >
+) => {
+	const heights = {
+		default: '36px',
+		'__unstable-large': '40px',
+	};
+
+	return css`
+		min-height: ${ heights[ size ] };
+	`;
+};
+
 export const block = css`
 	display: flex;
 	width: 100%;

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

@@ -1,3 +1,13 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -5,12 +15,13 @@ import type { WordPressComponentProps } from '../../ui/context';
 import type { ToggleGroupControlOptionProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
 
-export default function ToggleGroupControlOption(
+function UnforwardedToggleGroupControlOption(
 	props: WordPressComponentProps<
 		ToggleGroupControlOptionProps,
 		'button',
 		false
-	>
+	>,
+	ref: ForwardedRef< any >
 ) {
 	const { label, ...restProps } = props;
 	const optionLabel = restProps[ 'aria-label' ] || label;
@@ -18,6 +29,7 @@ export default function ToggleGroupControlOption(
 		<ToggleGroupControlOptionBase
 			{ ...restProps }
 			aria-label={ optionLabel }
+			ref={ ref }
 		>
 			{ label }
 		</ToggleGroupControlOptionBase>
@@ -28,7 +40,6 @@ export default function ToggleGroupControlOption(
  * `ToggleGroupControlOption` is a form component and is meant to be used as a
  * child of `ToggleGroupControl`.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalToggleGroupControl as ToggleGroupControl,
@@ -45,3 +56,8 @@ export default function ToggleGroupControlOption(
  * }
  * ```
  */
+export const ToggleGroupControlOption = forwardRef(
+	UnforwardedToggleGroupControlOption
+);
+
+export default ToggleGroupControlOption;

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

@@ -60,8 +60,10 @@ function ToggleGroupControlOptionBase(
 	const {
 		className,
 		isBlock = false,
+		isIcon = false,
 		value,
 		children,
+		size = 'default',
 		showTooltip = false,
 		...radioProps
 	} = {
@@ -74,6 +76,7 @@ function ToggleGroupControlOptionBase(
 	const labelViewClasses = cx( isBlock && styles.labelBlock );
 	const classes = cx(
 		styles.buttonView,
+		isIcon && styles.isIcon( { size } ),
 		className,
 		isActive && styles.buttonActive
 	);

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

@@ -8,6 +8,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { CONFIG, COLORS, reduceMotion } from '../../utils';
+import type { ToggleGroupControlProps } from '../types';
 
 export const LabelView = styled.div`
 	display: inline-flex;
@@ -70,6 +71,19 @@ export const separatorActive = css`
 	background: transparent;
 `;
 
-export const medium = css`
-	min-height: ${ CONFIG.controlHeight };
-`;
+export const isIcon = ( {
+	size,
+}: {
+	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
+} ) => {
+	const iconButtonSizes = {
+		default: '30px',
+		'__unstable-large': '34px',
+	};
+
+	return css`
+		width: ${ iconButtonSizes[ size ] };
+		padding-left: 0;
+		padding-right: 0;
+	`;
+};

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

@@ -17,18 +17,16 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 function Example() {
 	return (
-		<ToggleGroupControl label="my label" value="lowercase" isBlock>
+		<ToggleGroupControl __experimentalIsIconGroup>
 			<ToggleGroupControlOptionIcon
 				value="uppercase"
 				icon={ formatUppercase }
-				showTooltip={ true }
-				aria-label="Uppercase"
+				label="Uppercase"
 			/>
 			<ToggleGroupControlOptionIcon
 				value="lowercase"
 				icon={ formatLowercase }
-				showTooltip={ true }
-				aria-label="Lowercase"
+				label="Lowercase"
 			/>
 		</ToggleGroupControl>
 	);
@@ -49,8 +47,8 @@ Icon displayed as the content of the option. Usually one of the icons from the `
 
 -   Required: Yes
 
-### `showTooltip`: `boolean`
+### `label`: `string`
 
-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.
+The text to accessibly label the icon option. Will also be shown in a tooltip.
 
--   Required: No
+-   Required: Yes

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

@@ -1,3 +1,13 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -6,16 +16,23 @@ import type { ToggleGroupControlOptionIconProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
 import Icon from '../../icon';
 
-export default function ToggleGroupControlOptionIcon(
+function UnforwardedToggleGroupControlOptionIcon(
 	props: WordPressComponentProps<
 		ToggleGroupControlOptionIconProps,
 		'button',
 		false
-	>
+	>,
+	ref: ForwardedRef< any >
 ) {
-	const { icon, ...restProps } = props;
+	const { icon, label, ...restProps } = props;
 	return (
-		<ToggleGroupControlOptionBase { ...restProps }>
+		<ToggleGroupControlOptionBase
+			{ ...restProps }
+			isIcon
+			aria-label={ label }
+			showTooltip
+			ref={ ref }
+		>
 			<Icon icon={ icon } />
 		</ToggleGroupControlOptionBase>
 	);
@@ -25,7 +42,6 @@ export default function ToggleGroupControlOptionIcon(
  * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a
  * child of `ToggleGroupControl` and displays an icon.
  *
- * @example
  * ```jsx
  *
  * import {
@@ -36,17 +52,24 @@ export default function ToggleGroupControlOptionIcon(
  *
  * function Example() {
  *	return (
- *		<ToggleGroupControl label="my label" value="vertical" isBlock>
+ *		<ToggleGroupControl __experimentalIsIconGroup>
  *			<ToggleGroupControlOptionIcon
  *				value="uppercase"
+ *				label="Uppercase"
  *				icon={ formatUppercase }
  *			/>
  *			<ToggleGroupControlOptionIcon
  *				value="lowercase"
+ *				label="Lowercase"
  *				icon={ formatLowercase }
  *			/>
  *		</ToggleGroupControl>
  *	);
  * }
- ** ```
+ * ```
  */
+export const ToggleGroupControlOptionIcon = forwardRef(
+	UnforwardedToggleGroupControlOptionIcon
+);
+
+export default ToggleGroupControlOptionIcon;