diff --git a/.changeset/dull-pets-hope.md b/.changeset/dull-pets-hope.md new file mode 100644 index 0000000000..f5cdcb6bac --- /dev/null +++ b/.changeset/dull-pets-hope.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': patch +--- + +Fixed the disabled styles of the secondary action inside a ButtonGroup. diff --git a/packages/circuit-ui/components/Button/Button.stories.tsx b/packages/circuit-ui/components/Button/Button.stories.tsx index c92945d330..82401d69cd 100644 --- a/packages/circuit-ui/components/Button/Button.stories.tsx +++ b/packages/circuit-ui/components/Button/Button.stories.tsx @@ -29,6 +29,7 @@ export default { subcomponents: { IconButton, CloseButton, ButtonGroup }, argTypes: { children: { control: 'text' }, + disabled: { control: 'boolean' }, }, }; diff --git a/packages/circuit-ui/components/Button/base.module.css b/packages/circuit-ui/components/Button/base.module.css index d9f139eff0..0ebaaf7d7b 100644 --- a/packages/circuit-ui/components/Button/base.module.css +++ b/packages/circuit-ui/components/Button/base.module.css @@ -337,16 +337,6 @@ transform: translateY(2px); } -/* Disabled */ -.base:disabled, -.base[disabled], -.base[aria-disabled="true"] { - color: var(--cui-fg-normal-disabled); - cursor: not-allowed; - background-color: var(--cui-bg-highlight-disabled); - border-color: transparent; -} - /* ButtonGroup */ @container cui-button-group (width < 360px) { .base { @@ -398,3 +388,19 @@ display: none; } } + +/* Disabled */ +.base:disabled, +.base[disabled], +.base[aria-disabled="true"] { + color: var(--cui-fg-normal-disabled); + cursor: not-allowed; + background-color: var(--cui-bg-highlight-disabled); + border-color: transparent; +} + +.base:disabled .content, +.base[disabled] .content, +.base[aria-disabled="true"] .content { + transform: translate(0); +}