feat(fuselage): TableCell empty fallback (#1080)

Author: dougfabris

packages/fuselage/src/components/Table/Table.tsx

@@ -2,8 +2,6 @@ import type { ComponentProps, CSSProperties } from 'react';
 import React from 'react';
 
 import Box from '../Box';
-import { TableSelection } from './TableSelection';
-import { TableSelectionButton } from './TableSelectionButton';
 
 export const style: CSSProperties = {
   overflow: 'hidden',
@@ -34,6 +32,3 @@ export const Table = ({
     />
   </Box>
 );
-
-Table.Selection = TableSelection;
-Table.Button = TableSelectionButton;

packages/fuselage/src/components/Table/TableCell.tsx

@@ -9,15 +9,27 @@ type TableCellProps = TableProps & {
   clickable?: boolean;
 };
 
-export const TableCell = ({ align, clickable, ...props }: TableCellProps) => {
+export const TableCell = ({
+  align,
+  clickable,
+  children,
+  ...props
+}: TableCellProps) => {
   const isInsideHead = useContext(TableHeadContext);
+
+  const innerElement =
+    children ?? !isInsideHead ? (
+      <Box is='hr' width='x14' borderWidth={1} />
+    ) : undefined;
+
   return (
     <Box
       is={isInsideHead ? 'th' : 'td'}
       rcx-table__cell
       rcx-table__cell--align={align}
       rcx-table__cell--header={isInsideHead}
       rcx-table__cell--clickable={clickable}
+      children={innerElement}
       {...props}
     />
   );

packages/fuselage/src/components/Table/index.ts

@@ -1,29 +1,8 @@
-import { Table } from './Table';
-import { TableBody } from './TableBody';
-import { TableCell } from './TableCell';
-import { TableFoot } from './TableFoot';
-import { TableHead } from './TableHead';
-import { TableRow } from './TableRow';
-
 export * from './Table';
 export * from './TableBody';
 export * from './TableCell';
 export * from './TableFoot';
 export * from './TableHead';
 export * from './TableRow';
-export * from './TableRow';
 export * from './TableSelection';
 export * from './TableSelectionButton';
-
-export default Object.assign(Table, {
-  /** @deprecated */
-  Head: TableHead,
-  /** @deprecated */
-  Body: TableBody,
-  /** @deprecated */
-  Foot: TableFoot,
-  /** @deprecated */
-  Row: TableRow,
-  /** @deprecated */
-  Cell: TableCell,
-});

packages/fuselage/src/components/index.ts

@@ -54,16 +54,7 @@ export { default as Sidebar } from './Sidebar';
 export * from './Sidebar';
 export * from './Skeleton';
 export * from './States';
-export {
-  default as Table,
-  TableBody,
-  TableCell,
-  TableFoot,
-  TableHead,
-  TableRow,
-  TableSelection,
-  TableSelectionButton,
-} from './Table';
+export * from './Table';
 export * from './Tabs';
 export * from './Tag';
 export * from './TelephoneInput';