Revert "Add loading prop for Button and IconButton (#3582)" (#4464

) * Revert "Add `loading` prop for `Button` and `IconButton` (#3582)" This reverts commit 3be64c5. * fix bad revert: accidentally deleted this file * update snapshots
primer · Apr 4, 2024 · c01901f · c01901f
1 parent 06f57f4
commit c01901f
Show file tree

Hide file tree

Showing 89 changed files with 292 additions and 1,114 deletions.
diff --git a/.changeset/lazy-jobs-pump.md b/.changeset/lazy-jobs-pump.md
diff --git a/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png
diff --git a/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png b/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png b/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png
diff --git a/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png b/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png
diff --git a/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png
diff --git a/...t.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png b/...t.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-colorblind-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-colorblind-linux.png
diff --git a/...nts/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-dimmed-linux.png b/...nts/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-dimmed-linux.png
diff --git a/...ionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-high-contrast-linux.png b/...ionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-high-contrast-linux.png
diff --git a/...components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-linux.png b/...components/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-tritanopia-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-dark-tritanopia-linux.png
diff --git a/...ctionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-colorblind-linux.png b/...ctionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-colorblind-linux.png
diff --git a/...onMenu.test.ts-snapshots/ActionMenu-Single-Select-light-high-contrast-linux.png b/...onMenu.test.ts-snapshots/ActionMenu-Single-Select-light-high-contrast-linux.png
diff --git a/...omponents/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-linux.png b/...omponents/ActionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-linux.png
diff --git a/...ctionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-tritanopia-linux.png b/...ctionMenu.test.ts-snapshots/ActionMenu-Single-Select-light-tritanopia-linux.png
diff --git a/....test.ts-snapshots/Button-Loading-Custom-Announcement-dark-colorblind-linux.png b/....test.ts-snapshots/Button-Loading-Custom-Announcement-dark-colorblind-linux.png
diff --git a/...tton.test.ts-snapshots/Button-Loading-Custom-Announcement-dark-dimmed-linux.png b/...tton.test.ts-snapshots/Button-Loading-Custom-Announcement-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/Button-Loading-Custom-Announcement-dark-high-contrast-linux.png b/...st.ts-snapshots/Button-Loading-Custom-Announcement-dark-high-contrast-linux.png
diff --git a/...ents/Button.test.ts-snapshots/Button-Loading-Custom-Announcement-dark-linux.png b/...ents/Button.test.ts-snapshots/Button-Loading-Custom-Announcement-dark-linux.png
diff --git a/....test.ts-snapshots/Button-Loading-Custom-Announcement-dark-tritanopia-linux.png b/....test.ts-snapshots/Button-Loading-Custom-Announcement-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-Custom-Announcement-light-colorblind-linux.png b/...test.ts-snapshots/Button-Loading-Custom-Announcement-light-colorblind-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Button-Loading-Custom-Announcement-light-linux.png b/...nts/Button.test.ts-snapshots/Button-Loading-Custom-Announcement-light-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-Custom-Announcement-light-tritanopia-linux.png b/...test.ts-snapshots/Button-Loading-Custom-Announcement-light-tritanopia-linux.png
diff --git a/....test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-colorblind-linux.png b/....test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-colorblind-linux.png
diff --git a/...tton.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-dimmed-linux.png b/...tton.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/Button-Loading-With-Leading-Visual-dark-high-contrast-linux.png b/...st.ts-snapshots/Button-Loading-With-Leading-Visual-dark-high-contrast-linux.png
diff --git a/...ents/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-linux.png b/...ents/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-linux.png
diff --git a/....test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-tritanopia-linux.png b/....test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-With-Leading-Visual-light-colorblind-linux.png b/...test.ts-snapshots/Button-Loading-With-Leading-Visual-light-colorblind-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-linux.png b/...nts/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-With-Leading-Visual-light-tritanopia-linux.png b/...test.ts-snapshots/Button-Loading-With-Leading-Visual-light-tritanopia-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-colorblind-linux.png b/...test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-colorblind-linux.png
diff --git a/...ton.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-dimmed-linux.png b/...ton.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-dimmed-linux.png
diff --git a/...t.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-high-contrast-linux.png b/...t.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-high-contrast-linux.png
diff --git a/...nts/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-linux.png b/...nts/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-linux.png
diff --git a/...test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-tritanopia-linux.png b/...test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-tritanopia-linux.png
diff --git a/...est.ts-snapshots/Button-Loading-With-Trailing-Visual-light-colorblind-linux.png b/...est.ts-snapshots/Button-Loading-With-Trailing-Visual-light-colorblind-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-linux.png b/...ts/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-linux.png
diff --git a/...est.ts-snapshots/Button-Loading-With-Trailing-Visual-light-tritanopia-linux.png b/...est.ts-snapshots/Button-Loading-With-Trailing-Visual-light-tritanopia-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Loading-dark-colorblind-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Loading-dark-colorblind-linux.png
diff --git a/...pshots/components/Button.test.ts-snapshots/Button-Loading-dark-dimmed-linux.png b/...pshots/components/Button.test.ts-snapshots/Button-Loading-dark-dimmed-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-Loading-dark-high-contrast-linux.png b/...components/Button.test.ts-snapshots/Button-Loading-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-linux.png b/...ght/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Loading-dark-tritanopia-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Loading-dark-tritanopia-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Loading-light-colorblind-linux.png b/...s/components/Button.test.ts-snapshots/Button-Loading-light-colorblind-linux.png
diff --git a/...ht/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-linux.png b/...ht/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Loading-light-tritanopia-linux.png b/...s/components/Button.test.ts-snapshots/Button-Loading-light-tritanopia-linux.png
diff --git a/...ts/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png b/...ts/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png
diff --git a/...pshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png b/...pshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png
diff --git a/...components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png b/...components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png b/...ght/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png
diff --git a/...ts/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png b/...ts/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png
diff --git a/...s/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png b/...s/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png
diff --git a/...omponents/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png b/...omponents/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png
diff --git a/...ht/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png b/...ht/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png
diff --git a/...s/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png b/...s/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png
diff --git a/...omponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png b/...omponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png
diff --git a/...ts/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png b/...ts/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png
diff --git a/...onents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png b/...onents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png
diff --git a/...snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png b/...snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png
diff --git a/...omponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png b/...omponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png
diff --git a/...mponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png b/...mponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png
diff --git a/...nents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png b/...nents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png
diff --git a/...napshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png b/...napshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png
diff --git a/...mponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png b/...mponents/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png
diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts
@@ -479,148 +479,6 @@ test.describe('Button', () => {
     }
   })
 
-  test.describe('Loading', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-button-features--loading',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Button.Loading.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-button-features--loading',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
-        })
-      })
-    }
-  })
-
-  test.describe('Loading Custom Announcement', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-button-features--loading-custom-announcement',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `Button.Loading Custom Announcement.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-button-features--loading-custom-announcement',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
-        })
-      })
-    }
-  })
-
-  test.describe('Loading With Leading Visual', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-button-features--loading-with-leading-visual',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `Button.Loading With Leading Visual.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-button-features--loading-with-leading-visual',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
-        })
-      })
-    }
-  })
-
-  test.describe('Loading With Trailing Visual', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-button-features--loading-with-trailing-visual',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `Button.Loading With Trailing Visual.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-button-features--loading-with-trailing-visual',
-            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, () => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/src/Button/Button.docs.json b/packages/react/src/Button/Button.docs.json
@@ -18,9 +18,15 @@
       "description": "For counter buttons, the number to display."
     },
     {
-      "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": "variant",
+      "type": "'default'\n| 'primary'\n| 'danger'\n| 'invisible'",
+      "defaultValue": "'default'",
+      "description": "Change the visual style of the button."
+    },
+    {
+      "name": "size",
+      "type": "'small'\n| 'medium'\n| 'large'",
+      "defaultValue": "'medium'"
     },
     {
       "name": "leadingIcon",
@@ -33,22 +39,6 @@
       "type": "React.ElementType",
       "description": "A visual to display before the button text."
     },
-    {
-      "name": "loading",
-      "type": "boolean",
-      "description": "When true, the button is in a loading state."
-    },
-    {
-      "name": "loadingAnnouncement",
-      "type": "string",
-      "description": "The content to announce to screen readers when loading. This requires `loading` prop to be true"
-    },
-
-    {
-      "name": "size",
-      "type": "'small'\n| 'medium'\n| 'large'",
-      "defaultValue": "'medium'"
-    },
     {
       "name": "trailingIcon",
       "type": "React.ComponentType<OcticonProps>",
@@ -61,10 +51,9 @@
       "description": "A visual to display after the button text."
     },
     {
-      "name": "variant",
-      "type": "'default'\n| 'primary'\n| 'danger'\n| 'invisible'",
-      "defaultValue": "'default'",
-      "description": "Change the visual style of the button."
+      "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",

diff --git a/packages/react/src/Button/Button.examples.stories.tsx b/packages/react/src/Button/Button.examples.stories.tsx
diff --git a/packages/react/src/Button/Button.features.stories.tsx b/packages/react/src/Button/Button.features.stories.tsx
@@ -1,4 +1,4 @@
-import {EyeIcon, TriangleDownIcon, HeartIcon, DownloadIcon} from '@primer/octicons-react'
+import {EyeIcon, TriangleDownIcon, HeartIcon} from '@primer/octicons-react'
 import React, {useState} from 'react'
 import {Button} from '.'
 
@@ -96,37 +96,3 @@ export const Small = () => <Button size="small">Default</Button>
 export const Medium = () => <Button size="medium">Default</Button>
 
 export const Large = () => <Button size="large">Default</Button>
-
-export const Loading = () => <Button loading>Default</Button>
-
-export const LoadingCustomAnnouncement = () => (
-  <Button loading loadingAnnouncement="This is a custom loading announcement">
-    Default
-  </Button>
-)
-
-export const LoadingWithLeadingVisual = () => (
-  <Button loading leadingVisual={DownloadIcon}>
-    Export
-  </Button>
-)
-
-export const LoadingWithTrailingVisual = () => (
-  <Button loading trailingVisual={DownloadIcon}>
-    Export
-  </Button>
-)
-
-export const LoadingTrigger = () => {
-  const [isLoading, setIsLoading] = useState(false)
-
-  const handleClick = () => {
-    setIsLoading(true)
-  }
-
-  return (
-    <Button loading={isLoading} onClick={handleClick} leadingVisual={DownloadIcon}>
-      Export
-    </Button>
-  )
-}
diff --git a/packages/react/src/Button/Button.stories.tsx b/packages/react/src/Button/Button.stories.tsx
@@ -48,16 +48,6 @@ Playground.argTypes = {
       type: 'boolean',
     },
   },
-  loading: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  count: {
-    control: {
-      type: 'number',
-    },
-  },
   leadingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
   trailingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
   trailingAction: OcticonArgType([TriangleDownIcon]),
@@ -69,7 +59,6 @@ Playground.args = {
   inactive: false,
   variant: 'default',
   alignContent: 'center',
-  loading: false,
   trailingVisual: null,
   leadingVisual: null,
   trailingAction: null,