Update side-by-side templates and add box directional borders (#459)

primer · Oct 12, 2023 · 0166b19 · 0166b19
1 parent 0e12799
commit 0166b19
Show file tree

Hide file tree

Showing 24 changed files with 312 additions and 52 deletions.
diff --git a/.changeset/box-directional-borders.md b/.changeset/box-directional-borders.md
@@ -0,0 +1,14 @@
+---
+'@primer/react-brand': patch
+---
+
+Adds `borderBlockStartWidth`, `borderBlockEndWidth`, `borderInlineStartWidth`, and `borderInlineEndWidth` props to the `Box` component to support directional borders.
+
+```jsx
+<>
+  <Box borderBlockStartWidth="thin" borderColor="default" borderStyle="solid" />
+  <Box borderBlockEndWidth="thin" borderColor="default" borderStyle="solid" />
+  <Box borderInlineStartWidth="thin" borderColor="default" borderStyle="solid" />
+  <Box borderInlineEndWidth="thin" borderColor="default" borderStyle="solid" />
+</>
+```
diff --git a/apps/docs/content/components/Box/react.mdx b/apps/docs/content/components/Box/react.mdx
@@ -324,21 +324,25 @@ All padding and margin options can be configured for indivisual viewports: Each
 
 ### Box
 
-| Name                | Type                                                                     |   Default   | Description                                                                 |
-| :------------------ | :----------------------------------------------------------------------- | :---------: | :-------------------------------------------------------------------------- |
-| `padding`           | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds padding to all internal sides of the Box.                              |
-| `paddingBlockStart` | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds padding to the internal block start (top) side of the Box.             |
-| `paddingRight`      | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds padding to the internal inline end (right) of the Box.                 |
-| `paddingBlockEnd`   | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds padding to the internal block end (bottom) side of the Box.            |
-| `paddingLeft`       | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds padding to the internal inline start (left) side of the Box.           |
-| `margin`            | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds margin to all external sides of the Box.                               |
-| `marginBlockStart`  | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds margin to the external block start (top) side of the Box.              |
-| `marginInlineEnd`   | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds margin to the external inline end (right) side of the Box.             |
-| `marginBlockEnd`    | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds margin to the external block end (bottom) side of the Box.             |
-| `marginInlineStart` | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds margin to the external inline start (left) side of the Box.            |
-| `backgroundColor`   | <PropTableValues values={[...BoxBackgroundColors]} commaSeparated  />    | `undefined` | Applies a system-level background color to the Box.                         |
-| `borderRadius`      | <PropTableValues values={[...BoxBorderRadiusOptions]} commaSeparated  /> | `undefined` | Applies a system-level border radius value to the Box.                      |
-| `borderWidth`       | <PropTableValues values={[...BoxBorderWidthOptions]} commaSeparated  />  | `undefined` | Applies a system-level border width value to the Box.                       |
-| `borderColor`       | <PropTableValues values={[...BoxBorderColorOptions]} commaSeparated  />  | `undefined` | Applies a system-level border color value to the Box.                       |
-| `borderStyle`       | <PropTableValues values={['solid', 'none']} commaSeparated />            | `undefined` | Applies border style. Values correspond to the CSS `border-style` property. |
-| `animate`           | <PropTableValues values={[...AnimationVariants]} commaSeparated />       | `undefined` | Applies one-off animations to direct children of the Box.                   |
+| Name                     | Type                                                                     |   Default   | Description                                                                 |
+| :----------------------- | :----------------------------------------------------------------------- | :---------: | :-------------------------------------------------------------------------- |
+| `padding`                | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds padding to all internal sides of the Box.                              |
+| `paddingBlockStart`      | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds padding to the internal block start (top) side of the Box.             |
+| `paddingRight`           | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds padding to the internal inline end (right) of the Box.                 |
+| `paddingBlockEnd`        | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds padding to the internal block end (bottom) side of the Box.            |
+| `paddingLeft`            | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds padding to the internal inline start (left) side of the Box.           |
+| `margin`                 | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds margin to all external sides of the Box.                               |
+| `marginBlockStart`       | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds margin to the external block start (top) side of the Box.              |
+| `marginInlineEnd`        | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds margin to the external inline end (right) side of the Box.             |
+| `marginBlockEnd`         | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds margin to the external block end (bottom) side of the Box.             |
+| `marginInlineStart`      | <PropTableValues values={[...BoxSpacingValues]} commaSeparated  />       | `undefined` | Adds margin to the external inline start (left) side of the Box.            |
+| `backgroundColor`        | <PropTableValues values={[...BoxBackgroundColors]} commaSeparated  />    | `undefined` | Applies a system-level background color to the Box.                         |
+| `borderRadius`           | <PropTableValues values={[...BoxBorderRadiusOptions]} commaSeparated  /> | `undefined` | Applies a system-level border radius value to the Box.                      |
+| `borderWidth`            | <PropTableValues values={[...BoxBorderWidthOptions]} commaSeparated  />  | `undefined` | Applies a system-level border width value to the Box.                       |
+| `borderBlockStartWidth`  | <PropTableValues values={[...BoxBorderWidthOptions]} commaSeparated  />  | `undefined` | Applies a system-level border width value to block-start side of the Box.   |
+| `borderInlineEndWidth`   | <PropTableValues values={[...BoxBorderWidthOptions]} commaSeparated  />  | `undefined` | Applies a system-level border width value to inline-end side of the Box.    |
+| `borderBlockEndWidth`    | <PropTableValues values={[...BoxBorderWidthOptions]} commaSeparated  />  | `undefined` | Applies a system-level border width value to block-end side of the Box.     |
+| `borderInlineStartWidth` | <PropTableValues values={[...BoxBorderWidthOptions]} commaSeparated  />  | `undefined` | Applies a system-level border width value to inline-start side of the Box.  |
+| `borderColor`            | <PropTableValues values={[...BoxBorderColorOptions]} commaSeparated  />  | `undefined` | Applies a system-level border color value to the Box.                       |
+| `borderStyle`            | <PropTableValues values={['solid', 'none']} commaSeparated />            | `undefined` | Applies border style. Values correspond to the CSS `border-style` property. |
+| `animate`                | <PropTableValues values={[...AnimationVariants]} commaSeparated />       | `undefined` | Applies one-off animations to direct children of the Box.                   |
diff --git a/apps/docs/scripts/components-with-animation.js b/apps/docs/scripts/components-with-animation.js
@@ -6,15 +6,15 @@ export const supportedComponents = [
   'ComparisonTable',
   'FAQ',
   'Heading',
-  'Label',
   'Image',
+  'Label',
   'Pillar',
   'SectionIntro',
   'Stack',
+  'Timeline',
   'Testimonial',
   'Text',
-  'Timeline',
   'Animate',
-  'RiverBreakout',
   'River',
+  'RiverBreakout',
 ]
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/e2e/scripts/playwright/axe-clean.spec.ts b/packages/e2e/scripts/playwright/axe-clean.spec.ts
@@ -49,7 +49,6 @@ let allViolations: Result[] = []
 
 const hostname = 'http://localhost:6006'
 const testsToSkip = [
-  'layout-full-page-examples--resources-hub-example-playground', // example layout page, not a real page
   'components-river--video', // video is an example and not an official primer pattern
   'components-subdomainnavbar--search-results-visible', // has been a11y remediated already,
   'components-subdomainnavbar--mobile-search-results-visible', // has been a11y remediated already,
@@ -59,6 +58,7 @@ const testsToSkip = [
   'components-videoplayer--playground', // video makes this too flakey
   'components-videoplayer--playground', // video makes this too flakey
   'recipes-feature-previews-level-1--level-one-side-by-side-enterprise', // video makes this too flakey
+  'recipes-feature-previews-level-1--level-one-side-by-side', // custom, temporary background image
 ]
 const testsWithCustomDelay = {
   'components-subdomainnavbar--mobile-menu-open': 5000, // takes a while for the menu to open

diff --git a/packages/e2e/scripts/playwright/playwright.generate-tests.ts b/packages/e2e/scripts/playwright/playwright.generate-tests.ts
@@ -88,6 +88,7 @@
     'components-logosuite-features--mixed-width', // animation only
     'components-logosuite-features--following-hero', // animation only
     'components-logosuite-features--stacked', // animation only
+    'recipes-feature-previews-level-1--level-one-side-by-side-enterprise', // video makes this too flakey
   ]
 
   const categorisedStories = Object.keys(stories as Stories).reduce((acc, key) => {

diff --git a/packages/react/src/Box/Box.features.stories.tsx b/packages/react/src/Box/Box.features.stories.tsx
@@ -204,6 +204,67 @@ export const BorderWidth = () => (
   </Stack>
 )
 
+export const DirectionalBorderWidth = () => (
+  <>
+    <Stack direction="horizontal" alignItems="center" className={styles.spacingContainer}>
+      {BoxBorderWidthOptions.map(value => (
+        <Box
+          key={value}
+          borderBlockStartWidth={value}
+          borderColor="default"
+          padding="spacious"
+          borderStyle="solid"
+          backgroundColor="subtle"
+        >
+          <Text size="100">{`block-start: ${value}`}</Text>
+        </Box>
+      ))}
+    </Stack>
+    <Stack direction="horizontal" alignItems="center" className={styles.spacingContainer}>
+      {BoxBorderWidthOptions.map(value => (
+        <Box
+          key={value}
+          borderInlineEndWidth={value}
+          borderColor="default"
+          padding="spacious"
+          borderStyle="solid"
+          backgroundColor="subtle"
+        >
+          <Text size="100">{`inline-end: ${value}`}</Text>
+        </Box>
+      ))}
+    </Stack>
+    <Stack direction="horizontal" alignItems="center" className={styles.spacingContainer}>
+      {BoxBorderWidthOptions.map(value => (
+        <Box
+          key={value}
+          borderBlockEndWidth={value}
+          borderColor="default"
+          padding="spacious"
+          borderStyle="solid"
+          backgroundColor="subtle"
+        >
+          <Text size="100">{`inline-end: ${value}`}</Text>
+        </Box>
+      ))}
+    </Stack>
+    <Stack direction="horizontal" alignItems="center" className={styles.spacingContainer}>
+      {BoxBorderWidthOptions.map(value => (
+        <Box
+          key={value}
+          borderInlineStartWidth={value}
+          borderColor="default"
+          padding="spacious"
+          borderStyle="solid"
+          backgroundColor="subtle"
+        >
+          <Text size="100">{`block-end: ${value}`}</Text>
+        </Box>
+      ))}
+    </Stack>
+  </>
+)
+
 export const BorderColor = () => (
   <Stack direction="horizontal" alignItems="center" className={styles.spacingContainer}>
     {BoxBorderColorOptions.map(value => (

diff --git a/packages/react/src/Box/Box.module.css b/packages/react/src/Box/Box.module.css
@@ -2708,6 +2708,66 @@
   border-width: var(--brand-borderWidth-thicker);
 }
 
+.Box-borderBlockStartWidth--thin {
+  border-width: 0;
+  border-block-start-width: var(--brand-borderWidth-thin);
+}
+
+.Box-borderBlockStartWidth--thick {
+  border-width: 0;
+  border-block-start-width: var(--brand-borderWidth-thick);
+}
+
+.Box-borderBlockStartWidth--thicker {
+  border-width: 0;
+  border-block-start-width: var(--brand-borderWidth-thicker);
+}
+
+.Box-borderInlineEndWidth--thin {
+  border-width: 0;
+  border-right-width: var(--brand-borderWidth-thin);
+}
+
+.Box-borderInlineEndWidth--thick {
+  border-width: 0;
+  border-right-width: var(--brand-borderWidth-thick);
+}
+
+.Box-borderInlineEndWidth--thicker {
+  border-width: 0;
+  border-right-width: var(--brand-borderWidth-thicker);
+}
+
+.Box-borderBlockEndWidth--thin {
+  border-width: 0;
+  border-bottom-width: var(--brand-borderWidth-thin);
+}
+
+.Box-borderBlockEndWidth--thick {
+  border-width: 0;
+  border-bottom-width: var(--brand-borderWidth-thick);
+}
+
+.Box-borderBlockEndWidth--thicker {
+  border-width: 0;
+  border-bottom-width: var(--brand-borderWidth-thicker);
+}
+
+.Box-borderInlineStartWidth--thin {
+  border-width: 0;
+  border-left-width: var(--brand-borderWidth-thin);
+}
+
+.Box-borderInlineStartWidth--thick {
+  border-width: 0;
+  border-left-width: var(--brand-borderWidth-thick);
+}
+
+.Box-borderInlineStartWidth--thicker {
+  border-width: 0;
+  border-left-width: var(--brand-borderWidth-thicker);
+}
+
 /*
 * 14. Border Color
 */

diff --git a/packages/react/src/Box/Box.module.css.d.ts b/packages/react/src/Box/Box.module.css.d.ts
@@ -838,6 +838,18 @@ declare const styles: {
   readonly "Box-borderWidth--thin": string;
   readonly "Box-borderWidth--thick": string;
   readonly "Box-borderWidth--thicker": string;
+  readonly "Box-borderBlockStartWidth--thin": string;
+  readonly "Box-borderBlockStartWidth--thick": string;
+  readonly "Box-borderBlockStartWidth--thicker": string;
+  readonly "Box-borderInlineEndWidth--thin": string;
+  readonly "Box-borderInlineEndWidth--thick": string;
+  readonly "Box-borderInlineEndWidth--thicker": string;
+  readonly "Box-borderBlockEndWidth--thin": string;
+  readonly "Box-borderBlockEndWidth--thick": string;
+  readonly "Box-borderBlockEndWidth--thicker": string;
+  readonly "Box-borderInlineStartWidth--thin": string;
+  readonly "Box-borderInlineStartWidth--thick": string;
+  readonly "Box-borderInlineStartWidth--thicker": string;
   readonly "Box-borderColor--default": string;
   readonly "Box-borderColor--muted": string;
   readonly "Box-borderColor--subtle": string;

diff --git a/packages/react/src/Box/Box.test.tsx b/packages/react/src/Box/Box.test.tsx
@@ -3,7 +3,14 @@ import '@testing-library/jest-dom'
 import {cleanup, render} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 
-import {Box, BoxBackgroundColors, BoxBorderColorOptions, BoxBorderRadiusOptions, BoxSpacingValues} from './Box'
+import {
+  Box,
+  BoxBackgroundColors,
+  BoxBorderColorOptions,
+  BoxBorderRadiusOptions,
+  BoxSpacingValues,
+  BoxBorderWidthOptions,
+} from './Box'
 
 expect.extend(toHaveNoViolations)
 
@@ -213,4 +220,34 @@ describe('Box', () => {
       expect(boxEl).toHaveClass(expectedClass)
     }
   })
+
+  it('will set the correct styles for directional border width', () => {
+    const borderDirections = [
+      'borderBlockStartWidth',
+      'borderInlineEndWidth',
+      'borderBlockEndWidth',
+      'borderInlineStartWidth',
+    ]
+
+    for (const width of BoxBorderWidthOptions) {
+      for (const direction of borderDirections) {
+        const expectedClass = `Box-${direction}--${width}`
+
+        const id = `box-${direction}-${width}`
+
+        const props = {
+          [direction]: width,
+        }
+
+        const {getByTestId} = render(
+          <Box data-testid={id} {...props}>
+            {mockText}
+          </Box>,
+        )
+
+        const boxEl = getByTestId(id)
+        expect(boxEl).toHaveClass(expectedClass)
+      }
+    }
+  })
 })