Merge pull request #407 from lifeomic/list-item-trailing-icon

feat: Add trailing icon for `<ListItem`
lifeomic · Oct 12, 2023 · 9229702 · 9229702
2 parents d0684b8 + fa39849
commit 9229702
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/src/components/List/List.stories.tsx b/src/components/List/List.stories.tsx
@@ -4,7 +4,7 @@ import { List } from './List';
 import { ListItem } from './ListItem';
 import { ListGroupHeading } from './ListGroupHeading';
 import { Avatar } from '../Avatar';
-import { Database, HeartCircle } from '@lifeomic/chromicons';
+import { Database, HeartCircle, ChevronRight } from '@lifeomic/chromicons';
 import Avatar1 from '../../assets/example-avatar-1.jpg';
 import Avatar2 from '../../assets/example-avatar-2.jpg';
 
@@ -118,6 +118,23 @@ export const Icons: Story = {
   },
 };
 
+export const TrailingIcons: Story = {
+  args: {
+    'aria-label': 'List with trailing icons',
+    items: [
+      <ListItem key="1" trailingIcon={ChevronRight}>
+        Option 1
+      </ListItem>,
+      <ListItem key="2" trailingIcon={ChevronRight}>
+        Option 2
+      </ListItem>,
+      <ListItem key="3" trailingIcon={ChevronRight}>
+        Option 3
+      </ListItem>,
+    ],
+  },
+};
+
 export const Avatars: Story = {
   args: {
     'aria-label': 'List with avatars',

diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
@@ -21,6 +21,7 @@ export const useStyles = makeStyles(
       display: 'flex',
       fontFamily: theme.typography.fontFamily,
       fontSize: theme.pxToRem(14),
+      gap: theme.spacing(1),
       letterSpacing: '0.015625em',
       margin: 0,
       outline: 'none',
@@ -53,13 +54,15 @@ export const useStyles = makeStyles(
     },
     avatar: {
       alignSelf: 'flex-start',
-      marginRight: theme.spacing(1),
     },
     icon: {
       alignSelf: 'flex-start',
-      marginRight: theme.spacing(1),
       minWidth: theme.pxToRem(18),
     },
+    trailingIcon: {
+      marginRight: 0,
+      marginLeft: 'auto',
+    },
     text: {
       lineHeight: 1.35,
     },
@@ -79,8 +82,9 @@ export interface ListItemProps extends React.ComponentPropsWithoutRef<'li'> {
   disabled?: boolean;
   icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
   onClick?: any;
-  text?: string;
   secondaryText?: string;
+  text?: string;
+  trailingIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
 }
 
 export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
@@ -92,8 +96,9 @@ export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
       disabled,
       icon: Icon,
       onClick,
-      text,
       secondaryText,
+      text,
+      trailingIcon: TrailingIcon,
       ...rootProps
     },
     ref
@@ -136,6 +141,16 @@ export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
               <Box className={classes.secondaryText}>{secondaryText}</Box>
             )}
           </Box>
+
+          {!!TrailingIcon && (
+            <TrailingIcon
+              role="img"
+              aria-hidden
+              className={clsx(classes.icon, classes.trailingIcon)}
+              width={18}
+              height={18}
+            />
+          )}
         </Tag>
       </li>
     );