Fix disabled ButtonGroup action

sumup-oss · Jan 3, 2024 · 56b6da8 · 56b6da8
1 parent 9a6287c
commit 56b6da8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/.changeset/dull-pets-hope.md 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
@@ -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
@@ -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);
+}