[Components]: Add ToggleGroupControlOptionIcon component (#39760)

* [Components - ToggleGroupControl]: Add icons support * add changelog entry * add prop to readme and fix styles * update tests * refactor to use ToggleGroupControlOptionBase * auto updated manifest * address feedback * Icon prop documentation changes Co-authored-by: Marco Ciampini <[email protected]>
WordPress · Mar 31, 2022 · 98a478f · 98a478f
1 parent b903fc2
commit 98a478f
Show file tree

Hide file tree

Showing 17 changed files with 646 additions and 129 deletions.
diff --git a/docs/manifest.json b/docs/manifest.json
@@ -1205,6 +1205,18 @@
 		"markdown_source": "../packages/components/src/toggle-control/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "ToggleGroupControlOptionBase",
+		"slug": "toggle-group-control-option-base",
+		"markdown_source": "../packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "ToggleGroupControlOptionIcon",
+		"slug": "toggle-group-control-option-icon",
+		"markdown_source": "../packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "ToggleGroupControlOption",
 		"slug": "toggle-group-control-option",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -14,6 +14,7 @@
 
 -   Add `BorderControl` component ([#37769](https://github.com/WordPress/gutenberg/pull/37769)).
 -   Add `BorderBoxControl` component ([#38876](https://github.com/WordPress/gutenberg/pull/38876)).
+-   Add `ToggleGroupControlOptionIcon` component ([#39760](https://github.com/WordPress/gutenberg/pull/39760)).
 
 ### Bug Fix
 
@@ -26,7 +27,7 @@
 -   `CustomSelectControl`: Add `__next36pxDefaultSize` flag for larger default size ([#39401](https://github.com/WordPress/gutenberg/pull/39401)).
 -   `BaseControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#39325](https://github.com/WordPress/gutenberg/pull/39325)).
 -   `Divider`: Make the divider visible by default (`display: inline`) in flow layout containers when the divider orientation is vertical ([#39316](https://github.com/WordPress/gutenberg/pull/39316)).
--   Stop using deprecated `event.keyCode` in favor of `event.key` for keyboard events in `UnitControl` and `InputControl`.  ([#39360](https://github.com/WordPress/gutenberg/pull/39360))
+-   Stop using deprecated `event.keyCode` in favor of `event.key` for keyboard events in `UnitControl` and `InputControl`. ([#39360](https://github.com/WordPress/gutenberg/pull/39360))
 -   `ColorPalette`: refine custom color button's label. ([#39386](https://github.com/WordPress/gutenberg/pull/39386))
 -   Add `onClick` prop on `FormFileUpload`. ([#39268](https://github.com/WordPress/gutenberg/pull/39268))
 -   `FocalPointPicker`: stop using `UnitControl`'s deprecated `unit` prop ([#39504](https://github.com/WordPress/gutenberg/pull/39504)).

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -146,6 +146,7 @@ export { default as ToggleControl } from './toggle-control';
 export {
 	ToggleGroupControl as __experimentalToggleGroupControl,
 	ToggleGroupControlOption as __experimentalToggleGroupControlOption,
+	ToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon,
 } from './toggle-group-control';
 export { default as Toolbar } from './toolbar';
 export { default as ToolbarButton } from './toolbar-button';

diff --git a/packages/components/src/toggle-group-control/index.ts b/packages/components/src/toggle-group-control/index.ts
@@ -1,2 +1,3 @@
 export { ToggleGroupControl } from './toggle-group-control';
 export { ToggleGroupControlOption } from './toggle-group-control-option';
+export { ToggleGroupControlOptionIcon } from './toggle-group-control-option-icon';
diff --git a/packages/components/src/toggle-group-control/stories/index.js b/packages/components/src/toggle-group-control/stories/index.js
@@ -7,11 +7,16 @@ import { boolean, text } from '@storybook/addon-knobs';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { ToggleGroupControl, ToggleGroupControlOption } from '../index';
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+	ToggleGroupControlOptionIcon,
+} from '../index';
 import { View } from '../../view';
 import Button from '../../button';
 
@@ -57,23 +62,23 @@ const _default = ( { options } ) => {
 		KNOBS_GROUPS.ToggleGroupControl
 	);
 
-	const controlOptions = options.map( ( opt, index ) => (
+	const controlOptions = options.map( ( option, index ) => (
 		<ToggleGroupControlOption
-			key={ opt.value }
-			value={ opt.value }
+			key={ option.value }
+			value={ option.value }
 			label={ text(
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }: label`,
-				opt.label,
+				option.label,
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
 			) }
 			aria-label={ text(
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }: aria-label`,
-				opt[ 'aria-label' ],
+				option[ 'aria-label' ],
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
 			) }
 			showTooltip={ boolean(
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }: showTooltip`,
-				opt.showTooltip,
+				option.showTooltip,
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
 			) }
 		/>
@@ -125,6 +130,31 @@ WithAriaLabel.args = {
 	],
 };
 
+export const WithIcons = () => {
+	const [ state, setState ] = useState();
+	return (
+		<ToggleGroupControl
+			onChange={ setState }
+			value={ state }
+			label={ 'With icons' }
+			hideLabelFromVision
+		>
+			<ToggleGroupControlOptionIcon
+				value="uppercase"
+				icon={ formatUppercase }
+				showTooltip={ true }
+				aria-label="Uppercase"
+			/>
+			<ToggleGroupControlOptionIcon
+				value="lowercase"
+				icon={ formatLowercase }
+				showTooltip={ true }
+				aria-label="Lowercase"
+			/>
+		</ToggleGroupControl>
+	);
+};
+
 export const WithReset = () => {
 	const [ alignState, setAlignState ] = useState();
 	const aligns = [ 'Left', 'Center', 'Right' ];

diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ToggleGroupControl should render correctly 1`] = `
+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;
@@ -79,6 +79,229 @@ exports[`ToggleGroupControl should render correctly 1`] = `
   border: none;
   border-radius: 2px;
   color: #757575;
+  fill: currentColor;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: inherit;
+  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  line-height: 100%;
+  outline: none;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 100%;
+  z-index: 2;
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-10 {
+    transition-duration: 0ms;
+  }
+}
+
+.emotion-10::-moz-focus-inner {
+  border: 0;
+}
+
+.emotion-10:active {
+  background: #fff;
+}
+
+.emotion-11 {
+  color: #fff;
+  background-color: #1e1e1e;
+}
+
+.emotion-12 {
+  font-size: 13px;
+  line-height: 1;
+}
+
+<div
+  class="components-base-control emotion-0 emotion-1"
+>
+  <div
+    class="components-base-control__field emotion-2 emotion-3"
+  >
+    <div>
+      <span
+        class="components-base-control__label emotion-4 emotion-5"
+      >
+        Test Toggle Group Control
+      </span>
+    </div>
+    <div
+      aria-label="Test Toggle Group Control"
+      class="medium components-toggle-group-control emotion-6 emotion-7"
+      data-wp-c16t="true"
+      data-wp-component="ToggleGroupControl"
+      id="toggle-group-control-1"
+      role="radiogroup"
+    >
+      <div
+        class="emotion-8 emotion-9"
+        data-active="true"
+      >
+        <button
+          aria-checked="true"
+          aria-label="Uppercase"
+          class="emotion-10 components-toggle-group-control-option-base emotion-11"
+          data-value="uppercase"
+          data-wp-c16t="true"
+          data-wp-component="ToggleGroupControlOptionBase"
+          id="toggle-group-control-1-2"
+          role="radio"
+          tabindex="0"
+        >
+          <div
+            class="emotion-12 emotion-13"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <div
+        class="emotion-8 emotion-9"
+        data-active="false"
+      >
+        <button
+          aria-checked="false"
+          aria-label="Lowercase"
+          class="emotion-10 components-toggle-group-control-option-base"
+          data-value="lowercase"
+          data-wp-c16t="true"
+          data-wp-component="ToggleGroupControlOptionBase"
+          id="toggle-group-control-1-3"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="emotion-12 emotion-13"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+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;
+}
+
+.emotion-2 {
+  margin-bottom: calc(4px * 2);
+}
+
+.components-panel__row .emotion-2 {
+  margin-bottom: inherit;
+}
+
+.emotion-4 {
+  display: inline-block;
+  margin-bottom: calc(4px * 2);
+}
+
+.emotion-6 {
+  background: #fff;
+  border: 1px solid;
+  border-color: #757575;
+  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;
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-6 {
+    transition-duration: 0ms;
+  }
+}
+
+.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-8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-10 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  color: #757575;
+  fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -152,10 +375,10 @@ exports[`ToggleGroupControl should render correctly 1`] = `
         <button
           aria-checked="false"
           aria-label="R"
-          class="emotion-10 components-toggle-group-control-option"
+          class="emotion-10 components-toggle-group-control-option-base"
           data-value="rigas"
           data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOption"
+          data-wp-component="ToggleGroupControlOptionBase"
           id="toggle-group-control-0-0"
           role="radio"
           tabindex="0"
@@ -174,10 +397,10 @@ exports[`ToggleGroupControl should render correctly 1`] = `
         <button
           aria-checked="false"
           aria-label="J"
-          class="emotion-10 components-toggle-group-control-option"
+          class="emotion-10 components-toggle-group-control-option-base"
           data-value="jack"
           data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOption"
+          data-wp-component="ToggleGroupControlOptionBase"
           id="toggle-group-control-0-1"
           role="radio"
           tabindex="-1"