diff --git a/.changeset/graduate-button-loading-disabled-styles.md b/.changeset/graduate-button-loading-disabled-styles.md new file mode 100644 index 00000000000..8638f7f53d5 --- /dev/null +++ b/.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. diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-colorblind-linux.png index 7789bfeff19..f2cf9cce2b0 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-dimmed-linux.png index 213d9446260..0536d089a2a 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-high-contrast-linux.png index fe1a602638d..28bea78b20c 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-linux.png index 7789bfeff19..f2cf9cce2b0 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-tritanopia-linux.png index 7789bfeff19..f2cf9cce2b0 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-colorblind-linux.png index 31c93bb3195..8b427f9f953 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-high-contrast-linux.png index 596c4b01bba..fcf5dcea8f8 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-linux.png index 31c93bb3195..8b427f9f953 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-tritanopia-linux.png index 31c93bb3195..8b427f9f953 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Leading-Visual-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-colorblind-linux.png index 768bde6f44d..798f348fd30 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-dimmed-linux.png index 0e53eb9fa36..f69354a18e8 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-high-contrast-linux.png index 35f6c4b64a3..9274b339af0 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-linux.png index 768bde6f44d..798f348fd30 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-tritanopia-linux.png index 768bde6f44d..798f348fd30 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-colorblind-linux.png index 23a957d810b..386941dd528 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-high-contrast-linux.png index e7c3b945098..58b317d7471 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-linux.png index 23a957d810b..386941dd528 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-tritanopia-linux.png index 23a957d810b..386941dd528 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Action-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-colorblind-linux.png index a414c786b04..9cd8d5b9ba3 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-dimmed-linux.png index 0be668e69df..417240692d4 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-high-contrast-linux.png index 79e7fb07406..596bad7930a 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-linux.png index a414c786b04..9cd8d5b9ba3 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-tritanopia-linux.png index a414c786b04..9cd8d5b9ba3 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-colorblind-linux.png index 66bffa71414..e4caf8dd3ff 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-high-contrast-linux.png index f248aecabf6..50b59f3717c 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-linux.png index 66bffa71414..e4caf8dd3ff 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-tritanopia-linux.png index 66bffa71414..e4caf8dd3ff 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-With-Trailing-Visual-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-colorblind-linux.png index 75227addd4d..f7b3fdb2f76 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-dimmed-linux.png index f73ddf9271c..1bc3c2d10f6 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-high-contrast-linux.png index 353866886f1..9f93e6de772 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-linux.png index 7fb53f9ab0f..e65ba4c362c 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-tritanopia-linux.png index 9ae3d4b75de..4e323e4266f 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-colorblind-linux.png index e716b4868b3..4e27db0636f 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-high-contrast-linux.png index 331ecb39c41..c66dece5af0 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-linux.png index e803d9095d4..fc435a81615 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-linux.png differ diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-tritanopia-linux.png index 7480742f683..9f87d99ad7e 100644 Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-Loading-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-Modal-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-Modal-light-linux.png index 14cd82e5d1e..f439cfef085 100644 Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-Modal-light-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Single-Select-Modal-light-linux.png differ diff --git a/packages/react/src/Button/Button.docs.json b/packages/react/src/Button/Button.docs.json index 91707c4c7bd..23374ee2329 100644 --- a/packages/react/src/Button/Button.docs.json +++ b/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", diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index 278b4979314..414f1b3a012 100644 --- a/packages/react/src/Button/ButtonBase.module.css +++ b/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; diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index d4747b94d4d..85eb39a0503 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/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(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} diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx index e95eb5d614d..b6595109e5e 100644 --- a/packages/react/src/Button/__tests__/Button.test.tsx +++ b/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({children}) + it.each(['default', 'primary', 'danger', 'invisible', 'link'] as const)( + 'applies disabled styles to a loading %s button without using native disabled', + async variant => { + render( + <> + + + + , + ) + + 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( <> - - , ) @@ -369,31 +401,19 @@ 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( <> - - + , ) @@ -401,39 +421,22 @@ describe('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( <> - - + , ) - 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', () => { diff --git a/packages/react/src/Button/types.ts b/packages/react/src/Button/types.ts index f0bd47aa85d..44a3bc40686 100644 --- a/packages/react/src/Button/types.ts +++ b/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 /** diff --git a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts index 726bcd42906..22f9366ae40 100644 --- a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts +++ b/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, })