Graduate button loading disabled styles

.changeset/graduate-button-loading-disabled-styles.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Button: Apply disabled styles to loading buttons by default while keeping them focusable.

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

@@ -135,7 +135,7 @@
     {
       "name": "loading",
       "type": "boolean",
-      "description": "When true, the button is in a loading state."
+      "description": "When true, the button is in a loading state and appears disabled while remaining focusable."
     },
     {
       "name": "loadingAnnouncement",

packages/react/src/Button/ButtonBase.module.css

@@ -80,8 +80,7 @@
   }
 
   &:disabled,
-  &[aria-disabled='true']:not([data-loading='true']),
-  &[aria-disabled='true'][data-loading-disabled-styles='true'] {
+  &[aria-disabled='true'] {
     cursor: not-allowed;
     box-shadow: none;
 
@@ -322,8 +321,7 @@
     }
 
     &:disabled,
-    &[aria-disabled='true']:not([data-loading='true']),
-    &[aria-disabled='true'][data-loading-disabled-styles='true'] {
+    &[aria-disabled='true'] {
       color: var(--control-fgColor-disabled);
       background-color: var(--button-default-bgColor-disabled);
       border-color: var(--button-default-borderColor-disabled);
@@ -379,8 +377,7 @@
     }
 
     &:disabled,
-    &[aria-disabled='true']:not([data-loading='true']),
-    &[aria-disabled='true'][data-loading-disabled-styles='true'] {
+    &[aria-disabled='true'] {
       color: var(--button-primary-fgColor-disabled);
       background-color: var(--button-primary-bgColor-disabled);
       border-color: var(--button-primary-borderColor-disabled);
@@ -475,8 +472,7 @@
     }
 
     &:disabled,
-    &[aria-disabled='true']:not([data-loading='true']),
-    &[aria-disabled='true'][data-loading-disabled-styles='true'] {
+    &[aria-disabled='true'] {
       color: var(--button-danger-fgColor-disabled);
       background-color: var(--button-danger-bgColor-disabled);
       border-color: var(--button-default-borderColor-disabled);
@@ -549,8 +545,7 @@
     }
 
     &:disabled,
-    &[aria-disabled='true']:not([data-loading='true']),
-    &[aria-disabled='true'][data-loading-disabled-styles='true'] {
+    &[aria-disabled='true'] {
       color: var(--button-invisible-fgColor-disabled);
       background-color: var(--button-invisible-bgColor-disabled);
       border-color: var(--button-invisible-borderColor-disabled);
@@ -609,8 +604,7 @@
     }
 
     &:disabled,
-    &[aria-disabled='true']:not([data-loading='true']),
-    &[aria-disabled='true'][data-loading-disabled-styles='true'] {
+    &[aria-disabled='true'] {
       color: var(--control-fgColor-disabled);
       background-color: transparent;
       border-color: transparent;

packages/react/src/Button/ButtonBase.tsx

@@ -11,9 +11,6 @@ import {AriaStatus} from '../live-region'
 import {clsx} from 'clsx'
 import classes from './ButtonBase.module.css'
 import {isElement, isValidElementType} from 'react-is'
-import {useFeatureFlag} from '../FeatureFlags'
-
-const BUTTON_LOADING_DISABLED_STYLES_FEATURE_FLAG = 'primer_react_button_loading_disabled_styles'
 
 const renderModuleVisual = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -67,7 +64,6 @@ const ButtonBase = forwardRef(({children, as: Component = 'button', ...props}, f
 
   const innerRef = React.useRef<HTMLButtonElement>(null)
   const mergedRef = useMergedRefs(forwardedRef, innerRef)
-  const loadingDisabledStylesEnabled = useFeatureFlag(BUTTON_LOADING_DISABLED_STYLES_FEATURE_FLAG)
 
   const uuid = useId(id)
   const loadingAnnouncementID = `${uuid}-loading-announcement`
@@ -115,7 +111,6 @@ const ButtonBase = forwardRef(({children, as: Component = 'button', ...props}, f
         data-block={block ? 'block' : null}
         data-inactive={inactive ? true : undefined}
         data-loading={Boolean(loading)}
-        data-loading-disabled-styles={loadingDisabledStylesEnabled ? true : undefined}
         data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
         data-size={size}
         data-variant={variant}

packages/react/src/Button/__tests__/Button.test.tsx

@@ -6,7 +6,6 @@ import React from 'react'
 import {IconButton, Button, LinkButton} from '../../Button'
 import classes from '../ButtonBase.module.css'
 import {implementsClassName} from '../../utils/testing'
-import {FeatureFlags} from '../../FeatureFlags'
 
 type StatefulLoadingButtonProps = {
   children?: React.ReactNode
@@ -345,19 +344,52 @@ describe('Button', () => {
       return {backgroundColor, borderColor, color, cursor}
     }
 
-    const renderWithLoadingDisabledStyles = (children: React.ReactNode) =>
-      render(<FeatureFlags flags={{primer_react_button_loading_disabled_styles: true}}>{children}</FeatureFlags>)
+    it.each(['default', 'primary', 'danger', 'invisible', 'link'] as const)(
+      'applies disabled styles to a loading %s button without using native disabled',
+      async variant => {
+        render(
+          <>
+            <Button variant={variant} loading>
+              Loading
+            </Button>
+            <Button variant={variant} disabled>
+              Disabled
+            </Button>
+            <Button variant={variant}>Enabled</Button>
+          </>,
+        )
+
+        const loadingButton = page.getByRole('button', {
+          name: 'Loading',
+          exact: true,
+        })
+        const disabledButton = page.getByRole('button', {
+          name: 'Disabled',
+          exact: true,
+        })
+        const enabledButton = page.getByRole('button', {
+          name: 'Enabled',
+          exact: true,
+        })
+
+        await expect.element(loadingButton).toHaveAttribute('aria-disabled', 'true')
+        await expect.element(loadingButton).toHaveAttribute('data-loading', 'true')
+        await expect.element(loadingButton).not.toBeDisabled()
+        expect(visualStyles(loadingButton.element())).toEqual(visualStyles(disabledButton.element()))
+        expect(visualStyles(loadingButton.element())).not.toEqual(visualStyles(enabledButton.element()))
+        expect(visualStyles(loadingButton.element()).cursor).toBe('not-allowed')
+      },
+    )
 
-    it('applies disabled styles to a loading primary button without using native disabled', async () => {
-      renderWithLoadingDisabledStyles(
+    it('applies disabled styles when loading is combined with aria-disabled', async () => {
+      render(
         <>
-          <Button variant="primary" loading>
+          <Button variant="primary" loading aria-disabled>
             Loading
           </Button>
           <Button variant="primary" disabled>
             Disabled
           </Button>
-          <Button variant="primary">Enabled</Button>
         </>,
       )
 
@@ -369,71 +401,42 @@ describe('Button', () => {
         name: 'Disabled',
         exact: true,
       })
-      const enabledButton = page.getByRole('button', {
-        name: 'Enabled',
-        exact: true,
-      })
 
       await expect.element(loadingButton).toHaveAttribute('aria-disabled', 'true')
-      await expect.element(loadingButton).toHaveAttribute('data-loading', 'true')
-      await expect.element(loadingButton).toHaveAttribute('data-loading-disabled-styles', 'true')
       await expect.element(loadingButton).not.toBeDisabled()
       expect(visualStyles(loadingButton.element())).toEqual(visualStyles(disabledButton.element()))
-      expect(visualStyles(loadingButton.element()).backgroundColor).not.toBe(
-        visualStyles(enabledButton.element()).backgroundColor,
-      )
-      expect(visualStyles(loadingButton.element()).cursor).toBe('not-allowed')
     })
 
-    it('applies disabled styles when loading is combined with aria-disabled', async () => {
-      renderWithLoadingDisabledStyles(
+    it('restores enabled styles when loading finishes', async () => {
+      const {rerender} = render(
         <>
-          <Button variant="primary" loading aria-disabled>
+          <Button variant="primary" loading>
             Loading
           </Button>
-          <Button variant="primary" disabled>
-            Disabled
-          </Button>
+          <Button variant="primary">Enabled</Button>
         </>,
       )
 
       const loadingButton = page.getByRole('button', {
         name: 'Loading',
         exact: true,
       })
-      const disabledButton = page.getByRole('button', {
-        name: 'Disabled',
+      const enabledButton = page.getByRole('button', {
+        name: 'Enabled',
         exact: true,
       })
 
-      await expect.element(loadingButton).toHaveAttribute('aria-disabled', 'true')
-      await expect.element(loadingButton).not.toBeDisabled()
-      expect(visualStyles(loadingButton.element())).toEqual(visualStyles(disabledButton.element()))
-    })
-
-    it('preserves existing loading styles when the feature flag is disabled', async () => {
-      render(
+      rerender(
         <>
-          <Button variant="primary" loading>
+          <Button variant="primary" loading={false}>
             Loading
           </Button>
-          <Button variant="primary" disabled>
-            Disabled
-          </Button>
+          <Button variant="primary">Enabled</Button>
         </>,
       )
 
-      const loadingButton = page.getByRole('button', {
-        name: 'Loading',
-        exact: true,
-      })
-      const disabledButton = page.getByRole('button', {
-        name: 'Disabled',
-        exact: true,
-      })
-
-      await expect.element(loadingButton).not.toHaveAttribute('data-loading-disabled-styles')
-      expect(visualStyles(loadingButton.element())).not.toEqual(visualStyles(disabledButton.element()))
+      await expect.element(loadingButton).not.toHaveAttribute('aria-disabled')
+      await expect.poll(() => visualStyles(loadingButton.element())).toEqual(visualStyles(enabledButton.element()))
     })
 
     it('does not call onClick while loading', () => {

packages/react/src/Button/types.ts

@@ -36,7 +36,7 @@ export type ButtonBaseProps = {
    */
   block?: boolean
   /**
-   * Specify whether the button is in a loading state
+   * Specify whether the button is in a loading state. Loading buttons appear disabled but remain focusable.
    */
   loading?: boolean
   /**

packages/react/src/FeatureFlags/DefaultFeatureFlags.ts

@@ -10,6 +10,5 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_action_list_item_gap: false,
   primer_react_timeline_list_semantics: false,
   primer_react_merged_forwarded_refs: false,
-  primer_react_button_loading_disabled_styles: false,
   primer_react_blankslate_compact_default: false,
 })