improves docs for inactive actionlist items (#4050)

Author: mperrotti

src/ActionList/ActionList.docs.json

@@ -86,7 +86,7 @@
           "name": "inactiveText",
           "type": "string",
           "defaultValue": "",
-          "description": "Text describing why the item is inactive. This may be used when an item's usual functionality is unavailable due to a system error such as a database outage."
+          "description": "Text describing why the item is inactive. This may be used when an item's usual functionality is unavailable due to a system error such as a database outage. \nIf there is a leading visual, the alert icon will replace the leading visual. \n If there is a trailing visual, it will replace the trailing visual.\n If there is no visual passed, it will be shown in the trailing visual slot to preserve left alignment of item content. \nText will appear in a tooltip triggered by the alert icon in ActionList items, but text will appear below the description or title on ActionMenu items."
         },
         {
           "name": "role",

src/ActionList/ActionList.stories.tsx

@@ -216,6 +216,7 @@ LinkItemPlayground.args = {
   disabled: false,
   role: 'listitem',
   id: 'item-1',
+  inactiveText: '',
   leadingVisual: null,
   trailingVisual: null,
 }
@@ -231,6 +232,11 @@ LinkItemPlayground.argTypes = {
   id: {
     type: 'string',
   },
+  inactiveText: {
+    control: {
+      type: 'text',
+    },
+  },
   leadingVisual: {
     control: {
       type: 'select',

src/ActionMenu/ActionMenu.examples.stories.tsx

@@ -13,6 +13,11 @@ import {
   XIcon,
   CheckIcon,
   CopyIcon,
+  ArchiveIcon,
+  BookIcon,
+  CommentIcon,
+  RocketIcon,
+  WorkflowIcon,
 } from '@primer/octicons-react'
 
 export default {
@@ -334,3 +339,58 @@ export const OnRightSide = () => (
     </ActionMenu.Overlay>
   </ActionMenu>
 )
+
+export const OnlyInactiveItems = () => (
+  <ActionMenu>
+    <ActionMenu.Button inactive>Open menu</ActionMenu.Button>
+    <ActionMenu.Overlay width="auto">
+      <ActionList>
+        <ActionList.Item onSelect={() => alert('Workflows clicked')} inactiveText="Unavailable due to an outage">
+          Workflows
+          <ActionList.LeadingVisual>
+            <WorkflowIcon />
+          </ActionList.LeadingVisual>
+        </ActionList.Item>
+        <ActionList.Item onSelect={() => alert('Archived items clicked')} inactiveText="Unavailable due to an outage">
+          Archived items
+          <ActionList.LeadingVisual>
+            <ArchiveIcon />
+          </ActionList.LeadingVisual>
+        </ActionList.Item>
+        <ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
+          Settings
+          <ActionList.LeadingVisual>
+            <GearIcon />
+          </ActionList.LeadingVisual>
+        </ActionList.LinkItem>
+        <ActionList.Item onSelect={() => alert('Make a copy clicked')} inactiveText="Unavailable due to an outage">
+          Make a copy
+          <ActionList.LeadingVisual>
+            <CopyIcon />
+          </ActionList.LeadingVisual>
+        </ActionList.Item>
+        <ActionList.Divider />
+        <ActionList.Group title="Github projects">
+          <ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
+            What&apos;s new
+            <ActionList.LeadingVisual>
+              <RocketIcon />
+            </ActionList.LeadingVisual>
+          </ActionList.LinkItem>
+          <ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
+            Give feedback
+            <ActionList.LeadingVisual>
+              <CommentIcon />
+            </ActionList.LeadingVisual>
+          </ActionList.LinkItem>
+          <ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
+            GitHub Docs
+            <ActionList.LeadingVisual>
+              <BookIcon />
+            </ActionList.LeadingVisual>
+          </ActionList.LinkItem>
+        </ActionList.Group>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+)

src/ActionMenu/ActionMenu.features.stories.tsx

@@ -177,60 +177,3 @@ export const InactiveItems = () => (
     </ActionMenu.Overlay>
   </ActionMenu>
 )
-
-// TODO: Uncomment this story when we have inactive buttons
-//
-// export const OnlyInactiveItems = () => (
-//   <ActionMenu>
-//     <ActionMenu.Button>Open menu</ActionMenu.Button>
-//     <ActionMenu.Overlay width="auto">
-//       <ActionList>
-//         <ActionList.Item onSelect={() => alert('Workflows clicked')} inactiveText="Unavailable due to an outage">
-//           Workflows
-//           <ActionList.LeadingVisual>
-//             <WorkflowIcon />
-//           </ActionList.LeadingVisual>
-//         </ActionList.Item>
-//         <ActionList.Item onSelect={() => alert('Archived items clicked')} inactiveText="Unavailable due to an outage">
-//           Archived items
-//           <ActionList.LeadingVisual>
-//             <ArchiveIcon />
-//           </ActionList.LeadingVisual>
-//         </ActionList.Item>
-//         <ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
-//           Settings
-//           <ActionList.LeadingVisual>
-//             <GearIcon />
-//           </ActionList.LeadingVisual>
-//         </ActionList.LinkItem>
-//         <ActionList.Item onSelect={() => alert('Make a copy clicked')} inactiveText="Unavailable due to an outage">
-//           Make a copy
-//           <ActionList.LeadingVisual>
-//             <CopyIcon />
-//           </ActionList.LeadingVisual>
-//         </ActionList.Item>
-//         <ActionList.Divider />
-//         <ActionList.Group title="Github projects">
-//           <ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
-//             What&apos;s new
-//             <ActionList.LeadingVisual>
-//               <RocketIcon />
-//             </ActionList.LeadingVisual>
-//           </ActionList.LinkItem>
-//           <ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
-//             Give feedback
-//             <ActionList.LeadingVisual>
-//               <CommentIcon />
-//             </ActionList.LeadingVisual>
-//           </ActionList.LinkItem>
-//           <ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
-//             GitHub Docs
-//             <ActionList.LeadingVisual>
-//               <BookIcon />
-//             </ActionList.LeadingVisual>
-//           </ActionList.LinkItem>
-//         </ActionList.Group>
-//       </ActionList>
-//     </ActionMenu.Overlay>
-//   </ActionMenu>
-// )