Remove horizontal spacing on tertiary buttons

sumup-oss · Jul 4, 2024 · 02aa5ae · 02aa5ae
1 parent 0de1d46
commit 02aa5ae
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 24 deletions.
diff --git a/packages/circuit-ui/components/Button/Button.module.css b/packages/circuit-ui/components/Button/Button.module.css
@@ -13,3 +13,9 @@
   padding: calc(var(--cui-spacings-kilo) - var(--cui-border-width-kilo))
     calc(var(--cui-spacings-giga) - var(--cui-border-width-kilo));
 }
+
+.tertiary.s,
+.tertiary.m {
+  padding-right: 0;
+  padding-left: 0;
+}
diff --git a/packages/circuit-ui/components/Button/Button.tsx b/packages/circuit-ui/components/Button/Button.tsx
@@ -67,7 +67,7 @@ export const Button: ForwardRefExoticComponent<
   PropsWithoutRef<ButtonProps> & RefAttributes<any>
 > = createButtonComponent<ButtonProps>(
   'Button',
-  ({ className, size: legacySize = 'm', stretch, ...props }) => {
+  ({ className, size: legacySize = 'm', stretch, variant, ...props }) => {
     const size = legacyButtonSizeMap[legacySize] || legacySize;
 
     if (
@@ -93,7 +93,13 @@ export const Button: ForwardRefExoticComponent<
     }
 
     return {
-      className: clsx(className, classes[size], stretch && classes.stretch),
+      className: clsx(
+        className,
+        classes[size],
+        stretch && classes.stretch,
+        variant === 'tertiary' && classes.tertiary,
+      ),
+      variant,
       size,
       ...props,
     };

diff --git a/packages/circuit-ui/components/Button/base.module.css b/packages/circuit-ui/components/Button/base.module.css
@@ -186,15 +186,15 @@
 
 .tertiary:hover {
   color: var(--cui-fg-accent-hovered);
-  background-color: var(--cui-bg-accent-hovered);
+  background-color: transparent;
   border-color: transparent;
 }
 
 .tertiary:active,
 .tertiary[aria-expanded="true"],
 .tertiary[aria-pressed="true"] {
   color: var(--cui-fg-accent-pressed);
-  background-color: var(--cui-bg-accent-pressed);
+  background-color: transparent;
   border-color: transparent;
 }
 
@@ -204,18 +204,19 @@
 
 .tertiary.destructive:hover {
   color: var(--cui-fg-danger-hovered);
-  background-color: var(--cui-bg-danger-hovered);
+  background-color: transparent;
 }
 
 .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);
+  background-color: transparent;
 }
 
 .tertiary .label {
   text-decoration: underline;
+  text-decoration-color: currentColor;
   text-underline-position: under;
   transition: text-decoration-color var(--cui-transitions-default);
 }
@@ -227,14 +228,6 @@
   }
 }
 
-.tertiary:hover .label,
-.tertiary:active .label,
-.tertiary[aria-expanded="true"] .label,
-.tertiary[aria-pressed="true"] .label,
-.tertiary[aria-busy="true"] .label {
-  text-decoration-color: transparent;
-}
-
 .tertiary:disabled,
 .tertiary[disabled],
 .tertiary[aria-disabled="true"] {
@@ -249,12 +242,6 @@
   color: var(--cui-fg-danger-disabled);
 }
 
-.tertiary:disabled .label,
-.tertiary[disabled] .label,
-.tertiary[aria-disabled="true"] .label {
-  text-decoration-color: currentColor;
-}
-
 /* ButtonGroup */
 @container cui-button-group (width < 360px) {
   .base {
@@ -340,9 +327,6 @@
 .base[aria-busy="true"] {
   position: relative;
   overflow: hidden;
-  color: var(--cui-fg-normal-disabled);
-  background-color: var(--cui-bg-highlight-disabled);
-  border-color: transparent;
 }
 
 .loader {
@@ -371,7 +355,7 @@
   display: block;
   width: var(--loader-diameter);
   height: var(--loader-diameter);
-  background-color: var(--cui-fg-normal);
+  background-color: currentColor;
   border-radius: var(--cui-border-radius-circle);
   animation-duration: 720ms; /* 80ms + 4 * 160ms */
   animation-play-state: paused;