[Brand Refactor] Fixes SectionIntro layout (#1360)

Author: danielguillan

.changeset/soft-clouds-shift.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Updated `SectionIntroStacked` layout spacing for improved visual alignment.

packages/react/src/SectionIntroStacked/SectionIntroStacked.features.stories.tsx

@@ -117,3 +117,11 @@ export const Gridline: Story = {
     )
   },
 }
+
+export const GridlineTablet: Story = {
+  name: 'Gridline (tablet)',
+  globals: {
+    viewport: {value: 'ipad10p'},
+  },
+  render: Gridline.render,
+}

packages/react/src/SectionIntroStacked/SectionIntroStacked.module.css

@@ -1,5 +1,20 @@
 .SectionIntroStacked {
-  --brand-Grid-spacing-row: var(--base-size-48);
+  --brand-Grid-spacing-row: var(--base-size-64);
+}
+
+@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
+  .SectionIntroStacked {
+    max-width: 618px;
+    margin-inline: auto;
+  }
+
+  .SectionIntroStacked.SectionIntroStacked--variant-gridline {
+    padding-inline: var(--base-size-32);
+    padding-block: calc(var(--base-size-64) - var(--base-size-4));
+
+    --SectionIntroStacked-item-divider-overflow-start: var(--base-size-32);
+    --SectionIntroStacked-item-divider-overflow-end: var(--base-size-32);
+  }
 }
 
 .SectionIntroStacked--variant-gridline {
@@ -21,15 +36,6 @@
   }
 }
 
-@media screen and (min-width: 63.25rem) {
-  .SectionIntroStacked--variant-gridline {
-    padding-inline: var(--base-size-64);
-    padding-block: var(--base-size-64);
-    --SectionIntroStacked-item-divider-overflow-start: 0px;
-    --SectionIntroStacked-item-divider-overflow-end: calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));
-  }
-}
-
 @media screen and (min-width: 80rem) {
   .SectionIntroStacked--variant-gridline {
     border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
@@ -71,10 +77,13 @@
   flex-direction: column;
 }
 
-@media screen and (max-width: 63.25rem) {
+@media screen and (max-width: 63.24rem) {
   .SectionIntroStacked-heading {
     font-size: var(--brand-text-size-600);
   }
+  .SectionIntroStacked-items {
+    overflow: hidden;
+  }
 }
 
 @media screen and (min-width: 63.25rem) {
@@ -86,15 +95,18 @@
   .SectionIntroStacked--variant-gridline .SectionIntroStacked-items {
     border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
     margin-block: calc(-1 * var(--base-size-64));
-    padding-block: 0;
+    padding-block: calc(var(--base-size-64) - var(--base-size-32));
     position: static;
     top: auto;
   }
 
+  .SectionIntroStacked-content {
+    padding-inline-end: var(--base-size-80);
+  }
+
   .SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {
     /* Inset item content from the vertical gridline */
-    padding-inline-start: var(--base-size-32);
-    padding-inline-end: var(--base-size-32);
+    padding-inline-start: var(--base-size-64);
   }
 }
 
@@ -137,21 +149,22 @@
 
 .SectionIntroStackedItem-item--with-icon {
   display: flex;
-  flex-direction: row;
   align-items: flex-start;
   gap: var(--base-size-24);
+  flex-direction: column;
 }
 
-@media screen and (min-width: 63.25rem) {
+@media screen and (min-width: 48rem) {
   .SectionIntroStackedItem-item--with-icon {
     gap: var(--base-size-48);
+    flex-direction: row;
   }
 }
 
 .SectionIntroStackedItem__content {
   display: flex;
   flex-direction: column;
-  gap: var(--base-size-8);
+  gap: var(--base-size-12);
   flex: 1;
   min-width: 0;
 }

packages/react/src/SectionIntroStacked/SectionIntroStacked.module.css.d.ts

@@ -2,6 +2,7 @@ declare const styles: {
   readonly "SectionIntroStacked": string;
   readonly "SectionIntroStacked--full-width": string;
   readonly "SectionIntroStacked--variant-gridline": string;
+  readonly "SectionIntroStacked-content": string;
   readonly "SectionIntroStacked-description": string;
   readonly "SectionIntroStacked-heading": string;
   readonly "SectionIntroStacked-heading--muted": string;

packages/react/src/SectionIntroStacked/SectionIntroStacked.tsx

@@ -45,12 +45,11 @@ const Root = forwardRef<HTMLElement, PropsWithChildren<SectionIntroStackedProps>
         {...props}
         style={{...animationInlineStyles, ...style}}
       >
-        <Grid fullWidth enableGutters={variant !== 'gridline'}>
-          <Grid.Column span={{large: 6}}>{otherChildren}</Grid.Column>
-          <Grid.Column
-            span={variant === 'gridline' ? {large: 6} : {large: 5}}
-            start={variant === 'gridline' ? {large: 7} : {large: 8}}
-          >
+        <Grid fullWidth enableGutters={variant !== 'gridline'} columnGap="none">
+          <Grid.Column span={{large: 6}} className={styles['SectionIntroStacked-content']}>
+            {otherChildren}
+          </Grid.Column>
+          <Grid.Column span={{large: 6}} start={{large: 7}}>
             {items}
           </Grid.Column>
         </Grid>
@@ -167,7 +166,7 @@ const ItemIcon = ({className, color = 'green', ...props}: SectionIntroStackedIte
     <Icon
       className={clsx(styles['SectionIntroStackedItem__icon'], className)}
       hasBackground
-      size="medium"
+      size="small"
       color={color}
       {...props}
     />

packages/react/src/SectionIntroStacked/SectionIntroStacked.visual.spec.ts

@@ -75,4 +75,19 @@ test.describe('Visual Comparison: SectionIntroStacked', () => {
     await page.waitForTimeout(500)
     await expect(page).toHaveScreenshot({fullPage: true})
   })
+
+  // eslint-disable-next-line i18n-text/no-en
+  test.describe('Tablet viewport test for Gridline (tablet)', () => {
+    test.use({viewport: {width: 834, height: 1112}})
+    test('SectionIntroStacked / Gridline (tablet)', async ({page}) => {
+      await page.goto(
+        'http://localhost:6006/iframe.html?args=&id=components-sectionintrostacked-features--gridline-tablet&viewMode=story',
+        {waitUntil: 'networkidle'},
+      )
+      await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+      await page.waitForTimeout(500)
+      await expect(page).toHaveScreenshot({fullPage: true})
+    })
+  })
 })