fix logic for ButtonGroup and ButtonLayout

Telefonica · Sep 11, 2024 · 8164a40 · 8164a40
1 parent 8449eb7
commit 8164a40
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 35 deletions.
diff --git a/src/button-group.css.ts b/src/button-group.css.ts
@@ -40,11 +40,7 @@ export const centerInDesktop = style({
 
 export const container = style({
     marginTop: `-${buttonLayoutSpacing}`,
-    marginLeft: `calc(-1 * (${buttonLayoutSpacing} + ${buttonLinkPadding}))`,
-});
-
-export const buttons = style({
-    marginLeft: buttonLinkPadding,
+    marginLeft: `calc(-1 * ${buttonLayoutSpacing})`,
 });
 
 export const buttonChild = style({

diff --git a/src/button-group.tsx b/src/button-group.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import {getPrefixedDataAttributes} from './utils/dom';
 import * as styles from './button-group.css';
+import * as buttonStyles from './button.css';
 
 import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
 import type {ByBreakpoint, DataAttributes, RendersNullableElement} from './utils/types';
@@ -24,6 +25,7 @@ const ButtonGroup = ({
 }: ButtonGroupProps): JSX.Element | null => {
     const anyAction = !!primaryButton || !!secondaryButton || !!link;
     const bothButtons = !!primaryButton && !!secondaryButton;
+    const noButtons = !primaryButton && !secondaryButton;
 
     const alignByBreakpoint =
         typeof align === 'string'
@@ -48,13 +50,18 @@ const ButtonGroup = ({
             {...getPrefixedDataAttributes(dataAttributes, 'ButtonGroup')}
         >
             {(primaryButton || secondaryButton) && (
-                <div className={classNames(styles.inline, styles.buttons)}>
+                <div className={classNames(styles.inline)}>
                     {primaryButton && <div className={styles.buttonChild}>{primaryButton}</div>}
                     {secondaryButton && <div className={styles.buttonChild}>{secondaryButton}</div>}
                 </div>
             )}
             {link && (
-                <div className={styles.buttonChild} style={{width: bothButtons ? '100%' : 'auto'}}>
+                <div
+                    className={classNames(styles.buttonChild, {
+                        [buttonStyles.forceLinkBleedLeft]: noButtons || bothButtons,
+                    })}
+                    style={{width: bothButtons ? '100%' : 'auto'}}
+                >
                     {link}
                 </div>
             )}

diff --git a/src/button-layout.css.ts b/src/button-layout.css.ts
@@ -1,11 +1,9 @@
-import {style, globalStyle, styleVariants, createVar} from '@vanilla-extract/css';
+import {style, globalStyle, styleVariants} from '@vanilla-extract/css';
 import {sprinkles} from './sprinkles.css';
 import * as mq from './media-queries.css';
+import * as buttonStyles from './button.css';
 
 const buttonLayoutSpacing = '16px';
-const buttonLinkPadding = createVar();
-
-export const vars = {buttonLinkPadding};
 
 export const margins = style({
     margin: '16px 0',
@@ -80,33 +78,16 @@ globalStyle(`${alignVariant['full-width']} > *:not(${linkBase})`, {
     },
 });
 
-const bleedLeft = {
-    marginLeft: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPadding})`,
-};
-const bleedRight = {
-    marginRight: `calc(${buttonLayoutSpacing} / 2 - ${buttonLinkPadding})`,
-};
-
 export const link = style([
     linkBase,
     {
         width: 'auto',
     },
 ]);
 
-export const linkInNewLine = style([
-    linkBase,
-    {
-        selectors: {
-            [`${alignVariant.right} &`]: bleedRight,
-
-            [`${alignVariant.left} &`]: bleedLeft,
-            // in desktop, full-width is equivalent to left
-            [`${alignVariant['full-width']} &`]: {
-                '@media': {
-                    [mq.desktopOrBigger]: bleedLeft,
-                },
-            },
-        },
-    },
-]);
+export const linkInNewLine = styleVariants({
+    center: [linkBase],
+    left: [linkBase, buttonStyles.forceLinkBleedLeft],
+    right: [linkBase, buttonStyles.forceLinkBleedRight],
+    'full-width': [linkBase, buttonStyles.forceLinkBleedLeftOnlyDesktop],
+});
diff --git a/src/button-layout.tsx b/src/button-layout.tsx
@@ -59,7 +59,7 @@ const ButtonLayout = ({
 
     const linkContainer = link ? (
         <div
-            className={classnames(numberOfButtons !== 1 ? styles.linkInNewLine : styles.link)}
+            className={classnames(numberOfButtons !== 1 ? styles.linkInNewLine[align] : styles.link)}
             data-link="true"
         >
             {link}

diff --git a/src/button.css.ts b/src/button.css.ts
@@ -144,6 +144,43 @@ globalStyle(`${textContent} svg`, {
     display: 'block',
 });
 
+// These classes are used to force the bleed conditionally in ButtonGroup and ButtonLayout components
+export const forceLinkBleedLeft = style({});
+export const forceLinkBleedRight = style({});
+export const forceLinkBleedLeftOnlyDesktop = style({});
+
+globalStyle(`${forceLinkBleedLeft} button, ${forceLinkBleedLeft} a`, {
+    marginLeft: `calc(-1 * (${borderSize} + ${buttonPaddingX.default}))`,
+});
+
+globalStyle(`${forceLinkBleedLeft} button.${small}, ${forceLinkBleedLeft} a.${small}`, {
+    marginLeft: `calc(-1 * (${borderSize} + ${buttonPaddingX.small}))`,
+});
+
+globalStyle(`${forceLinkBleedRight} button, ${forceLinkBleedRight} a`, {
+    marginRight: `calc(-1 * (${borderSize} + ${buttonPaddingX.default}))`,
+});
+
+globalStyle(`${forceLinkBleedRight} button.${small}, ${forceLinkBleedRight} a.${small}`, {
+    marginRight: `calc(-1 * (${borderSize} + ${buttonPaddingX.small}))`,
+});
+
+globalStyle(`${forceLinkBleedLeftOnlyDesktop} button, ${forceLinkBleedLeftOnlyDesktop} a`, {
+    '@media': {
+        [mq.desktopOrBigger]: {
+            marginLeft: `calc(-1 * (${borderSize} + ${buttonPaddingX.default}))`,
+        },
+    },
+});
+
+globalStyle(`${forceLinkBleedLeftOnlyDesktop} button.${small}, ${forceLinkBleedLeftOnlyDesktop} a.${small}`, {
+    '@media': {
+        [mq.desktopOrBigger]: {
+            marginLeft: `calc(-1 * (${borderSize} + ${buttonPaddingX.small}))`,
+        },
+    },
+});
+
 const lightPrimary: ComplexStyleRule = [
     button,
     sprinkles({