ItemGroup: experimenting with chevron icon (#36654)

* ItemGroup: add chevron storybook example * Add RTL support to the chevron icon
WordPress · Nov 23, 2021 · 6d87c73 · 6d87c73
1 parent ab9ad83
commit 6d87c73
Showing 1 changed file with 83 additions and 1 deletion.
diff --git a/packages/components/src/item-group/stories/index.js b/packages/components/src/item-group/stories/index.js
@@ -4,15 +4,20 @@
  * 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';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import { useCx } from '../../utils';
 import { ItemGroup, Item } from '..';
 import Button from '../../button';
 import { FlexItem, FlexBlock } from '../../flex';
@@ -117,6 +122,58 @@ 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 isRtlLayout = isRTL();
+	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;
+				transform: ${ isRtlLayout ? 'scaleX( -100% )' : 'none' };
+			` ),
+		[ isRtlLayout ]
+	);
+
+	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 +234,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>
 	);
 };