Always use secondary variant in ButtonGroup

sumup-oss · Jul 4, 2024 · c3fddbf · c3fddbf
1 parent d31230b
commit c3fddbf
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 62 deletions.
diff --git a/.changeset/eight-taxis-itch.md b/.changeset/eight-taxis-itch.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Always use the secondary Button variant for the second button in a ButtonGroup. Previously, it switched to the tertiary variant in narrow spaces.
diff --git a/packages/circuit-ui/components/Button/base.module.css b/packages/circuit-ui/components/Button/base.module.css
@@ -249,67 +249,6 @@
   }
 }
 
-@container cui-button-group (width > 370px) {
-  /* Keep in sync with the .secondary class above */
-  .tertiary {
-    color: var(--cui-fg-normal);
-    background-color: var(--cui-bg-normal);
-    border-color: var(--cui-border-normal);
-  }
-
-  .tertiary:hover {
-    color: var(--cui-fg-normal-hovered);
-    background-color: var(--cui-bg-subtle-hovered);
-    border-color: var(--cui-border-normal-hovered);
-  }
-
-  .tertiary:active,
-  .tertiary[aria-expanded="true"],
-  .tertiary[aria-pressed="true"] {
-    color: var(--cui-fg-normal-pressed);
-    background-color: var(--cui-bg-subtle-pressed);
-    border-color: var(--cui-border-normal-pressed);
-  }
-
-  .tertiary.destructive {
-    color: var(--cui-fg-danger);
-  }
-
-  .tertiary.destructive:hover {
-    color: var(--cui-fg-danger-hovered);
-    background-color: var(--cui-bg-danger-hovered);
-    border-color: var(--cui-border-danger-hovered);
-  }
-
-  .tertiary.destructive:active,
-  .tertiary.destructive[aria-expanded="true"],
-  .tertiary.destructive[aria-pressed="true"] {
-    color: var(--cui-fg-danger-pressed);
-    background-color: var(--cui-bg-danger-pressed);
-    border-color: var(--cui-border-danger-pressed);
-  }
-
-  .tertiary:disabled,
-  .tertiary[disabled],
-  .tertiary[aria-disabled="true"] {
-    color: var(--cui-fg-normal-disabled);
-    background-color: var(--cui-bg-normal);
-    border-color: var(--cui-border-normal-disabled);
-  }
-
-  .tertiary.destructive:disabled,
-  .tertiary.destructive[disabled],
-  .tertiary.destructive[aria-disabled="true"] {
-    color: var(--cui-fg-danger-disabled);
-    background-color: var(--cui-bg-normal);
-    border-color: var(--cui-border-normal-disabled);
-  }
-
-  .tertiary .label {
-    text-decoration: none;
-  }
-}
-
 /* Disabled */
 .base:disabled,
 .base[disabled],

diff --git a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx
@@ -83,7 +83,7 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
               {...actions.secondary}
               size={size || actions.secondary.size}
               className={clsx(styles.secondary, actions.secondary.className)}
-              variant="tertiary"
+              variant="secondary"
             />
           )}
         </div>