Fix styles of the ButtonGroup actions (#2347)

sumup-oss · Dec 14, 2023 · a928009 · a928009
1 parent 216708a
commit a928009
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 85 deletions.
diff --git a/.changeset/rude-eggs-explain.md b/.changeset/rude-eggs-explain.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed the destructive styles of the ButtonGroup's secondary action.
diff --git a/.changeset/thirty-bikes-happen.md b/.changeset/thirty-bikes-happen.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed the tertiary styles of the ButtonGroup's secondary action on narrow viewports.
diff --git a/packages/circuit-ui/components/Button/Button.module.css b/packages/circuit-ui/components/Button/Button.module.css
@@ -1,4 +1,5 @@
-.stretch {
+/* This duplicated class is intentional to increase the selector specificity */
+.stretch.stretch {
   width: 100%;
 }
 

diff --git a/packages/circuit-ui/components/Button/base.module.css b/packages/circuit-ui/components/Button/base.module.css
@@ -343,3 +343,55 @@
   width: var(--cui-icon-sizes-kilo);
   height: var(--cui-icon-sizes-kilo);
 }
+
+/* ButtonGroup */
+@container cui-button-group (width < 360px) {
+  .base {
+    width: 100%;
+  }
+}
+
+@container cui-button-group (width > 480px) {
+  /* 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-normal-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-normal-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 .label::after {
+    display: none;
+  }
+}
diff --git a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.module.css b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.module.css
@@ -1,11 +1,19 @@
+.container {
+  container: cui-button-group / inline-size;
+  width: 100%;
+}
+
 .base {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 100%;
 }
 
-@media (min-width: 480px) {
+.secondary {
+  margin-top: var(--cui-spacings-kilo);
+}
+
+@container cui-button-group (width > 480px) {
   .base {
     flex-direction: row-reverse;
   }
@@ -21,65 +29,9 @@
   .right {
     justify-content: flex-start;
   }
-}
-
-@media (max-width: 479px) {
-  .base .secondary {
-    margin-top: var(--cui-spacings-mega);
-  }
-
-  /* stylelint-disable-next-line no-duplicate-selectors -- Keep in sync with the .tertiary class in Button.module.css */
-  .base .secondary {
-    padding-right: 0;
-    padding-left: 0;
-    color: var(--cui-fg-accent);
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  .base .secondary:hover {
-    color: var(--cui-fg-accent-hovered);
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  .base .secondary:active,
-  .base .secondary[aria-expanded='true'],
-  .base .secondary[aria-pressed='true'] {
-    color: var(--cui-fg-accent-pressed);
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  .base .secondary:disabled,
-  .base .secondary[disabled] {
-    color: var(--cui-fg-accent-disabled);
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  .base .secondary.destructive {
-    color: var(--cui-fg-danger);
-  }
-
-  .base .secondary.destructive:hover {
-    color: var(--cui-fg-danger-hovered);
-  }
-
-  .base .secondary.destructive:active,
-  .base .secondary.destructive[aria-expanded='true'],
-  .base .secondary.destructive[aria-pressed='true'] {
-    color: var(--cui-fg-danger-pressed);
-  }
-
-  .base .secondary.destructive:disabled,
-  .base .secondary.destructive[disabled] {
-    color: var(--cui-fg-danger-disabled);
-  }
-}
 
-@media (min-width: 480px) {
-  .base .secondary {
+  .secondary {
+    margin-top: 0;
     margin-right: var(--cui-spacings-mega);
   }
 }
diff --git a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.stories.tsx b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.stories.tsx
@@ -25,6 +25,7 @@ export default {
   parameters: {
     // we don't want to center this story to be able to see the effects of the `align` prop
     layout: 'padded',
+    chromatic: { viewports: [320, 1280] },
   },
 };
 

diff --git a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx
@@ -45,19 +45,17 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
     { actions, className, align = 'center', ...props }: ButtonGroupProps,
     ref,
   ) => (
-    <div
-      {...props}
-      className={clsx(styles.base, styles[align], className)}
-      ref={ref}
-    >
-      <Button {...actions.primary} variant="primary" />
-      {actions.secondary && (
-        <Button
-          {...actions.secondary}
-          className={clsx(styles.secondary, actions.secondary.className)}
-          variant="secondary"
-        />
-      )}
+    <div {...props} className={clsx(styles.container, className)} ref={ref}>
+      <div className={clsx(styles.base, styles[align])}>
+        <Button {...actions.primary} variant="primary" />
+        {actions.secondary && (
+          <Button
+            {...actions.secondary}
+            className={clsx(styles.secondary, actions.secondary.className)}
+            variant="tertiary"
+          />
+        )}
+      </div>
     </div>
   ),
 );

diff --git a/packages/circuit-ui/styles/base.css b/packages/circuit-ui/styles/base.css
@@ -4,18 +4,24 @@
 @font-face {
   font-family: aktiv-grotesk;
   font-weight: 400;
-  src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2') format('woff2'),
-    url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff') format('woff'),
-    url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot') format('embedded-opentype');
+  src: url("https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2")
+      format("woff2"),
+    url("https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff")
+      format("woff"),
+    url("https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot")
+      format("embedded-opentype");
   font-display: optional;
 }
 
 @font-face {
   font-family: aktiv-grotesk;
   font-weight: 700;
-  src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2') format('woff2'),
-    url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff') format('woff'),
-    url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot') format('embedded-opentype');
+  src: url("https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2")
+      format("woff2"),
+    url("https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff")
+      format("woff"),
+    url("https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot")
+      format("embedded-opentype");
   font-display: optional;
 }
 
@@ -142,7 +148,7 @@ blockquote::before,
 blockquote::after,
 q::before,
 q::after {
-  content: '';
+  content: "";
   content: none;
 }
 
@@ -168,10 +174,10 @@ table {
 html {
   box-sizing: border-box;
   overflow-x: hidden;
+}
 
-  [type='button'] {
-    appearance: none;
-  }
+[type="button"] {
+  appearance: none;
 }
 
 body {
@@ -194,7 +200,7 @@ textarea,
 button {
   font-family: var(--cui-font-stack-default);
   font-weight: var(--cui-font-weight-regular);
-  font-feature-settings: 'kern';
+  font-feature-settings: "kern";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;