From 742a530babe97f507582f31b84bcbf6eb78591e8 Mon Sep 17 00:00:00 2001 From: Jin Lee <86632227+jinlee93@users.noreply.github.com> Date: Fri, 14 Jul 2023 09:58:10 -0700 Subject: [PATCH] feat(table)!: remove top-level sub-components (#1685) * feat(table)!: remove top-level sub-components * refactor(table): rename props type decl --- .../Guildelines/CodeGuidelines.stories.mdx | 2 +- .../CoursePlannerEdit/CoursePlannerEdit.tsx | 33 +- .storybook/recipes/TabularInputs.stories.tsx | 39 +-- src/components/Table/Table.module.css | 58 ++++ src/components/Table/Table.stories.tsx | 19 +- src/components/Table/Table.tsx | 286 +++++++++++++++++- src/components/TableBody/TableBody.tsx | 22 -- src/components/TableBody/index.ts | 1 - src/components/TableCaption/TableCaption.tsx | 18 -- src/components/TableCaption/index.ts | 1 - src/components/TableCell/TableCell.module.css | 15 - src/components/TableCell/TableCell.tsx | 50 --- src/components/TableCell/index.ts | 1 - src/components/TableFooter/TableFooter.tsx | 26 -- src/components/TableFooter/index.ts | 1 - src/components/TableHeader/TableHeader.tsx | 26 -- src/components/TableHeader/index.ts | 1 - .../TableHeaderCell.module.css | 35 --- .../TableHeaderCell/TableHeaderCell.tsx | 118 -------- src/components/TableHeaderCell/index.ts | 2 - src/components/TableRow/TableRow.module.css | 21 -- src/components/TableRow/TableRow.tsx | 38 --- src/components/TableRow/index.ts | 1 - src/index.ts | 7 - 24 files changed, 373 insertions(+), 448 deletions(-) delete mode 100644 src/components/TableBody/TableBody.tsx delete mode 100644 src/components/TableBody/index.ts delete mode 100644 src/components/TableCaption/TableCaption.tsx delete mode 100644 src/components/TableCaption/index.ts delete mode 100644 src/components/TableCell/TableCell.module.css delete mode 100644 src/components/TableCell/TableCell.tsx delete mode 100644 src/components/TableCell/index.ts delete mode 100644 src/components/TableFooter/TableFooter.tsx delete mode 100644 src/components/TableFooter/index.ts delete mode 100644 src/components/TableHeader/TableHeader.tsx delete mode 100644 src/components/TableHeader/index.ts delete mode 100644 src/components/TableHeaderCell/TableHeaderCell.module.css delete mode 100644 src/components/TableHeaderCell/TableHeaderCell.tsx delete mode 100644 src/components/TableHeaderCell/index.ts delete mode 100644 src/components/TableRow/TableRow.module.css delete mode 100644 src/components/TableRow/TableRow.tsx delete mode 100644 src/components/TableRow/index.ts diff --git a/.storybook/components/Docs/Guildelines/CodeGuidelines.stories.mdx b/.storybook/components/Docs/Guildelines/CodeGuidelines.stories.mdx index 10c9c8273..2f001c3ef 100644 --- a/.storybook/components/Docs/Guildelines/CodeGuidelines.stories.mdx +++ b/.storybook/components/Docs/Guildelines/CodeGuidelines.stories.mdx @@ -299,7 +299,7 @@ You can continue to use the `Icon` components' `color` prop with JavaScript vari ## Tailwind utility classes -EDS uses [tailwind utility classes](https://tailwindcss.com/docs/padding) (e.g. `mb-0` and `p-0`) inline in `*.stories.tsx` files to quickly add small styling tweaks, like spacing (e.g. ``). This reduces the need for CSS module files made specifically for stories. Use the `!` modifier to override default component styles (e.g. ``). +EDS uses [tailwind utility classes](https://tailwindcss.com/docs/padding) (e.g. `mb-0` and `p-0`) inline in `*.stories.tsx` files to quickly add small styling tweaks, like spacing (e.g. ``). This reduces the need for CSS module files made specifically for stories. Use the `!` modifier to override default component styles (e.g. ``). Consider installing the VSCode extension [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) for autocomplete, linting, and hover previews. diff --git a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx index 784bfd81b..f6f1f3270 100644 --- a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx +++ b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx @@ -26,11 +26,6 @@ import { PageHeader, Panel, Table, - TableBody, - TableCell, - TableHeader, - TableHeaderCell, - TableRow, Text, } from '../../../src'; @@ -325,28 +320,28 @@ export const TableCard = ({ {title} - - + + {tableColumns.map((item, index) => { return ( - {item.title} - + ); })} - - - + + + {tableRows.map((item) => { return ( - - + + {item.value1} - - + + {item.projects.map((item, index) => { return ( @@ -361,11 +356,11 @@ export const TableCard = ({ ); })} - - + + ); })} - +
diff --git a/.storybook/recipes/TabularInputs.stories.tsx b/.storybook/recipes/TabularInputs.stories.tsx index f7942d787..e3d9e81e6 100644 --- a/.storybook/recipes/TabularInputs.stories.tsx +++ b/.storybook/recipes/TabularInputs.stories.tsx @@ -1,15 +1,6 @@ import type { StoryObj, Meta } from '@storybook/react'; import React from 'react'; -import { - Table, - TableBody, - TableCell, - TableRow, - TableHeader, - TableHeaderCell, - InputField, - Label, -} from '../../src/'; +import { Table, InputField, Label } from '../../src/'; export default { title: 'Recipes/TabularInput', @@ -22,32 +13,32 @@ type Args = React.ComponentProps; export const Default: StoryObj = { render: (args) => ( - - - Label - Field - - - - - + + + Label + Field + + + + + - + + - - - + + +
), }; diff --git a/src/components/Table/Table.module.css b/src/components/Table/Table.module.css index 1f41f8984..70ab09333 100755 --- a/src/components/Table/Table.module.css +++ b/src/components/Table/Table.module.css @@ -9,3 +9,61 @@ border-collapse: collapse; width: 100%; } + +/** + * Table Cell + * The `:where` pseudo class function allows easy overriding via className. + */ +:where(.table-cell) { + font: var(--eds-theme-typography-body-sm); + + padding: var(--eds-size-2) var(--eds-size-1); +} + +/** + * Table header cell + * The `:where` pseudo class function allows easy overriding via className. + */ +:where(.table-header-cell) { + font: var(--eds-theme-typography-label-sm); + padding: var(--eds-size-1) var(--eds-size-1); + text-align: left; +} + +/** + * Table header cell within table body + * + * Adjusts the padding to match the table__cell padding for alignment. + */ +.table-header-cell--body { + padding: var(--eds-size-2) var(--eds-size-1); +} + +/** + * Table header cell button + * + * On table header cells that are sortable, the content is wrapped by a + ) : ( + children + )} + + ); +}; + +/** + * `import {TableRow} from "@chanzuckerberg/eds";` + * + * HTML `tr` of the `Table` component + */ +export const TableRow = ({ + children, + className, + variant, + ...other +}: TableRowProps) => { + const componentClassName = clsx( + styles['table-row'], + variant === 'header' && styles['table-row--header'], + className, + ); + + return ( + + {children} + + ); +}; + +/** * HTML table component. */ -export const Table = ({ children, className, ...other }: Props) => { +export const Table = ({ children, className, ...other }: TableProps) => { const componentClassName = clsx(styles['table'], className); return ( diff --git a/src/components/TableBody/TableBody.tsx b/src/components/TableBody/TableBody.tsx deleted file mode 100644 index 0ac825932..000000000 --- a/src/components/TableBody/TableBody.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { ReactNode } from 'react'; -import React from 'react'; - -export interface Props { - /** - * Child node(s) that can be nested inside component - */ - children: ReactNode; - /** - * CSS class names that can be appended to the component. - */ - className?: string; -} - -/** - * `import {TableBody} from "@chanzuckerberg/eds";` - * - * HTML `tbody` of the `Table` component - */ -export const TableBody = ({ children, ...other }: Props) => { - return {children}; -}; diff --git a/src/components/TableBody/index.ts b/src/components/TableBody/index.ts deleted file mode 100644 index 4bf7ebdb1..000000000 --- a/src/components/TableBody/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { TableBody as default } from './TableBody'; diff --git a/src/components/TableCaption/TableCaption.tsx b/src/components/TableCaption/TableCaption.tsx deleted file mode 100644 index aafd538e1..000000000 --- a/src/components/TableCaption/TableCaption.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React, { type ReactNode } from 'react'; - -export type Props = React.HTMLAttributes & { - /** - * Child node(s) that can be nested inside component - */ - children: ReactNode; -}; - -/** - * `import {TableCaption} from "@chanzuckerberg/eds";` - * - * HTML caption cell for the `Table` component. - * Must be first descendant of the `Table` component. - */ -export const TableCaption = ({ children, ...other }: Props) => { - return ; -}; diff --git a/src/components/TableCaption/index.ts b/src/components/TableCaption/index.ts deleted file mode 100644 index e1afe18e1..000000000 --- a/src/components/TableCaption/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { TableCaption as default } from './TableCaption'; diff --git a/src/components/TableCell/TableCell.module.css b/src/components/TableCell/TableCell.module.css deleted file mode 100644 index 49754a9b6..000000000 --- a/src/components/TableCell/TableCell.module.css +++ /dev/null @@ -1,15 +0,0 @@ -@import '../../design-tokens/mixins.css'; - -/*------------------------------------*\ - # TABLE CELL -\*------------------------------------*/ - -/** - * Table Cell - * The `:where` pseudo class function allows easy overriding via className. - */ -:where(.table-cell) { - font: var(--eds-theme-typography-body-sm); - - padding: var(--eds-size-2) var(--eds-size-1); -} diff --git a/src/components/TableCell/TableCell.tsx b/src/components/TableCell/TableCell.tsx deleted file mode 100644 index 1127dd231..000000000 --- a/src/components/TableCell/TableCell.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import clsx from 'clsx'; -import type { ReactNode } from 'react'; -import React from 'react'; -import styles from './TableCell.module.css'; - -export type Props = React.TdHTMLAttributes & { - /** - * Child node(s) that can be nested inside component - */ - children?: ReactNode; - /** - * CSS class names that can be appended to the component. - */ - className?: string; - /* - * This attribute contains a non-negative integer value that indicates for how many columns the cell extends - */ - colSpan?: number; - /** - * This attribute contains a list of space-separated strings, each corresponding to the id attribute of the `th` elements that apply to this element. - */ - headers?: string; - /** - * HTML id for the component - */ - id?: string; - /** - * This attribute contains a non-negative integer value that indicates for how many rows the cell extends - */ - rowSpan?: number; - /** - * This enumerated attribute defines the cells that the header (defined in the `th`) element relates to. - */ - scope?: 'row' | 'col' | 'colgroup'; -}; - -/** - * `import {TableCell} from "@chanzuckerberg/eds";` - * - * HTML table cell of the `Table` component - */ -export const TableCell = ({ children, className, ...other }: Props) => { - const componentClassName = clsx(styles['table-cell'], className); - - return ( - - ); -}; diff --git a/src/components/TableCell/index.ts b/src/components/TableCell/index.ts deleted file mode 100644 index 454405e0c..000000000 --- a/src/components/TableCell/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { TableCell as default } from './TableCell'; diff --git a/src/components/TableFooter/TableFooter.tsx b/src/components/TableFooter/TableFooter.tsx deleted file mode 100644 index 68620a457..000000000 --- a/src/components/TableFooter/TableFooter.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { ReactNode } from 'react'; -import React from 'react'; - -export interface Props { - /** - * Child node(s) that can be nested inside component - */ - children: ReactNode; - /** - * CSS class names that can be appended to the component. - */ - className?: string; -} - -/** - * `import {TableFooter} from "@chanzuckerberg/eds";` - * - * HTML `tfoot` of the `Table` component - */ -export const TableFooter = ({ children, className, ...other }: Props) => { - return ( - - {children} - - ); -}; diff --git a/src/components/TableFooter/index.ts b/src/components/TableFooter/index.ts deleted file mode 100644 index 305d3d887..000000000 --- a/src/components/TableFooter/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { TableFooter as default } from './TableFooter'; diff --git a/src/components/TableHeader/TableHeader.tsx b/src/components/TableHeader/TableHeader.tsx deleted file mode 100644 index 01c000ebc..000000000 --- a/src/components/TableHeader/TableHeader.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { ReactNode } from 'react'; -import React from 'react'; - -export type Props = React.HTMLAttributes & { - /** - * Child node(s) that can be nested inside component - */ - children: ReactNode; - /** - * CSS class names that can be appended to the component. - */ - className?: string; -}; - -/** - * `import {TableHeader} from "@chanzuckerberg/eds";` - * - * HTML `thead` of the `Table` component - */ -export const TableHeader = ({ children, className, ...other }: Props) => { - return ( - - {children} - - ); -}; diff --git a/src/components/TableHeader/index.ts b/src/components/TableHeader/index.ts deleted file mode 100644 index 0cae66f32..000000000 --- a/src/components/TableHeader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { TableHeader as default } from './TableHeader'; diff --git a/src/components/TableHeaderCell/TableHeaderCell.module.css b/src/components/TableHeaderCell/TableHeaderCell.module.css deleted file mode 100644 index 3917b9a5a..000000000 --- a/src/components/TableHeaderCell/TableHeaderCell.module.css +++ /dev/null @@ -1,35 +0,0 @@ -@import '../../design-tokens/mixins.css'; - -/*------------------------------------*\ - # TABLE HEADER CELL -\*------------------------------------*/ - -/** - * Table header cell - * The `:where` pseudo class function allows easy overriding via className. - */ -:where(.table-header-cell) { - font: var(--eds-theme-typography-label-sm); - padding: var(--eds-size-1) var(--eds-size-1); - text-align: left; -} - -/** - * Table header cell within table body - * - * Adjusts the padding to match the table__cell padding for alignment. - */ -.table-header-cell--body { - padding: var(--eds-size-2) var(--eds-size-1); -} - -/** - * Table header cell button - * - * On table header cells that are sortable, the content is wrapped by a - ); -}; diff --git a/src/components/TableHeaderCell/index.ts b/src/components/TableHeaderCell/index.ts deleted file mode 100644 index 4f06867c7..000000000 --- a/src/components/TableHeaderCell/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { TableHeaderCell as default, SORT_DIRECTIONS } from './TableHeaderCell'; -export type { SortDirectionsType } from './TableHeaderCell'; diff --git a/src/components/TableRow/TableRow.module.css b/src/components/TableRow/TableRow.module.css deleted file mode 100644 index efc70f70a..000000000 --- a/src/components/TableRow/TableRow.module.css +++ /dev/null @@ -1,21 +0,0 @@ -/*------------------------------------*\ - # TABLE ROW -\*------------------------------------*/ - -/** - * Table row - */ -.table-row { - vertical-align: top; - border-bottom-width: var(--eds-theme-border-width); - border-bottom-style: solid; - border-bottom-color: var(--eds-theme-color-border-neutral-subtle); -} - -/** - * Header variant - * Has darker bottom border color for distinguishment. - */ -.table-row--header { - border-bottom-color: var(--eds-theme-color-border-neutral-default); -} diff --git a/src/components/TableRow/TableRow.tsx b/src/components/TableRow/TableRow.tsx deleted file mode 100644 index 5aed0133b..000000000 --- a/src/components/TableRow/TableRow.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import clsx from 'clsx'; -import type { ReactNode } from 'react'; -import React from 'react'; -import styles from './TableRow.module.css'; - -export type Props = React.HTMLAttributes & { - /** - * Child node(s) that can be nested inside component - */ - children?: ReactNode; - /** - * CSS class names that can be appended to the component. - */ - className?: string; - /** - * Header variant has a darker bottom border to distinguish itself as a header. - */ - variant?: 'header'; -}; - -/** - * `import {TableRow} from "@chanzuckerberg/eds";` - * - * HTML `tr` of the `Table` component - */ -export const TableRow = ({ children, className, variant, ...other }: Props) => { - const componentClassName = clsx( - styles['table-row'], - variant === 'header' && styles['table-row--header'], - className, - ); - - return ( - - {children} - - ); -}; diff --git a/src/components/TableRow/index.ts b/src/components/TableRow/index.ts deleted file mode 100644 index 97d51cdf4..000000000 --- a/src/components/TableRow/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { TableRow as default } from './TableRow'; diff --git a/src/index.ts b/src/index.ts index 3883e1a7b..60cb4ad16 100644 --- a/src/index.ts +++ b/src/index.ts @@ -79,13 +79,6 @@ export { default as Skeleton } from './components/Skeleton'; export { default as Slider } from './components/Slider'; export { default as Tab } from './components/Tab'; export { default as Table } from './components/Table'; -export { default as TableBody } from './components/TableBody'; -export { default as TableCaption } from './components/TableCaption'; -export { default as TableCell } from './components/TableCell'; -export { default as TableFooter } from './components/TableFooter'; -export { default as TableHeader } from './components/TableHeader'; -export { default as TableHeaderCell } from './components/TableHeaderCell'; -export { default as TableRow } from './components/TableRow'; export { default as Tabs } from './components/Tabs'; export { default as Tag } from './components/Tag'; export { default as Text } from './components/Text';
{children}
- {children} -
- {sortDirection ? ( - - ) : ( - children - )} -