Add gap prop to LogoSuite (#1035)

danielguillan · web-flow · commit 4b854e69b5bd · 2025-06-05T18:37:55.000+02:00
diff --git a/.changeset/honest-points-run.md b/.changeset/honest-points-run.md
@@ -0,0 +1,16 @@
+---
+'@primer/brand-primitives': minor
+---
+
+:warning: Breaking changes to the following design tokens:
+
+```diff
+- --brand-LogoSuite-logobar-columnGap
++ --brand-LogoSuite-logobar-columnGap-default
++ --brand-LogoSuite-logobar-columnGap-condensed
+
+- --brand-LogoSuite-logobar-marquee-gap
++ --brand-LogoSuite-logobar-marquee-gap-default
++ --brand-LogoSuite-logobar-marquee-gap-condensed
+
+```
diff --git a/.changeset/three-lemons-cheat.md b/.changeset/three-lemons-cheat.md
@@ -0,0 +1,12 @@
+---
+'@primer/react-brand': patch
+---
+
+Added a `gap` prop with a new `condensed` option to `LogoSuite.Logobar`.
+
+```jsx
+<LogoSuite>
+  <LogoSuite.Heading visuallyHidden>Heading</LogoSuite.Heading>
+  <LogoSuite.Logobar gap="condensed">{/* ... */}</LogoSuite.Logobar>
+</LogoSuite>
+```
diff --git a/apps/docs/content/components/LogoSuite/react.mdx b/apps/docs/content/components/LogoSuite/react.mdx
diff --git a/apps/next-docs/content/components/LogoSuite/react.mdx b/apps/next-docs/content/components/LogoSuite/react.mdx
diff --git a/apps/next-docs/content/components/LogoSuite/react.tsx b/apps/next-docs/content/components/LogoSuite/react.tsx
@@ -2,6 +2,7 @@
 import {PropTableValues} from '@primer/doctocat-nextjs/components'
 
 export const LogoSuiteAlignProp = () => <PropTableValues values={['start', 'center', 'justify']} addLineBreaks />
+export const LogoSuiteLogobarGapProp = () => <PropTableValues values={['default', 'condensed']} addLineBreaks />
 export const LogoSuiteLogobarVariantProp = () => <PropTableValues values={['muted', 'emphasis']} addLineBreaks />
 
 export const LogoSuiteLogobarChildrenProp = () => (
diff --git a/packages/design-tokens/src/tokens/functional/components/logosuite/base.json b/packages/design-tokens/src/tokens/functional/components/logosuite/base.json
@@ -2,7 +2,12 @@
   "LogoSuite": {
     "logobar": {
       "columnGap": {
-        "value": "var(--base-size-80)"
+        "default": {
+          "value": "var(--base-size-80)"
+        },
+        "condensed": {
+          "value": "var(--base-size-40)"
+        }
       },
       "rowGap": {
         "value": "var(--base-size-40)",
@@ -20,7 +25,12 @@
           "value": "60s"
         },
         "gap": {
-          "value": "var(--base-size-96)"
+          "default": {
+            "value": "var(--base-size-96)"
+          },
+          "condensed": {
+            "value": "var(--base-size-40)"
+          }
         }
       }
     }
diff --git a/packages/e2e/scripts/playwright/playwright.generate-tests.ts b/packages/e2e/scripts/playwright/playwright.generate-tests.ts
@@ -115,6 +115,7 @@
     'components-animations-examples--timeline-bar', // animation only
     'components-animations--playground', // animation only
     'components-logosuite-examples--following-hero', // animation only
+    'components-logosuite-features--condensed-gap', // animation only
     'components-logosuite-features--marquee', // animation only
     'components-logosuite-features--slower-marquee-speed', // animation only
     'components-logosuite-features--mixed-width', // animation only
diff --git a/packages/react/src/LogoSuite/LogoSuite.features.stories.tsx b/packages/react/src/LogoSuite/LogoSuite.features.stories.tsx
@@ -92,6 +92,23 @@ export const WithoutDivider = () => (
   </Grid>
 )
 
+export const CondensedGap = () => (
+  <Grid>
+    <Grid.Column>
+      <LogoSuite>
+        <LogoSuite.Heading visuallyHidden>Heading</LogoSuite.Heading>
+        <LogoSuite.Logobar gap="condensed">{logos.slice(0, 6)}</LogoSuite.Logobar>
+      </LogoSuite>
+      <LogoSuite>
+        <LogoSuite.Heading visuallyHidden>Heading</LogoSuite.Heading>
+        <LogoSuite.Logobar gap="condensed" marquee>
+          {logos.slice(0, 12)}
+        </LogoSuite.Logobar>
+      </LogoSuite>
+    </Grid.Column>
+  </Grid>
+)
+
 export const Marquee = () => (
   <LogoSuite>
     <LogoSuite.Heading visuallyHidden>Heading</LogoSuite.Heading>
diff --git a/packages/react/src/LogoSuite/LogoSuite.module.css b/packages/react/src/LogoSuite/LogoSuite.module.css
@@ -27,10 +27,19 @@
   display: flex;
   flex-wrap: wrap;
   row-gap: var(--brand-LogoSuite-logobar-rowGap);
-  column-gap: var(--brand-LogoSuite-logobar-columnGap);
   justify-content: center;
 }
 
+.LogoSuite__logobar--gap-default {
+  --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-default);
+  column-gap: var(--brand-LogoSuite-logobar-columnGap-default);
+}
+
+.LogoSuite__logobar--gap-condensed {
+  --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-condensed);
+  column-gap: var(--brand-LogoSuite-logobar-columnGap-condensed);
+}
+
 .LogoSuite:not(.LogoSuite + .LogoSuite)
   .LogoSuite__heading:not(.LogoSuite__heading--visually-hidden)
   + .LogoSuite__logobar,
@@ -113,7 +122,7 @@
   display: flex;
   align-items: center;
   justify-content: space-around;
-  gap: var(--brand-LogoSuite-logobar-marquee-gap);
+  gap: var(--marquee-gap);
   min-width: 100%;
   animation-name: LogobarScrollX;
   animation-duration: var(--brand-LogoSuite-logobar-marquee-default);
@@ -137,7 +146,7 @@
     transform: translateX(0);
   }
   to {
-    transform: translateX(calc(-100% - var(--brand-LogoSuite-logobar-marquee-gap)));
+    transform: translateX(calc(-100% - var(--marquee-gap)));
   }
 }
 
@@ -149,7 +158,7 @@
   display: flex;
   overflow: hidden;
   user-select: none;
-  gap: var(--brand-LogoSuite-logobar-marquee-gap);
+  gap: var(--marquee-gap);
   width: calc(100% - var(--base-size-40));
   -webkit-mask-image: linear-gradient(
     to right,
diff --git a/packages/react/src/LogoSuite/LogoSuite.module.css.d.ts b/packages/react/src/LogoSuite/LogoSuite.module.css.d.ts
@@ -8,6 +8,8 @@ declare const styles: {
   readonly "LogoSuite__heading": string;
   readonly "LogoSuite__heading--visually-hidden": string;
   readonly "LogoSuite__logobar": string;
+  readonly "LogoSuite__logobar--gap-condensed": string;
+  readonly "LogoSuite__logobar--gap-default": string;
   readonly "LogoSuite__logobar--has-marquee": string;
   readonly "LogoSuite__logobar--paused": string;
   readonly "LogoSuite__logobar--variant-emphasis": string;
diff --git a/packages/react/src/LogoSuite/LogoSuite.test.tsx b/packages/react/src/LogoSuite/LogoSuite.test.tsx
@@ -329,4 +329,43 @@ describe('LogoSuite', () => {
 
     expect(el.classList).toContain(expectedClass)
   })
+
+  it('applies the correct class for the default gap', () => {
+    const defaultGapClass = 'LogoSuite__logobar--gap-default'
+
+    const {getByTestId} = render(
+      <LogoSuite>
+        <LogoSuite.Heading>{mockHeading}</LogoSuite.Heading>
+        <LogoSuite.Logobar data-testid="logobar">
+          <svg aria-label="Mock SVG" />
+          <svg aria-label="Mock SVG" />
+          <svg aria-label="Mock SVG" />
+          <svg aria-label="Mock SVG" />
+          <svg aria-label="Mock SVG" />
+          <svg aria-label="Mock SVG" />
+        </LogoSuite.Logobar>
+      </LogoSuite>,
+    )
+
+    expect(getByTestId('logobar').classList).toContain(defaultGapClass)
+  })
+
+  it('applies the correct class for the condensed gap', () => {
+    const condensedGapClass = 'LogoSuite__logobar--gap-condensed'
+    const {getByTestId} = render(
+      <LogoSuite>
+        <LogoSuite.Heading>{mockHeading}</LogoSuite.Heading>
+        <LogoSuite.Logobar data-testid="logobar" gap="condensed">
+          <svg aria-label="Mock SVG" />
+          <svg aria-label="Mock SVG" />
+          <svg aria-label="Mock SVG" />
+          <svg aria-label="Mock SVG" />
+          <svg aria-label="Mock SVG" />
+          <svg aria-label="Mock SVG" />
+        </LogoSuite.Logobar>
+      </LogoSuite>,
+    )
+
+    expect(getByTestId('logobar').classList).toContain(condensedGapClass)
+  })
 })
diff --git a/packages/react/src/LogoSuite/LogoSuite.tsx b/packages/react/src/LogoSuite/LogoSuite.tsx
@@ -189,6 +189,10 @@ const PlayPauseButton = ({isPlaying = true, onPlayPause}: PlayPauseButtonProps)
 
 export type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {
   children: React.ReactNode | React.ReactNode[]
+  /**
+   * The gap between logos
+   */
+  gap?: 'default' | 'condensed'
   /**
    * Enables an optional marquee effect
    */
@@ -205,7 +209,15 @@ export type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {
 
 const _LogoBar = forwardRef(
   (
-    {className, children, marquee = false, marqueeSpeed = 'normal', variant, ...props}: LogoSuiteLogoBarProps,
+    {
+      className,
+      children,
+      gap = 'default',
+      marquee = false,
+      marqueeSpeed = 'normal',
+      variant,
+      ...props
+    }: LogoSuiteLogoBarProps,
     ref: Ref<HTMLDivElement>,
   ) => {
     const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
@@ -235,7 +247,12 @@ const _LogoBar = forwardRef(
 
     const defaultProps = {
       ref,
-      className: clsx(styles['LogoSuite__logobar'], styles[`LogoSuite__logobar--variant-${variant}`], className),
+      className: clsx(
+        styles['LogoSuite__logobar'],
+        styles[`LogoSuite__logobar--variant-${variant}`],
+        styles[`LogoSuite__logobar--gap-${gap}`],
+        className,
+      ),
       ...props,
     }
 
diff --git a/packages/react/src/LogoSuite/LogoSuite.visual.spec.ts b/packages/react/src/LogoSuite/LogoSuite.visual.spec.ts
@@ -86,6 +86,15 @@ test.describe('Visual Comparison: LogoSuite', () => {
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
   })
 
+  test('LogoSuite / Condensed Gap', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-logosuite-features--condensed-gap&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
+  })
+
   test('LogoSuite / Visible Heading', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-logosuite-features--visible-heading&viewMode=story',
diff --git a/packages/react/src/LogoSuite/LogoSuite.visual.spec.ts-snapshots/Visual-Comparison-LogoSuite-LogoSuite-Condensed-Gap-1-linux.png b/packages/react/src/LogoSuite/LogoSuite.visual.spec.ts-snapshots/Visual-Comparison-LogoSuite-LogoSuite-Condensed-Gap-1-linux.png
