Table: Add overflowX and whiteSpace props (#603)

* feat(Table): Add `overflowX` and `whiteSpace` props

* Add changeset

Author: 72636c

.changeset/forty-melons-rhyme.md

@@ -0,0 +1,17 @@
+---
+'scoobie': minor
+---
+
+Table: Add `overflowX` and `whiteSpace` props
+
+These allow you to control overflow and wrapping behaviour when width is constrained.
+
+```tsx
+<>
+  <Table />
+
+  <Table overflowX="scroll" />
+
+  <Table overflowX="scroll" whiteSpace="nowrap" />
+</>
+```

src/components/CodeBlock.tsx

@@ -79,7 +79,7 @@ export const CodeBlock = ({
 
   return (
     <Stack space={tablePadding}>
-      <ScrollableInline>
+      <ScrollableInline whiteSpace="nowrap">
         <Box display="flex" justifyContent="spaceBetween">
           <Box display="flex">
             {children.map(({ label }, labelIndex) => (

src/components/Table.stories.tsx

@@ -11,13 +11,20 @@ export default {
   component: Component,
   args: {
     size: 'standard',
-    width: undefined,
   },
   argTypes: {
+    overflowX: {
+      control: { type: 'radio' },
+      options: [undefined, 'scroll'],
+    },
     size: {
       control: { type: 'radio' },
       options: ['standard', 'large'],
     },
+    whiteSpace: {
+      control: { type: 'radio' },
+      options: [undefined, 'nowrap'],
+    },
     width: {
       control: { type: 'radio' },
       options: [undefined, 'full'],

src/components/Table.tsx

@@ -12,7 +12,7 @@ import { DEFAULT_SIZE, type Size } from '../private/size';
 
 import { TableRow } from './TableRow';
 
-interface Props {
+interface BaseProps {
   align?: readonly TableAlign[];
   children: ReactNode;
   header: ComponentProps<typeof Stack>['children'] | readonly string[];
@@ -21,15 +21,29 @@ interface Props {
   width?: 'full';
 }
 
+type Props = BaseProps &
+  (
+    | {
+        overflowX: 'scroll';
+        whiteSpace?: 'nowrap';
+      }
+    | {
+        overflowX?: never;
+        whiteSpace?: never;
+      }
+  );
+
 export const Table = ({
   align,
   children,
   header,
+  overflowX,
   size = DEFAULT_SIZE,
   type = DEFAULT_TABLE_TYPE,
+  whiteSpace,
   width,
 }: Props) => (
-  <BaseTable width={width}>
+  <BaseTable overflowX={overflowX} whiteSpace={whiteSpace} width={width}>
     <TableContext.Provider
       value={{
         align,

src/private/ScrollableInline.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 import { vars } from 'braid-design-system/css';
 
@@ -12,7 +12,11 @@ export const scrollX = style({
   overflowX: 'auto',
   overflowY: 'hidden',
   scrollbarWidth: 'none',
-  whiteSpace: 'nowrap',
 
   WebkitOverflowScrolling: 'touch',
 });
+
+export const whiteSpace = styleVariants(
+  { undefined, nowrap: 'nowrap' } as const,
+  (value) => ({ whiteSpace: value }),
+);

src/private/ScrollableInline.tsx

@@ -1,16 +1,21 @@
-import { Box } from 'braid-design-system';
+import { Bleed, Box } from 'braid-design-system';
 import React, { type ReactNode } from 'react';
 
 import * as styles from './ScrollableInline.css';
 
 interface Props {
   children: ReactNode;
+  whiteSpace?: 'nowrap';
 }
 
-export const ScrollableInline = ({ children }: Props) => (
-  <Box className={styles.trimPaddingY}>
-    <Box className={styles.scrollX} paddingY="small" width="full">
+export const ScrollableInline = ({ children, whiteSpace }: Props) => (
+  <Bleed vertical="small">
+    <Box
+      className={[styles.scrollX, styles.whiteSpace[whiteSpace ?? 'undefined']]}
+      paddingY="small"
+      width="full"
+    >
       {children}
     </Box>
-  </Box>
+  </Bleed>
 );

src/private/Table.tsx

@@ -1,6 +1,7 @@
 import { Box } from 'braid-design-system';
-import React, { type ReactNode } from 'react';
+import React, { Fragment, type ReactNode } from 'react';
 
+import { ScrollableInline } from './ScrollableInline';
 import {
   DEFAULT_TABLE_CELL_COMPONENT,
   DEFAULT_TABLE_TYPE,
@@ -13,17 +14,33 @@ import * as styles from './Table.css';
 
 interface BaseTableProps {
   children: ReactNode;
+  overflowX?: 'scroll';
+  whiteSpace?: 'nowrap';
   width?: 'full';
 }
 
-export const BaseTable = ({ children, width }: BaseTableProps) => (
-  <Box
-    component="table"
-    className={{ [styles.table]: true, [styles.fullWidth]: width === 'full' }}
-  >
-    {children}
-  </Box>
-);
+export const BaseTable = ({
+  children,
+  overflowX,
+  whiteSpace,
+  width,
+}: BaseTableProps) => {
+  const Wrapper = overflowX === 'scroll' ? ScrollableInline : Fragment;
+
+  return (
+    <Wrapper {...(overflowX === 'scroll' ? { whiteSpace } : {})}>
+      <Box
+        component="table"
+        className={{
+          [styles.table]: true,
+          [styles.fullWidth]: width === 'full',
+        }}
+      >
+        {children}
+      </Box>
+    </Wrapper>
+  );
+};
 
 interface MdxTableProps {
   children: ReactNode;