Un-revert "Add loading prop for Button and IconButton (#3582)"

.changeset/lazy-jobs-pump.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add `loading` state to `Button` and `IconButton`

e2e/components/Button.test.ts

@@ -479,6 +479,184 @@ 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('Loading With Trailing Action', () => {
+ for (const theme of themes) {
+ test.describe(theme, () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-button-features--loading-with-trailing-action',
+ globals: {
+ colorScheme: theme,
+ },
+ })
+
+ // Default state
+ expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+ `Button.Loading With Trailing Action.${theme}.png`,
+ )
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-button-features--loading-with-trailing-action',
+ 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, () => {

packages/react/src/Button/Button.docs.json

@@ -32,11 +32,6 @@
  "type": "number | string",
  "description": "For counter buttons, the number to display."
  },
- {
- "name": "disabled",
- "type": "boolean",
- "description": "Items that are disabled can not be clicked, selected, or navigated through."
- },
  {
  "name": "inactive",
  "type": "boolean",
@@ -53,6 +48,17 @@
  "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": "ref",
  "type": "React.RefObject<HTMLButtonElement>"

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

@@ -0,0 +1,79 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import {Button} from '.'
+import {DownloadIcon} from '@primer/octicons-react'
+import {Banner} from '../drafts'
+import {AriaStatus} from '../live-region'
+
+const meta: Meta<typeof Button> = {
+ title: 'Components/Button/Examples',
+} as Meta<typeof Button>
+
+export default meta
+
+export const LoadingStatusAnnouncementSuccessful = () => {
+ const [loading, setLoading] = React.useState(false)
+ const [success, setSuccess] = React.useState(false)
+
+ const resolveAction = async () => {
+ setLoading(true)
+ await new Promise(resolve => setTimeout(resolve, 1500))
+ setLoading(false)
+
+ return await true
+ }
+
+ const onClick = (resolveType: 'error' | 'success') => async () => {
+ const actionResult = await resolveAction()
+
+ if (resolveType === 'error') {
+ setSuccess(!actionResult)
+ return
+ }
+
+ setSuccess(actionResult)
+ }
+
+ return (
+ <>
+ <AriaStatus>{!loading && success ? 'Export completed' : null}</AriaStatus>
+ <Button loading={loading} leadingVisual={DownloadIcon} onClick={onClick('success')}>
+ Export (success)
+ </Button>
+ </>
+ )
+}
+
+export const LoadingStatusAnnouncementError = () => {
+ const [loading, setLoading] = React.useState(false)
+ const [error, setError] = React.useState(false)
+
+ const resolveAction = async () => {
+ setLoading(true)
+ await new Promise(resolve => setTimeout(resolve, 1500))
+ setLoading(false)
+
+ return await true
+ }
+
+ const onClick = (resolveType: 'error' | 'success') => async () => {
+ const actionResult = await resolveAction()
+
+ if (resolveType === 'error') {
+ setError(actionResult)
+ return
+ }
+
+ setError(!actionResult)
+ }
+
+ return (
+ <>
+ {!loading && error ? <Banner title="Export failed" variant="critical" /> : null}
+
+ <Button loading={loading} leadingVisual={DownloadIcon} onClick={onClick('error')}>
+ Export (error)
+ </Button>
+ </>
+ )
+}

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

@@ -1,4 +1,4 @@
-import {EyeIcon, TriangleDownIcon, HeartIcon, CommentIcon} from '@primer/octicons-react'
+import {EyeIcon, TriangleDownIcon, HeartIcon, DownloadIcon, CommentIcon} from '@primer/octicons-react'
 import React, {useState} from 'react'
 import {Button} from '.'
 import {Stack} from '../Stack/Stack'
@@ -141,6 +141,46 @@ 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 LoadingWithTrailingAction = () => (
+ <Button loading trailingAction={TriangleDownIcon}>
+ Export dropdown
+ </Button>
+)
+
+export const LoadingTrigger = () => {
+ const [isLoading, setIsLoading] = useState(false)
+
+ const handleClick = () => {
+ setIsLoading(true)
+ }
+
+ return (
+ <Button loading={isLoading} onClick={handleClick} leadingVisual={DownloadIcon}>
+ Export
+ </Button>
+ )
+}
+
 export const LabelWrap = () => {
  return (
  <Stack style={{width: '200px'}}>

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

@@ -48,11 +48,21 @@ Playground.argTypes = {
  type: 'boolean',
  },
  },
+ loading: {
+ control: {
+ type: 'boolean',
+ },
+ },
  labelWrap: {
  control: {
  type: 'boolean',
  },
  },
+ count: {
+ control: {
+ type: 'number',
+ },
+ },
  leadingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
  trailingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]),
  trailingAction: OcticonArgType([TriangleDownIcon]),
@@ -64,6 +74,7 @@ Playground.args = {
  inactive: false,
  variant: 'default',
  alignContent: 'center',
+ loading: false,
  trailingVisual: null,
  leadingVisual: null,
  trailingAction: null,