[Brand Refactor] Tiles gridlines update (#1364)

Author: danielguillan

.changeset/bright-tiles-hide.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Hide lateral gridline borders for underfilled `Tiles` rows.

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

@@ -2,6 +2,7 @@ import React from 'react'
 import type {Meta, StoryObj} from '@storybook/react'
 import {Tiles} from './Tiles'
 import {Section} from '../Section'
+import {Stack} from '../Stack'
 import {tileItems} from './Tiles.fixtures'
 
 const meta = {
@@ -41,6 +42,31 @@ export const GridlinesVariant: Story = {
   ),
 }
 
+export const GridlinesUnderfilledRows: Story = {
+  render: () => (
+    <Stack gap="spacious" padding="none">
+      <Section>
+        <Tiles variant="gridlines">
+          {tileItems.slice(0, 5).map((item, index) => (
+            <Tiles.Item key={`${item.name}-${index}`} name={item.name} href={item.href}>
+              {item.icon}
+            </Tiles.Item>
+          ))}
+        </Tiles>
+      </Section>
+      <Section>
+        <Tiles variant="gridlines" layout="compact">
+          {tileItems.slice(0, 7).map((item, index) => (
+            <Tiles.Item key={`${item.name}-${index}`} name={item.name} href={item.href}>
+              {item.icon}
+            </Tiles.Item>
+          ))}
+        </Tiles>
+      </Section>
+    </Stack>
+  ),
+}
+
 export const CompactLayout: Story = {
   render: () => (
     <Section>

packages/react/src/Tiles/Tiles.module.css

@@ -38,6 +38,7 @@
 }
 
 .Tiles--variant-gridlines .Tiles-grid {
+  --tiles-grid-border-color: var(--brand-color-border-muted);
   position: relative;
   padding-right: var(--brand-borderWidth-thin);
   padding-bottom: var(--brand-borderWidth-thin);
@@ -50,7 +51,7 @@
   top: 0;
   bottom: 0;
   width: 0;
-  border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  border-left: var(--brand-borderWidth-thin) solid var(--tiles-grid-border-color);
   z-index: 1;
   pointer-events: none;
 }
@@ -63,6 +64,13 @@
   right: 0;
 }
 
+@media screen and (min-width: 63.25rem) {
+  .Tiles--variant-gridlines.Tiles--layout-default .Tiles-grid:not(:has(> .Tiles-item:nth-child(6))),
+  .Tiles--variant-gridlines.Tiles--layout-compact .Tiles-grid:not(:has(> .Tiles-item:nth-child(8))) {
+    --tiles-grid-border-color: transparent;
+  }
+}
+
 .Tiles-item {
   --tiles-inset-shadow: inset 0 0 0 transparent;
   position: relative;

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

@@ -49,6 +49,17 @@ test.describe('Visual Comparison: Tiles', () => {
     await expect(page).toHaveScreenshot({fullPage: true})
   })
 
+  test('Tiles / Gridlines Underfilled Rows', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-tiles-features--gridlines-underfilled-rows&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
   test('Tiles / Compact Layout', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-tiles-features--compact-layout&viewMode=story',