From 74676391c7834d0400cf987a391fb28494f6ca22 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Fri, 25 Mar 2022 14:28:18 +0200
Subject: [PATCH 1/8] [Components - ToggleGroupControl]: Add icons support

---
 .../src/toggle-group-control/stories/index.js | 40 ++++++++++++++++---
 .../toggle-group-control-option/component.tsx | 10 ++++-
 .../toggle-group-control-option/styles.ts     |  1 +
 .../src/toggle-group-control/types.ts         |  5 +++
 4 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/toggle-group-control/stories/index.js b/packages/components/src/toggle-group-control/stories/index.js
index 99e6a391a7cef..5787d3d8c6e89 100644
--- a/packages/components/src/toggle-group-control/stories/index.js
+++ b/packages/components/src/toggle-group-control/stories/index.js
@@ -7,6 +7,11 @@ import { boolean, text } from '@storybook/addon-knobs';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import {
+	formatCapitalize,
+	formatLowercase,
+	formatUppercase,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -57,25 +62,26 @@ 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 }`
 			) }
+			icon={ option.icon ?? null }
 		/>
 	) );
 
@@ -125,6 +131,28 @@ WithAriaLabel.args = {
 	],
 };
 
+export const WithIcons = _default.bind( {} );
+WithIcons.args = {
+	...Default.args,
+	options: [
+		{
+			label: 'Uppercase',
+			value: 'uppercase',
+			icon: formatUppercase,
+		},
+		{
+			label: 'Lowercase',
+			value: 'lowercase',
+			icon: formatLowercase,
+		},
+		{
+			label: 'Capitalize',
+			value: 'capitalize',
+			icon: formatCapitalize,
+		},
+	],
+};
+
 export const WithReset = () => {
 	const [ alignState, setAlignState ] = useState();
 	const aligns = [ 'Left', 'Center', 'Right' ];
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
index 39f2cd98f3ea0..b17b6b4ff4d34 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
@@ -9,6 +9,7 @@ import { Radio } from 'reakit';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
+import { Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -56,6 +57,7 @@ function ToggleGroupControlOption(
 		isBlock = false,
 		label,
 		value,
+		icon,
 		showTooltip = false,
 		...radioProps
 	} = {
@@ -75,9 +77,13 @@ function ToggleGroupControlOption(
 		? radioProps[ 'aria-label' ]
 		: label;
 
+	const content = !! icon ? <Icon icon={ icon } /> : label;
 	return (
 		<LabelView className={ labelViewClasses } data-active={ isActive }>
-			<WithToolTip showTooltip={ showTooltip } text={ optionLabel }>
+			<WithToolTip
+				showTooltip={ !! icon ? true : showTooltip }
+				text={ optionLabel }
+			>
 				<Radio
 					{ ...radioProps }
 					as="button"
@@ -87,7 +93,7 @@ function ToggleGroupControlOption(
 					ref={ forwardedRef }
 					value={ value }
 				>
-					<ButtonContentView>{ label }</ButtonContentView>
+					<ButtonContentView>{ content }</ButtonContentView>
 				</Radio>
 			</WithToolTip>
 		</LabelView>
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option/styles.ts
index 3e49726cd39bb..167d9d2cb281c 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/styles.ts
@@ -55,6 +55,7 @@ export const buttonView = css`
 
 export const buttonActive = css`
 	color: ${ COLORS.white };
+	fill: ${ COLORS.white };
 	background-color: ${ COLORS.gray[ 900 ] };
 `;
 
diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts
index 47909c9c129a9..038ee26d1262d 100644
--- a/packages/components/src/toggle-group-control/types.ts
+++ b/packages/components/src/toggle-group-control/types.ts
@@ -17,6 +17,11 @@ export type ToggleGroupControlOptionProps = {
 	 * to specify a different label for assistive technologies.
 	 */
 	label: string;
+	/**
+	 * Icon for the option. If `icon` is provided it will be used instead of the `label`
+	 * and will show a tooltip automatically.
+	 */
+	icon?: JSX.Element;
 	/**
 	 * 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.

From c6f18bd5caf8f82ba54526b104891876d6ff850f Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Fri, 25 Mar 2022 14:40:24 +0200
Subject: [PATCH 2/8] add changelog entry

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 3ef364d531813..6cc6ae1582f7d 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Enhancements
 
 -   Update `BorderControl` and `BorderBoxControl` to allow the passing of custom class names to popovers ([#39753](https://github.com/WordPress/gutenberg/pull/39753)).
+-   `ToggleGroupControlOption`: Add `icon` support ([#39760](https://github.com/WordPress/gutenberg/pull/39760)).
 
 ### Internal
 

From 0204a7366e87709d2e5fac2a597d6df10e70b60b Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 28 Mar 2022 22:43:24 +0300
Subject: [PATCH 3/8] add prop to readme and fix styles

---
 .../toggle-group-control-option/README.md     | 19 ++++++++++++++-----
 .../toggle-group-control-option/styles.ts     |  2 +-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
index 3a4c0924902d7..ab72aecbf5461 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
@@ -18,7 +18,11 @@ import {
 function Example() {
 	return (
 		<ToggleGroupControl label="my label" value="vertical" isBlock>
-			<ToggleGroupControlOption value="horizontal" label="Horizontal" showTooltip={ true } />
+			<ToggleGroupControlOption
+				value="horizontal"
+				label="Horizontal"
+				showTooltip={ true }
+			/>
 			<ToggleGroupControlOption value="vertical" label="Vertical" />
 		</ToggleGroupControl>
 	);
@@ -31,17 +35,22 @@ function Example() {
 
 Label for the option. If needed, the `aria-label` prop can be used in addition to specify a different label for assistive technologies.
 
-- Required: Yes
+-   Required: Yes
 
 ### `value`: `string | number`
 
 The value of the `ToggleGroupControlOption`.
 
-- Required: Yes
+-   Required: Yes
+
+### `icon`: `WPComponent`
+
+Icon for the option. If `icon` is provided it will be used instead of the `label` and will show a tooltip automatically.
+
+-   Required: No
 
 ### `showTooltip`: `boolean`
 
 Whether to show a tooltip when hovering over the option. The tooltip will attempt to use the `aria-label` prop text first, then the `label` prop text if no `aria-label` prop is found.
 
-- Required: No
-
+-   Required: No
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option/styles.ts
index 167d9d2cb281c..fe243c09cc512 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/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,6 @@ export const buttonView = css`
 
 export const buttonActive = css`
 	color: ${ COLORS.white };
-	fill: ${ COLORS.white };
 	background-color: ${ COLORS.gray[ 900 ] };
 `;
 

From 086a901a52c96e6ebb26e528c41e7e316f791b8e Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 28 Mar 2022 22:55:11 +0300
Subject: [PATCH 4/8] update tests

---
 .../src/toggle-group-control/test/__snapshots__/index.js.snap    | 1 +
 1 file changed, 1 insertion(+)

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
index 51b4d08703550..b8b35e95a1043 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
@@ -79,6 +79,7 @@ exports[`ToggleGroupControl should render correctly 1`] = `
   border: none;
   border-radius: 2px;
   color: #757575;
+  fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;

From ae5004ebe1779a7207f14c877a148968cc1557cb Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 30 Mar 2022 12:51:01 +0300
Subject: [PATCH 5/8] refactor to use ToggleGroupControlOptionBase

---
 packages/components/src/index.js              |   1 +
 .../src/toggle-group-control/index.ts         |   1 +
 .../src/toggle-group-control/stories/index.js |  54 ++--
 .../test/__snapshots__/index.js.snap          | 230 +++++++++++++++++-
 .../src/toggle-group-control/test/index.js    |  51 +++-
 .../README.md                                 |  25 ++
 .../component.tsx                             | 128 ++++++++++
 .../toggle-group-control-option-base/index.ts |   1 +
 .../styles.ts                                 |   0
 .../README.md                                 |  54 ++++
 .../component.tsx                             |  55 +++++
 .../toggle-group-control-option-icon/index.ts |   1 +
 .../toggle-group-control-option/README.md     |   6 -
 .../toggle-group-control-option/component.tsx | 112 +--------
 .../src/toggle-group-control/types.ts         |  36 ++-
 15 files changed, 596 insertions(+), 159 deletions(-)
 create mode 100644 packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md
 create mode 100644 packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
 create mode 100644 packages/components/src/toggle-group-control/toggle-group-control-option-base/index.ts
 rename packages/components/src/toggle-group-control/{toggle-group-control-option => toggle-group-control-option-base}/styles.ts (100%)
 create mode 100644 packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
 create mode 100644 packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
 create mode 100644 packages/components/src/toggle-group-control/toggle-group-control-option-icon/index.ts

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index b3a820f05a38d..6b90c5a1142e3 100644
--- 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
index 5b84f88a7ee0c..e5e40497d9220 100644
--- 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
index 5787d3d8c6e89..ef784fc9688d4 100644
--- a/packages/components/src/toggle-group-control/stories/index.js
+++ b/packages/components/src/toggle-group-control/stories/index.js
@@ -7,16 +7,16 @@ import { boolean, text } from '@storybook/addon-knobs';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import {
-	formatCapitalize,
-	formatLowercase,
-	formatUppercase,
-} from '@wordpress/icons';
+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';
 
@@ -81,7 +81,6 @@ const _default = ( { options } ) => {
 				option.showTooltip,
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
 			) }
-			icon={ option.icon ?? null }
 		/>
 	) );
 
@@ -131,26 +130,27 @@ WithAriaLabel.args = {
 	],
 };
 
-export const WithIcons = _default.bind( {} );
-WithIcons.args = {
-	...Default.args,
-	options: [
-		{
-			label: 'Uppercase',
-			value: 'uppercase',
-			icon: formatUppercase,
-		},
-		{
-			label: 'Lowercase',
-			value: 'lowercase',
-			icon: formatLowercase,
-		},
-		{
-			label: 'Capitalize',
-			value: 'capitalize',
-			icon: formatCapitalize,
-		},
-	],
+export const WithIcons = () => {
+	const [ state, setState ] = useState();
+	return (
+		<ToggleGroupControl
+			onChange={ setState }
+			value={ state }
+			label={ 'With icons' }
+			hideLabelFromVision
+		>
+			<ToggleGroupControlOptionIcon
+				value="uppercase"
+				icon={ formatUppercase }
+				showTooltip={ true }
+			/>
+			<ToggleGroupControlOptionIcon
+				value="lowercase"
+				icon={ formatLowercase }
+				showTooltip={ true }
+			/>
+		</ToggleGroupControl>
+	);
 };
 
 export const WithReset = () => {
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
index b8b35e95a1043..30816250f5453 100644
--- 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,226 @@
 // 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;
+}
+
+.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;
+  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"
+          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"
+          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;
@@ -153,10 +373,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"
@@ -175,10 +395,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"
diff --git a/packages/components/src/toggle-group-control/test/index.js b/packages/components/src/toggle-group-control/test/index.js
index 2592b48c982ae..dcf73dbc506ba 100644
--- a/packages/components/src/toggle-group-control/test/index.js
+++ b/packages/components/src/toggle-group-control/test/index.js
@@ -3,10 +3,19 @@
  */
 import { render, fireEvent, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { formatLowercase, formatUppercase } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
-import { ToggleGroupControl, ToggleGroupControlOption } from '../index';
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+	ToggleGroupControlOptionIcon,
+} from '../index';
 
 describe( 'ToggleGroupControl', () => {
 	const options = (
@@ -31,16 +40,38 @@ describe( 'ToggleGroupControl', () => {
 		</>
 	);
 
-	it( 'should render correctly', () => {
-		const { container } = render(
-			<ToggleGroupControl label="Test Toggle Group Control">
-				{ options }
-			</ToggleGroupControl>
-		);
-
-		expect( container.firstChild ).toMatchSnapshot();
+	describe( 'should render correctly', () => {
+		it( 'with text options', () => {
+			const { container } = render(
+				<ToggleGroupControl label="Test Toggle Group Control">
+					{ options }
+				</ToggleGroupControl>
+			);
+
+			expect( container.firstChild ).toMatchSnapshot();
+		} );
+		it( 'with icons', () => {
+			const { container } = render(
+				<ToggleGroupControl
+					value="uppercase"
+					label="Test Toggle Group Control"
+				>
+					<ToggleGroupControlOptionIcon
+						value="uppercase"
+						icon={ formatUppercase }
+						showTooltip={ true }
+					/>
+					<ToggleGroupControlOptionIcon
+						value="lowercase"
+						icon={ formatLowercase }
+						showTooltip={ true }
+					/>
+				</ToggleGroupControl>
+			);
+
+			expect( container.firstChild ).toMatchSnapshot();
+		} );
 	} );
-
 	it( 'should call onChange with proper value', () => {
 		const mockOnChange = jest.fn();
 
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md
new file mode 100644
index 0000000000000..5ebd07d31d5b2
--- /dev/null
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md
@@ -0,0 +1,25 @@
+# `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 a child of [`ToggleGroupControl`](<(/packages/components/src/toggle-group-control/toggle-group-control/README.md)>).
+
+## Props
+
+### `children`: ReactNode
+
+-   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 use the `aria-label` prop.
+
+-   Required: No
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
new file mode 100644
index 0000000000000..3b67de6eb17af
--- /dev/null
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
@@ -0,0 +1,128 @@
+/**
+ * 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'
+	>,
+	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 used to be used as a
+ * child 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;
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/index.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/index.ts
new file mode 100644
index 0000000000000..57931a5c5246b
--- /dev/null
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/index.ts
@@ -0,0 +1 @@
+export { default as ToggleGroupControlOptionBase } from './component';
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
similarity index 100%
rename from packages/components/src/toggle-group-control/toggle-group-control-option/styles.ts
rename to packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
new file mode 100644
index 0000000000000..2b02899d87273
--- /dev/null
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
@@ -0,0 +1,54 @@
+# `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 }
+			/>
+			<ToggleGroupControlOptionIcon
+				value="lowercase"
+				icon={ formatLowercase }
+				showTooltip={ true }
+			/>
+		</ToggleGroupControl>
+	);
+}
+```
+
+## Props
+
+### `value`: `string | number`
+
+The value of the `ToggleGroupControlOption`.
+
+-   Required: Yes
+
+### `icon`: `WPComponent`
+
+Icon for the option.
+
+-   Required: Yes
+
+### `showTooltip`: `boolean`
+
+Whether to show a tooltip when hovering over the option. The tooltip will use the `aria-label` prop text.
+
+-   Required: No
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
new file mode 100644
index 0000000000000..68d30f6933a8e
--- /dev/null
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
@@ -0,0 +1,55 @@
+/**
+ * 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'
+	>
+) {
+	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>
+ *	);
+ * }
+ ** ```
+ */
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/index.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/index.ts
new file mode 100644
index 0000000000000..631a732b91ef3
--- /dev/null
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/index.ts
@@ -0,0 +1 @@
+export { default as ToggleGroupControlOptionIcon } from './component';
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
index ab72aecbf5461..2de2e665c3f5b 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
@@ -43,12 +43,6 @@ The value of the `ToggleGroupControlOption`.
 
 -   Required: Yes
 
-### `icon`: `WPComponent`
-
-Icon for the option. If `icon` is provided it will be used instead of the `label` and will show a tooltip automatically.
-
--   Required: No
-
 ### `showTooltip`: `boolean`
 
 Whether to show a tooltip when hovering over the option. The tooltip will attempt to use the `aria-label` prop text first, then the `label` prop text if no `aria-label` prop is found.
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
index b17b6b4ff4d34..9129befc1fbed 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
@@ -1,102 +1,22 @@
-/**
- * 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';
-import { Icon } from '@wordpress/icons';
-
 /**
  * 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, LabelView } = styles;
+import type { WordPressComponentProps } from '../../ui/context';
+import type { ToggleGroupControlOptionProps } from '../types';
+import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
 
-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 >
+export default function ToggleGroupControlOption(
+	props: WordPressComponentProps< ToggleGroupControlOptionProps, 'button' >
 ) {
-	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,
-		icon,
-		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 content = !! icon ? <Icon icon={ icon } /> : label;
+	const { label, ...restProps } = props;
+	const optionLabel = restProps[ 'aria-label' ] || label;
 	return (
-		<LabelView className={ labelViewClasses } data-active={ isActive }>
-			<WithToolTip
-				showTooltip={ !! icon ? true : showTooltip }
-				text={ optionLabel }
-			>
-				<Radio
-					{ ...radioProps }
-					as="button"
-					aria-label={ optionLabel }
-					className={ classes }
-					data-value={ value }
-					ref={ forwardedRef }
-					value={ value }
-				>
-					<ButtonContentView>{ content }</ButtonContentView>
-				</Radio>
-			</WithToolTip>
-		</LabelView>
+		<ToggleGroupControlOptionBase
+			{ ...restProps }
+			aria-label={ optionLabel }
+		>
+			{ label }
+		</ToggleGroupControlOptionBase>
 	);
 }
 
@@ -121,9 +41,3 @@ function ToggleGroupControlOption(
  * }
  * ```
  */
-const ConnectedToggleGroupControlOption = contextConnect(
-	ToggleGroupControlOption,
-	'ToggleGroupControlOption'
-);
-
-export default ConnectedToggleGroupControlOption;
diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts
index 038ee26d1262d..52aeb3e679400 100644
--- a/packages/components/src/toggle-group-control/types.ts
+++ b/packages/components/src/toggle-group-control/types.ts
@@ -10,18 +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;
-	/**
-	 * Icon for the option. If `icon` is provided it will be used instead of the `label`
-	 * and will show a tooltip automatically.
-	 */
-	icon?: JSX.Element;
 	/**
 	 * 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.
@@ -31,6 +22,27 @@ export type ToggleGroupControlOptionProps = {
 	showTooltip?: boolean;
 };
 
+export type ToggleGroupControlOptionIconProps = Omit<
+	ToggleGroupControlOptionBaseProps,
+	'children'
+> & {
+	/**
+	 * Icon for the option.
+	 */
+	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
@@ -39,7 +51,7 @@ export type WithToolTipProps = {
 	/**
 	 * Label for the Tooltip component.
 	 */
-	text: string;
+	text?: string;
 	/**
 	 * Whether to wrap the control option in a Tooltip component.
 	 *

From 8adb214f7190ab953f8992863a87f65f972e04c1 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 30 Mar 2022 12:52:19 +0300
Subject: [PATCH 6/8] auto updated manifest

---
 docs/manifest.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/docs/manifest.json b/docs/manifest.json
index c5881277eeca9..91bebab753a3b 100644
--- 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",

From 05e157334de6147451f05733d2174faa874742f6 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 31 Mar 2022 10:05:21 +0300
Subject: [PATCH 7/8] address feedback

---
 packages/components/CHANGELOG.md                          | 4 ++--
 .../components/src/toggle-group-control/stories/index.js  | 2 ++
 .../toggle-group-control/test/__snapshots__/index.js.snap | 2 ++
 .../components/src/toggle-group-control/test/index.js     | 2 ++
 .../toggle-group-control-option-base/README.md            | 8 +++++---
 .../toggle-group-control-option-base/component.tsx        | 7 ++++---
 .../toggle-group-control-option-icon/README.md            | 6 ++++--
 .../toggle-group-control-option-icon/component.tsx        | 3 ++-
 .../toggle-group-control-option/component.tsx             | 6 +++++-
 9 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 6cc6ae1582f7d..e92a7890ef6ce 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -5,7 +5,6 @@
 ### Enhancements
 
 -   Update `BorderControl` and `BorderBoxControl` to allow the passing of custom class names to popovers ([#39753](https://github.com/WordPress/gutenberg/pull/39753)).
--   `ToggleGroupControlOption`: Add `icon` support ([#39760](https://github.com/WordPress/gutenberg/pull/39760)).
 
 ### Internal
 
@@ -15,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
 
@@ -27,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/toggle-group-control/stories/index.js b/packages/components/src/toggle-group-control/stories/index.js
index ef784fc9688d4..797418b3cf80c 100644
--- a/packages/components/src/toggle-group-control/stories/index.js
+++ b/packages/components/src/toggle-group-control/stories/index.js
@@ -143,11 +143,13 @@ export const WithIcons = () => {
 				value="uppercase"
 				icon={ formatUppercase }
 				showTooltip={ true }
+				aria-label="Uppercase"
 			/>
 			<ToggleGroupControlOptionIcon
 				value="lowercase"
 				icon={ formatLowercase }
 				showTooltip={ true }
+				aria-label="Lowercase"
 			/>
 		</ToggleGroupControl>
 	);
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
index 30816250f5453..44dd725ae3e6c 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
@@ -157,6 +157,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
       >
         <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"
@@ -189,6 +190,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
       >
         <button
           aria-checked="false"
+          aria-label="Lowercase"
           class="emotion-10 components-toggle-group-control-option-base"
           data-value="lowercase"
           data-wp-c16t="true"
diff --git a/packages/components/src/toggle-group-control/test/index.js b/packages/components/src/toggle-group-control/test/index.js
index dcf73dbc506ba..80af2ef3c9bf0 100644
--- a/packages/components/src/toggle-group-control/test/index.js
+++ b/packages/components/src/toggle-group-control/test/index.js
@@ -60,11 +60,13 @@ describe( 'ToggleGroupControl', () => {
 						value="uppercase"
 						icon={ formatUppercase }
 						showTooltip={ true }
+						aria-label="Uppercase"
 					/>
 					<ToggleGroupControlOptionIcon
 						value="lowercase"
 						icon={ formatLowercase }
 						showTooltip={ true }
+						aria-label="Lowercase"
 					/>
 				</ToggleGroupControl>
 			);
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md
index 5ebd07d31d5b2..a3a9a94807e93 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md
@@ -4,11 +4,13 @@
 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 a child of [`ToggleGroupControl`](<(/packages/components/src/toggle-group-control/toggle-group-control/README.md)>).
+`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
+### `children`: `ReactNode`
+
+The children elements.
 
 -   Required: Yes
 
@@ -20,6 +22,6 @@ The value of the `ToggleGroupControlOptionBase`.
 
 ### `showTooltip`: `boolean`
 
-Whether to show a tooltip when hovering over the option. The tooltip will use the `aria-label` prop.
+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
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
index 3b67de6eb17af..e1520e4ac5826 100644
--- 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
@@ -43,7 +43,8 @@ const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
 function ToggleGroupControlOptionBase(
 	props: WordPressComponentProps<
 		ToggleGroupControlOptionBaseProps,
-		'button'
+		'button',
+		false
 	>,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -100,8 +101,8 @@ function ToggleGroupControlOptionBase(
 }
 
 /**
- * `ToggleGroupControlOptionBase` is a form component and is used to be used as a
- * child of `ToggleGroupControl`.
+ * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,
+ * generic component for any children of `ToggleGroupControl`.
  *
  * @example
  * ```jsx
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
index 2b02899d87273..adc63c0514952 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
@@ -22,11 +22,13 @@ function Example() {
 				value="uppercase"
 				icon={ formatUppercase }
 				showTooltip={ true }
+				aria-label="Uppercase"
 			/>
 			<ToggleGroupControlOptionIcon
 				value="lowercase"
 				icon={ formatLowercase }
 				showTooltip={ true }
+				aria-label="Lowercase"
 			/>
 		</ToggleGroupControl>
 	);
@@ -43,12 +45,12 @@ The value of the `ToggleGroupControlOption`.
 
 ### `icon`: `WPComponent`
 
-Icon for the option.
+Icon displayed as the content of the the `ToggleGroupControl` option.
 
 -   Required: Yes
 
 ### `showTooltip`: `boolean`
 
-Whether to show a tooltip when hovering over the option. The tooltip will use the `aria-label` prop text.
+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
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
index 68d30f6933a8e..1fb3d7f42f634 100644
--- 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
@@ -13,7 +13,8 @@ import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-bas
 export default function ToggleGroupControlOptionIcon(
 	props: WordPressComponentProps<
 		ToggleGroupControlOptionIconProps,
-		'button'
+		'button',
+		false
 	>
 ) {
 	const { icon, ...restProps } = props;
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
index 9129befc1fbed..f6c3bf9f5c4e9 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
@@ -6,7 +6,11 @@ import type { ToggleGroupControlOptionProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
 
 export default function ToggleGroupControlOption(
-	props: WordPressComponentProps< ToggleGroupControlOptionProps, 'button' >
+	props: WordPressComponentProps<
+		ToggleGroupControlOptionProps,
+		'button',
+		false
+	>
 ) {
 	const { label, ...restProps } = props;
 	const optionLabel = restProps[ 'aria-label' ] || label;

From 7d31f1f8590aa5b61b5489ad15e35043a2ee2305 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 31 Mar 2022 15:20:59 +0200
Subject: [PATCH 8/8] Icon prop documentation changes

---
 .../toggle-group-control-option-icon/README.md                 | 2 +-
 packages/components/src/toggle-group-control/types.ts          | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
index adc63c0514952..0d5da7dcef8c7 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
@@ -45,7 +45,7 @@ The value of the `ToggleGroupControlOption`.
 
 ### `icon`: `WPComponent`
 
-Icon displayed as the content of the the `ToggleGroupControl` option.
+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
 
diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts
index 52aeb3e679400..f2863677a144c 100644
--- a/packages/components/src/toggle-group-control/types.ts
+++ b/packages/components/src/toggle-group-control/types.ts
@@ -27,7 +27,8 @@ export type ToggleGroupControlOptionIconProps = Omit<
 	'children'
 > & {
 	/**
-	 * Icon for the option.
+	 * 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;
 };