Add trailingVisual alias to ActionList/ActionMenu (#1521)

* add trailingVisual alias to ActionList/ActionMenu * replace both icon and text with visual * Create gold-ads-kneel.md * Update .changeset/gold-ads-kneel.md Co-authored-by: Cole Bemis <colebemis@github.com> * Change type for trailingVisual to ReactNode * docs: Add trailingVisual to ActionList example Co-authored-by: Cole Bemis <colebemis@github.com>
primer · Oct 25, 2021 · 28b5980 · 28b5980
1 parent dcf693f
commit 28b5980
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 5 deletions.
diff --git a/.changeset/gold-ads-kneel.md b/.changeset/gold-ads-kneel.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Add `trailingVisual` prop to ActionList/ActionMenu. Deprecate `trailingIcon` and `trailingText` props.
diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx
@@ -32,7 +32,7 @@ An `ActionList` is a list of items which can be activated or selected. `ActionLi
     {groupId: '4'}
   ]}
   items={[
-    {key: '1', leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'},
+    {key: '1', leadingVisual: TypographyIcon, text: 'Rename', groupId: '0', trailingVisual: '⌘R'},
     {key: '2', leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'},
     {key: '3', leadingVisual: SearchIcon, text: 'repo:github/github', groupId: '1'},
     {
@@ -59,7 +59,7 @@ An `ActionList` is a list of items which can be activated or selected. `ActionLi
       groupId: '3'
     },
     {key: '7', leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'},
-    {key: '8', leadingVisual: GearIcon, text: 'View settings', groupId: '4'}
+    {key: '8', leadingVisual: GearIcon, text: 'View settings', groupId: '4', trailingVisual: ArrowRightIcon}
   ]}
 />
 ```

diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js
@@ -17,7 +17,8 @@ import {
   FilterIcon,
   GearIcon,
   TypographyIcon,
-  VersionsIcon
+  VersionsIcon,
+  ArrowRightIcon
 } from '@primer/octicons-react'
 import State from '../../../components/State'
 import {Dialog as Dialog2} from '../../../../src/Dialog/Dialog'
@@ -46,6 +47,7 @@ export default {
   GearIcon,
   TypographyIcon,
   VersionsIcon,
+  ArrowRightIcon,
   Dialog2,
   ConfirmationDialog,
   useConfirm,

diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -89,7 +89,7 @@ export interface ItemProps extends SxProp {
   /**
    * Icon or text positioned after `Item` text.
    */
-  trailingVisual?: React.FunctionComponent<IconProps> | string
+  trailingVisual?: React.ReactNode
 
   /**
    * Style variations associated with various `Item` types.

diff --git a/src/stories/ActionMenu.stories.tsx b/src/stories/ActionMenu.stories.tsx
@@ -150,7 +150,7 @@ export function ExternalOpenState(): JSX.Element {
             {
               text: 'Delete file',
               variant: 'danger',
-              trailingText: '⌘D'
+              trailingVisual: '⌘D'
             }
           ]}
         />