From e270b8bed10a0d1509d0db0b57b02d42cfad0075 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 19 Nov 2021 13:15:48 +0100
Subject: [PATCH 1/2] ItemGroup: add chevron storybook example

---
 .../src/item-group/stories/index.js           | 81 ++++++++++++++++++-
 1 file changed, 80 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/item-group/stories/index.js b/packages/components/src/item-group/stories/index.js
index 2ae503630345dc..a59e8c40018b58 100644
--- a/packages/components/src/item-group/stories/index.js
+++ b/packages/components/src/item-group/stories/index.js
@@ -4,15 +4,19 @@
  * External dependencies
  */
 import { boolean, select } from '@storybook/addon-knobs';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 /**
  * WordPress dependencies
  */
-import { typography } from '@wordpress/icons';
+import { typography, chevronRight } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import { useCx } from '../../utils';
 import { ItemGroup, Item } from '..';
 import Button from '../../button';
 import { FlexItem, FlexBlock } from '../../flex';
@@ -117,6 +121,56 @@ const SimpleColorSwatch = ( { color, style } ) => (
 	/>
 );
 
+const ChevronWrapper = styled( FlexItem )`
+	display: block;
+	fill: currentColor;
+	transition: transform 0.15s ease-out;
+`;
+
+const ItemWithChevron = ( {
+	children,
+	className,
+	alwaysVisible,
+	...otherProps
+} ) => {
+	const cx = useCx();
+
+	const appearingChevron = css`
+		&:not( :hover ):not( :focus ) ${ ChevronWrapper } {
+			display: none;
+		}
+	`;
+
+	const itemClassName = useMemo(
+		() => cx( ! alwaysVisible && appearingChevron, className ),
+		[ alwaysVisible, className ]
+	);
+
+	const chevronIconClassName = useMemo(
+		() =>
+			cx( css`
+				display: block;
+				fill: currentColor;
+			` ),
+		[]
+	);
+
+	return (
+		<Item { ...otherProps } className={ itemClassName }>
+			<HStack justify="flex-start">
+				<FlexBlock>{ children }</FlexBlock>
+				<ChevronWrapper>
+					<Icon
+						className={ chevronIconClassName }
+						icon={ chevronRight }
+						size={ 24 }
+					/>
+				</ChevronWrapper>
+			</HStack>
+		</Item>
+	);
+};
+
 export const complexLayouts = () => {
 	const colors = [
 		{
@@ -177,6 +231,31 @@ export const complexLayouts = () => {
 					</FlexItem>
 				</HStack>
 			</Item>
+
+			<ItemWithChevron onClick={ () => alert( 'Single color setting' ) }>
+				<HStack justify="flex-start">
+					<SimpleColorSwatch
+						color="#2FB63F"
+						style={ { flexShrink: 0 } }
+					/>
+
+					<Truncate>Chevron on hover and focus</Truncate>
+				</HStack>
+			</ItemWithChevron>
+
+			<ItemWithChevron
+				alwaysVisible
+				onClick={ () => alert( 'Single color setting' ) }
+			>
+				<HStack justify="flex-start">
+					<SimpleColorSwatch
+						color="#D175D0"
+						style={ { flexShrink: 0 } }
+					/>
+
+					<Truncate>Chevron always visible</Truncate>
+				</HStack>
+			</ItemWithChevron>
 		</ItemGroup>
 	);
 };

From 113d2f0c9c02273ce5a5660a188fae3850d9a325 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 23 Nov 2021 12:22:00 +0100
Subject: [PATCH 2/2] Add RTL support to the chevron icon

---
 packages/components/src/item-group/stories/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/item-group/stories/index.js b/packages/components/src/item-group/stories/index.js
index a59e8c40018b58..fb8dc64c606918 100644
--- a/packages/components/src/item-group/stories/index.js
+++ b/packages/components/src/item-group/stories/index.js
@@ -12,6 +12,7 @@ import styled from '@emotion/styled';
  */
 import { typography, chevronRight } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -133,6 +134,7 @@ const ItemWithChevron = ( {
 	alwaysVisible,
 	...otherProps
 } ) => {
+	const isRtlLayout = isRTL();
 	const cx = useCx();
 
 	const appearingChevron = css`
@@ -151,8 +153,9 @@ const ItemWithChevron = ( {
 			cx( css`
 				display: block;
 				fill: currentColor;
+				transform: ${ isRtlLayout ? 'scaleX( -100% )' : 'none' };
 			` ),
-		[]
+		[ isRtlLayout ]
 	);
 
 	return (