diff --git a/.changeset/eight-taxis-itch.md b/.changeset/eight-taxis-itch.md new file mode 100644 index 0000000000..2762c388d0 --- /dev/null +++ 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 index f63a4c875c..671dc5f66a 100644 --- 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 index fe1d89bbb9..81f6873595 100644 --- a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx +++ b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx @@ -83,7 +83,7 @@ export const ButtonGroup = forwardRef( {...actions.secondary} size={size || actions.secondary.size} className={clsx(styles.secondary, actions.secondary.className)} - variant="tertiary" + variant="secondary" /> )}