ToggleGroupControl: Improve styling for icon options (#43060)

* ToggleGroupControl: Add `isBorderless` variant * ToggleGroupControlOptionIcon: Improve sizing * Add changelog * Update snapshots * Fix square size * Fix indentation Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com> * Fix a11y labeling * Fix types * Rename `isBorderless` prop * Fixup * Update snapshots * Fix up story control * Privatize `size` context * Fixup docs * Update unit tests * Add changelog about `label` prop * Rename snapshot Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
WordPress · Aug 11, 2022 · b7a5b8d · b7a5b8d
1 parent 546d93d
commit b7a5b8d
Show file tree

Hide file tree

Showing 12 changed files with 157 additions and 65 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -18,6 +18,8 @@
 
 ### Enhancements
 
+-   `ToggleGroupControlOptionIcon`: Maintain square proportions ([#43060](https://github.com/WordPress/gutenberg/pull/43060/)).
+-   `ToggleGroupControlOptionIcon`: Add a required `label` prop so the button is always accessibly labeled. Also removes `showTooltip` from the accepted prop types, as the tooltip will now always be shown.  ([#43060](https://github.com/WordPress/gutenberg/pull/43060/)).
 -   `SelectControl`, `CustomSelectControl`: Refresh and refactor chevron down icon ([#42962](https://github.com/WordPress/gutenberg/pull/42962)).
 -   `FontSizePicker`: Add large size variant ([#42716](https://github.com/WordPress/gutenberg/pull/42716/)).
 -   `Popover`: tidy up code, add more comments ([#42944](https://github.com/WordPress/gutenberg/pull/42944)).
@@ -30,6 +32,7 @@
 
 ### Internal
 
+-   `ToggleGroupControl`: Add `__experimentalIsIconGroup` prop ([#43060](https://github.com/WordPress/gutenberg/pull/43060/)).
 -   `Flex`, `FlexItem`, `FlexBlock`: Convert to TypeScript ([#42537](https://github.com/WordPress/gutenberg/pull/42537)).
 -   `InputControl`: Fix incorrect `size` prop passing ([#42793](https://github.com/WordPress/gutenberg/pull/42793)).
 -   `Placeholder`: Convert to TypeScript ([#42990](https://github.com/WordPress/gutenberg/pull/42990)).

diff --git a/packages/components/src/toggle-group-control/stories/index.js b/packages/components/src/toggle-group-control/stories/index.js
@@ -23,9 +23,11 @@ import Button from '../../button';
 export default {
 	component: ToggleGroupControl,
 	title: 'Components (Experimental)/ToggleGroupControl',
+	subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
 	argTypes: {
+		__experimentalIsIconGroup: { control: { type: 'boolean' } },
 		size: {
-			control: 'select',
+			control: 'radio',
 			options: [ 'default', '__unstable-large' ],
 		},
 	},
@@ -138,6 +140,10 @@ WithAriaLabel.args = {
 	],
 };
 
+/**
+ * The `<ToggleGroupControlOptionIcon>` component can be used for icon options.
+ * In this case, the `__experimentalIsIconGroup` style is preferred.
+ */
 export const WithIcons = ( props ) => {
 	const [ state, setState ] = useState();
 	return (
@@ -151,20 +157,19 @@ export const WithIcons = ( props ) => {
 			<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>
 	);
 };
 WithIcons.args = {
 	...Default.args,
+	__experimentalIsIconGroup: true,
 };
 
 export const WithReset = ( props ) => {

diff --git a/...-control/test/__snapshots__/index.js.snap → ...control/test/__snapshots__/index.tsx.snap b/...-control/test/__snapshots__/index.js.snap → ...control/test/__snapshots__/index.tsx.snap
@@ -33,8 +33,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 
 .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;
@@ -46,6 +45,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
   min-height: 36px;
+  border-color: #757575;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -54,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);
   outline: none;
   z-index: 1;
 }
 
+.emotion-6:hover {
+  border-color: #757575;
+}
+
 .emotion-8 {
   background: #1e1e1e;
   border-radius: 2px;
@@ -152,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;
 }
@@ -201,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"
@@ -210,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"
@@ -234,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"
@@ -243,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"
@@ -298,8 +304,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 
 .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;
@@ -311,6 +316,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
   min-height: 36px;
+  border-color: #757575;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -319,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);
   outline: none;
   z-index: 1;
 }
 
+.emotion-6:hover {
+  border-color: #757575;
+}
+
 .emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

diff --git a/...ts/src/toggle-group-control/test/index.js → ...s/src/toggle-group-control/test/index.tsx b/...ts/src/toggle-group-control/test/index.js → ...s/src/toggle-group-control/test/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>
 			);

diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx b/packages/components/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
 	);

diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/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;
@@ -69,3 +70,20 @@ export const ButtonContentView = styled.div`
 export const separatorActive = css`
 	background: transparent;
 `;
+
+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;
+	`;
+};
diff --git a/.../components/src/toggle-group-control/toggle-group-control-option-icon/README.md b/.../components/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
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx b/packages/components/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;