add tests

Author: langermank

e2e/components/Button.test.ts

@@ -626,4 +626,22 @@ test.describe('Button', () => {
       })
     }
   })
+
+  test.describe('Dev: Disabled variants', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-devonly--disabled-button-variants',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Button.Disabled variants.${theme}.png`)
+        })
+      })
+    }
+  })
 })

packages/react/.storybook/primitives-v8.css

@@ -1,6 +1,8 @@
 /* size/typography */
+@import '@primer/primitives/dist/css/base/motion/motion.css';
 @import '@primer/primitives/dist/css/base/size/size.css';
 @import '@primer/primitives/dist/css/base/typography/typography.css';
+@import '@primer/primitives/dist/css/functional/motion/motion.css';
 @import '@primer/primitives/dist/css/functional/size/border.css';
 @import '@primer/primitives/dist/css/functional/size/breakpoints.css';
 @import '@primer/primitives/dist/css/functional/size/size-coarse.css';

packages/react/src/Button/Button.dev.stories.tsx

@@ -1,7 +1,8 @@
-import {SearchIcon, TriangleDownIcon, EyeIcon, IssueClosedIcon} from '@primer/octicons-react'
+import {SearchIcon, TriangleDownIcon, EyeIcon, IssueClosedIcon, HeartFillIcon} from '@primer/octicons-react'
 import React from 'react'
 import {Button, IconButton} from '.'
 import {default as Text} from '../Text'
+import {Stack} from '../Stack'
 
 export default {
   title: 'Components/Button/DevOnly',
@@ -94,3 +95,58 @@ export const TestSxProp = () => {
     </div>
   )
 }
+
+export const DisabledButtonVariants = () => {
+  return (
+    <Stack direction="horizontal">
+      <Stack align="start">
+        <Button
+          variant="invisible"
+          leadingVisual={SearchIcon}
+          trailingAction={TriangleDownIcon}
+          trailingVisual={HeartFillIcon}
+          count={4}
+          disabled
+        >
+          Invisible
+        </Button>
+        <Button
+          variant="default"
+          leadingVisual={SearchIcon}
+          trailingAction={TriangleDownIcon}
+          trailingVisual={HeartFillIcon}
+          count={4}
+          disabled
+        >
+          Default
+        </Button>
+        <Button
+          variant="primary"
+          leadingVisual={SearchIcon}
+          trailingAction={TriangleDownIcon}
+          trailingVisual={HeartFillIcon}
+          count={4}
+          disabled
+        >
+          Primary
+        </Button>
+        <Button
+          variant="danger"
+          leadingVisual={SearchIcon}
+          trailingAction={TriangleDownIcon}
+          trailingVisual={HeartFillIcon}
+          count={4}
+          disabled
+        >
+          Danger
+        </Button>
+      </Stack>
+      <Stack>
+        <IconButton icon={HeartFillIcon} variant="invisible" aria-label="Invisible" disabled />
+        <IconButton icon={HeartFillIcon} variant="default" aria-label="Default" disabled />
+        <IconButton icon={HeartFillIcon} variant="primary" aria-label="Primary" disabled />
+        <IconButton icon={HeartFillIcon} variant="danger" aria-label="Danger" disabled />
+      </Stack>
+    </Stack>
+  )
+}