Add stories to show Tooltip and Dialog usage in Inactive Buttons

.changeset/soft-pans-punch.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+Adds an 'inactive' state to buttons. An inactive button looks disabled and has aria-disabled, but it can still be clicked and focused. This was added to support buttons that are broken due to availability issues, but can't be removed from the page.
+
+<!-- Changed components: Button, Button2, IconButton -->

e2e/components/Button.test.ts

@@ -445,6 +445,40 @@ test.describe('Button', () => {
     }
   })
 
+  test.describe('Inactive', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--inactive',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Button.Inactive.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--inactive',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
   test.describe('Dev: Invisible Variants', () => {
     for (const theme of themes) {
       test.describe(theme, () => {

package.json

@@ -102,7 +102,7 @@
     "@oddbird/popover-polyfill": "^0.3.1",
     "@primer/behaviors": "^1.5.1",
     "@primer/octicons-react": "^19.8.0",
-    "@primer/primitives": "^7.11.11",
+    "@primer/primitives": "7.15.3",
     "@react-aria/ssr": "^3.5.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/props": "^5.1.5",

src/Button/Button.docs.json

@@ -50,6 +50,11 @@
       "type": "React.ElementType",
       "description": "A visual to display after the button text."
     },
+    {
+      "name": "inactive",
+      "type": "boolean",
+      "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button.\n This is intended to be used when a system error such as an outage prevents the button from performing its usual action.\n Inactive styles are slightly different from disabled styles because inactive buttons need to have an accessible color contrast ratio. This is because inactive buttons can have tooltips or perform an action such as opening a dialog explaining why it's inactive.\n If both `disabled` and `inactive` are true, `disabled` takes precedence."
+    },
     {
       "name": "as",
       "type": "React.ElementType",

src/Button/Button.features.stories.tsx

@@ -1,6 +1,8 @@
 import {EyeIcon, TriangleDownIcon, HeartIcon} from '@primer/octicons-react'
 import React, {useState} from 'react'
 import {Button} from '.'
+import {Tooltip} from '../drafts'
+import {ToggleSwitch, Text, Box, Dialog} from '../'
 
 export default {
   title: 'Components/Button/Features',
@@ -63,8 +65,61 @@ export const Block = () => <Button block>Default</Button>
 
 export const Disabled = () => <Button disabled>Default</Button>
 
+export const Inactive = () => (
+  <Button variant="primary" inactive>
+    Default
+  </Button>
+)
+
 export const Small = () => <Button size="small">Default</Button>
 
 export const Medium = () => <Button size="medium">Default</Button>
 
 export const Large = () => <Button size="large">Default</Button>
+
+const InactiveButtonHover = () => <Button inactive>Hover over me during outage</Button>
+
+export const InactiveButtonWithTooltip = () => {
+  const [isOn, setIsOn] = React.useState(false)
+  const onClick = React.useCallback(() => {
+    setIsOn(!isOn)
+  }, [setIsOn, isOn])
+
+  return (
+    <Box>
+      <Text id="toggle" fontWeight={'bold'} fontSize={2}>
+        Simulate outage
+      </Text>
+      <ToggleSwitch aria-labelledby="toggle" onClick={onClick} />
+      {isOn ? (
+        <Tooltip text="This button is inactive due to an outage!">
+          <InactiveButtonHover />
+        </Tooltip>
+      ) : (
+        <InactiveButtonHover />
+      )}
+    </Box>
+  )
+}
+
+export const InactiveButtonShowsDialog = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const onDialogClose = React.useCallback(() => {
+    setIsOpen(false)
+  }, [setIsOpen])
+  const onAnchorClick = React.useCallback(() => {
+    setIsOpen(true)
+  }, [setIsOpen])
+  return (
+    <Box>
+      <Button inactive onClick={onAnchorClick}>
+        Click on me during outage
+      </Button>
+      {isOpen && (
+        <Dialog title="My Dialog" subtitle="This is a subtitle!" onClose={onDialogClose}>
+          There is an outage so you cant read whats supposed to be here
+        </Dialog>
+      )}
+    </Box>
+  )
+}

src/Button/Button.stories.tsx

@@ -26,6 +26,11 @@ Playground.argTypes = {
       type: 'boolean',
     },
   },
+  inactive: {
+    control: {
+      type: 'boolean',
+    },
+  },
   variant: {
     control: {
       type: 'radio',
@@ -51,6 +56,7 @@ Playground.args = {
   block: false,
   size: 'medium',
   disabled: false,
+  inactive: false,
   variant: 'default',
   alignContent: 'center',
   trailingVisual: null,

src/Button/ButtonBase.tsx

@@ -21,6 +21,7 @@ const ButtonBase = forwardRef(
       size = 'medium',
       alignContent = 'center',
       block = false,
+      inactive,
       ...rest
     } = props
 
@@ -68,6 +69,7 @@ const ButtonBase = forwardRef(
         data-block={block ? 'block' : null}
         data-size={size === 'small' || size === 'large' ? size : undefined}
         data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
+        data-inactive={inactive ? true : undefined}
       >
         {Icon ? (
           <Icon />

src/Button/IconButton.docs.json

@@ -24,6 +24,11 @@
       "defaultValue": "",
       "description": "Changes the size of the icon button component"
     },
+    {
+      "name": "inactive",
+      "type": "boolean",
+      "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
+    },
     {
       "name": "icon",
       "type": "Component",

src/Button/IconButton.stories.tsx

@@ -23,6 +23,11 @@ Playground.argTypes = {
       type: 'boolean',
     },
   },
+  inactive: {
+    control: {
+      type: 'boolean',
+    },
+  },
   variant: {
     control: {
       type: 'radio',
@@ -34,6 +39,7 @@ Playground.argTypes = {
 Playground.args = {
   size: 'medium',
   disabled: false,
+  inactive: false,
   variant: 'default',
   'aria-label': 'Icon button description',
   icon: XIcon,