From dcacf9f18cd6d146f5828d8bc3c7f8016b74f340 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 18 May 2021 17:31:23 +0300
Subject: [PATCH 01/30] temp commit

---
 docs/manifest.json                            |   6 +
 packages/components/src/index.js              |   1 +
 .../src/segmented-control/README.md           |   3 +
 .../src/segmented-control/component.tsx       | 122 +++++
 .../components/src/segmented-control/index.ts |   1 +
 .../segmented-control-backdrop.tsx            |  57 +++
 .../segmented-control-button.tsx              |  84 +++
 .../src/segmented-control/stories/index.js    |  93 ++++
 .../src/segmented-control/styles.ts           | 137 +++++
 .../src/segmented-control/test/index.js       |  30 ++
 .../test/snapshots/index.js.snap              | 480 ++++++++++++++++++
 .../components/src/segmented-control/types.ts |  66 +++
 .../components/src/utils/colors-values.js     |   1 +
 .../components/src/utils/config-values.js     |  43 +-
 packages/components/tsconfig.json             |   1 +
 15 files changed, 1111 insertions(+), 14 deletions(-)
 create mode 100644 packages/components/src/segmented-control/README.md
 create mode 100644 packages/components/src/segmented-control/component.tsx
 create mode 100644 packages/components/src/segmented-control/index.ts
 create mode 100644 packages/components/src/segmented-control/segmented-control-backdrop.tsx
 create mode 100644 packages/components/src/segmented-control/segmented-control-button.tsx
 create mode 100644 packages/components/src/segmented-control/stories/index.js
 create mode 100644 packages/components/src/segmented-control/styles.ts
 create mode 100644 packages/components/src/segmented-control/test/index.js
 create mode 100644 packages/components/src/segmented-control/test/snapshots/index.js.snap
 create mode 100644 packages/components/src/segmented-control/types.ts

diff --git a/docs/manifest.json b/docs/manifest.json
index 42f2c0ae80a8ed..8459d00cb5c710 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1151,6 +1151,12 @@
 		"markdown_source": "../packages/components/src/search-control/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "SegmentedControl",
+		"slug": "segmented-control",
+		"markdown_source": "../packages/components/src/segmented-control/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "SelectControl",
 		"slug": "select-control",
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index a97f0743c58d23..bca08d810b13bf 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -109,6 +109,7 @@ export { default as ResizableBox } from './resizable-box';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
 export { default as SearchControl } from './search-control';
+export { default as __experimentalSegmentedControl } from './segmented-control';
 export { default as SelectControl } from './select-control';
 export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';
diff --git a/packages/components/src/segmented-control/README.md b/packages/components/src/segmented-control/README.md
new file mode 100644
index 00000000000000..c1b34c838ff320
--- /dev/null
+++ b/packages/components/src/segmented-control/README.md
@@ -0,0 +1,3 @@
+# SegementedControl
+
+> **Experimental!**
diff --git a/packages/components/src/segmented-control/component.tsx b/packages/components/src/segmented-control/component.tsx
new file mode 100644
index 00000000000000..d10cfd13a9cec6
--- /dev/null
+++ b/packages/components/src/segmented-control/component.tsx
@@ -0,0 +1,122 @@
+/**
+ * External dependencies
+ */
+import { cx } from 'emotion';
+// eslint-disable-next-line no-restricted-imports
+import { RadioGroup, useRadioState } from 'reakit';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
+import { useMergeRefs, useResizeObserver } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+/**
+ * Internal dependencies
+ */
+import { contextConnect, useContextSystem } from '../ui/context';
+import { View } from '../view';
+import * as styles from './styles';
+import { useUpdateEffect } from '../utils/hooks';
+import Backdrop from './segmented-control-backdrop';
+import Button from './segmented-control-button';
+import type { SegmentedControlProps } from './types';
+
+function SegmentControl( props: any, forwardedRef: any ) {
+	const {
+		className,
+		baseId,
+		isAdaptiveWidth = false,
+		isBlock = false,
+		id,
+		label = __( 'SegmentControl' ),
+		options = [],
+		onChange = () => {},
+		size = 'medium',
+		value,
+		...otherProps
+	} = useContextSystem( props, 'SegmentedControl' );
+
+	const containerRef = useRef();
+	const [ resizeListener, sizes ] = useResizeObserver();
+
+	const radio = useRadioState( {
+		baseId: baseId || id,
+		unstable_virtual: true,
+		state: value || options[ 0 ]?.value,
+	} );
+
+	// Propagate radio.state change
+	useUpdateEffect( () => {
+		onChange( radio.state );
+	}, [ radio.state ] );
+
+	// Sync incoming value with radio.state
+	useUpdateEffect( () => {
+		if ( value !== radio.state ) {
+			radio.setState( value );
+		}
+	}, [ value ] );
+
+	const classes = cx(
+		styles.SegmentedControl,
+		isBlock && styles.block,
+		styles[ size ],
+		className
+	);
+	const mergedRefs = useMergeRefs( [ containerRef, forwardedRef ] );
+	return (
+		<RadioGroup
+			{ ...radio }
+			aria-label={ label }
+			as={ View }
+			className={ classes }
+			{ ...otherProps }
+			ref={ mergedRefs }
+		>
+			{ resizeListener }
+			<Backdrop
+				{ ...radio }
+				containerRef={ containerRef }
+				containerWidth={ sizes.width }
+			/>
+			{ options.map( ( option, index: number ) => {
+				const showSeparator = getShowSeparator( radio, index );
+				return (
+					<Button
+						{ ...radio }
+						{ ...option }
+						isBlock={ ! isAdaptiveWidth }
+						key={ option.value || index }
+						showSeparator={ showSeparator }
+					/>
+				);
+			} ) }
+		</RadioGroup>
+	);
+}
+
+function getShowSeparator( radio, index: number ) {
+	const { currentId, items } = radio;
+	const isLast = index === items.length - 1;
+	const isActive = items[ index ]?.id === currentId;
+	const isNextActive = items[ index + 1 ]?.id === currentId;
+
+	let showSeparator = true;
+
+	if ( items.length < 3 ) {
+		showSeparator = false;
+	}
+
+	if ( isActive || isNextActive || isLast ) {
+		showSeparator = false;
+	}
+
+	return showSeparator;
+}
+
+export default contextConnect( SegmentControl, 'SegmentControl' );
diff --git a/packages/components/src/segmented-control/index.ts b/packages/components/src/segmented-control/index.ts
new file mode 100644
index 00000000000000..949fb2586c7c90
--- /dev/null
+++ b/packages/components/src/segmented-control/index.ts
@@ -0,0 +1 @@
+export { default as SegmentedControl } from './component';
diff --git a/packages/components/src/segmented-control/segmented-control-backdrop.tsx b/packages/components/src/segmented-control/segmented-control-backdrop.tsx
new file mode 100644
index 00000000000000..570311b0da127e
--- /dev/null
+++ b/packages/components/src/segmented-control/segmented-control-backdrop.tsx
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, memo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { BackdropView } from './styles';
+import { CONFIG, COLORS } from '../utils';
+
+function SegmentedControlBackdrop( { containerRef, containerWidth, state } ) {
+	const [ left, setLeft ] = useState( 0 );
+	const [ width, setWidth ] = useState( 0 );
+	const [ canAnimate, setCanAnimate ] = useState( false );
+
+	useEffect( () => {
+		const containerNode = containerRef?.current;
+		if ( ! containerNode ) return;
+
+		/**
+		 * Workaround for Reakit
+		 */
+		const targetNode = containerNode.querySelector(
+			`[data-value="${ state }"]`
+		);
+		if ( ! targetNode ) return;
+
+		const { x: parentX } = containerNode.getBoundingClientRect();
+		const { width: offsetWidth, x } = targetNode.getBoundingClientRect();
+		const borderWidth = 1;
+		const offsetLeft = x - parentX - borderWidth;
+
+		setLeft( offsetLeft );
+		setWidth( offsetWidth );
+
+		if ( ! canAnimate ) {
+			window.requestAnimationFrame( () => {
+				setCanAnimate( true );
+			} );
+		}
+	}, [ canAnimate, containerRef, containerWidth, state ] );
+
+	return (
+		<BackdropView
+			role="presentation"
+			{ ...ui.$( 'SegmentedControlBackdrop' ) }
+			style={ {
+				transform: `translateX(${ left }px)`,
+				transition: canAnimate ? null : 'none',
+				width,
+			} }
+		/>
+	);
+}
+
+export default memo( SegmentedControlBackdrop );
diff --git a/packages/components/src/segmented-control/segmented-control-button.tsx b/packages/components/src/segmented-control/segmented-control-button.tsx
new file mode 100644
index 00000000000000..a1d6fd5942d983
--- /dev/null
+++ b/packages/components/src/segmented-control/segmented-control-button.tsx
@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { cx } from 'emotion';
+// eslint-disable-next-line no-restricted-imports
+import { Radio } from 'reakit';
+
+/**
+ * WordPress dependencies
+ */
+import { memo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from './styles';
+import { CONFIG, COLORS } from '../utils';
+
+const {
+	ButtonContentView,
+	ButtonView,
+	LabelPlaceholderView,
+	LabelView,
+	SeparatorView,
+} = styles;
+
+function SegmentedControlButton( {
+	className,
+	forwardedRef,
+	isBlock = false,
+	label,
+	showSeparator,
+	value,
+	...props
+} ) {
+	const isActive = props.state === value;
+
+	const labelViewClasses = cx( isBlock && styles.labelBlock );
+	const classes = cx( isActive && styles.buttonActive, className );
+
+	return (
+		<LabelView
+			className={ labelViewClasses }
+			data-active={ isActive }
+			{ ...ui.$( 'SegmentedControlButtonLabel' ) }
+		>
+			<Radio
+				{ ...props }
+				as={ ButtonView }
+				className={ classes }
+				data-value={ value }
+				ref={ forwardedRef }
+				value={ value }
+			>
+				<ButtonContentView
+					{ ...ui.$( 'SegmentedControlButtonContent' ) }
+				>
+					{ label }
+				</ButtonContentView>
+				<LabelPlaceholderView
+					aria-hidden
+					{ ...ui.$( 'SegmentedControlButtonContentPlaceholder' ) }
+				>
+					{ label }
+				</LabelPlaceholderView>
+			</Radio>
+			<SegmentedControlSeparator isActive={ ! showSeparator } />
+		</LabelView>
+	);
+}
+
+const SegmentedControlSeparator = memo( ( { isActive } ) => {
+	const classes = cx( isActive && styles.separatorActive );
+
+	return (
+		<SeparatorView
+			aria-hidden
+			className={ classes }
+			{ ...ui.$( 'SegmentedControlButtonSeparator' ) }
+		/>
+	);
+} );
+
+export default memo( SegmentedControlButton );
diff --git a/packages/components/src/segmented-control/stories/index.js b/packages/components/src/segmented-control/stories/index.js
new file mode 100644
index 00000000000000..19fe86b49a40a8
--- /dev/null
+++ b/packages/components/src/segmented-control/stories/index.js
@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	alignCenter,
+	alignJustify,
+	alignLeft,
+	alignRight,
+} from '@wordpress/icons';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Icon, Spacer, View } from '../../index';
+import { SegmentedControl } from '../index';
+
+export default {
+	component: SegmentedControl,
+	title: 'Components/SegmentedControl',
+};
+
+const align = [
+	{
+		label: <Icon icon={ alignLeft } size={ 14 } />,
+		value: 'left',
+	},
+	{
+		label: <Icon icon={ alignCenter } size={ 14 } />,
+		value: 'center',
+	},
+	{
+		label: <Icon icon={ alignRight } size={ 14 } />,
+		value: 'right',
+	},
+	{
+		label: <Icon icon={ alignJustify } size={ 14 } />,
+		value: 'justify',
+	},
+];
+
+export const _default = () => {
+	const [ alignState, setAlignState ] = useState( align[ 0 ].value );
+
+	const xy = [
+		{
+			label: 'Horizontal',
+			value: 'horizontal',
+		},
+		{
+			label: 'Vertical',
+			value: 'vertical',
+		},
+	];
+
+	const shortLong = [
+		{
+			label: 'Short',
+			value: 'short',
+		},
+		{
+			label: 'Looooooooooooong',
+			value: 'long',
+		},
+	];
+
+	return (
+		<View>
+			<Spacer css={ { width: [ null, 300 ] } }>
+				<SegmentedControl
+					isBlock
+					onChange={ setAlignState }
+					options={ align }
+					value={ alignState }
+				/>
+			</Spacer>
+			<Spacer css={ { width: [ null, 300 ] } }>
+				<SegmentedControl
+					isBlock
+					onChange={ setAlignState }
+					options={ align }
+					value={ alignState }
+				/>
+			</Spacer>
+			<Spacer>
+				<SegmentedControl options={ xy } />
+			</Spacer>
+			<Spacer>
+				<SegmentedControl isAdaptiveWidth options={ shortLong } />
+			</Spacer>
+		</View>
+	);
+};
diff --git a/packages/components/src/segmented-control/styles.ts b/packages/components/src/segmented-control/styles.ts
new file mode 100644
index 00000000000000..c45b8df7aef0c0
--- /dev/null
+++ b/packages/components/src/segmented-control/styles.ts
@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { CONFIG, COLORS } from '../utils';
+
+export const SegmentedControl = css`
+	background: ${ COLORS.ui.background };
+	border: 1px solid;
+	border-color: ${ COLORS.ui.border };
+	border-radius: calc( ${ CONFIG.controlBorderRadius } + 1px );
+	display: inline-flex;
+	min-height: ${ CONFIG.controlHeight };
+	min-width: 0;
+	padding: 1px;
+	position: relative;
+	transition: all ${ CONFIG.transitionDurationFastest } linear;
+
+	&:hover {
+		border-color: ${ COLORS.ui.borderHover };
+	}
+
+	&:focus {
+		border-color: ${ COLORS.ui.borderFocus };
+		box-shadow: ${ CONFIG.controlBoxShadowFocus };
+		outline: none;
+		z-index: 1;
+	}
+`;
+
+export const block = css`
+	display: flex;
+	width: 100%;
+`;
+
+export const BackdropView = styled.div`
+	background: ${ COLORS.ui.background };
+	border: 1px solid ${ CONFIG.segmentedControlBackdropBorderColor };
+	border-radius: ${ CONFIG.controlBorderRadius };
+	box-shadow: ${ CONFIG.segmentedControlBackdropBoxShadow };
+	height: calc( ${ CONFIG.controlHeight } - 4px );
+	left: 0;
+	position: absolute;
+	transition: all ${ CONFIG.transitionDurationFast } ease;
+	z-index: 1;
+`;
+
+export const LabelView = styled.div`
+	display: inline-flex;
+	max-width: 100%;
+	min-width: 0;
+	position: relative;
+`;
+
+export const labelBlock = css`
+	flex: 1;
+`;
+
+export const ButtonView = styled.button`
+	align-items: center;
+	appearance: none;
+	background: transparent;
+	border: none;
+	border-radius: ${ CONFIG.controlBorderRadius };
+	color: ${ CONFIG.controlTextActiveColor }; // ui.color.text
+	cursor: pointer;
+	display: flex;
+	height: 100%;
+	justify-content: center;
+	line-height: 100%;
+	outline: none;
+	padding: 0 12px;
+	position: relative;
+	text-align: center;
+	transition: background-color ${ CONFIG.transitionDurationFast } linear,
+		color ${ CONFIG.transitionDurationFast } linear, font-weight 60ms linear;
+	user-select: none;
+	width: 100%;
+	z-index: 2;
+
+	&::-moz-focus-inner {
+		border: 0;
+	}
+
+	&:active {
+		background: ${ CONFIG.segmentedControlButtonColorActive };
+	}
+`;
+
+export const ButtonContentView = styled.div`
+	font-size: ${ CONFIG.fontSize };
+	left: 50%;
+	line-height: 1;
+	position: absolute;
+	top: 50%;
+	transform: translate( -50%, -50% );
+`;
+
+export const buttonActive = css`
+	color: ${ CONFIG.controlTextActiveColor };
+	font-weight: bold;
+`;
+
+export const SeparatorView = styled.div`
+	background: ${ CONFIG.colorDivider };
+	height: calc( 100% - 4px - 4px );
+	position: absolute;
+	right: 0;
+	top: 4px;
+	transition: background ${ CONFIG.transitionDuration } linear;
+	width: 1px;
+`;
+
+export const separatorActive = css`
+	background: transparent;
+`;
+
+export const LabelPlaceholderView = styled.div`
+	font-size: ${ CONFIG.fontSize };
+	font-weight: bold;
+	height: 0;
+	overflow: hidden;
+	visibility: hidden;
+`;
+
+export const large = css`
+	min-height: ${ CONFIG.controlHeightLarge };
+`;
+
+export const small = css`
+	min-height: ${ CONFIG.controlHeightSmall };
+`;
diff --git a/packages/components/src/segmented-control/test/index.js b/packages/components/src/segmented-control/test/index.js
new file mode 100644
index 00000000000000..dc23bb30baf119
--- /dev/null
+++ b/packages/components/src/segmented-control/test/index.js
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+
+/**
+ * Internal dependencies
+ */
+import { SegmentedControl } from '../index';
+
+describe( 'props', () => {
+	const options = [
+		{ value: 'olaf', label: 'O' },
+		{ value: 'samantha', label: 'S' },
+	];
+
+	test( 'should render correctly', () => {
+		let container;
+
+		act( () => {
+			const result = render(
+				<SegmentedControl baseId="segmented" options={ options } />
+			);
+			container = result.container;
+		} );
+
+		expect( container.firstChild ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/components/src/segmented-control/test/snapshots/index.js.snap b/packages/components/src/segmented-control/test/snapshots/index.js.snap
new file mode 100644
index 00000000000000..7451dbb2263a00
--- /dev/null
+++ b/packages/components/src/segmented-control/test/snapshots/index.js.snap
@@ -0,0 +1,480 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`props should render correctly 1`] = `
+.emotion-0 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  background: #ffffff;
+  background: var(--wp-g2-segmented-control-background-color);
+  border: 1px solid;
+  border-color: #757575;
+  border-color: var(--wp-g2-segmented-control-border-color);
+  border-radius: calc(2px + 1px);
+  border-radius: calc(var(--wp-g2-control-border-radius) + 1px);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  min-height: 30px;
+  min-height: var(--wp-g2-control-height);
+  min-width: 0;
+  padding: 1px;
+  position: relative;
+  -webkit-transition: all 100ms linear;
+  -webkit-transition: all var(--wp-g2-transition-duration-fastest) linear;
+  transition: all 100ms linear;
+  transition: all var(--wp-g2-transition-duration-fastest) linear;
+}
+
+@media (prefers-reduced-motion) {
+  .emotion-0 {
+    -webkit-transition: none!important;
+    transition: none!important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-0 {
+  -webkit-transition: none!important;
+  transition: none!important;
+}
+
+.emotion-0:hover {
+  border-color: #757575;
+  border-color: var(--wp-g2-control-border-color-hover);
+}
+
+.emotion-0:focus {
+  border-color: #007cba;
+  border-color: var(--wp-g2-color-admin);
+  box-shadow: 0 0 0 0.5px #007cba;
+  box-shadow: var(--wp-g2-control-box-shadow-focus);
+  outline: none;
+  z-index: 1;
+}
+
+.emotion-1 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  background: #ffffff;
+  background: var(--wp-g2-segmented-control-backdrop-background-color);
+  border: 1px solid #757575;
+  border: 1px solid var(--wp-g2-segmented-control-backdrop-border-color);
+  border-radius: 2px;
+  border-radius: var(--wp-g2-control-border-radius);
+  box-shadow: transparent;
+  box-shadow: var(--wp-g2-segmented-control-backdrop-box-shadow);
+  height: calc(30px - 4px);
+  height: calc(var(--wp-g2-control-height) - 4px);
+  left: 0;
+  position: absolute;
+  -webkit-transition: all 160ms ease;
+  -webkit-transition: all var(--wp-g2-transition-duration-fast) ease;
+  transition: all 160ms ease;
+  transition: all var(--wp-g2-transition-duration-fast) ease;
+  z-index: 1;
+}
+
+@media (prefers-reduced-motion) {
+  .emotion-1 {
+    -webkit-transition: none!important;
+    transition: none!important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-1 {
+  -webkit-transition: none!important;
+  transition: none!important;
+}
+
+.emotion-2 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  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;
+}
+
+@media (prefers-reduced-motion) {
+  .emotion-2 {
+    -webkit-transition: none!important;
+    transition: none!important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-2 {
+  -webkit-transition: none!important;
+  transition: none!important;
+}
+
+.emotion-3 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  border-radius: var(--wp-g2-control-border-radius);
+  color: #1e1e1e;
+  color: var(--wp-g2-color-text);
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: 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;
+  -webkit-transition: background var(--wp-g2-transition-duration-fast) linear,color var(--wp-g2-transition-duration-fast) linear,font-weight 60ms linear;
+  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  transition: background var(--wp-g2-transition-duration-fast) linear,color var(--wp-g2-transition-duration-fast) 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;
+  color: #007cba;
+  color: var(--wp-g2-control-text-active-color);
+  font-weight: bold;
+}
+
+@media (prefers-reduced-motion) {
+  .emotion-3 {
+    -webkit-transition: none!important;
+    transition: none!important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-3 {
+  -webkit-transition: none!important;
+  transition: none!important;
+}
+
+.emotion-3::-moz-focus-inner {
+  border: 0;
+}
+
+.emotion-3:active {
+  background: #ffffff;
+  background: var(--wp-g2-segmented-control-button-color-active);
+}
+
+.emotion-4 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  font-size: 12px;
+  font-size: var(--wp-g2-segmented-control-font-size);
+  left: 50%;
+  line-height: 1;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+@media (prefers-reduced-motion) {
+  .emotion-4 {
+    -webkit-transition: none!important;
+    transition: none!important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-4 {
+  -webkit-transition: none!important;
+  transition: none!important;
+}
+
+.emotion-5 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  font-size: 12px;
+  font-size: var(--wp-g2-segmented-control-font-size);
+  font-weight: bold;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+@media (prefers-reduced-motion) {
+  .emotion-5 {
+    -webkit-transition: none!important;
+    transition: none!important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-5 {
+  -webkit-transition: none!important;
+  transition: none!important;
+}
+
+.emotion-6 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  background: rgba(0, 0, 0, 0.1);
+  background: var(--wp-g2-color-divider);
+  height: calc(100% - 4px - 4px);
+  position: absolute;
+  right: 0;
+  top: 4px;
+  -webkit-transition: background 200ms linear;
+  -webkit-transition: background var(--wp-g2-transition-duration) linear;
+  transition: background 200ms linear;
+  transition: background var(--wp-g2-transition-duration) linear;
+  width: 1px;
+  background: transparent;
+}
+
+@media (prefers-reduced-motion) {
+  .emotion-6 {
+    -webkit-transition: none!important;
+    transition: none!important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-6 {
+  -webkit-transition: none!important;
+  transition: none!important;
+}
+
+.emotion-8 {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
+  font-family: var(--wp-g2-font-family);
+  font-size: 13px;
+  font-size: var(--wp-g2-font-size);
+  font-weight: normal;
+  font-weight: var(--wp-g2-font-weight);
+  margin: 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  border-radius: var(--wp-g2-control-border-radius);
+  color: #1e1e1e;
+  color: var(--wp-g2-color-text);
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: 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;
+  -webkit-transition: background var(--wp-g2-transition-duration-fast) linear,color var(--wp-g2-transition-duration-fast) linear,font-weight 60ms linear;
+  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  transition: background var(--wp-g2-transition-duration-fast) linear,color var(--wp-g2-transition-duration-fast) 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) {
+  .emotion-8 {
+    -webkit-transition: none!important;
+    transition: none!important;
+  }
+}
+
+[data-system-ui-reduced-motion-mode="true"] .emotion-8 {
+  -webkit-transition: none!important;
+  transition: none!important;
+}
+
+.emotion-8::-moz-focus-inner {
+  border: 0;
+}
+
+.emotion-8:active {
+  background: #ffffff;
+  background: var(--wp-g2-segmented-control-button-color-active);
+}
+
+<div
+  aria-activedescendant="segmented-1"
+  aria-label="SegmentControl"
+  class="components-segmented-control wp-components-segmented-control ic-qksk6y ic-192yz5d emotion-0"
+  data-g2-c16t="true"
+  data-g2-component="SegmentedControl"
+  id="segmented"
+  role="radiogroup"
+  tabindex="0"
+>
+  <iframe
+    aria-hidden="true"
+    frameborder="0"
+    src="about:blank"
+    style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
+    tabindex="-1"
+  />
+  <div
+    class="ic-otytyz ic-192yz5d emotion-1"
+    data-g2-component="SegmentedControlBackdrop"
+    role="presentation"
+    style="transform: translateX(NaNpx); transition: none; width: 0px;"
+  />
+  <div
+    class="ic-1blhbvo ic-192yz5d emotion-2"
+    data-active="true"
+    data-g2-component="SegmentedControlButtonLabel"
+  >
+    <button
+      aria-checked="true"
+      aria-selected="true"
+      class="ic-1c3kh7b ic-192yz5d emotion-3"
+      data-value="olaf"
+      id="segmented-1"
+      role="radio"
+      tabindex="-1"
+    >
+      <div
+        class="ic-151osxh ic-192yz5d emotion-4"
+        data-g2-component="SegmentedControlButtonContent"
+      >
+        O
+      </div>
+      <div
+        aria-hidden="true"
+        class="ic-1iv4r3z ic-192yz5d emotion-5"
+        data-g2-component="SegmentedControlButtonContentPlaceholder"
+      >
+        O
+      </div>
+    </button>
+    <div
+      aria-hidden="true"
+      class="ic-lqthxd ic-192yz5d emotion-6"
+      data-g2-component="SegmentedControlButtonSeparator"
+    />
+  </div>
+  <div
+    class="ic-1blhbvo ic-192yz5d emotion-2"
+    data-active="false"
+    data-g2-component="SegmentedControlButtonLabel"
+  >
+    <button
+      aria-checked="false"
+      class="ic-1c3kh7b ic-192yz5d emotion-8"
+      data-value="samantha"
+      id="segmented-2"
+      role="radio"
+      tabindex="-1"
+    >
+      <div
+        class="ic-151osxh ic-192yz5d emotion-4"
+        data-g2-component="SegmentedControlButtonContent"
+      >
+        S
+      </div>
+      <div
+        aria-hidden="true"
+        class="ic-1iv4r3z ic-192yz5d emotion-5"
+        data-g2-component="SegmentedControlButtonContentPlaceholder"
+      >
+        S
+      </div>
+    </button>
+    <div
+      aria-hidden="true"
+      class="ic-lqthxd ic-192yz5d emotion-6"
+      data-g2-component="SegmentedControlButtonSeparator"
+    />
+  </div>
+</div>
+`;
diff --git a/packages/components/src/segmented-control/types.ts b/packages/components/src/segmented-control/types.ts
new file mode 100644
index 00000000000000..10e7c559b62e63
--- /dev/null
+++ b/packages/components/src/segmented-control/types.ts
@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import type { FormElementProps, SizeRangeDefault } from '../utils/types';
+import type { PolymorphicComponent } from '../ui/context';
+
+export declare type SegmentedControlProps = Omit<
+	FormElementProps< any >,
+	'defaultValue'
+> & {
+	/**
+	 * ID that will serve as a base for all the items IDs.
+	 *
+	 * @see https://reakit.io/docs/radio/#useradiostate
+	 */
+	baseId?: string;
+	/**
+	 * Determines if segments should be rendered with equal widths.
+	 *
+	 * @default false
+	 */
+	isAdaptiveWidth?: boolean;
+	/**
+	 * Renders `SegmentedControl` is a (CSS) block element.
+	 *
+	 * @default false
+	 */
+	isBlock?: boolean;
+	/**
+	 * Options to render within `SegmentedControl`.
+	 *
+	 * @example
+	 * ```jsx
+	 * const options = [
+	 *  { id: 'elsa', value: 'elsa', label: 'Elsa' },
+	 *  { id: 'ana', value: 'ana', label: 'Ana' },
+	 * ]
+	 *
+	 * const Heroes = <SegmentedControl options={options} />
+	 * ```
+	 */
+	options?: Array< unknown >;
+	/**
+	 * Callback when a segment is selected.
+	 */
+	onChange?: ( ...args: any ) => void;
+	/**
+	 * Determines the size of `SegmentedControl`.
+	 *
+	 * @default 'medium'
+	 */
+	size?: SizeRangeDefault;
+};
+
+/**
+ * `SegmentedControl` is a form component that lets users choose options represented in horizontal segments.
+ *
+ * @example
+ * ```jsx
+ * <SegmentedControl options={[...]} />
+ * ```
+ */
+export declare const SegmentedControl: PolymorphicComponent<
+	'input',
+	SegmentedControlProps
+>;
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index 2d54d4935d3a33..0462fc98b532fa 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -155,6 +155,7 @@ export const UI = {
 	background: BASE.white,
 	backgroundDisabled: LIGHT_GRAY[ 200 ],
 	border: G2.gray[ 700 ],
+	borderHover: G2.gray[ 700 ],
 	borderFocus: ADMIN.themeDark10,
 	borderDisabled: G2.gray[ 400 ],
 	borderLight: G2.gray[ 200 ],
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index c19b7d73c5a554..f8131e3567a1ed 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -7,7 +7,36 @@ import { COLORS } from './colors-values';
 const CONTROL_HEIGHT = '30px';
 const CONTROL_PADDING_X = '12px';
 
+const CONTROL_PROPS = {
+	controlSurfaceColor: COLORS.white,
+	controlTextActiveColor: COLORS.ui.theme,
+	controlPaddingX: CONTROL_PADDING_X,
+	controlPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,
+	controlPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,
+	controlBackgroundColor: COLORS.white,
+	controlBorderRadius: '2px',
+	controlBorderColor: COLORS.gray[ 700 ],
+	controlBoxShadow: 'transparent',
+	controlBorderColorHover: COLORS.gray[ 700 ],
+	controlBoxShadowFocus: `0 0 0, 0.5px, ${ COLORS.admin }`,
+	controlDestructiveBorderColor: COLORS.alert.red,
+	controlHeight: CONTROL_HEIGHT,
+	controlHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,
+	controlHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,
+	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,
+};
+const SEGMENTED_CONTROL_PROPS = {
+	segmentedControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
+	segmentedControlBorderColor: COLORS.ui.border, // get( 'controlBorderColor' )
+	segmentedControlBackdropBackgroundColor: CONTROL_PROPS.controlSurfaceColor,
+	segmentedControlBackdropBorderColor: COLORS.ui.border, // get( 'controlBorderColor' ),
+	segmentedControlBackdropBoxShadow: 'transparent',
+	segmentedControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,
+};
+
 export default {
+	...CONTROL_PROPS,
+	...SEGMENTED_CONTROL_PROPS,
 	colorDivider: 'rgba(0, 0, 0, 0.1)',
 	colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
 	colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
@@ -33,20 +62,6 @@ export default {
 	fontWeight: 'normal',
 	fontWeightHeading: '600',
 	gridBase: '4px',
-	controlPaddingX: CONTROL_PADDING_X,
-	controlPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,
-	controlPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,
-	controlBackgroundColor: COLORS.white,
-	controlBorderRadius: '2px',
-	controlBorderColor: COLORS.gray[ 700 ],
-	controlBoxShadow: 'transparent',
-	controlBorderColorHover: COLORS.gray[ 700 ],
-	controlBoxShadowFocus: `0 0 0, 0.5px, ${ COLORS.admin }`,
-	controlDestructiveBorderColor: COLORS.alert.red,
-	controlHeight: CONTROL_HEIGHT,
-	controlHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,
-	controlHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,
-	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,
 	cardBorderRadius: '2px',
 	cardPaddingXSmall: `${ space( 2 ) }`,
 	cardPaddingSmall: `${ space( 4 ) }`,
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 4589afd554f1a7..d01a781b3f9c91 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -37,6 +37,7 @@
 		"src/icon/**/*",
 		"src/scroll-lock/**/*",
 		"src/scrollable/**/*",
+		"src/segmented-control/**/*",
 		"src/shortcut/**/*",
 		"src/spacer/**/*",
 		"src/spinner/**/*",

From 5fceebe5a878d0b9e86f29808a3c49c8b38a5d42 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 10 Jun 2021 17:12:16 +0300
Subject: [PATCH 02/30] follow up

---
 packages/components/src/index.js              |  2 +-
 .../src/segmented-control/component.tsx       | 44 ++++++++------
 .../segmented-control-backdrop.tsx            |  8 +--
 .../segmented-control-button.tsx              | 59 +++++++------------
 .../src/segmented-control/styles.ts           |  4 +-
 .../components/src/segmented-control/types.ts | 55 ++++++++++++++++-
 packages/components/tsconfig.json             |  3 +-
 7 files changed, 106 insertions(+), 69 deletions(-)

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index bca08d810b13bf..3b47416ceb5750 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -109,7 +109,7 @@ export { default as ResizableBox } from './resizable-box';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
 export { default as SearchControl } from './search-control';
-export { default as __experimentalSegmentedControl } from './segmented-control';
+export { SegmentedControl as __experimentalSegmentedControl } from './segmented-control';
 export { default as SelectControl } from './select-control';
 export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';
diff --git a/packages/components/src/segmented-control/component.tsx b/packages/components/src/segmented-control/component.tsx
index d10cfd13a9cec6..a78e20043f93fb 100644
--- a/packages/components/src/segmented-control/component.tsx
+++ b/packages/components/src/segmented-control/component.tsx
@@ -4,17 +4,15 @@
 import { cx } from 'emotion';
 // eslint-disable-next-line no-restricted-imports
 import { RadioGroup, useRadioState } from 'reakit';
+import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
-import { useMergeRefs, useResizeObserver } from '@wordpress/compose';
+import { useRef, useMemo } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
 /**
  * Internal dependencies
  */
@@ -24,25 +22,30 @@ import * as styles from './styles';
 import { useUpdateEffect } from '../utils/hooks';
 import Backdrop from './segmented-control-backdrop';
 import Button from './segmented-control-button';
-import type { SegmentedControlProps } from './types';
 
-function SegmentControl( props: any, forwardedRef: any ) {
+const noop = () => {};
+
+/**
+ * @param {import('./types').SegmentedControlProps} props
+ * @param {import('react').Ref<any>}                forwardedRef
+ */
+function SegmentControl( props, forwardedRef ) {
 	const {
 		className,
 		baseId,
 		isAdaptiveWidth = false,
 		isBlock = false,
 		id,
-		label = __( 'SegmentControl' ),
+		label,
 		options = [],
-		onChange = () => {},
+		onChange = noop,
 		size = 'medium',
 		value,
 		...otherProps
 	} = useContextSystem( props, 'SegmentedControl' );
 
 	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeObserver();
+	const [ resizeListener, sizes ] = useResizeAware();
 
 	const radio = useRadioState( {
 		baseId: baseId || id,
@@ -62,13 +65,16 @@ function SegmentControl( props: any, forwardedRef: any ) {
 		}
 	}, [ value ] );
 
-	const classes = cx(
-		styles.SegmentedControl,
-		isBlock && styles.block,
-		styles[ size ],
-		className
+	const classes = useMemo(
+		() =>
+			cx(
+				styles.SegmentedControl,
+				isBlock && styles.block,
+				styles[ size ],
+				className
+			),
+		[ className, size ]
 	);
-	const mergedRefs = useMergeRefs( [ containerRef, forwardedRef ] );
 	return (
 		<RadioGroup
 			{ ...radio }
@@ -76,7 +82,7 @@ function SegmentControl( props: any, forwardedRef: any ) {
 			as={ View }
 			className={ classes }
 			{ ...otherProps }
-			ref={ mergedRefs }
+			ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
 		>
 			{ resizeListener }
 			<Backdrop
@@ -84,7 +90,7 @@ function SegmentControl( props: any, forwardedRef: any ) {
 				containerRef={ containerRef }
 				containerWidth={ sizes.width }
 			/>
-			{ options.map( ( option, index: number ) => {
+			{ options.map( ( option: any, index: number ) => {
 				const showSeparator = getShowSeparator( radio, index );
 				return (
 					<Button
@@ -100,7 +106,7 @@ function SegmentControl( props: any, forwardedRef: any ) {
 	);
 }
 
-function getShowSeparator( radio, index: number ) {
+function getShowSeparator( radio: any, index: number ) {
 	const { currentId, items } = radio;
 	const isLast = index === items.length - 1;
 	const isActive = items[ index ]?.id === currentId;
diff --git a/packages/components/src/segmented-control/segmented-control-backdrop.tsx b/packages/components/src/segmented-control/segmented-control-backdrop.tsx
index 570311b0da127e..03c4134eddf630 100644
--- a/packages/components/src/segmented-control/segmented-control-backdrop.tsx
+++ b/packages/components/src/segmented-control/segmented-control-backdrop.tsx
@@ -6,10 +6,11 @@ import { useState, useEffect, memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import type { SegmentedControlBackdropProps } from './types';
 import { BackdropView } from './styles';
-import { CONFIG, COLORS } from '../utils';
 
-function SegmentedControlBackdrop( { containerRef, containerWidth, state } ) {
+function SegmentedControlBackdrop( props: SegmentedControlBackdropProps ) {
+	const { containerRef, containerWidth, state } = props;
 	const [ left, setLeft ] = useState( 0 );
 	const [ width, setWidth ] = useState( 0 );
 	const [ canAnimate, setCanAnimate ] = useState( false );
@@ -44,10 +45,9 @@ function SegmentedControlBackdrop( { containerRef, containerWidth, state } ) {
 	return (
 		<BackdropView
 			role="presentation"
-			{ ...ui.$( 'SegmentedControlBackdrop' ) }
 			style={ {
 				transform: `translateX(${ left }px)`,
-				transition: canAnimate ? null : 'none',
+				transition: canAnimate ? undefined : 'none',
 				width,
 			} }
 		/>
diff --git a/packages/components/src/segmented-control/segmented-control-button.tsx b/packages/components/src/segmented-control/segmented-control-button.tsx
index a1d6fd5942d983..6909a6b8b0779a 100644
--- a/packages/components/src/segmented-control/segmented-control-button.tsx
+++ b/packages/components/src/segmented-control/segmented-control-button.tsx
@@ -13,37 +13,32 @@ import { memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import * as styles from './styles';
-import { CONFIG, COLORS } from '../utils';
-
-const {
+import {
 	ButtonContentView,
 	ButtonView,
 	LabelPlaceholderView,
 	LabelView,
 	SeparatorView,
-} = styles;
+} from './styles';
+// eslint-disable-next-line no-duplicate-imports
+import * as styles from './styles';
+import type { SegmentedControlButtonProps } from './types';
 
-function SegmentedControlButton( {
-	className,
-	forwardedRef,
-	isBlock = false,
-	label,
-	showSeparator,
-	value,
-	...props
-} ) {
+function SegmentedControlButton( allProps: SegmentedControlButtonProps ) {
+	const {
+		className,
+		forwardedRef,
+		isBlock = false,
+		label,
+		showSeparator,
+		value,
+		...props
+	} = allProps;
 	const isActive = props.state === value;
-
 	const labelViewClasses = cx( isBlock && styles.labelBlock );
 	const classes = cx( isActive && styles.buttonActive, className );
-
 	return (
-		<LabelView
-			className={ labelViewClasses }
-			data-active={ isActive }
-			{ ...ui.$( 'SegmentedControlButtonLabel' ) }
-		>
+		<LabelView className={ labelViewClasses } data-active={ isActive }>
 			<Radio
 				{ ...props }
 				as={ ButtonView }
@@ -52,15 +47,8 @@ function SegmentedControlButton( {
 				ref={ forwardedRef }
 				value={ value }
 			>
-				<ButtonContentView
-					{ ...ui.$( 'SegmentedControlButtonContent' ) }
-				>
-					{ label }
-				</ButtonContentView>
-				<LabelPlaceholderView
-					aria-hidden
-					{ ...ui.$( 'SegmentedControlButtonContentPlaceholder' ) }
-				>
+				<ButtonContentView>{ label }</ButtonContentView>
+				<LabelPlaceholderView aria-hidden>
 					{ label }
 				</LabelPlaceholderView>
 			</Radio>
@@ -69,16 +57,9 @@ function SegmentedControlButton( {
 	);
 }
 
-const SegmentedControlSeparator = memo( ( { isActive } ) => {
+const SegmentedControlSeparator = memo( ( { isActive: boolean } ) => {
 	const classes = cx( isActive && styles.separatorActive );
-
-	return (
-		<SeparatorView
-			aria-hidden
-			className={ classes }
-			{ ...ui.$( 'SegmentedControlButtonSeparator' ) }
-		/>
-	);
+	return <SeparatorView aria-hidden className={ classes } />;
 } );
 
 export default memo( SegmentedControlButton );
diff --git a/packages/components/src/segmented-control/styles.ts b/packages/components/src/segmented-control/styles.ts
index c45b8df7aef0c0..a3b55e6004075c 100644
--- a/packages/components/src/segmented-control/styles.ts
+++ b/packages/components/src/segmented-control/styles.ts
@@ -67,7 +67,7 @@ export const ButtonView = styled.button`
 	background: transparent;
 	border: none;
 	border-radius: ${ CONFIG.controlBorderRadius };
-	color: ${ CONFIG.controlTextActiveColor }; // ui.color.text
+	color: ${ CONFIG.controlTextActiveColor };
 	cursor: pointer;
 	display: flex;
 	height: 100%;
@@ -77,7 +77,7 @@ export const ButtonView = styled.button`
 	padding: 0 12px;
 	position: relative;
 	text-align: center;
-	transition: background-color ${ CONFIG.transitionDurationFast } linear,
+	transition: background ${ CONFIG.transitionDurationFast } linear,
 		color ${ CONFIG.transitionDurationFast } linear, font-weight 60ms linear;
 	user-select: none;
 	width: 100%;
diff --git a/packages/components/src/segmented-control/types.ts b/packages/components/src/segmented-control/types.ts
index 10e7c559b62e63..a331de8b0f586d 100644
--- a/packages/components/src/segmented-control/types.ts
+++ b/packages/components/src/segmented-control/types.ts
@@ -1,13 +1,37 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref, RefObject } from 'react';
+
 /**
  * Internal dependencies
  */
 import type { FormElementProps, SizeRangeDefault } from '../utils/types';
 import type { PolymorphicComponent } from '../ui/context';
 
-export declare type SegmentedControlProps = Omit<
+/**
+ * Option to render within `SegmentedControl`.
+ *
+ * @example
+ * ```jsx
+ * const option = { id: 'elsa', value: 'elsa', label: 'Elsa' };
+ * ```
+ */
+export type SegmentedControlOption = {
+	id: string | number;
+	value: string | number;
+	label: string;
+};
+
+export type SegmentedControlProps = Omit<
 	FormElementProps< any >,
 	'defaultValue'
 > & {
+	/**
+	 * Label for the form element.
+	 */
+	label: string;
 	/**
 	 * ID that will serve as a base for all the items IDs.
 	 *
@@ -39,7 +63,7 @@ export declare type SegmentedControlProps = Omit<
 	 * const Heroes = <SegmentedControl options={options} />
 	 * ```
 	 */
-	options?: Array< unknown >;
+	options?: Array< SegmentedControlOption >;
 	/**
 	 * Callback when a segment is selected.
 	 */
@@ -50,6 +74,10 @@ export declare type SegmentedControlProps = Omit<
 	 * @default 'medium'
 	 */
 	size?: SizeRangeDefault;
+	/**
+	 * The value of `SegmentedControl`
+	 */
+	value?: string | number;
 };
 
 /**
@@ -60,7 +88,28 @@ export declare type SegmentedControlProps = Omit<
  * <SegmentedControl options={[...]} />
  * ```
  */
-export declare const SegmentedControl: PolymorphicComponent<
+export type SegmentedControl = PolymorphicComponent<
 	'input',
 	SegmentedControlProps
 >;
+
+export type SegmentedControlButtonProps = {
+	className?: string;
+	forwardedRef?: Ref< any >;
+	/**
+	 * Renders `SegmentedControl` is a (CSS) block element.
+	 *
+	 * @default false
+	 */
+	isBlock?: boolean;
+	label: string;
+	showSeparator?: boolean;
+	value?: string | number;
+	state?: any;
+};
+
+export type SegmentedControlBackdropProps = {
+	containerRef: RefObject< any >;
+	containerWidth?: number | null;
+	state?: any;
+};
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index d01a781b3f9c91..36345e0ce48468 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -15,7 +15,8 @@
 		{ "path": "../is-shallow-equal" },
 		{ "path": "../primitives" },
 		{ "path": "../react-i18n" },
-		{ "path": "../warning" }
+		{ "path": "../warning" },
+		{ "path": "../compose" }
 	],
 	"include": [
 		"src/__next/**/*",

From cac3d00a95ced8d016f2c8842a04b7e8845ca949 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 17 Jun 2021 09:32:50 +0300
Subject: [PATCH 03/30] add/fix types

---
 .../src/segmented-control/component.tsx       |  16 +-
 .../segmented-control-backdrop.tsx            |   7 +-
 .../segmented-control-button.tsx              |  10 +-
 .../src/segmented-control/styles.ts           |  27 +-
 .../test/snapshots/index.js.snap              | 480 ------------------
 .../components/src/segmented-control/types.ts |  18 +-
 .../components/src/utils/config-values.js     |   5 +-
 7 files changed, 47 insertions(+), 516 deletions(-)
 delete mode 100644 packages/components/src/segmented-control/test/snapshots/index.js.snap

diff --git a/packages/components/src/segmented-control/component.tsx b/packages/components/src/segmented-control/component.tsx
index a78e20043f93fb..34d68aba629492 100644
--- a/packages/components/src/segmented-control/component.tsx
+++ b/packages/components/src/segmented-control/component.tsx
@@ -16,20 +16,24 @@ import { useMergeRefs } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { contextConnect, useContextSystem } from '../ui/context';
+import {
+	contextConnect,
+	useContextSystem,
+	PolymorphicComponentProps,
+} from '../ui/context';
 import { View } from '../view';
 import * as styles from './styles';
 import { useUpdateEffect } from '../utils/hooks';
 import Backdrop from './segmented-control-backdrop';
 import Button from './segmented-control-button';
+import type { SegmentedControlProps } from './types';
 
 const noop = () => {};
 
-/**
- * @param {import('./types').SegmentedControlProps} props
- * @param {import('react').Ref<any>}                forwardedRef
- */
-function SegmentControl( props, forwardedRef ) {
+function SegmentControl(
+	props: PolymorphicComponentProps< SegmentedControlProps, 'input' >,
+	forwardedRef: import('react').Ref< any >
+) {
 	const {
 		className,
 		baseId,
diff --git a/packages/components/src/segmented-control/segmented-control-backdrop.tsx b/packages/components/src/segmented-control/segmented-control-backdrop.tsx
index 03c4134eddf630..5cca63e22c4a1e 100644
--- a/packages/components/src/segmented-control/segmented-control-backdrop.tsx
+++ b/packages/components/src/segmented-control/segmented-control-backdrop.tsx
@@ -9,8 +9,11 @@ import { useState, useEffect, memo } from '@wordpress/element';
 import type { SegmentedControlBackdropProps } from './types';
 import { BackdropView } from './styles';
 
-function SegmentedControlBackdrop( props: SegmentedControlBackdropProps ) {
-	const { containerRef, containerWidth, state } = props;
+function SegmentedControlBackdrop( {
+	containerRef,
+	containerWidth,
+	state,
+}: SegmentedControlBackdropProps ) {
 	const [ left, setLeft ] = useState( 0 );
 	const [ width, setWidth ] = useState( 0 );
 	const [ canAnimate, setCanAnimate ] = useState( false );
diff --git a/packages/components/src/segmented-control/segmented-control-button.tsx b/packages/components/src/segmented-control/segmented-control-button.tsx
index 6909a6b8b0779a..bafcc5eb0eddf4 100644
--- a/packages/components/src/segmented-control/segmented-control-button.tsx
+++ b/packages/components/src/segmented-control/segmented-control-button.tsx
@@ -57,9 +57,11 @@ function SegmentedControlButton( allProps: SegmentedControlButtonProps ) {
 	);
 }
 
-const SegmentedControlSeparator = memo( ( { isActive: boolean } ) => {
-	const classes = cx( isActive && styles.separatorActive );
-	return <SeparatorView aria-hidden className={ classes } />;
-} );
+const SegmentedControlSeparator = memo(
+	( { isActive }: { isActive: boolean } ) => {
+		const classes = cx( isActive && styles.separatorActive );
+		return <SeparatorView aria-hidden className={ classes } />;
+	}
+);
 
 export default memo( SegmentedControlButton );
diff --git a/packages/components/src/segmented-control/styles.ts b/packages/components/src/segmented-control/styles.ts
index a3b55e6004075c..f3107c4d486dfc 100644
--- a/packages/components/src/segmented-control/styles.ts
+++ b/packages/components/src/segmented-control/styles.ts
@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/core';
+import { css } from 'emotion';
 import styled from '@emotion/styled';
 
 /**
  * Internal dependencies
  */
-import { CONFIG, COLORS } from '../utils';
+import { CONFIG, COLORS, reduceMotion } from '../utils';
 
 export const SegmentedControl = css`
 	background: ${ COLORS.ui.background };
@@ -20,7 +20,7 @@ export const SegmentedControl = css`
 	padding: 1px;
 	position: relative;
 	transition: all ${ CONFIG.transitionDurationFastest } linear;
-
+	${ reduceMotion( 'transition' ) }
 	&:hover {
 		border-color: ${ COLORS.ui.borderHover };
 	}
@@ -47,6 +47,7 @@ export const BackdropView = styled.div`
 	left: 0;
 	position: absolute;
 	transition: all ${ CONFIG.transitionDurationFast } ease;
+	${ reduceMotion( 'transition' ) }
 	z-index: 1;
 `;
 
@@ -79,6 +80,7 @@ export const ButtonView = styled.button`
 	text-align: center;
 	transition: background ${ CONFIG.transitionDurationFast } linear,
 		color ${ CONFIG.transitionDurationFast } linear, font-weight 60ms linear;
+	${ reduceMotion( 'transition' ) }
 	user-select: none;
 	width: 100%;
 	z-index: 2;
@@ -94,10 +96,10 @@ export const ButtonView = styled.button`
 
 export const ButtonContentView = styled.div`
 	font-size: ${ CONFIG.fontSize };
-	left: 50%;
 	line-height: 1;
 	position: absolute;
 	top: 50%;
+	left: 50%;
 	transform: translate( -50%, -50% );
 `;
 
@@ -113,6 +115,7 @@ export const SeparatorView = styled.div`
 	right: 0;
 	top: 4px;
 	transition: background ${ CONFIG.transitionDuration } linear;
+	${ reduceMotion( 'transition' ) }
 	width: 1px;
 `;
 
@@ -128,10 +131,22 @@ export const LabelPlaceholderView = styled.div`
 	visibility: hidden;
 `;
 
-export const large = css`
-	min-height: ${ CONFIG.controlHeightLarge };
+export const xSmall = css`
+	min-height: ${ CONFIG.controlHeightXSmall };
 `;
 
 export const small = css`
 	min-height: ${ CONFIG.controlHeightSmall };
 `;
+
+export const medium = css`
+	min-height: ${ CONFIG.controlHeight };
+`;
+
+export const large = css`
+	min-height: ${ CONFIG.controlHeightLarge };
+`;
+
+export const xLarge = css`
+	min-height: ${ CONFIG.controlHeightXLarge };
+`;
diff --git a/packages/components/src/segmented-control/test/snapshots/index.js.snap b/packages/components/src/segmented-control/test/snapshots/index.js.snap
deleted file mode 100644
index 7451dbb2263a00..00000000000000
--- a/packages/components/src/segmented-control/test/snapshots/index.js.snap
+++ /dev/null
@@ -1,480 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`props should render correctly 1`] = `
-.emotion-0 {
-  box-sizing: border-box;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
-  font-family: var(--wp-g2-font-family);
-  font-size: 13px;
-  font-size: var(--wp-g2-font-size);
-  font-weight: normal;
-  font-weight: var(--wp-g2-font-weight);
-  margin: 0;
-  background: #ffffff;
-  background: var(--wp-g2-segmented-control-background-color);
-  border: 1px solid;
-  border-color: #757575;
-  border-color: var(--wp-g2-segmented-control-border-color);
-  border-radius: calc(2px + 1px);
-  border-radius: calc(var(--wp-g2-control-border-radius) + 1px);
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  min-height: 30px;
-  min-height: var(--wp-g2-control-height);
-  min-width: 0;
-  padding: 1px;
-  position: relative;
-  -webkit-transition: all 100ms linear;
-  -webkit-transition: all var(--wp-g2-transition-duration-fastest) linear;
-  transition: all 100ms linear;
-  transition: all var(--wp-g2-transition-duration-fastest) linear;
-}
-
-@media (prefers-reduced-motion) {
-  .emotion-0 {
-    -webkit-transition: none!important;
-    transition: none!important;
-  }
-}
-
-[data-system-ui-reduced-motion-mode="true"] .emotion-0 {
-  -webkit-transition: none!important;
-  transition: none!important;
-}
-
-.emotion-0:hover {
-  border-color: #757575;
-  border-color: var(--wp-g2-control-border-color-hover);
-}
-
-.emotion-0:focus {
-  border-color: #007cba;
-  border-color: var(--wp-g2-color-admin);
-  box-shadow: 0 0 0 0.5px #007cba;
-  box-shadow: var(--wp-g2-control-box-shadow-focus);
-  outline: none;
-  z-index: 1;
-}
-
-.emotion-1 {
-  box-sizing: border-box;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
-  font-family: var(--wp-g2-font-family);
-  font-size: 13px;
-  font-size: var(--wp-g2-font-size);
-  font-weight: normal;
-  font-weight: var(--wp-g2-font-weight);
-  margin: 0;
-  background: #ffffff;
-  background: var(--wp-g2-segmented-control-backdrop-background-color);
-  border: 1px solid #757575;
-  border: 1px solid var(--wp-g2-segmented-control-backdrop-border-color);
-  border-radius: 2px;
-  border-radius: var(--wp-g2-control-border-radius);
-  box-shadow: transparent;
-  box-shadow: var(--wp-g2-segmented-control-backdrop-box-shadow);
-  height: calc(30px - 4px);
-  height: calc(var(--wp-g2-control-height) - 4px);
-  left: 0;
-  position: absolute;
-  -webkit-transition: all 160ms ease;
-  -webkit-transition: all var(--wp-g2-transition-duration-fast) ease;
-  transition: all 160ms ease;
-  transition: all var(--wp-g2-transition-duration-fast) ease;
-  z-index: 1;
-}
-
-@media (prefers-reduced-motion) {
-  .emotion-1 {
-    -webkit-transition: none!important;
-    transition: none!important;
-  }
-}
-
-[data-system-ui-reduced-motion-mode="true"] .emotion-1 {
-  -webkit-transition: none!important;
-  transition: none!important;
-}
-
-.emotion-2 {
-  box-sizing: border-box;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
-  font-family: var(--wp-g2-font-family);
-  font-size: 13px;
-  font-size: var(--wp-g2-font-size);
-  font-weight: normal;
-  font-weight: var(--wp-g2-font-weight);
-  margin: 0;
-  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;
-}
-
-@media (prefers-reduced-motion) {
-  .emotion-2 {
-    -webkit-transition: none!important;
-    transition: none!important;
-  }
-}
-
-[data-system-ui-reduced-motion-mode="true"] .emotion-2 {
-  -webkit-transition: none!important;
-  transition: none!important;
-}
-
-.emotion-3 {
-  box-sizing: border-box;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
-  font-family: var(--wp-g2-font-family);
-  font-size: 13px;
-  font-size: var(--wp-g2-font-size);
-  font-weight: normal;
-  font-weight: var(--wp-g2-font-weight);
-  margin: 0;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  border: none;
-  border-radius: 2px;
-  border-radius: var(--wp-g2-control-border-radius);
-  color: #1e1e1e;
-  color: var(--wp-g2-color-text);
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: 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;
-  -webkit-transition: background var(--wp-g2-transition-duration-fast) linear,color var(--wp-g2-transition-duration-fast) linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background var(--wp-g2-transition-duration-fast) linear,color var(--wp-g2-transition-duration-fast) 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;
-  color: #007cba;
-  color: var(--wp-g2-control-text-active-color);
-  font-weight: bold;
-}
-
-@media (prefers-reduced-motion) {
-  .emotion-3 {
-    -webkit-transition: none!important;
-    transition: none!important;
-  }
-}
-
-[data-system-ui-reduced-motion-mode="true"] .emotion-3 {
-  -webkit-transition: none!important;
-  transition: none!important;
-}
-
-.emotion-3::-moz-focus-inner {
-  border: 0;
-}
-
-.emotion-3:active {
-  background: #ffffff;
-  background: var(--wp-g2-segmented-control-button-color-active);
-}
-
-.emotion-4 {
-  box-sizing: border-box;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
-  font-family: var(--wp-g2-font-family);
-  font-size: 13px;
-  font-size: var(--wp-g2-font-size);
-  font-weight: normal;
-  font-weight: var(--wp-g2-font-weight);
-  margin: 0;
-  font-size: 12px;
-  font-size: var(--wp-g2-segmented-control-font-size);
-  left: 50%;
-  line-height: 1;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translate(-50%,-50%);
-  -ms-transform: translate(-50%,-50%);
-  transform: translate(-50%,-50%);
-}
-
-@media (prefers-reduced-motion) {
-  .emotion-4 {
-    -webkit-transition: none!important;
-    transition: none!important;
-  }
-}
-
-[data-system-ui-reduced-motion-mode="true"] .emotion-4 {
-  -webkit-transition: none!important;
-  transition: none!important;
-}
-
-.emotion-5 {
-  box-sizing: border-box;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
-  font-family: var(--wp-g2-font-family);
-  font-size: 13px;
-  font-size: var(--wp-g2-font-size);
-  font-weight: normal;
-  font-weight: var(--wp-g2-font-weight);
-  margin: 0;
-  font-size: 12px;
-  font-size: var(--wp-g2-segmented-control-font-size);
-  font-weight: bold;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-}
-
-@media (prefers-reduced-motion) {
-  .emotion-5 {
-    -webkit-transition: none!important;
-    transition: none!important;
-  }
-}
-
-[data-system-ui-reduced-motion-mode="true"] .emotion-5 {
-  -webkit-transition: none!important;
-  transition: none!important;
-}
-
-.emotion-6 {
-  box-sizing: border-box;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
-  font-family: var(--wp-g2-font-family);
-  font-size: 13px;
-  font-size: var(--wp-g2-font-size);
-  font-weight: normal;
-  font-weight: var(--wp-g2-font-weight);
-  margin: 0;
-  background: rgba(0, 0, 0, 0.1);
-  background: var(--wp-g2-color-divider);
-  height: calc(100% - 4px - 4px);
-  position: absolute;
-  right: 0;
-  top: 4px;
-  -webkit-transition: background 200ms linear;
-  -webkit-transition: background var(--wp-g2-transition-duration) linear;
-  transition: background 200ms linear;
-  transition: background var(--wp-g2-transition-duration) linear;
-  width: 1px;
-  background: transparent;
-}
-
-@media (prefers-reduced-motion) {
-  .emotion-6 {
-    -webkit-transition: none!important;
-    transition: none!important;
-  }
-}
-
-[data-system-ui-reduced-motion-mode="true"] .emotion-6 {
-  -webkit-transition: none!important;
-  transition: none!important;
-}
-
-.emotion-8 {
-  box-sizing: border-box;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
-  font-family: var(--wp-g2-font-family);
-  font-size: 13px;
-  font-size: var(--wp-g2-font-size);
-  font-weight: normal;
-  font-weight: var(--wp-g2-font-weight);
-  margin: 0;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  border: none;
-  border-radius: 2px;
-  border-radius: var(--wp-g2-control-border-radius);
-  color: #1e1e1e;
-  color: var(--wp-g2-color-text);
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: 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;
-  -webkit-transition: background var(--wp-g2-transition-duration-fast) linear,color var(--wp-g2-transition-duration-fast) linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background var(--wp-g2-transition-duration-fast) linear,color var(--wp-g2-transition-duration-fast) 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) {
-  .emotion-8 {
-    -webkit-transition: none!important;
-    transition: none!important;
-  }
-}
-
-[data-system-ui-reduced-motion-mode="true"] .emotion-8 {
-  -webkit-transition: none!important;
-  transition: none!important;
-}
-
-.emotion-8::-moz-focus-inner {
-  border: 0;
-}
-
-.emotion-8:active {
-  background: #ffffff;
-  background: var(--wp-g2-segmented-control-button-color-active);
-}
-
-<div
-  aria-activedescendant="segmented-1"
-  aria-label="SegmentControl"
-  class="components-segmented-control wp-components-segmented-control ic-qksk6y ic-192yz5d emotion-0"
-  data-g2-c16t="true"
-  data-g2-component="SegmentedControl"
-  id="segmented"
-  role="radiogroup"
-  tabindex="0"
->
-  <iframe
-    aria-hidden="true"
-    frameborder="0"
-    src="about:blank"
-    style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-    tabindex="-1"
-  />
-  <div
-    class="ic-otytyz ic-192yz5d emotion-1"
-    data-g2-component="SegmentedControlBackdrop"
-    role="presentation"
-    style="transform: translateX(NaNpx); transition: none; width: 0px;"
-  />
-  <div
-    class="ic-1blhbvo ic-192yz5d emotion-2"
-    data-active="true"
-    data-g2-component="SegmentedControlButtonLabel"
-  >
-    <button
-      aria-checked="true"
-      aria-selected="true"
-      class="ic-1c3kh7b ic-192yz5d emotion-3"
-      data-value="olaf"
-      id="segmented-1"
-      role="radio"
-      tabindex="-1"
-    >
-      <div
-        class="ic-151osxh ic-192yz5d emotion-4"
-        data-g2-component="SegmentedControlButtonContent"
-      >
-        O
-      </div>
-      <div
-        aria-hidden="true"
-        class="ic-1iv4r3z ic-192yz5d emotion-5"
-        data-g2-component="SegmentedControlButtonContentPlaceholder"
-      >
-        O
-      </div>
-    </button>
-    <div
-      aria-hidden="true"
-      class="ic-lqthxd ic-192yz5d emotion-6"
-      data-g2-component="SegmentedControlButtonSeparator"
-    />
-  </div>
-  <div
-    class="ic-1blhbvo ic-192yz5d emotion-2"
-    data-active="false"
-    data-g2-component="SegmentedControlButtonLabel"
-  >
-    <button
-      aria-checked="false"
-      class="ic-1c3kh7b ic-192yz5d emotion-8"
-      data-value="samantha"
-      id="segmented-2"
-      role="radio"
-      tabindex="-1"
-    >
-      <div
-        class="ic-151osxh ic-192yz5d emotion-4"
-        data-g2-component="SegmentedControlButtonContent"
-      >
-        S
-      </div>
-      <div
-        aria-hidden="true"
-        class="ic-1iv4r3z ic-192yz5d emotion-5"
-        data-g2-component="SegmentedControlButtonContentPlaceholder"
-      >
-        S
-      </div>
-    </button>
-    <div
-      aria-hidden="true"
-      class="ic-lqthxd ic-192yz5d emotion-6"
-      data-g2-component="SegmentedControlButtonSeparator"
-    />
-  </div>
-</div>
-`;
diff --git a/packages/components/src/segmented-control/types.ts b/packages/components/src/segmented-control/types.ts
index a331de8b0f586d..40cf80e4705710 100644
--- a/packages/components/src/segmented-control/types.ts
+++ b/packages/components/src/segmented-control/types.ts
@@ -2,13 +2,12 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import type { Ref, RefObject } from 'react';
+import type { MutableRefObject, Ref } from 'react';
 
 /**
  * Internal dependencies
  */
 import type { FormElementProps, SizeRangeDefault } from '../utils/types';
-import type { PolymorphicComponent } from '../ui/context';
 
 /**
  * Option to render within `SegmentedControl`.
@@ -80,19 +79,6 @@ export type SegmentedControlProps = Omit<
 	value?: string | number;
 };
 
-/**
- * `SegmentedControl` is a form component that lets users choose options represented in horizontal segments.
- *
- * @example
- * ```jsx
- * <SegmentedControl options={[...]} />
- * ```
- */
-export type SegmentedControl = PolymorphicComponent<
-	'input',
-	SegmentedControlProps
->;
-
 export type SegmentedControlButtonProps = {
 	className?: string;
 	forwardedRef?: Ref< any >;
@@ -109,7 +95,7 @@ export type SegmentedControlButtonProps = {
 };
 
 export type SegmentedControlBackdropProps = {
-	containerRef: RefObject< any >;
+	containerRef: MutableRefObject< HTMLElement | undefined >;
 	containerWidth?: number | null;
 	state?: any;
 };
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index f8131e3567a1ed..35c108c812609d 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -21,9 +21,10 @@ const CONTROL_PROPS = {
 	controlBoxShadowFocus: `0 0 0, 0.5px, ${ COLORS.admin }`,
 	controlDestructiveBorderColor: COLORS.alert.red,
 	controlHeight: CONTROL_HEIGHT,
-	controlHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,
-	controlHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,
 	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,
+	controlHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,
+	controlHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,
+	controlHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,
 };
 const SEGMENTED_CONTROL_PROPS = {
 	segmentedControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,

From 26d056acdb3e347aba8f924cd7ba405aa5cc96d9 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 17 Jun 2021 09:38:20 +0300
Subject: [PATCH 04/30] remove duplicate ref in tsconfig

---
 packages/components/tsconfig.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 36345e0ce48468..1fdc3ef0d4ba75 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -16,7 +16,6 @@
 		{ "path": "../primitives" },
 		{ "path": "../react-i18n" },
 		{ "path": "../warning" },
-		{ "path": "../compose" }
 	],
 	"include": [
 		"src/__next/**/*",

From 56699307772234e9b23a03877ef8595b51d84082 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 17 Jun 2021 09:56:58 +0300
Subject: [PATCH 05/30] Add the test snapshots

---
 .../segmented-control-button.tsx              |  20 +-
 .../test/__snapshots__/index.js.snap          | 258 ++++++++++++++++++
 .../src/segmented-control/test/index.js       |   6 +-
 3 files changed, 273 insertions(+), 11 deletions(-)
 create mode 100644 packages/components/src/segmented-control/test/__snapshots__/index.js.snap

diff --git a/packages/components/src/segmented-control/segmented-control-button.tsx b/packages/components/src/segmented-control/segmented-control-button.tsx
index bafcc5eb0eddf4..8362c03f07a53d 100644
--- a/packages/components/src/segmented-control/segmented-control-button.tsx
+++ b/packages/components/src/segmented-control/segmented-control-button.tsx
@@ -24,16 +24,15 @@ import {
 import * as styles from './styles';
 import type { SegmentedControlButtonProps } from './types';
 
-function SegmentedControlButton( allProps: SegmentedControlButtonProps ) {
-	const {
-		className,
-		forwardedRef,
-		isBlock = false,
-		label,
-		showSeparator,
-		value,
-		...props
-	} = allProps;
+function SegmentedControlButton( {
+	className,
+	forwardedRef,
+	isBlock = false,
+	label,
+	showSeparator,
+	value,
+	...props
+}: SegmentedControlButtonProps ) {
 	const isActive = props.state === value;
 	const labelViewClasses = cx( isBlock && styles.labelBlock );
 	const classes = cx( isActive && styles.buttonActive, className );
@@ -42,6 +41,7 @@ function SegmentedControlButton( allProps: SegmentedControlButtonProps ) {
 			<Radio
 				{ ...props }
 				as={ ButtonView }
+				aria-label={ label }
 				className={ classes }
 				data-value={ value }
 				ref={ forwardedRef }
diff --git a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
new file mode 100644
index 00000000000000..412eb89d0625b9
--- /dev/null
+++ b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
@@ -0,0 +1,258 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`props should render correctly 1`] = `
+.emotion-12 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-6 {
+  color: var( --wp-admin-theme-color,#00669b);
+  font-weight: bold;
+}
+
+.emotion-9 {
+  background: transparent;
+}
+
+.emotion-27 {
+  background: #fff;
+  border: 1px solid;
+  border-color: #757575;
+  border-radius: calc( 2px + 1px );
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  min-height: 30px;
+  min-width: 0;
+  padding: 1px;
+  position: relative;
+  -webkit-transition: all 100ms linear;
+  transition: all 100ms linear;
+  min-height: 30px;
+}
+
+@media ( prefers-reduced-motion:reduce ) {
+  .emotion-27 {
+    -webkit-transition-duration: 0ms;
+    transition-duration: 0ms;
+  }
+}
+
+.emotion-27:hover {
+  border-color: #757575;
+}
+
+.emotion-27:focus {
+  border-color: var( --wp-admin-theme-color-darker-10,#007cba);
+  box-shadow: 0 0 0,0.5px,[object Object];
+  outline: none;
+  z-index: 1;
+}
+
+.emotion-0 {
+  background: #fff;
+  border: 1px solid #757575;
+  border-radius: 2px;
+  box-shadow: transparent;
+  height: calc( 30px - 4px );
+  left: 0;
+  position: absolute;
+  -webkit-transition: all 160ms ease;
+  transition: all 160ms ease;
+  z-index: 1;
+}
+
+@media ( prefers-reduced-motion:reduce ) {
+  .emotion-0 {
+    -webkit-transition-duration: 0ms;
+    transition-duration: 0ms;
+  }
+}
+
+.emotion-13 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+}
+
+.emotion-7 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  color: var( --wp-admin-theme-color,#00669b);
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: 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-7 {
+    -webkit-transition-duration: 0ms;
+    transition-duration: 0ms;
+  }
+}
+
+.emotion-7::-moz-focus-inner {
+  border: 0;
+}
+
+.emotion-7:active {
+  background: #fff;
+}
+
+.emotion-2 {
+  font-size: 13px;
+  line-height: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate( -50%,-50% );
+  -ms-transform: translate( -50%,-50% );
+  transform: translate( -50%,-50% );
+}
+
+.emotion-4 {
+  font-size: 13px;
+  font-weight: bold;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.emotion-10 {
+  background: rgba(0,0,0,0.1);
+  height: calc( 100% - 4px - 4px );
+  position: absolute;
+  right: 0;
+  top: 4px;
+  -webkit-transition: background 200ms linear;
+  transition: background 200ms linear;
+  width: 1px;
+}
+
+@media ( prefers-reduced-motion:reduce ) {
+  .emotion-10 {
+    -webkit-transition-duration: 0ms;
+    transition-duration: 0ms;
+  }
+}
+
+<div
+  aria-activedescendant="segmented-1"
+  aria-label="Test Segmented Control"
+  class="components-segmented-control emotion-27 emotion-28 emotion-29"
+  data-wp-c16t="true"
+  data-wp-component="SegmentedControl"
+  id="segmented"
+  role="radiogroup"
+  tabindex="0"
+>
+  <iframe
+    aria-hidden="true"
+    frameborder="0"
+    src="about:blank"
+    style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
+    tabindex="-1"
+  />
+  <div
+    class="emotion-0 emotion-1"
+    role="presentation"
+    style="transform: translateX(NaNpx); transition: none; width: 0px;"
+  />
+  <div
+    class="emotion-12 emotion-13 emotion-14"
+    data-active="true"
+  >
+    <button
+      aria-checked="true"
+      aria-label="O"
+      aria-selected="true"
+      class="emotion-6 emotion-7 emotion-8"
+      data-value="olaf"
+      id="segmented-1"
+      role="radio"
+      tabindex="-1"
+    >
+      <div
+        class="emotion-2 emotion-3"
+      >
+        O
+      </div>
+      <div
+        aria-hidden="true"
+        class="emotion-4 emotion-5"
+      >
+        O
+      </div>
+    </button>
+    <div
+      aria-hidden="true"
+      class="emotion-9 emotion-10 emotion-11"
+    />
+  </div>
+  <div
+    class="emotion-12 emotion-13 emotion-14"
+    data-active="false"
+  >
+    <button
+      aria-checked="false"
+      aria-label="S"
+      class=" emotion-7 emotion-8"
+      data-value="samantha"
+      id="segmented-2"
+      role="radio"
+      tabindex="-1"
+    >
+      <div
+        class="emotion-2 emotion-3"
+      >
+        S
+      </div>
+      <div
+        aria-hidden="true"
+        class="emotion-4 emotion-5"
+      >
+        S
+      </div>
+    </button>
+    <div
+      aria-hidden="true"
+      class="emotion-9 emotion-10 emotion-11"
+    />
+  </div>
+</div>
+`;
diff --git a/packages/components/src/segmented-control/test/index.js b/packages/components/src/segmented-control/test/index.js
index dc23bb30baf119..ea48f839329dc6 100644
--- a/packages/components/src/segmented-control/test/index.js
+++ b/packages/components/src/segmented-control/test/index.js
@@ -20,7 +20,11 @@ describe( 'props', () => {
 
 		act( () => {
 			const result = render(
-				<SegmentedControl baseId="segmented" options={ options } />
+				<SegmentedControl
+					baseId="segmented"
+					options={ options }
+					label="Test Segmented Control"
+				/>
 			);
 			container = result.container;
 		} );

From 6db5fa65b1bcbe9219591387aace7ab51d14a0e4 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 17 Jun 2021 11:08:26 +0300
Subject: [PATCH 06/30] fix story

---
 .../src/segmented-control/stories/index.js    | 19 +++++++++++++------
 packages/components/tsconfig.json             |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/segmented-control/stories/index.js b/packages/components/src/segmented-control/stories/index.js
index 19fe86b49a40a8..560ad0e2c99348 100644
--- a/packages/components/src/segmented-control/stories/index.js
+++ b/packages/components/src/segmented-control/stories/index.js
@@ -12,8 +12,9 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Icon, Spacer, View } from '../../index';
+import { Icon, __experimentalSpacer as Spacer } from '../../';
 import { SegmentedControl } from '../index';
+import { View } from '../../view';
 
 export default {
 	component: SegmentedControl,
@@ -41,7 +42,7 @@ const align = [
 
 export const _default = () => {
 	const [ alignState, setAlignState ] = useState( align[ 0 ].value );
-
+	const label = 'Segmented Control';
 	const xy = [
 		{
 			label: 'Horizontal',
@@ -66,27 +67,33 @@ export const _default = () => {
 
 	return (
 		<View>
-			<Spacer css={ { width: [ null, 300 ] } }>
+			<Spacer>
 				<SegmentedControl
 					isBlock
 					onChange={ setAlignState }
 					options={ align }
 					value={ alignState }
+					label={ label }
 				/>
 			</Spacer>
-			<Spacer css={ { width: [ null, 300 ] } }>
+			<Spacer>
 				<SegmentedControl
 					isBlock
 					onChange={ setAlignState }
 					options={ align }
 					value={ alignState }
+					label={ label }
 				/>
 			</Spacer>
 			<Spacer>
-				<SegmentedControl options={ xy } />
+				<SegmentedControl options={ xy } label={ label } />
 			</Spacer>
 			<Spacer>
-				<SegmentedControl isAdaptiveWidth options={ shortLong } />
+				<SegmentedControl
+					isAdaptiveWidth
+					options={ shortLong }
+					label={ label }
+				/>
 			</Spacer>
 		</View>
 	);
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 1fdc3ef0d4ba75..d01a781b3f9c91 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -15,7 +15,7 @@
 		{ "path": "../is-shallow-equal" },
 		{ "path": "../primitives" },
 		{ "path": "../react-i18n" },
-		{ "path": "../warning" },
+		{ "path": "../warning" }
 	],
 	"include": [
 		"src/__next/**/*",

From e227c1fdb59347c9fa806b1bcacd3c4f2f4cb356 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 17 Jun 2021 12:04:28 +0300
Subject: [PATCH 07/30] tweak styles - need fixes

---
 .../components/src/segmented-control/styles.ts     | 14 +++++++-------
 packages/components/src/utils/config-values.js     |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/segmented-control/styles.ts b/packages/components/src/segmented-control/styles.ts
index f3107c4d486dfc..d9b0865e464275 100644
--- a/packages/components/src/segmented-control/styles.ts
+++ b/packages/components/src/segmented-control/styles.ts
@@ -13,7 +13,7 @@ export const SegmentedControl = css`
 	background: ${ COLORS.ui.background };
 	border: 1px solid;
 	border-color: ${ COLORS.ui.border };
-	border-radius: calc( ${ CONFIG.controlBorderRadius } + 1px );
+	border-radius: ${ CONFIG.controlBorderRadius };
 	display: inline-flex;
 	min-height: ${ CONFIG.controlHeight };
 	min-width: 0;
@@ -62,6 +62,11 @@ export const labelBlock = css`
 	flex: 1;
 `;
 
+export const buttonActive = css`
+	color: ${ COLORS.white } !important;
+	background: ${ COLORS.gray[ 900 ] } !important;
+`;
+
 export const ButtonView = styled.button`
 	align-items: center;
 	appearance: none;
@@ -90,7 +95,7 @@ export const ButtonView = styled.button`
 	}
 
 	&:active {
-		background: ${ CONFIG.segmentedControlButtonColorActive };
+		background: ${ CONFIG.segmentedControlBackgroundColor };
 	}
 `;
 
@@ -103,11 +108,6 @@ export const ButtonContentView = styled.div`
 	transform: translate( -50%, -50% );
 `;
 
-export const buttonActive = css`
-	color: ${ CONFIG.controlTextActiveColor };
-	font-weight: bold;
-`;
-
 export const SeparatorView = styled.div`
 	background: ${ CONFIG.colorDivider };
 	height: calc( 100% - 4px - 4px );
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index 35c108c812609d..a9201fd49c39e9 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -28,9 +28,9 @@ const CONTROL_PROPS = {
 };
 const SEGMENTED_CONTROL_PROPS = {
 	segmentedControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
-	segmentedControlBorderColor: COLORS.ui.border, // get( 'controlBorderColor' )
+	segmentedControlBorderColor: COLORS.ui.border,
 	segmentedControlBackdropBackgroundColor: CONTROL_PROPS.controlSurfaceColor,
-	segmentedControlBackdropBorderColor: COLORS.ui.border, // get( 'controlBorderColor' ),
+	segmentedControlBackdropBorderColor: COLORS.ui.border,
 	segmentedControlBackdropBoxShadow: 'transparent',
 	segmentedControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,
 };

From 22622d9ed81b523aaa9c6845f232b66d0c67e537 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 17 Jun 2021 12:04:55 +0300
Subject: [PATCH 08/30] demo usage in PostFeaturedImage for styling fixes

---
 .../src/post-featured-image/edit.js           | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index d7f302ac525d49..50e1a245938a9c 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -8,6 +8,8 @@ import {
 	ToggleControl,
 	PanelBody,
 	withNotices,
+	BaseControl,
+	__experimentalSegmentedControl as SegmentedControl,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -28,6 +30,26 @@ const placeholderChip = (
 	</div>
 );
 
+function Example() {
+	return (
+		<SegmentedControl
+			label="my label"
+			value="vertical"
+			options={ [
+				{
+					label: 'Horizontal',
+					value: 'horizontal',
+				},
+				{
+					label: 'Vertical',
+					value: 'vertical',
+				},
+			] }
+			isBlock
+		/>
+	);
+}
+
 function PostFeaturedImageDisplay( {
 	attributes: { isLink },
 	setAttributes,
@@ -94,6 +116,9 @@ function PostFeaturedImageDisplay( {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
+					<BaseControl>
+						<Example />
+					</BaseControl>
 					<ToggleControl
 						label={ sprintf(
 							// translators: %s: Name of the post type e.g: "post".

From bd04f018f26db8cd6e166118203ba50802dd022c Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 17 Jun 2021 13:12:00 +0300
Subject: [PATCH 09/30] remove `size` prop

---
 .../src/segmented-control/component.tsx          |  5 ++---
 .../components/src/segmented-control/styles.ts   | 16 ----------------
 .../components/src/segmented-control/types.ts    |  8 +-------
 3 files changed, 3 insertions(+), 26 deletions(-)

diff --git a/packages/components/src/segmented-control/component.tsx b/packages/components/src/segmented-control/component.tsx
index 34d68aba629492..9533c9058e33ad 100644
--- a/packages/components/src/segmented-control/component.tsx
+++ b/packages/components/src/segmented-control/component.tsx
@@ -43,7 +43,6 @@ function SegmentControl(
 		label,
 		options = [],
 		onChange = noop,
-		size = 'medium',
 		value,
 		...otherProps
 	} = useContextSystem( props, 'SegmentedControl' );
@@ -74,10 +73,10 @@ function SegmentControl(
 			cx(
 				styles.SegmentedControl,
 				isBlock && styles.block,
-				styles[ size ],
+				'medium',
 				className
 			),
-		[ className, size ]
+		[ className ]
 	);
 	return (
 		<RadioGroup
diff --git a/packages/components/src/segmented-control/styles.ts b/packages/components/src/segmented-control/styles.ts
index d9b0865e464275..b8e8f35e20fc0c 100644
--- a/packages/components/src/segmented-control/styles.ts
+++ b/packages/components/src/segmented-control/styles.ts
@@ -131,22 +131,6 @@ export const LabelPlaceholderView = styled.div`
 	visibility: hidden;
 `;
 
-export const xSmall = css`
-	min-height: ${ CONFIG.controlHeightXSmall };
-`;
-
-export const small = css`
-	min-height: ${ CONFIG.controlHeightSmall };
-`;
-
 export const medium = css`
 	min-height: ${ CONFIG.controlHeight };
 `;
-
-export const large = css`
-	min-height: ${ CONFIG.controlHeightLarge };
-`;
-
-export const xLarge = css`
-	min-height: ${ CONFIG.controlHeightXLarge };
-`;
diff --git a/packages/components/src/segmented-control/types.ts b/packages/components/src/segmented-control/types.ts
index 40cf80e4705710..02de611fd1b017 100644
--- a/packages/components/src/segmented-control/types.ts
+++ b/packages/components/src/segmented-control/types.ts
@@ -7,7 +7,7 @@ import type { MutableRefObject, Ref } from 'react';
 /**
  * Internal dependencies
  */
-import type { FormElementProps, SizeRangeDefault } from '../utils/types';
+import type { FormElementProps } from '../utils/types';
 
 /**
  * Option to render within `SegmentedControl`.
@@ -67,12 +67,6 @@ export type SegmentedControlProps = Omit<
 	 * Callback when a segment is selected.
 	 */
 	onChange?: ( ...args: any ) => void;
-	/**
-	 * Determines the size of `SegmentedControl`.
-	 *
-	 * @default 'medium'
-	 */
-	size?: SizeRangeDefault;
 	/**
 	 * The value of `SegmentedControl`
 	 */

From 76f04aa2a7d937981df5382cea496bbc93a62202 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 17 Jun 2021 11:57:04 +0200
Subject: [PATCH 10/30] Polish.

---
 .../components/src/segmented-control/styles.ts     | 14 +++++++-------
 packages/components/src/utils/config-values.js     |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/segmented-control/styles.ts b/packages/components/src/segmented-control/styles.ts
index b8e8f35e20fc0c..b0382492822bf4 100644
--- a/packages/components/src/segmented-control/styles.ts
+++ b/packages/components/src/segmented-control/styles.ts
@@ -17,9 +17,9 @@ export const SegmentedControl = css`
 	display: inline-flex;
 	min-height: ${ CONFIG.controlHeight };
 	min-width: 0;
-	padding: 1px;
+	padding: 2px;
 	position: relative;
-	transition: all ${ CONFIG.transitionDurationFastest } linear;
+	transition: transform ${ CONFIG.transitionDurationFastest } linear;
 	${ reduceMotion( 'transition' ) }
 	&:hover {
 		border-color: ${ COLORS.ui.borderHover };
@@ -39,14 +39,14 @@ export const block = css`
 `;
 
 export const BackdropView = styled.div`
-	background: ${ COLORS.ui.background };
-	border: 1px solid ${ CONFIG.segmentedControlBackdropBorderColor };
+	background: ${ COLORS.gray[ 900 ] };
 	border-radius: ${ CONFIG.controlBorderRadius };
 	box-shadow: ${ CONFIG.segmentedControlBackdropBoxShadow };
-	height: calc( ${ CONFIG.controlHeight } - 4px );
 	left: 0;
 	position: absolute;
-	transition: all ${ CONFIG.transitionDurationFast } ease;
+	top: 2px;
+	bottom: 2px;
+	transition: transform ${ CONFIG.transitionDurationFast } ease;
 	${ reduceMotion( 'transition' ) }
 	z-index: 1;
 `;
@@ -73,7 +73,7 @@ export const ButtonView = styled.button`
 	background: transparent;
 	border: none;
 	border-radius: ${ CONFIG.controlBorderRadius };
-	color: ${ CONFIG.controlTextActiveColor };
+	color: ${ COLORS.gray[ 700 ] };
 	cursor: pointer;
 	display: flex;
 	height: 100%;
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index a9201fd49c39e9..365bb7451d5704 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -4,7 +4,7 @@
 import { space } from '../ui/utils/space';
 import { COLORS } from './colors-values';
 
-const CONTROL_HEIGHT = '30px';
+const CONTROL_HEIGHT = '36px';
 const CONTROL_PADDING_X = '12px';
 
 const CONTROL_PROPS = {

From 1ed460aa749aaebb336ce528f6a0e97f64f20271 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 17 Jun 2021 13:57:15 +0300
Subject: [PATCH 11/30] tweak some types and README

---
 .../src/segmented-control/README.md           | 87 ++++++++++++++++++-
 .../components/src/segmented-control/types.ts |  9 +-
 2 files changed, 90 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/segmented-control/README.md b/packages/components/src/segmented-control/README.md
index c1b34c838ff320..aeea6b989063d4 100644
--- a/packages/components/src/segmented-control/README.md
+++ b/packages/components/src/segmented-control/README.md
@@ -1,3 +1,88 @@
 # SegementedControl
 
-> **Experimental!**
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+`SegementedControl` is a form component that lets users choose options represented in horizontal segments.
+
+## Usage
+
+```js
+import { __experimentalSegmentedControl as SegmentedControl } from '@wordpress/components';
+
+function Example() {
+	return (
+		<SegmentedControl
+			label="My Segmented Control"
+			value="vertical"
+			options={ [
+				{
+					label: 'Horizontal',
+					value: 'horizontal',
+				},
+				{
+					label: 'Vertical',
+					value: 'vertical',
+				},
+			] }
+		/>
+	);
+}
+```
+
+## Props
+
+### `label`
+
+-   Type: `string`
+
+Label for the form element.
+
+### `baseId`
+
+-   Type: `string`
+-   Required: No
+
+ID that will serve as a base for all the items IDs.
+
+### `isAdaptiveWidth`
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
+Determines if segments should be rendered with equal widths.
+
+### `isBlock`
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
+Renders `SegmentedControl` as a (CSS) block element.
+
+### `options`
+
+An array of objects containing the following properties:
+
+-   `label`: (string) The label to be shown to the user.
+-   `value`: (string|number) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.
+
+-   Type: `Array`
+
+Options to render within `SegmentedControl`.
+
+### `onChange`
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
+Callback when a segment is selected.
+
+### `value`
+
+-   Type: `string | number`
+
+The value of the `SegmentedControl`.
diff --git a/packages/components/src/segmented-control/types.ts b/packages/components/src/segmented-control/types.ts
index 02de611fd1b017..129abb74fbc063 100644
--- a/packages/components/src/segmented-control/types.ts
+++ b/packages/components/src/segmented-control/types.ts
@@ -14,11 +14,10 @@ import type { FormElementProps } from '../utils/types';
  *
  * @example
  * ```jsx
- * const option = { id: 'elsa', value: 'elsa', label: 'Elsa' };
+ * const option = { value: 'elsa', label: 'Elsa' };
  * ```
  */
 export type SegmentedControlOption = {
-	id: string | number;
 	value: string | number;
 	label: string;
 };
@@ -44,7 +43,7 @@ export type SegmentedControlProps = Omit<
 	 */
 	isAdaptiveWidth?: boolean;
 	/**
-	 * Renders `SegmentedControl` is a (CSS) block element.
+	 * Renders `SegmentedControl` as a (CSS) block element.
 	 *
 	 * @default false
 	 */
@@ -55,8 +54,8 @@ export type SegmentedControlProps = Omit<
 	 * @example
 	 * ```jsx
 	 * const options = [
-	 *  { id: 'elsa', value: 'elsa', label: 'Elsa' },
-	 *  { id: 'ana', value: 'ana', label: 'Ana' },
+	 *  { value: 'elsa', label: 'Elsa' },
+	 *  { value: 'ana', label: 'Ana' },
 	 * ]
 	 *
 	 * const Heroes = <SegmentedControl options={options} />

From 375e2cd3eecb3fcc9669eef3271ba37c575c4faf Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 17 Jun 2021 14:01:54 +0300
Subject: [PATCH 12/30] update tests

---
 .../test/__snapshots__/index.js.snap          | 59 ++++++++++---------
 .../components/src/utils/config-values.js     |  2 +-
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
index 412eb89d0625b9..b7a698bb2a9e54 100644
--- a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
@@ -1,37 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`props should render correctly 1`] = `
-.emotion-12 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-6 {
-  color: var( --wp-admin-theme-color,#00669b);
-  font-weight: bold;
-}
-
-.emotion-9 {
-  background: transparent;
-}
-
 .emotion-27 {
   background: #fff;
   border: 1px solid;
   border-color: #757575;
-  border-radius: calc( 2px + 1px );
+  border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: 30px;
+  min-height: 36px;
   min-width: 0;
-  padding: 1px;
+  padding: 2px;
   position: relative;
-  -webkit-transition: all 100ms linear;
-  transition: all 100ms linear;
-  min-height: 30px;
+  -webkit-transition: -webkit-transform 100ms linear;
+  -webkit-transition: transform 100ms linear;
+  transition: transform 100ms linear;
 }
 
 @media ( prefers-reduced-motion:reduce ) {
@@ -47,21 +32,37 @@ exports[`props should render correctly 1`] = `
 
 .emotion-27:focus {
   border-color: var( --wp-admin-theme-color-darker-10,#007cba);
-  box-shadow: 0 0 0,0.5px,[object Object];
+  box-shadow: 0 0 0,0.5px,var( --wp-admin-theme-color,#00669b);
   outline: none;
   z-index: 1;
 }
 
+.emotion-12 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-6 {
+  color: #fff !important;
+  background: #1e1e1e !important;
+}
+
+.emotion-9 {
+  background: transparent;
+}
+
 .emotion-0 {
-  background: #fff;
-  border: 1px solid #757575;
+  background: #1e1e1e;
   border-radius: 2px;
   box-shadow: transparent;
-  height: calc( 30px - 4px );
   left: 0;
   position: absolute;
-  -webkit-transition: all 160ms ease;
-  transition: all 160ms ease;
+  top: 2px;
+  bottom: 2px;
+  -webkit-transition: -webkit-transform 160ms ease;
+  -webkit-transition: transform 160ms ease;
+  transition: transform 160ms ease;
   z-index: 1;
 }
 
@@ -93,7 +94,7 @@ exports[`props should render correctly 1`] = `
   background: transparent;
   border: none;
   border-radius: 2px;
-  color: var( --wp-admin-theme-color,#00669b);
+  color: #757575;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -174,7 +175,7 @@ exports[`props should render correctly 1`] = `
 <div
   aria-activedescendant="segmented-1"
   aria-label="Test Segmented Control"
-  class="components-segmented-control emotion-27 emotion-28 emotion-29"
+  class="emotion-27 medium components-segmented-control emotion-28 emotion-29"
   data-wp-c16t="true"
   data-wp-component="SegmentedControl"
   id="segmented"
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index 365bb7451d5704..b32c0101c933fb 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -18,7 +18,7 @@ const CONTROL_PROPS = {
 	controlBorderColor: COLORS.gray[ 700 ],
 	controlBoxShadow: 'transparent',
 	controlBorderColorHover: COLORS.gray[ 700 ],
-	controlBoxShadowFocus: `0 0 0, 0.5px, ${ COLORS.admin }`,
+	controlBoxShadowFocus: `0 0 0, 0.5px, ${ COLORS.admin.theme }`,
 	controlDestructiveBorderColor: COLORS.alert.red,
 	controlHeight: CONTROL_HEIGHT,
 	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,

From 865f405a14fa7acebc0ad5c7659906db95f626e0 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Fri, 18 Jun 2021 08:30:13 +0200
Subject: [PATCH 13/30] Fix sliding.

---
 packages/components/src/segmented-control/styles.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/segmented-control/styles.ts b/packages/components/src/segmented-control/styles.ts
index b0382492822bf4..596ca77d2a0bc1 100644
--- a/packages/components/src/segmented-control/styles.ts
+++ b/packages/components/src/segmented-control/styles.ts
@@ -64,7 +64,6 @@ export const labelBlock = css`
 
 export const buttonActive = css`
 	color: ${ COLORS.white } !important;
-	background: ${ COLORS.gray[ 900 ] } !important;
 `;
 
 export const ButtonView = styled.button`

From f29de11698727809f7e1105c47a4db6a04312812 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Fri, 18 Jun 2021 10:45:41 +0300
Subject: [PATCH 14/30] refactor to not use `important`

---
 .../src/segmented-control/segmented-control-button.tsx |  9 ++++++---
 packages/components/src/segmented-control/styles.ts    | 10 +++++-----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/segmented-control/segmented-control-button.tsx b/packages/components/src/segmented-control/segmented-control-button.tsx
index 8362c03f07a53d..4d048b2e789180 100644
--- a/packages/components/src/segmented-control/segmented-control-button.tsx
+++ b/packages/components/src/segmented-control/segmented-control-button.tsx
@@ -15,7 +15,6 @@ import { memo } from '@wordpress/element';
  */
 import {
 	ButtonContentView,
-	ButtonView,
 	LabelPlaceholderView,
 	LabelView,
 	SeparatorView,
@@ -35,12 +34,16 @@ function SegmentedControlButton( {
 }: SegmentedControlButtonProps ) {
 	const isActive = props.state === value;
 	const labelViewClasses = cx( isBlock && styles.labelBlock );
-	const classes = cx( isActive && styles.buttonActive, className );
+	const classes = cx(
+		styles.buttonView,
+		className,
+		isActive && styles.buttonActive
+	);
 	return (
 		<LabelView className={ labelViewClasses } data-active={ isActive }>
 			<Radio
 				{ ...props }
-				as={ ButtonView }
+				as="button"
 				aria-label={ label }
 				className={ classes }
 				data-value={ value }
diff --git a/packages/components/src/segmented-control/styles.ts b/packages/components/src/segmented-control/styles.ts
index 596ca77d2a0bc1..dfff1fbeeb25b6 100644
--- a/packages/components/src/segmented-control/styles.ts
+++ b/packages/components/src/segmented-control/styles.ts
@@ -62,11 +62,7 @@ export const labelBlock = css`
 	flex: 1;
 `;
 
-export const buttonActive = css`
-	color: ${ COLORS.white } !important;
-`;
-
-export const ButtonView = styled.button`
+export const buttonView = css`
 	align-items: center;
 	appearance: none;
 	background: transparent;
@@ -98,6 +94,10 @@ export const ButtonView = styled.button`
 	}
 `;
 
+export const buttonActive = css`
+	color: ${ COLORS.white };
+`;
+
 export const ButtonContentView = styled.div`
 	font-size: ${ CONFIG.fontSize };
 	line-height: 1;

From bfd4125700dc32fd7c7f4ce7abb11754a95c7369 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 7 Jul 2021 18:33:14 +0300
Subject: [PATCH 15/30] rebase and small changes from feedback

---
 .../src/segmented-control/component.tsx       |   4 +-
 .../segmented-control-button.tsx              |  13 +-
 .../src/segmented-control/styles.ts           |   3 +-
 .../test/__snapshots__/index.js.snap          | 167 +++++++++++-------
 4 files changed, 115 insertions(+), 72 deletions(-)

diff --git a/packages/components/src/segmented-control/component.tsx b/packages/components/src/segmented-control/component.tsx
index 9533c9058e33ad..d053b0d9ad4994 100644
--- a/packages/components/src/segmented-control/component.tsx
+++ b/packages/components/src/segmented-control/component.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+// eslint-disable-next-line no-restricted-imports
+import { cx } from '@emotion/css';
 // eslint-disable-next-line no-restricted-imports
 import { RadioGroup, useRadioState } from 'reakit';
 import useResizeAware from 'react-resize-aware';
@@ -52,7 +53,6 @@ function SegmentControl(
 
 	const radio = useRadioState( {
 		baseId: baseId || id,
-		unstable_virtual: true,
 		state: value || options[ 0 ]?.value,
 	} );
 
diff --git a/packages/components/src/segmented-control/segmented-control-button.tsx b/packages/components/src/segmented-control/segmented-control-button.tsx
index 4d048b2e789180..d2cddfe148e06f 100644
--- a/packages/components/src/segmented-control/segmented-control-button.tsx
+++ b/packages/components/src/segmented-control/segmented-control-button.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { cx } from 'emotion';
+// eslint-disable-next-line no-restricted-imports
+import { cx } from '@emotion/css';
 // eslint-disable-next-line no-restricted-imports
 import { Radio } from 'reakit';
 
@@ -13,15 +14,15 @@ import { memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import {
+import * as styles from './styles';
+import type { SegmentedControlButtonProps } from './types';
+
+const {
 	ButtonContentView,
 	LabelPlaceholderView,
 	LabelView,
 	SeparatorView,
-} from './styles';
-// eslint-disable-next-line no-duplicate-imports
-import * as styles from './styles';
-import type { SegmentedControlButtonProps } from './types';
+} = styles;
 
 function SegmentedControlButton( {
 	className,
diff --git a/packages/components/src/segmented-control/styles.ts b/packages/components/src/segmented-control/styles.ts
index dfff1fbeeb25b6..7feca23f89d424 100644
--- a/packages/components/src/segmented-control/styles.ts
+++ b/packages/components/src/segmented-control/styles.ts
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { css } from 'emotion';
+// eslint-disable-next-line no-restricted-imports
+import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 
 /**
diff --git a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
index b7a698bb2a9e54..5c4a110c21318d 100644
--- a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`props should render correctly 1`] = `
-.emotion-27 {
+.emotion-0 {
   background: #fff;
   border: 1px solid;
   border-color: #757575;
@@ -15,44 +15,27 @@ exports[`props should render correctly 1`] = `
   padding: 2px;
   position: relative;
   -webkit-transition: -webkit-transform 100ms linear;
-  -webkit-transition: transform 100ms linear;
   transition: transform 100ms linear;
 }
 
-@media ( prefers-reduced-motion:reduce ) {
-  .emotion-27 {
-    -webkit-transition-duration: 0ms;
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-0 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-27:hover {
+.emotion-0:hover {
   border-color: #757575;
 }
 
-.emotion-27:focus {
-  border-color: var( --wp-admin-theme-color-darker-10,#007cba);
-  box-shadow: 0 0 0,0.5px,var( --wp-admin-theme-color,#00669b);
+.emotion-0:focus {
+  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-12 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-6 {
-  color: #fff !important;
-  background: #1e1e1e !important;
-}
-
-.emotion-9 {
-  background: transparent;
-}
-
-.emotion-0 {
+.emotion-3 {
   background: #1e1e1e;
   border-radius: 2px;
   box-shadow: transparent;
@@ -61,19 +44,23 @@ exports[`props should render correctly 1`] = `
   top: 2px;
   bottom: 2px;
   -webkit-transition: -webkit-transform 160ms ease;
-  -webkit-transition: transform 160ms ease;
   transition: transform 160ms ease;
   z-index: 1;
 }
 
-@media ( prefers-reduced-motion:reduce ) {
-  .emotion-0 {
-    -webkit-transition-duration: 0ms;
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-3 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-13 {
+.emotion-5 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-6 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -83,13 +70,14 @@ exports[`props should render correctly 1`] = `
   position: relative;
 }
 
-.emotion-7 {
+.emotion-8 {
   -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;
@@ -102,8 +90,8 @@ exports[`props should render correctly 1`] = `
   display: flex;
   height: 100%;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
   line-height: 100%;
   outline: none;
@@ -118,35 +106,36 @@ exports[`props should render correctly 1`] = `
   user-select: none;
   width: 100%;
   z-index: 2;
+  color: #fff;
 }
 
-@media ( prefers-reduced-motion:reduce ) {
-  .emotion-7 {
-    -webkit-transition-duration: 0ms;
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-8 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-7::-moz-focus-inner {
+.emotion-8::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-7:active {
+.emotion-8:active {
   background: #fff;
 }
 
-.emotion-2 {
+.emotion-9 {
   font-size: 13px;
   line-height: 1;
   position: absolute;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate( -50%,-50% );
-  -ms-transform: translate( -50%,-50% );
-  transform: translate( -50%,-50% );
+  -webkit-transform: translate( -50%, -50% );
+  -moz-transform: translate( -50%, -50% );
+  -ms-transform: translate( -50%, -50% );
+  transform: translate( -50%, -50% );
 }
 
-.emotion-4 {
+.emotion-11 {
   font-size: 13px;
   font-weight: bold;
   height: 0;
@@ -154,8 +143,12 @@ exports[`props should render correctly 1`] = `
   visibility: hidden;
 }
 
-.emotion-10 {
-  background: rgba(0,0,0,0.1);
+.emotion-13 {
+  background: transparent;
+}
+
+.emotion-14 {
+  background: rgba(0, 0, 0, 0.1);
   height: calc( 100% - 4px - 4px );
   position: absolute;
   right: 0;
@@ -165,22 +158,71 @@ exports[`props should render correctly 1`] = `
   width: 1px;
 }
 
-@media ( prefers-reduced-motion:reduce ) {
-  .emotion-10 {
-    -webkit-transition-duration: 0ms;
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-14 {
     transition-duration: 0ms;
   }
 }
 
+.emotion-19 {
+  -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;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  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-19 {
+    transition-duration: 0ms;
+  }
+}
+
+.emotion-19::-moz-focus-inner {
+  border: 0;
+}
+
+.emotion-19:active {
+  background: #fff;
+}
+
 <div
-  aria-activedescendant="segmented-1"
   aria-label="Test Segmented Control"
-  class="emotion-27 medium components-segmented-control emotion-28 emotion-29"
+  class="emotion-0 medium components-segmented-control emotion-1 emotion-2"
   data-wp-c16t="true"
   data-wp-component="SegmentedControl"
   id="segmented"
   role="radiogroup"
-  tabindex="0"
 >
   <iframe
     aria-hidden="true"
@@ -190,69 +232,68 @@ exports[`props should render correctly 1`] = `
     tabindex="-1"
   />
   <div
-    class="emotion-0 emotion-1"
+    class="emotion-3 emotion-4"
     role="presentation"
     style="transform: translateX(NaNpx); transition: none; width: 0px;"
   />
   <div
-    class="emotion-12 emotion-13 emotion-14"
+    class="emotion-5 emotion-6 emotion-7"
     data-active="true"
   >
     <button
       aria-checked="true"
       aria-label="O"
-      aria-selected="true"
-      class="emotion-6 emotion-7 emotion-8"
+      class="emotion-8"
       data-value="olaf"
       id="segmented-1"
       role="radio"
-      tabindex="-1"
+      tabindex="0"
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-9 emotion-10"
       >
         O
       </div>
       <div
         aria-hidden="true"
-        class="emotion-4 emotion-5"
+        class="emotion-11 emotion-12"
       >
         O
       </div>
     </button>
     <div
       aria-hidden="true"
-      class="emotion-9 emotion-10 emotion-11"
+      class="emotion-13 emotion-14 emotion-15"
     />
   </div>
   <div
-    class="emotion-12 emotion-13 emotion-14"
+    class="emotion-5 emotion-6 emotion-7"
     data-active="false"
   >
     <button
       aria-checked="false"
       aria-label="S"
-      class=" emotion-7 emotion-8"
+      class="emotion-19"
       data-value="samantha"
       id="segmented-2"
       role="radio"
       tabindex="-1"
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-9 emotion-10"
       >
         S
       </div>
       <div
         aria-hidden="true"
-        class="emotion-4 emotion-5"
+        class="emotion-11 emotion-12"
       >
         S
       </div>
     </button>
     <div
       aria-hidden="true"
-      class="emotion-9 emotion-10 emotion-11"
+      class="emotion-13 emotion-14 emotion-15"
     />
   </div>
 </div>

From d99905dfc9307cab6356722062cf72ba9988371c Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 7 Jul 2021 19:14:55 +0300
Subject: [PATCH 16/30] update snapshots as `CONTROL_HEIGHT` has changed to
 36px

---
 .../test/__snapshots__/index.js.snap          |  2 +-
 .../test/__snapshots__/index.js.snap          | 24 +++++++++----------
 .../test/__snapshots__/index.js.snap          | 16 ++++++-------
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/components/src/base-field/test/__snapshots__/index.js.snap b/packages/components/src/base-field/test/__snapshots__/index.js.snap
index 61b20cae1af63b..28a31f0da30b6f 100644
--- a/packages/components/src/base-field/test/__snapshots__/index.js.snap
+++ b/packages/components/src/base-field/test/__snapshots__/index.js.snap
@@ -131,7 +131,7 @@ exports[`base field should render correctly 1`] = `
 .emotion-0:focus,
 .emotion-0[data-focused='true'] {
   border-color: var( --wp-admin-theme-color, #00669b);
-  box-shadow: 0 0 0,0.5px,[object Object];
+  box-shadow: 0 0 0,0.5px,var( --wp-admin-theme-color, #00669b);
 }
 
 <div
diff --git a/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap b/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap
index 4d4445451d1ae7..efc1f96815bb29 100644
--- a/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap
+++ b/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap
@@ -6,10 +6,10 @@ exports[`props should render correctly 1`] = `
   line-height: calc(13px * 1.2);
   margin: 0;
   max-width: 100%;
-  padding-bottom: calc((30px - calc(13px * 1.2)) / 2);
-  padding-top: calc((30px - calc(13px * 1.2)) / 2);
-  padding-bottom: calc((30px - calc(13px * 1.2)) / 2);
-  padding-top: calc((30px - calc(13px * 1.2)) / 2);
+  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
+  padding-top: calc((36px - calc(13px * 1.2)) / 2);
+  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
+  padding-top: calc((36px - calc(13px * 1.2)) / 2);
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -52,10 +52,10 @@ exports[`props should render no truncate 1`] = `
   line-height: calc(13px * 1.2);
   margin: 0;
   max-width: 100%;
-  padding-bottom: calc((30px - calc(13px * 1.2)) / 2);
-  padding-top: calc((30px - calc(13px * 1.2)) / 2);
-  padding-bottom: calc((30px - calc(13px * 1.2)) / 2);
-  padding-top: calc((30px - calc(13px * 1.2)) / 2);
+  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
+  padding-top: calc((36px - calc(13px * 1.2)) / 2);
+  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
+  padding-top: calc((36px - calc(13px * 1.2)) / 2);
   color: #000;
   line-height: 1.2;
   margin: 0;
@@ -94,10 +94,10 @@ exports[`props should render size 1`] = `
   line-height: calc(13px * 1.2);
   margin: 0;
   max-width: 100%;
-  padding-bottom: calc((30px - calc(13px * 1.2)) / 2);
-  padding-top: calc((30px - calc(13px * 1.2)) / 2);
-  padding-bottom: calc((calc( 30px * 0.8 ) - calc(13px * 1.2)) / 2);
-  padding-top: calc((calc( 30px * 0.8 ) - calc(13px * 1.2)) / 2);
+  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
+  padding-top: calc((36px - calc(13px * 1.2)) / 2);
+  padding-bottom: calc((calc( 36px * 0.8 ) - calc(13px * 1.2)) / 2);
+  padding-top: calc((calc( 36px * 0.8 ) - calc(13px * 1.2)) / 2);
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap b/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap
index 5a64ab4c2af0c0..f2904933445213 100644
--- a/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap
+++ b/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap
@@ -10,10 +10,10 @@ exports[`props should render alignLabel 1`] = `
   line-height: calc(13px * 1.2);
   margin: 0;
   max-width: 100%;
-  padding-bottom: calc((30px - calc(13px * 1.2)) / 2);
-  padding-top: calc((30px - calc(13px * 1.2)) / 2);
-  padding-bottom: calc((30px - calc(13px * 1.2)) / 2);
-  padding-top: calc((30px - calc(13px * 1.2)) / 2);
+  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
+  padding-top: calc((36px - calc(13px * 1.2)) / 2);
+  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
+  padding-top: calc((36px - calc(13px * 1.2)) / 2);
   color: #000;
   line-height: 1.2;
   margin: 0;
@@ -68,10 +68,10 @@ exports[`props should render vertically 1`] = `
   line-height: calc(13px * 1.2);
   margin: 0;
   max-width: 100%;
-  padding-bottom: calc((30px - calc(13px * 1.2)) / 2);
-  padding-top: calc((30px - calc(13px * 1.2)) / 2);
-  padding-bottom: calc((30px - calc(13px * 1.2)) / 2);
-  padding-top: calc((30px - calc(13px * 1.2)) / 2);
+  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
+  padding-top: calc((36px - calc(13px * 1.2)) / 2);
+  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
+  padding-top: calc((36px - calc(13px * 1.2)) / 2);
   color: #000;
   line-height: 1.2;
   margin: 0;

From 7d6a3275db9fa571cc50edc59027d0a916a1195e Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 8 Jul 2021 10:02:14 +0300
Subject: [PATCH 17/30] remove control for demo purposes

---
 .../src/post-featured-image/edit.js           | 25 -------------------
 1 file changed, 25 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index 50e1a245938a9c..d7f302ac525d49 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -8,8 +8,6 @@ import {
 	ToggleControl,
 	PanelBody,
 	withNotices,
-	BaseControl,
-	__experimentalSegmentedControl as SegmentedControl,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -30,26 +28,6 @@ const placeholderChip = (
 	</div>
 );
 
-function Example() {
-	return (
-		<SegmentedControl
-			label="my label"
-			value="vertical"
-			options={ [
-				{
-					label: 'Horizontal',
-					value: 'horizontal',
-				},
-				{
-					label: 'Vertical',
-					value: 'vertical',
-				},
-			] }
-			isBlock
-		/>
-	);
-}
-
 function PostFeaturedImageDisplay( {
 	attributes: { isLink },
 	setAttributes,
@@ -116,9 +94,6 @@ function PostFeaturedImageDisplay( {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
-					<BaseControl>
-						<Example />
-					</BaseControl>
 					<ToggleControl
 						label={ sprintf(
 							// translators: %s: Name of the post type e.g: "post".

From 2abdf7573b044702ade8f23e4ba517e5aea60308 Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Thu, 8 Jul 2021 14:51:06 +0300
Subject: [PATCH 18/30] Update
 packages/components/src/segmented-control/README.md

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
---
 packages/components/src/segmented-control/README.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/segmented-control/README.md b/packages/components/src/segmented-control/README.md
index aeea6b989063d4..893bf7c11b3125 100644
--- a/packages/components/src/segmented-control/README.md
+++ b/packages/components/src/segmented-control/README.md
@@ -64,15 +64,14 @@ Renders `SegmentedControl` as a (CSS) block element.
 
 ### `options`
 
-An array of objects containing the following properties:
+-   Type: `Array`
+-   Required: No
+
+Options to render within `SegmentedControl`. An array of objects containing the following properties:
 
 -   `label`: (string) The label to be shown to the user.
 -   `value`: (string|number) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.
 
--   Type: `Array`
-
-Options to render within `SegmentedControl`.
-
 ### `onChange`
 
 -   Type: `boolean`

From c6e80fb37eea4e36df6827f4a433d6d3cf991b71 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 8 Jul 2021 15:02:10 +0300
Subject: [PATCH 19/30] Fix storybook active icon color

---
 .../src/segmented-control/stories/index.js    | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/segmented-control/stories/index.js b/packages/components/src/segmented-control/stories/index.js
index 560ad0e2c99348..82bb18fde815f4 100644
--- a/packages/components/src/segmented-control/stories/index.js
+++ b/packages/components/src/segmented-control/stories/index.js
@@ -21,24 +21,18 @@ export default {
 	title: 'Components/SegmentedControl',
 };
 
-const align = [
-	{
-		label: <Icon icon={ alignLeft } size={ 14 } />,
-		value: 'left',
-	},
-	{
-		label: <Icon icon={ alignCenter } size={ 14 } />,
-		value: 'center',
-	},
-	{
-		label: <Icon icon={ alignRight } size={ 14 } />,
-		value: 'right',
-	},
-	{
-		label: <Icon icon={ alignJustify } size={ 14 } />,
-		value: 'justify',
-	},
-];
+const alignMapObject = {
+	left: alignLeft,
+	center: alignCenter,
+	right: alignRight,
+	justify: alignJustify,
+};
+const align = Object.entries( alignMapObject ).map( ( [ key, icon ] ) => ( {
+	label: (
+		<Icon icon={ icon } size={ 14 } style={ { fill: 'currentColor' } } />
+	),
+	value: key,
+} ) );
 
 export const _default = () => {
 	const [ alignState, setAlignState ] = useState( align[ 0 ].value );

From bcfd9cdd90b6b48f09667c273a0ca532babb64bc Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 8 Jul 2021 16:11:41 +0300
Subject: [PATCH 20/30] add + update tests

---
 .../test/__snapshots__/index.js.snap          |  2 +-
 .../src/segmented-control/test/index.js       | 35 ++++++++++++++-----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
index 5c4a110c21318d..b64b7493e87c87 100644
--- a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`props should render correctly 1`] = `
+exports[`SegmentedControl should render correctly 1`] = `
 .emotion-0 {
   background: #fff;
   border: 1px solid;
diff --git a/packages/components/src/segmented-control/test/index.js b/packages/components/src/segmented-control/test/index.js
index ea48f839329dc6..b376383b8bc136 100644
--- a/packages/components/src/segmented-control/test/index.js
+++ b/packages/components/src/segmented-control/test/index.js
@@ -2,33 +2,50 @@
  * External dependencies
  */
 import { render } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import { act, Simulate } from 'react-dom/test-utils';
 
 /**
  * Internal dependencies
  */
 import { SegmentedControl } from '../index';
 
-describe( 'props', () => {
+describe( 'SegmentedControl', () => {
 	const options = [
 		{ value: 'olaf', label: 'O' },
 		{ value: 'samantha', label: 'S' },
 	];
 
-	test( 'should render correctly', () => {
-		let container;
+	it( 'should render correctly', () => {
+		const { container } = render(
+			<SegmentedControl
+				baseId="segmented"
+				options={ options }
+				label="Test Segmented Control"
+			/>
+		);
+		expect( container.firstChild ).toMatchSnapshot();
+	} );
 
+	it( 'should call onChange with proper value', () => {
+		let container;
+		const mockOnChange = jest.fn();
 		act( () => {
-			const result = render(
+			( { container } = render(
 				<SegmentedControl
 					baseId="segmented"
 					options={ options }
+					value={ options[ 1 ].value }
+					onChange={ mockOnChange }
 					label="Test Segmented Control"
 				/>
-			);
-			container = result.container;
+			) );
 		} );
-
-		expect( container.firstChild ).toMatchSnapshot();
+		const firstButton = container.querySelector(
+			`button[aria-label="${ options[ 0 ].label }"]`
+		);
+		act( () => {
+			Simulate.click( firstButton );
+		} );
+		expect( mockOnChange ).toHaveBeenCalledWith( options[ 0 ].value );
 	} );
 } );

From 050a08a63fbe9cf1fb1182c19d2e7bd49364d8c1 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Fri, 9 Jul 2021 00:27:57 +0300
Subject: [PATCH 21/30] try new approach

---
 .../src/post-featured-image/edit.js           | 22 ++++-
 .../src/segmented-control/component.tsx       | 86 ++++++++++++-------
 .../components/src/segmented-control/types.ts | 31 +++----
 3 files changed, 93 insertions(+), 46 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index d7f302ac525d49..156cebfa4f5775 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -8,6 +8,8 @@ import {
 	ToggleControl,
 	PanelBody,
 	withNotices,
+	BaseControl,
+	__experimentalSegmentedControl as SegmentedControl,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -19,7 +21,22 @@ import {
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { postFeaturedImage } from '@wordpress/icons';
-
+function Example() {
+	return (
+		<SegmentedControl
+			label="my label"
+			value="vertical"
+			onChange={ ( value ) => {
+				// eslint-disable-next-line no-console
+				console.log( value );
+			} }
+			isBlock
+		>
+			<SegmentedControl.Option value="horizontal" label="horizontal" />
+			<SegmentedControl.Option value="vertical" label="vertical" />
+		</SegmentedControl>
+	);
+}
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const placeholderChip = (
 	<div className="post-featured-image_placeholder">
@@ -94,6 +111,9 @@ function PostFeaturedImageDisplay( {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
+					<BaseControl>
+						<Example />
+					</BaseControl>
 					<ToggleControl
 						label={ sprintf(
 							// translators: %s: Name of the post type e.g: "post".
diff --git a/packages/components/src/segmented-control/component.tsx b/packages/components/src/segmented-control/component.tsx
index d053b0d9ad4994..e3f45b8163d74f 100644
--- a/packages/components/src/segmented-control/component.tsx
+++ b/packages/components/src/segmented-control/component.tsx
@@ -11,7 +11,7 @@ import useResizeAware from 'react-resize-aware';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, useMemo } from '@wordpress/element';
+import { useRef, useMemo, createContext, useContext } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -27,9 +27,14 @@ import * as styles from './styles';
 import { useUpdateEffect } from '../utils/hooks';
 import Backdrop from './segmented-control-backdrop';
 import Button from './segmented-control-button';
-import type { SegmentedControlProps } from './types';
+import type {
+	SegmentedControlProps,
+	SegmentedControlOption,
+	SegmentedControlRadioState,
+} from './types';
 
 const noop = () => {};
+const RadioContext = createContext( {} as SegmentedControlRadioState );
 
 function SegmentControl(
 	props: PolymorphicComponentProps< SegmentedControlProps, 'input' >,
@@ -42,9 +47,9 @@ function SegmentControl(
 		isBlock = false,
 		id,
 		label,
-		options = [],
 		onChange = noop,
 		value,
+		children,
 		...otherProps
 	} = useContextSystem( props, 'SegmentedControl' );
 
@@ -53,7 +58,7 @@ function SegmentControl(
 
 	const radio = useRadioState( {
 		baseId: baseId || id,
-		state: value || options[ 0 ]?.value,
+		state: value,
 	} );
 
 	// Propagate radio.state change
@@ -79,33 +84,26 @@ function SegmentControl(
 		[ className ]
 	);
 	return (
-		<RadioGroup
-			{ ...radio }
-			aria-label={ label }
-			as={ View }
-			className={ classes }
-			{ ...otherProps }
-			ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+		<RadioContext.Provider
+			value={ { ...radio, isBlock: ! isAdaptiveWidth } }
 		>
-			{ resizeListener }
-			<Backdrop
+			<RadioGroup
 				{ ...radio }
-				containerRef={ containerRef }
-				containerWidth={ sizes.width }
-			/>
-			{ options.map( ( option: any, index: number ) => {
-				const showSeparator = getShowSeparator( radio, index );
-				return (
-					<Button
-						{ ...radio }
-						{ ...option }
-						isBlock={ ! isAdaptiveWidth }
-						key={ option.value || index }
-						showSeparator={ showSeparator }
-					/>
-				);
-			} ) }
-		</RadioGroup>
+				aria-label={ label }
+				as={ View }
+				className={ classes }
+				{ ...otherProps }
+				ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+			>
+				{ resizeListener }
+				<Backdrop
+					{ ...radio }
+					containerRef={ containerRef }
+					containerWidth={ sizes.width }
+				/>
+				{ children }
+			</RadioGroup>
+		</RadioContext.Provider>
 	);
 }
 
@@ -128,4 +126,32 @@ function getShowSeparator( radio: any, index: number ) {
 	return showSeparator;
 }
 
-export default contextConnect( SegmentControl, 'SegmentControl' );
+function ControlOption(
+	props: PolymorphicComponentProps< SegmentedControlOption, 'input' >,
+	forwardedRef: import('react').Ref< any >
+) {
+	const radio = useContext( RadioContext );
+	const buttonProps = useContextSystem( props, 'SegmentedControlOption' );
+	const index = radio.items.findIndex(
+		( item: any ) => item.id === buttonProps.id
+	);
+	const showSeparator = getShowSeparator( radio, index );
+	return (
+		<Button
+			ref={ forwardedRef }
+			{ ...{ ...radio, ...buttonProps, showSeparator } }
+		/>
+	);
+}
+
+const ConnectedSegmentedControl: any = contextConnect(
+	SegmentControl,
+	'SegmentControl'
+);
+const ConnectedSegmentedControlOption = contextConnect(
+	ControlOption,
+	'SegmentedControlOption'
+);
+ConnectedSegmentedControl.Option = ConnectedSegmentedControlOption;
+
+export default ConnectedSegmentedControl;
diff --git a/packages/components/src/segmented-control/types.ts b/packages/components/src/segmented-control/types.ts
index 129abb74fbc063..a7c75bf21ef342 100644
--- a/packages/components/src/segmented-control/types.ts
+++ b/packages/components/src/segmented-control/types.ts
@@ -2,7 +2,9 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import type { MutableRefObject, Ref } from 'react';
+import type { MutableRefObject, Ref, ReactNode } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import type { RadioStateReturn } from 'reakit';
 
 /**
  * Internal dependencies
@@ -48,20 +50,6 @@ export type SegmentedControlProps = Omit<
 	 * @default false
 	 */
 	isBlock?: boolean;
-	/**
-	 * Options to render within `SegmentedControl`.
-	 *
-	 * @example
-	 * ```jsx
-	 * const options = [
-	 *  { value: 'elsa', label: 'Elsa' },
-	 *  { value: 'ana', label: 'Ana' },
-	 * ]
-	 *
-	 * const Heroes = <SegmentedControl options={options} />
-	 * ```
-	 */
-	options?: Array< SegmentedControlOption >;
 	/**
 	 * Callback when a segment is selected.
 	 */
@@ -70,6 +58,19 @@ export type SegmentedControlProps = Omit<
 	 * The value of `SegmentedControl`
 	 */
 	value?: string | number;
+	/**
+	 * React children
+	 */
+	children: ReactNode;
+};
+
+export type SegmentedControlRadioState = RadioStateReturn & {
+	/**
+	 * Renders `SegmentedControl` as a (CSS) block element.
+	 *
+	 * @default false
+	 */
+	isBlock?: boolean;
 };
 
 export type SegmentedControlButtonProps = {

From 80a4063a4cb520c96ab466a9ae3380420bdff160 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 13 Jul 2021 16:24:02 +0300
Subject: [PATCH 22/30] update tests

---
 .../src/segmented-control/component.tsx       |  6 +-
 .../test/__snapshots__/index.js.snap          | 67 +++----------------
 .../src/segmented-control/test/index.js       | 29 ++++----
 3 files changed, 27 insertions(+), 75 deletions(-)

diff --git a/packages/components/src/segmented-control/component.tsx b/packages/components/src/segmented-control/component.tsx
index e3f45b8163d74f..dc6e6216edf3b6 100644
--- a/packages/components/src/segmented-control/component.tsx
+++ b/packages/components/src/segmented-control/component.tsx
@@ -36,7 +36,7 @@ import type {
 const noop = () => {};
 const RadioContext = createContext( {} as SegmentedControlRadioState );
 
-function SegmentControl(
+function SegmentedControl(
 	props: PolymorphicComponentProps< SegmentedControlProps, 'input' >,
 	forwardedRef: import('react').Ref< any >
 ) {
@@ -145,8 +145,8 @@ function ControlOption(
 }
 
 const ConnectedSegmentedControl: any = contextConnect(
-	SegmentControl,
-	'SegmentControl'
+	SegmentedControl,
+	'SegmentedControl'
 );
 const ConnectedSegmentedControlOption = contextConnect(
 	ControlOption,
diff --git a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
index b64b7493e87c87..9b64ab12b1dac1 100644
--- a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
@@ -106,7 +106,6 @@ exports[`SegmentedControl should render correctly 1`] = `
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: #fff;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -164,58 +163,6 @@ exports[`SegmentedControl should render correctly 1`] = `
   }
 }
 
-.emotion-19 {
-  -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;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  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-19 {
-    transition-duration: 0ms;
-  }
-}
-
-.emotion-19::-moz-focus-inner {
-  border: 0;
-}
-
-.emotion-19:active {
-  background: #fff;
-}
-
 <div
   aria-label="Test Segmented Control"
   class="emotion-0 medium components-segmented-control emotion-1 emotion-2"
@@ -234,17 +181,19 @@ exports[`SegmentedControl should render correctly 1`] = `
   <div
     class="emotion-3 emotion-4"
     role="presentation"
-    style="transform: translateX(NaNpx); transition: none; width: 0px;"
+    style="transform: translateX(0px); transition: none; width: 0px;"
   />
   <div
     class="emotion-5 emotion-6 emotion-7"
-    data-active="true"
+    data-active="false"
   >
     <button
-      aria-checked="true"
+      aria-checked="false"
       aria-label="O"
-      class="emotion-8"
+      class="emotion-8 components-segmented-control-option"
       data-value="olaf"
+      data-wp-c16t="true"
+      data-wp-component="SegmentedControlOption"
       id="segmented-1"
       role="radio"
       tabindex="0"
@@ -273,8 +222,10 @@ exports[`SegmentedControl should render correctly 1`] = `
     <button
       aria-checked="false"
       aria-label="S"
-      class="emotion-19"
+      class="emotion-8 components-segmented-control-option"
       data-value="samantha"
+      data-wp-c16t="true"
+      data-wp-component="SegmentedControlOption"
       id="segmented-2"
       role="radio"
       tabindex="-1"
diff --git a/packages/components/src/segmented-control/test/index.js b/packages/components/src/segmented-control/test/index.js
index b376383b8bc136..88f71ce39865f7 100644
--- a/packages/components/src/segmented-control/test/index.js
+++ b/packages/components/src/segmented-control/test/index.js
@@ -10,22 +10,24 @@ import { act, Simulate } from 'react-dom/test-utils';
 import { SegmentedControl } from '../index';
 
 describe( 'SegmentedControl', () => {
-	const options = [
-		{ value: 'olaf', label: 'O' },
-		{ value: 'samantha', label: 'S' },
-	];
-
+	const options = (
+		<>
+			<SegmentedControl.Option value="olaf" label="O" />
+			<SegmentedControl.Option value="samantha" label="S" />
+		</>
+	);
 	it( 'should render correctly', () => {
 		const { container } = render(
 			<SegmentedControl
 				baseId="segmented"
 				options={ options }
 				label="Test Segmented Control"
-			/>
+			>
+				{ options }
+			</SegmentedControl>
 		);
 		expect( container.firstChild ).toMatchSnapshot();
 	} );
-
 	it( 'should call onChange with proper value', () => {
 		let container;
 		const mockOnChange = jest.fn();
@@ -33,19 +35,18 @@ describe( 'SegmentedControl', () => {
 			( { container } = render(
 				<SegmentedControl
 					baseId="segmented"
-					options={ options }
-					value={ options[ 1 ].value }
+					value="samantha"
 					onChange={ mockOnChange }
 					label="Test Segmented Control"
-				/>
+				>
+					{ options }
+				</SegmentedControl>
 			) );
 		} );
-		const firstButton = container.querySelector(
-			`button[aria-label="${ options[ 0 ].label }"]`
-		);
+		const firstButton = container.querySelector( 'button[aria-label="O"]' );
 		act( () => {
 			Simulate.click( firstButton );
 		} );
-		expect( mockOnChange ).toHaveBeenCalledWith( options[ 0 ].value );
+		expect( mockOnChange ).toHaveBeenCalledWith( 'olaf' );
 	} );
 } );

From 904153ee4186730940f13c13b40e77c63a701989 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 13 Jul 2021 16:48:12 +0300
Subject: [PATCH 23/30] update storybook and readme

---
 .../src/segmented-control/README.md           | 30 ++------
 .../src/segmented-control/stories/index.js    | 77 ++++++++++---------
 2 files changed, 46 insertions(+), 61 deletions(-)

diff --git a/packages/components/src/segmented-control/README.md b/packages/components/src/segmented-control/README.md
index 893bf7c11b3125..72b9ca2743cd94 100644
--- a/packages/components/src/segmented-control/README.md
+++ b/packages/components/src/segmented-control/README.md
@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`SegementedControl` is a form component that lets users choose options represented in horizontal segments.
+`SegementedControl` is a form component that lets users choose options represented in horizontal segments. To render options for this control use `SegmentedControl.Option` component.
 
 ## Usage
 
@@ -14,19 +14,13 @@ import { __experimentalSegmentedControl as SegmentedControl } from '@wordpress/c
 function Example() {
 	return (
 		<SegmentedControl
-			label="My Segmented Control"
+			label="my label"
 			value="vertical"
-			options={ [
-				{
-					label: 'Horizontal',
-					value: 'horizontal',
-				},
-				{
-					label: 'Vertical',
-					value: 'vertical',
-				},
-			] }
-		/>
+			isBlock
+		>
+			<SegmentedControl.Option value="horizontal" label="horizontal" />
+			<SegmentedControl.Option value="vertical" label="vertical" />
+		</SegmentedControl>
 	);
 }
 ```
@@ -62,16 +56,6 @@ Determines if segments should be rendered with equal widths.
 
 Renders `SegmentedControl` as a (CSS) block element.
 
-### `options`
-
--   Type: `Array`
--   Required: No
-
-Options to render within `SegmentedControl`. An array of objects containing the following properties:
-
--   `label`: (string) The label to be shown to the user.
--   `value`: (string|number) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.
-
 ### `onChange`
 
 -   Type: `boolean`
diff --git a/packages/components/src/segmented-control/stories/index.js b/packages/components/src/segmented-control/stories/index.js
index 82bb18fde815f4..ccf60e0a89c3a0 100644
--- a/packages/components/src/segmented-control/stories/index.js
+++ b/packages/components/src/segmented-control/stories/index.js
@@ -27,37 +27,25 @@ const alignMapObject = {
 	right: alignRight,
 	justify: alignJustify,
 };
-const align = Object.entries( alignMapObject ).map( ( [ key, icon ] ) => ( {
-	label: (
-		<Icon icon={ icon } size={ 14 } style={ { fill: 'currentColor' } } />
-	),
-	value: key,
-} ) );
+const align = Object.entries( alignMapObject ).map( ( [ key, icon ] ) => (
+	<SegmentedControl.Option
+		key={ key }
+		value={ key }
+		label={
+			<Icon
+				icon={ icon }
+				size={ 14 }
+				style={ { fill: 'currentColor' } }
+			/>
+		}
+	/>
+) );
 
 export const _default = () => {
-	const [ alignState, setAlignState ] = useState( align[ 0 ].value );
+	const [ alignState, setAlignState ] = useState(
+		Object.keys( alignMapObject )[ 0 ]
+	);
 	const label = 'Segmented Control';
-	const xy = [
-		{
-			label: 'Horizontal',
-			value: 'horizontal',
-		},
-		{
-			label: 'Vertical',
-			value: 'vertical',
-		},
-	];
-
-	const shortLong = [
-		{
-			label: 'Short',
-			value: 'short',
-		},
-		{
-			label: 'Looooooooooooong',
-			value: 'long',
-		},
-	];
 
 	return (
 		<View>
@@ -65,29 +53,42 @@ export const _default = () => {
 				<SegmentedControl
 					isBlock
 					onChange={ setAlignState }
-					options={ align }
 					value={ alignState }
 					label={ label }
-				/>
+				>
+					{ align }
+				</SegmentedControl>
 			</Spacer>
 			<Spacer>
 				<SegmentedControl
 					isBlock
 					onChange={ setAlignState }
-					options={ align }
 					value={ alignState }
 					label={ label }
-				/>
+				>
+					{ align }
+				</SegmentedControl>
 			</Spacer>
 			<Spacer>
-				<SegmentedControl options={ xy } label={ label } />
+				<SegmentedControl label={ label } value="horizontal">
+					<SegmentedControl.Option
+						value="horizontal"
+						label="Horizontal"
+					/>
+					<SegmentedControl.Option
+						value="vertical"
+						label="Vertical"
+					/>
+				</SegmentedControl>
 			</Spacer>
 			<Spacer>
-				<SegmentedControl
-					isAdaptiveWidth
-					options={ shortLong }
-					label={ label }
-				/>
+				<SegmentedControl isAdaptiveWidth label={ label } value="long">
+					<SegmentedControl.Option value="short" label="Short" />
+					<SegmentedControl.Option
+						value="long"
+						label="Looooooooooooong"
+					/>
+				</SegmentedControl>
 			</Spacer>
 		</View>
 	);

From 660e9b5c3e52f15900d3e79ac91a77158167b2ad Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 13 Jul 2021 16:49:18 +0300
Subject: [PATCH 24/30] remove demo code

---
 .../src/post-featured-image/edit.js           | 22 +------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index 156cebfa4f5775..d7f302ac525d49 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -8,8 +8,6 @@ import {
 	ToggleControl,
 	PanelBody,
 	withNotices,
-	BaseControl,
-	__experimentalSegmentedControl as SegmentedControl,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -21,22 +19,7 @@ import {
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { postFeaturedImage } from '@wordpress/icons';
-function Example() {
-	return (
-		<SegmentedControl
-			label="my label"
-			value="vertical"
-			onChange={ ( value ) => {
-				// eslint-disable-next-line no-console
-				console.log( value );
-			} }
-			isBlock
-		>
-			<SegmentedControl.Option value="horizontal" label="horizontal" />
-			<SegmentedControl.Option value="vertical" label="vertical" />
-		</SegmentedControl>
-	);
-}
+
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const placeholderChip = (
 	<div className="post-featured-image_placeholder">
@@ -111,9 +94,6 @@ function PostFeaturedImageDisplay( {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
-					<BaseControl>
-						<Example />
-					</BaseControl>
 					<ToggleControl
 						label={ sprintf(
 							// translators: %s: Name of the post type e.g: "post".

From 5f68a23c87d8c236b4e4414d8066ad5a79414f88 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 13 Jul 2021 17:14:20 +0300
Subject: [PATCH 25/30] add focus style to control

---
 packages/components/src/segmented-control/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/segmented-control/styles.ts b/packages/components/src/segmented-control/styles.ts
index 7feca23f89d424..87ce6879e749f4 100644
--- a/packages/components/src/segmented-control/styles.ts
+++ b/packages/components/src/segmented-control/styles.ts
@@ -26,7 +26,7 @@ export const SegmentedControl = css`
 		border-color: ${ COLORS.ui.borderHover };
 	}
 
-	&:focus {
+	&:focus-within {
 		border-color: ${ COLORS.ui.borderFocus };
 		box-shadow: ${ CONFIG.controlBoxShadowFocus };
 		outline: none;

From db60768ce147abbf79e5343791526598716ee911 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 13 Jul 2021 20:26:15 +0300
Subject: [PATCH 26/30] address feedback part 1

---
 .../src/segmented-control/component.tsx       | 55 ++-----------------
 .../src/segmented-control/radio-context.ts    | 13 +++++
 .../segmented-control-option.tsx              | 55 +++++++++++++++++++
 .../src/segmented-control/stories/index.js    | 45 ++-------------
 .../test/__snapshots__/index.js.snap          | 18 +++---
 .../src/segmented-control/test/index.js       | 44 ++++++---------
 .../components/src/segmented-control/types.ts | 10 ++--
 7 files changed, 110 insertions(+), 130 deletions(-)
 create mode 100644 packages/components/src/segmented-control/radio-context.ts
 create mode 100644 packages/components/src/segmented-control/segmented-control-option.tsx

diff --git a/packages/components/src/segmented-control/component.tsx b/packages/components/src/segmented-control/component.tsx
index dc6e6216edf3b6..997f82a767a344 100644
--- a/packages/components/src/segmented-control/component.tsx
+++ b/packages/components/src/segmented-control/component.tsx
@@ -11,7 +11,7 @@ import useResizeAware from 'react-resize-aware';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, useMemo, createContext, useContext } from '@wordpress/element';
+import { useRef, useMemo } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -26,15 +26,11 @@ import { View } from '../view';
 import * as styles from './styles';
 import { useUpdateEffect } from '../utils/hooks';
 import Backdrop from './segmented-control-backdrop';
-import Button from './segmented-control-button';
-import type {
-	SegmentedControlProps,
-	SegmentedControlOption,
-	SegmentedControlRadioState,
-} from './types';
+import Option from './segmented-control-option';
+import type { SegmentedControlProps } from './types';
+import RadioContext from './radio-context';
 
 const noop = () => {};
-const RadioContext = createContext( {} as SegmentedControlRadioState );
 
 function SegmentedControl(
 	props: PolymorphicComponentProps< SegmentedControlProps, 'input' >,
@@ -107,51 +103,10 @@ function SegmentedControl(
 	);
 }
 
-function getShowSeparator( radio: any, index: number ) {
-	const { currentId, items } = radio;
-	const isLast = index === items.length - 1;
-	const isActive = items[ index ]?.id === currentId;
-	const isNextActive = items[ index + 1 ]?.id === currentId;
-
-	let showSeparator = true;
-
-	if ( items.length < 3 ) {
-		showSeparator = false;
-	}
-
-	if ( isActive || isNextActive || isLast ) {
-		showSeparator = false;
-	}
-
-	return showSeparator;
-}
-
-function ControlOption(
-	props: PolymorphicComponentProps< SegmentedControlOption, 'input' >,
-	forwardedRef: import('react').Ref< any >
-) {
-	const radio = useContext( RadioContext );
-	const buttonProps = useContextSystem( props, 'SegmentedControlOption' );
-	const index = radio.items.findIndex(
-		( item: any ) => item.id === buttonProps.id
-	);
-	const showSeparator = getShowSeparator( radio, index );
-	return (
-		<Button
-			ref={ forwardedRef }
-			{ ...{ ...radio, ...buttonProps, showSeparator } }
-		/>
-	);
-}
-
 const ConnectedSegmentedControl: any = contextConnect(
 	SegmentedControl,
 	'SegmentedControl'
 );
-const ConnectedSegmentedControlOption = contextConnect(
-	ControlOption,
-	'SegmentedControlOption'
-);
-ConnectedSegmentedControl.Option = ConnectedSegmentedControlOption;
+ConnectedSegmentedControl.Option = Option;
 
 export default ConnectedSegmentedControl;
diff --git a/packages/components/src/segmented-control/radio-context.ts b/packages/components/src/segmented-control/radio-context.ts
new file mode 100644
index 00000000000000..f76533734e38f0
--- /dev/null
+++ b/packages/components/src/segmented-control/radio-context.ts
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { SegmentedControlRadioState } from './types';
+
+const RadioContext = createContext( {} as SegmentedControlRadioState );
+
+export default RadioContext;
diff --git a/packages/components/src/segmented-control/segmented-control-option.tsx b/packages/components/src/segmented-control/segmented-control-option.tsx
new file mode 100644
index 00000000000000..3c414649f8e7aa
--- /dev/null
+++ b/packages/components/src/segmented-control/segmented-control-option.tsx
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	contextConnect,
+	useContextSystem,
+	PolymorphicComponentProps,
+} from '../ui/context';
+import Button from './segmented-control-button';
+import type { SegmentedControlOption } from './types';
+import RadioContext from './radio-context';
+
+function getShowSeparator( radio: any, index: number ) {
+	const { currentId, items } = radio;
+	const isLast = index === items.length - 1;
+	const isActive = items[ index ]?.id === currentId;
+	const isNextActive = items[ index + 1 ]?.id === currentId;
+
+	let showSeparator = true;
+
+	if ( items.length < 3 ) {
+		showSeparator = false;
+	}
+
+	if ( isActive || isNextActive || isLast ) {
+		showSeparator = false;
+	}
+
+	return showSeparator;
+}
+
+function ControlOption(
+	props: PolymorphicComponentProps< SegmentedControlOption, 'input' >,
+	forwardedRef: import('react').Ref< any >
+) {
+	const radio = useContext( RadioContext );
+	const buttonProps = useContextSystem( props, 'SegmentedControlOption' );
+	const index = radio.items.findIndex(
+		( item: any ) => item.id === buttonProps.id
+	);
+	const showSeparator = getShowSeparator( radio, index );
+	return (
+		<Button
+			ref={ forwardedRef }
+			{ ...{ ...radio, ...buttonProps, showSeparator } }
+		/>
+	);
+}
+export default contextConnect( ControlOption, 'SegmentedControlOption' );
diff --git a/packages/components/src/segmented-control/stories/index.js b/packages/components/src/segmented-control/stories/index.js
index ccf60e0a89c3a0..55ece4c33e7c30 100644
--- a/packages/components/src/segmented-control/stories/index.js
+++ b/packages/components/src/segmented-control/stories/index.js
@@ -1,18 +1,12 @@
 /**
  * WordPress dependencies
  */
-import {
-	alignCenter,
-	alignJustify,
-	alignLeft,
-	alignRight,
-} from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { Icon, __experimentalSpacer as Spacer } from '../../';
+import { __experimentalSpacer as Spacer } from '../../';
 import { SegmentedControl } from '../index';
 import { View } from '../../view';
 
@@ -21,30 +15,13 @@ export default {
 	title: 'Components/SegmentedControl',
 };
 
-const alignMapObject = {
-	left: alignLeft,
-	center: alignCenter,
-	right: alignRight,
-	justify: alignJustify,
-};
-const align = Object.entries( alignMapObject ).map( ( [ key, icon ] ) => (
-	<SegmentedControl.Option
-		key={ key }
-		value={ key }
-		label={
-			<Icon
-				icon={ icon }
-				size={ 14 }
-				style={ { fill: 'currentColor' } }
-			/>
-		}
-	/>
+const aligns = [ 'Left', 'Center', 'Right', 'Justify' ];
+const alignOptions = aligns.map( ( key ) => (
+	<SegmentedControl.Option key={ key } value={ key } label={ key } />
 ) );
 
 export const _default = () => {
-	const [ alignState, setAlignState ] = useState(
-		Object.keys( alignMapObject )[ 0 ]
-	);
+	const [ alignState, setAlignState ] = useState( aligns[ 0 ] );
 	const label = 'Segmented Control';
 
 	return (
@@ -56,17 +33,7 @@ export const _default = () => {
 					value={ alignState }
 					label={ label }
 				>
-					{ align }
-				</SegmentedControl>
-			</Spacer>
-			<Spacer>
-				<SegmentedControl
-					isBlock
-					onChange={ setAlignState }
-					value={ alignState }
-					label={ label }
-				>
-					{ align }
+					{ alignOptions }
 				</SegmentedControl>
 			</Spacer>
 			<Spacer>
diff --git a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
index 9b64ab12b1dac1..e0e6db116bc6b0 100644
--- a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
@@ -28,7 +28,7 @@ exports[`SegmentedControl should render correctly 1`] = `
   border-color: #757575;
 }
 
-.emotion-0:focus {
+.emotion-0: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;
@@ -189,9 +189,9 @@ exports[`SegmentedControl should render correctly 1`] = `
   >
     <button
       aria-checked="false"
-      aria-label="O"
+      aria-label="R"
       class="emotion-8 components-segmented-control-option"
-      data-value="olaf"
+      data-value="rigas"
       data-wp-c16t="true"
       data-wp-component="SegmentedControlOption"
       id="segmented-1"
@@ -201,13 +201,13 @@ exports[`SegmentedControl should render correctly 1`] = `
       <div
         class="emotion-9 emotion-10"
       >
-        O
+        R
       </div>
       <div
         aria-hidden="true"
         class="emotion-11 emotion-12"
       >
-        O
+        R
       </div>
     </button>
     <div
@@ -221,9 +221,9 @@ exports[`SegmentedControl should render correctly 1`] = `
   >
     <button
       aria-checked="false"
-      aria-label="S"
+      aria-label="J"
       class="emotion-8 components-segmented-control-option"
-      data-value="samantha"
+      data-value="jack"
       data-wp-c16t="true"
       data-wp-component="SegmentedControlOption"
       id="segmented-2"
@@ -233,13 +233,13 @@ exports[`SegmentedControl should render correctly 1`] = `
       <div
         class="emotion-9 emotion-10"
       >
-        S
+        J
       </div>
       <div
         aria-hidden="true"
         class="emotion-11 emotion-12"
       >
-        S
+        J
       </div>
     </button>
     <div
diff --git a/packages/components/src/segmented-control/test/index.js b/packages/components/src/segmented-control/test/index.js
index 88f71ce39865f7..10d36ee94b72ff 100644
--- a/packages/components/src/segmented-control/test/index.js
+++ b/packages/components/src/segmented-control/test/index.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
-import { act, Simulate } from 'react-dom/test-utils';
+import { render, fireEvent } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -12,41 +11,32 @@ import { SegmentedControl } from '../index';
 describe( 'SegmentedControl', () => {
 	const options = (
 		<>
-			<SegmentedControl.Option value="olaf" label="O" />
-			<SegmentedControl.Option value="samantha" label="S" />
+			<SegmentedControl.Option value="rigas" label="R" />
+			<SegmentedControl.Option value="jack" label="J" />
 		</>
 	);
 	it( 'should render correctly', () => {
 		const { container } = render(
-			<SegmentedControl
-				baseId="segmented"
-				options={ options }
-				label="Test Segmented Control"
-			>
+			<SegmentedControl baseId="segmented" label="Test Segmented Control">
 				{ options }
 			</SegmentedControl>
 		);
 		expect( container.firstChild ).toMatchSnapshot();
 	} );
 	it( 'should call onChange with proper value', () => {
-		let container;
 		const mockOnChange = jest.fn();
-		act( () => {
-			( { container } = render(
-				<SegmentedControl
-					baseId="segmented"
-					value="samantha"
-					onChange={ mockOnChange }
-					label="Test Segmented Control"
-				>
-					{ options }
-				</SegmentedControl>
-			) );
-		} );
-		const firstButton = container.querySelector( 'button[aria-label="O"]' );
-		act( () => {
-			Simulate.click( firstButton );
-		} );
-		expect( mockOnChange ).toHaveBeenCalledWith( 'olaf' );
+		const { getByLabelText } = render(
+			<SegmentedControl
+				baseId="segmented"
+				value="jack"
+				onChange={ mockOnChange }
+				label="Test Segmented Control"
+			>
+				{ options }
+			</SegmentedControl>
+		);
+		const firstButton = getByLabelText( 'R' );
+		fireEvent.click( firstButton );
+		expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' );
 	} );
 } );
diff --git a/packages/components/src/segmented-control/types.ts b/packages/components/src/segmented-control/types.ts
index a7c75bf21ef342..96baecbc5cc073 100644
--- a/packages/components/src/segmented-control/types.ts
+++ b/packages/components/src/segmented-control/types.ts
@@ -2,7 +2,7 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import type { MutableRefObject, Ref, ReactNode } from 'react';
+import type { MutableRefObject, Ref, ReactNode, ReactText } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type { RadioStateReturn } from 'reakit';
 
@@ -20,7 +20,7 @@ import type { FormElementProps } from '../utils/types';
  * ```
  */
 export type SegmentedControlOption = {
-	value: string | number;
+	value: ReactText;
 	label: string;
 };
 
@@ -53,11 +53,11 @@ export type SegmentedControlProps = Omit<
 	/**
 	 * Callback when a segment is selected.
 	 */
-	onChange?: ( ...args: any ) => void;
+	onChange?: ( value: ReactText | undefined ) => void;
 	/**
 	 * The value of `SegmentedControl`
 	 */
-	value?: string | number;
+	value?: ReactText;
 	/**
 	 * React children
 	 */
@@ -84,7 +84,7 @@ export type SegmentedControlButtonProps = {
 	isBlock?: boolean;
 	label: string;
 	showSeparator?: boolean;
-	value?: string | number;
+	value?: ReactText;
 	state?: any;
 };
 

From c635735fe71fc00413476fac1fb0790d6d8be31b Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 13 Jul 2021 21:04:51 +0300
Subject: [PATCH 27/30] address feedback part 2

---
 .../src/segmented-control/component.tsx       | 12 ++--
 .../src/segmented-control/radio-context.ts    | 13 ----
 .../segmented-control-button.tsx              |  5 +-
 .../segmented-control-context.ts              | 16 +++++
 .../segmented-control-option.tsx              | 23 ++++---
 .../src/segmented-control/styles.ts           |  3 +-
 .../test/__snapshots__/index.js.snap          | 60 +++++++++----------
 .../components/src/segmented-control/types.ts |  2 +-
 8 files changed, 67 insertions(+), 67 deletions(-)
 delete mode 100644 packages/components/src/segmented-control/radio-context.ts
 create mode 100644 packages/components/src/segmented-control/segmented-control-context.ts

diff --git a/packages/components/src/segmented-control/component.tsx b/packages/components/src/segmented-control/component.tsx
index 997f82a767a344..04fc1bb969dc05 100644
--- a/packages/components/src/segmented-control/component.tsx
+++ b/packages/components/src/segmented-control/component.tsx
@@ -2,8 +2,6 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import { cx } from '@emotion/css';
-// eslint-disable-next-line no-restricted-imports
 import { RadioGroup, useRadioState } from 'reakit';
 import useResizeAware from 'react-resize-aware';
 
@@ -24,11 +22,11 @@ import {
 } from '../ui/context';
 import { View } from '../view';
 import * as styles from './styles';
-import { useUpdateEffect } from '../utils/hooks';
+import { useUpdateEffect, useCx } from '../utils/hooks';
 import Backdrop from './segmented-control-backdrop';
 import Option from './segmented-control-option';
 import type { SegmentedControlProps } from './types';
-import RadioContext from './radio-context';
+import SegmentedControlContext from './segmented-control-context';
 
 const noop = () => {};
 
@@ -48,7 +46,7 @@ function SegmentedControl(
 		children,
 		...otherProps
 	} = useContextSystem( props, 'SegmentedControl' );
-
+	const cx = useCx();
 	const containerRef = useRef();
 	const [ resizeListener, sizes ] = useResizeAware();
 
@@ -80,7 +78,7 @@ function SegmentedControl(
 		[ className ]
 	);
 	return (
-		<RadioContext.Provider
+		<SegmentedControlContext.Provider
 			value={ { ...radio, isBlock: ! isAdaptiveWidth } }
 		>
 			<RadioGroup
@@ -99,7 +97,7 @@ function SegmentedControl(
 				/>
 				{ children }
 			</RadioGroup>
-		</RadioContext.Provider>
+		</SegmentedControlContext.Provider>
 	);
 }
 
diff --git a/packages/components/src/segmented-control/radio-context.ts b/packages/components/src/segmented-control/radio-context.ts
deleted file mode 100644
index f76533734e38f0..00000000000000
--- a/packages/components/src/segmented-control/radio-context.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import type { SegmentedControlRadioState } from './types';
-
-const RadioContext = createContext( {} as SegmentedControlRadioState );
-
-export default RadioContext;
diff --git a/packages/components/src/segmented-control/segmented-control-button.tsx b/packages/components/src/segmented-control/segmented-control-button.tsx
index d2cddfe148e06f..6bf3de5f3a6beb 100644
--- a/packages/components/src/segmented-control/segmented-control-button.tsx
+++ b/packages/components/src/segmented-control/segmented-control-button.tsx
@@ -2,8 +2,6 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import { cx } from '@emotion/css';
-// eslint-disable-next-line no-restricted-imports
 import { Radio } from 'reakit';
 
 /**
@@ -16,6 +14,7 @@ import { memo } from '@wordpress/element';
  */
 import * as styles from './styles';
 import type { SegmentedControlButtonProps } from './types';
+import { useCx } from '../utils/hooks';
 
 const {
 	ButtonContentView,
@@ -34,6 +33,7 @@ function SegmentedControlButton( {
 	...props
 }: SegmentedControlButtonProps ) {
 	const isActive = props.state === value;
+	const cx = useCx();
 	const labelViewClasses = cx( isBlock && styles.labelBlock );
 	const classes = cx(
 		styles.buttonView,
@@ -63,6 +63,7 @@ function SegmentedControlButton( {
 
 const SegmentedControlSeparator = memo(
 	( { isActive }: { isActive: boolean } ) => {
+		const cx = useCx();
 		const classes = cx( isActive && styles.separatorActive );
 		return <SeparatorView aria-hidden className={ classes } />;
 	}
diff --git a/packages/components/src/segmented-control/segmented-control-context.ts b/packages/components/src/segmented-control/segmented-control-context.ts
new file mode 100644
index 00000000000000..3554556fb79638
--- /dev/null
+++ b/packages/components/src/segmented-control/segmented-control-context.ts
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { SegmentedControlContextProps } from './types';
+
+const SegmentedControlContext = createContext(
+	{} as SegmentedControlContextProps
+);
+export const useSegmentedControlContext = () =>
+	useContext( SegmentedControlContext );
+export default SegmentedControlContext;
diff --git a/packages/components/src/segmented-control/segmented-control-option.tsx b/packages/components/src/segmented-control/segmented-control-option.tsx
index 3c414649f8e7aa..fe27d9f7457160 100644
--- a/packages/components/src/segmented-control/segmented-control-option.tsx
+++ b/packages/components/src/segmented-control/segmented-control-option.tsx
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,11 +12,17 @@ import {
 	PolymorphicComponentProps,
 } from '../ui/context';
 import Button from './segmented-control-button';
-import type { SegmentedControlOption } from './types';
-import RadioContext from './radio-context';
+import type {
+	SegmentedControlOption,
+	SegmentedControlContextProps,
+} from './types';
+import { useSegmentedControlContext } from './segmented-control-context';
 
-function getShowSeparator( radio: any, index: number ) {
-	const { currentId, items } = radio;
+function getShowSeparator(
+	segmentedControlContext: SegmentedControlContextProps,
+	index: number
+) {
+	const { currentId, items } = segmentedControlContext;
 	const isLast = index === items.length - 1;
 	const isActive = items[ index ]?.id === currentId;
 	const isNextActive = items[ index + 1 ]?.id === currentId;
@@ -39,16 +44,16 @@ function ControlOption(
 	props: PolymorphicComponentProps< SegmentedControlOption, 'input' >,
 	forwardedRef: import('react').Ref< any >
 ) {
-	const radio = useContext( RadioContext );
+	const segmentedControlContext = useSegmentedControlContext();
 	const buttonProps = useContextSystem( props, 'SegmentedControlOption' );
-	const index = radio.items.findIndex(
+	const index = segmentedControlContext.items.findIndex(
 		( item: any ) => item.id === buttonProps.id
 	);
-	const showSeparator = getShowSeparator( radio, index );
+	const showSeparator = getShowSeparator( segmentedControlContext, index );
 	return (
 		<Button
 			ref={ forwardedRef }
-			{ ...{ ...radio, ...buttonProps, showSeparator } }
+			{ ...{ ...segmentedControlContext, ...buttonProps, showSeparator } }
 		/>
 	);
 }
diff --git a/packages/components/src/segmented-control/styles.ts b/packages/components/src/segmented-control/styles.ts
index 87ce6879e749f4..e02a8d33dd4147 100644
--- a/packages/components/src/segmented-control/styles.ts
+++ b/packages/components/src/segmented-control/styles.ts
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 /**
diff --git a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
index e0e6db116bc6b0..acaadafb63192d 100644
--- a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
@@ -35,7 +35,7 @@ exports[`SegmentedControl should render correctly 1`] = `
   z-index: 1;
 }
 
-.emotion-3 {
+.emotion-2 {
   background: #1e1e1e;
   border-radius: 2px;
   box-shadow: transparent;
@@ -49,18 +49,12 @@ exports[`SegmentedControl should render correctly 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-3 {
+  .emotion-2 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-5 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-6 {
+.emotion-4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -68,9 +62,12 @@ exports[`SegmentedControl should render correctly 1`] = `
   max-width: 100%;
   min-width: 0;
   position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
-.emotion-8 {
+.emotion-6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -109,20 +106,20 @@ exports[`SegmentedControl should render correctly 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-8 {
+  .emotion-6 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-8::-moz-focus-inner {
+.emotion-6::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-8:active {
+.emotion-6:active {
   background: #fff;
 }
 
-.emotion-9 {
+.emotion-7 {
   font-size: 13px;
   line-height: 1;
   position: absolute;
@@ -134,7 +131,7 @@ exports[`SegmentedControl should render correctly 1`] = `
   transform: translate( -50%, -50% );
 }
 
-.emotion-11 {
+.emotion-9 {
   font-size: 13px;
   font-weight: bold;
   height: 0;
@@ -142,11 +139,7 @@ exports[`SegmentedControl should render correctly 1`] = `
   visibility: hidden;
 }
 
-.emotion-13 {
-  background: transparent;
-}
-
-.emotion-14 {
+.emotion-11 {
   background: rgba(0, 0, 0, 0.1);
   height: calc( 100% - 4px - 4px );
   position: absolute;
@@ -155,17 +148,18 @@ exports[`SegmentedControl should render correctly 1`] = `
   -webkit-transition: background 200ms linear;
   transition: background 200ms linear;
   width: 1px;
+  background: transparent;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-14 {
+  .emotion-11 {
     transition-duration: 0ms;
   }
 }
 
 <div
   aria-label="Test Segmented Control"
-  class="emotion-0 medium components-segmented-control emotion-1 emotion-2"
+  class="medium components-segmented-control emotion-0 emotion-1"
   data-wp-c16t="true"
   data-wp-component="SegmentedControl"
   id="segmented"
@@ -179,18 +173,18 @@ exports[`SegmentedControl should render correctly 1`] = `
     tabindex="-1"
   />
   <div
-    class="emotion-3 emotion-4"
+    class="emotion-2 emotion-3"
     role="presentation"
     style="transform: translateX(0px); transition: none; width: 0px;"
   />
   <div
-    class="emotion-5 emotion-6 emotion-7"
+    class="emotion-4 emotion-5"
     data-active="false"
   >
     <button
       aria-checked="false"
       aria-label="R"
-      class="emotion-8 components-segmented-control-option"
+      class="emotion-6 components-segmented-control-option"
       data-value="rigas"
       data-wp-c16t="true"
       data-wp-component="SegmentedControlOption"
@@ -199,30 +193,30 @@ exports[`SegmentedControl should render correctly 1`] = `
       tabindex="0"
     >
       <div
-        class="emotion-9 emotion-10"
+        class="emotion-7 emotion-8"
       >
         R
       </div>
       <div
         aria-hidden="true"
-        class="emotion-11 emotion-12"
+        class="emotion-9 emotion-10"
       >
         R
       </div>
     </button>
     <div
       aria-hidden="true"
-      class="emotion-13 emotion-14 emotion-15"
+      class="emotion-11 emotion-12"
     />
   </div>
   <div
-    class="emotion-5 emotion-6 emotion-7"
+    class="emotion-4 emotion-5"
     data-active="false"
   >
     <button
       aria-checked="false"
       aria-label="J"
-      class="emotion-8 components-segmented-control-option"
+      class="emotion-6 components-segmented-control-option"
       data-value="jack"
       data-wp-c16t="true"
       data-wp-component="SegmentedControlOption"
@@ -231,20 +225,20 @@ exports[`SegmentedControl should render correctly 1`] = `
       tabindex="-1"
     >
       <div
-        class="emotion-9 emotion-10"
+        class="emotion-7 emotion-8"
       >
         J
       </div>
       <div
         aria-hidden="true"
-        class="emotion-11 emotion-12"
+        class="emotion-9 emotion-10"
       >
         J
       </div>
     </button>
     <div
       aria-hidden="true"
-      class="emotion-13 emotion-14 emotion-15"
+      class="emotion-11 emotion-12"
     />
   </div>
 </div>
diff --git a/packages/components/src/segmented-control/types.ts b/packages/components/src/segmented-control/types.ts
index 96baecbc5cc073..fc268ecc3c7372 100644
--- a/packages/components/src/segmented-control/types.ts
+++ b/packages/components/src/segmented-control/types.ts
@@ -64,7 +64,7 @@ export type SegmentedControlProps = Omit<
 	children: ReactNode;
 };
 
-export type SegmentedControlRadioState = RadioStateReturn & {
+export type SegmentedControlContextProps = RadioStateReturn & {
 	/**
 	 * Renders `SegmentedControl` as a (CSS) block element.
 	 *

From 5a6e6e35955021e2d6a96964a6e51f42beafdbda Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 14 Jul 2021 12:27:23 +0300
Subject: [PATCH 28/30] export SegmentedControlOption

---
 packages/components/src/index.js                |  5 ++++-
 .../components/src/segmented-control/README.md  | 17 ++++++++---------
 .../src/segmented-control/component.tsx         |  9 +--------
 .../components/src/segmented-control/index.ts   |  1 +
 .../segmented-control-option.tsx                | 17 ++++++++++-------
 .../src/segmented-control/stories/index.js      | 15 ++++++---------
 .../src/segmented-control/test/index.js         |  6 +++---
 .../components/src/segmented-control/types.ts   | 10 +---------
 8 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 3b47416ceb5750..b114267b92909f 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -109,7 +109,10 @@ export { default as ResizableBox } from './resizable-box';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
 export { default as SearchControl } from './search-control';
-export { SegmentedControl as __experimentalSegmentedControl } from './segmented-control';
+export {
+	SegmentedControl as __experimentalSegmentedControl,
+	SegmentedControlOption as __experimentalSegmentedControlOption,
+} from './segmented-control';
 export { default as SelectControl } from './select-control';
 export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';
diff --git a/packages/components/src/segmented-control/README.md b/packages/components/src/segmented-control/README.md
index 72b9ca2743cd94..aa823811312d78 100644
--- a/packages/components/src/segmented-control/README.md
+++ b/packages/components/src/segmented-control/README.md
@@ -4,22 +4,21 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`SegementedControl` is a form component that lets users choose options represented in horizontal segments. To render options for this control use `SegmentedControl.Option` component.
+`SegementedControl` is a form component that lets users choose options represented in horizontal segments. To render options for this control use `SegmentedControlOption` component.
 
 ## Usage
 
 ```js
-import { __experimentalSegmentedControl as SegmentedControl } from '@wordpress/components';
+import {
+	__experimentalSegmentedControl as SegmentedControl,
+	__experimentalSegmentedControlOption as SegmentedControlOption,
+} from '@wordpress/components';
 
 function Example() {
 	return (
-		<SegmentedControl
-			label="my label"
-			value="vertical"
-			isBlock
-		>
-			<SegmentedControl.Option value="horizontal" label="horizontal" />
-			<SegmentedControl.Option value="vertical" label="vertical" />
+		<SegmentedControl label="my label" value="vertical" isBlock>
+			<SegmentedControlOption value="horizontal" label="Horizontal" />
+			<SegmentedControlOption value="vertical" label="Vertical" />
 		</SegmentedControl>
 	);
 }
diff --git a/packages/components/src/segmented-control/component.tsx b/packages/components/src/segmented-control/component.tsx
index 04fc1bb969dc05..71607e99864d4d 100644
--- a/packages/components/src/segmented-control/component.tsx
+++ b/packages/components/src/segmented-control/component.tsx
@@ -24,7 +24,6 @@ import { View } from '../view';
 import * as styles from './styles';
 import { useUpdateEffect, useCx } from '../utils/hooks';
 import Backdrop from './segmented-control-backdrop';
-import Option from './segmented-control-option';
 import type { SegmentedControlProps } from './types';
 import SegmentedControlContext from './segmented-control-context';
 
@@ -101,10 +100,4 @@ function SegmentedControl(
 	);
 }
 
-const ConnectedSegmentedControl: any = contextConnect(
-	SegmentedControl,
-	'SegmentedControl'
-);
-ConnectedSegmentedControl.Option = Option;
-
-export default ConnectedSegmentedControl;
+export default contextConnect( SegmentedControl, 'SegmentedControl' );
diff --git a/packages/components/src/segmented-control/index.ts b/packages/components/src/segmented-control/index.ts
index 949fb2586c7c90..e7672f9be700a0 100644
--- a/packages/components/src/segmented-control/index.ts
+++ b/packages/components/src/segmented-control/index.ts
@@ -1 +1,2 @@
 export { default as SegmentedControl } from './component';
+export { default as SegmentedControlOption } from './segmented-control-option';
diff --git a/packages/components/src/segmented-control/segmented-control-option.tsx b/packages/components/src/segmented-control/segmented-control-option.tsx
index fe27d9f7457160..223770cb903896 100644
--- a/packages/components/src/segmented-control/segmented-control-option.tsx
+++ b/packages/components/src/segmented-control/segmented-control-option.tsx
@@ -11,9 +11,9 @@ import {
 	useContextSystem,
 	PolymorphicComponentProps,
 } from '../ui/context';
-import Button from './segmented-control-button';
+import SegmentedControlButton from './segmented-control-button';
 import type {
-	SegmentedControlOption,
+	SegmentedControlOptionProps,
 	SegmentedControlContextProps,
 } from './types';
 import { useSegmentedControlContext } from './segmented-control-context';
@@ -40,21 +40,24 @@ function getShowSeparator(
 	return showSeparator;
 }
 
-function ControlOption(
-	props: PolymorphicComponentProps< SegmentedControlOption, 'input' >,
+function SegmentedControlOption(
+	props: PolymorphicComponentProps< SegmentedControlOptionProps, 'input' >,
 	forwardedRef: import('react').Ref< any >
 ) {
 	const segmentedControlContext = useSegmentedControlContext();
 	const buttonProps = useContextSystem( props, 'SegmentedControlOption' );
 	const index = segmentedControlContext.items.findIndex(
-		( item: any ) => item.id === buttonProps.id
+		( item ) => item.id === buttonProps.id
 	);
 	const showSeparator = getShowSeparator( segmentedControlContext, index );
 	return (
-		<Button
+		<SegmentedControlButton
 			ref={ forwardedRef }
 			{ ...{ ...segmentedControlContext, ...buttonProps, showSeparator } }
 		/>
 	);
 }
-export default contextConnect( ControlOption, 'SegmentedControlOption' );
+export default contextConnect(
+	SegmentedControlOption,
+	'SegmentedControlOption'
+);
diff --git a/packages/components/src/segmented-control/stories/index.js b/packages/components/src/segmented-control/stories/index.js
index 55ece4c33e7c30..dbce70d59ecc93 100644
--- a/packages/components/src/segmented-control/stories/index.js
+++ b/packages/components/src/segmented-control/stories/index.js
@@ -7,7 +7,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { __experimentalSpacer as Spacer } from '../../';
-import { SegmentedControl } from '../index';
+import { SegmentedControl, SegmentedControlOption } from '../index';
 import { View } from '../../view';
 
 export default {
@@ -17,7 +17,7 @@ export default {
 
 const aligns = [ 'Left', 'Center', 'Right', 'Justify' ];
 const alignOptions = aligns.map( ( key ) => (
-	<SegmentedControl.Option key={ key } value={ key } label={ key } />
+	<SegmentedControlOption key={ key } value={ key } label={ key } />
 ) );
 
 export const _default = () => {
@@ -38,20 +38,17 @@ export const _default = () => {
 			</Spacer>
 			<Spacer>
 				<SegmentedControl label={ label } value="horizontal">
-					<SegmentedControl.Option
+					<SegmentedControlOption
 						value="horizontal"
 						label="Horizontal"
 					/>
-					<SegmentedControl.Option
-						value="vertical"
-						label="Vertical"
-					/>
+					<SegmentedControlOption value="vertical" label="Vertical" />
 				</SegmentedControl>
 			</Spacer>
 			<Spacer>
 				<SegmentedControl isAdaptiveWidth label={ label } value="long">
-					<SegmentedControl.Option value="short" label="Short" />
-					<SegmentedControl.Option
+					<SegmentedControlOption value="short" label="Short" />
+					<SegmentedControlOption
 						value="long"
 						label="Looooooooooooong"
 					/>
diff --git a/packages/components/src/segmented-control/test/index.js b/packages/components/src/segmented-control/test/index.js
index 10d36ee94b72ff..269921f8db436c 100644
--- a/packages/components/src/segmented-control/test/index.js
+++ b/packages/components/src/segmented-control/test/index.js
@@ -6,13 +6,13 @@ import { render, fireEvent } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { SegmentedControl } from '../index';
+import { SegmentedControl, SegmentedControlOption } from '../index';
 
 describe( 'SegmentedControl', () => {
 	const options = (
 		<>
-			<SegmentedControl.Option value="rigas" label="R" />
-			<SegmentedControl.Option value="jack" label="J" />
+			<SegmentedControlOption value="rigas" label="R" />
+			<SegmentedControlOption value="jack" label="J" />
 		</>
 	);
 	it( 'should render correctly', () => {
diff --git a/packages/components/src/segmented-control/types.ts b/packages/components/src/segmented-control/types.ts
index fc268ecc3c7372..14e5cba75043cf 100644
--- a/packages/components/src/segmented-control/types.ts
+++ b/packages/components/src/segmented-control/types.ts
@@ -11,15 +11,7 @@ import type { RadioStateReturn } from 'reakit';
  */
 import type { FormElementProps } from '../utils/types';
 
-/**
- * Option to render within `SegmentedControl`.
- *
- * @example
- * ```jsx
- * const option = { value: 'elsa', label: 'Elsa' };
- * ```
- */
-export type SegmentedControlOption = {
+export type SegmentedControlOptionProps = {
 	value: ReactText;
 	label: string;
 };

From 1c157f63c82d5482ea6fd354e2b6653d9a028f6d Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 14 Jul 2021 22:01:03 +0300
Subject: [PATCH 29/30] add id to button props

---
 .../src/segmented-control/segmented-control-option.tsx     | 7 ++++++-
 .../src/segmented-control/test/__snapshots__/index.js.snap | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/segmented-control/segmented-control-option.tsx b/packages/components/src/segmented-control/segmented-control-option.tsx
index 223770cb903896..29f94feb994ebc 100644
--- a/packages/components/src/segmented-control/segmented-control-option.tsx
+++ b/packages/components/src/segmented-control/segmented-control-option.tsx
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -44,8 +45,12 @@ function SegmentedControlOption(
 	props: PolymorphicComponentProps< SegmentedControlOptionProps, 'input' >,
 	forwardedRef: import('react').Ref< any >
 ) {
+	const id = useInstanceId( SegmentedControlOption );
 	const segmentedControlContext = useSegmentedControlContext();
-	const buttonProps = useContextSystem( props, 'SegmentedControlOption' );
+	const buttonProps = useContextSystem(
+		{ ...props, id },
+		'SegmentedControlOption'
+	);
 	const index = segmentedControlContext.items.findIndex(
 		( item ) => item.id === buttonProps.id
 	);
diff --git a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
index acaadafb63192d..eb76fd9347f7f0 100644
--- a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
@@ -220,7 +220,7 @@ exports[`SegmentedControl should render correctly 1`] = `
       data-value="jack"
       data-wp-c16t="true"
       data-wp-component="SegmentedControlOption"
-      id="segmented-2"
+      id="1"
       role="radio"
       tabindex="-1"
     >

From 6046e1ad7147b1b71f97f0eab55275d3f236c432 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 14 Jul 2021 23:11:49 +0300
Subject: [PATCH 30/30] create string id

---
 .../src/segmented-control/segmented-control-option.tsx       | 5 ++++-
 .../src/segmented-control/test/__snapshots__/index.js.snap   | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/segmented-control/segmented-control-option.tsx b/packages/components/src/segmented-control/segmented-control-option.tsx
index 29f94feb994ebc..261e6836152f22 100644
--- a/packages/components/src/segmented-control/segmented-control-option.tsx
+++ b/packages/components/src/segmented-control/segmented-control-option.tsx
@@ -45,8 +45,11 @@ function SegmentedControlOption(
 	props: PolymorphicComponentProps< SegmentedControlOptionProps, 'input' >,
 	forwardedRef: import('react').Ref< any >
 ) {
-	const id = useInstanceId( SegmentedControlOption );
 	const segmentedControlContext = useSegmentedControlContext();
+	const id = useInstanceId(
+		SegmentedControlOption,
+		segmentedControlContext.baseId || 'segmented-control-option'
+	);
 	const buttonProps = useContextSystem(
 		{ ...props, id },
 		'SegmentedControlOption'
diff --git a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
index eb76fd9347f7f0..589da552388e3f 100644
--- a/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/segmented-control/test/__snapshots__/index.js.snap
@@ -188,7 +188,7 @@ exports[`SegmentedControl should render correctly 1`] = `
       data-value="rigas"
       data-wp-c16t="true"
       data-wp-component="SegmentedControlOption"
-      id="segmented-1"
+      id="segmented-0"
       role="radio"
       tabindex="0"
     >
@@ -220,7 +220,7 @@ exports[`SegmentedControl should render correctly 1`] = `
       data-value="jack"
       data-wp-c16t="true"
       data-wp-component="SegmentedControlOption"
-      id="1"
+      id="segmented-1"
       role="radio"
       tabindex="-1"
     >