From 32d5f0e0a512a571f48ac1726189297a0525f54c Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Sun, 13 Apr 2025 08:40:52 +0200 Subject: [PATCH] Add new TableCells Signed-off-by: Charles de Dreuille --- packages/canon/css/components.css | 6 ++ packages/canon/css/styles.css | 6 ++ packages/canon/css/table.css | 26 -------- packages/canon/report.api.md | 66 +++++++++++-------- .../src/components/DataTable/DataTable.tsx | 42 ++---------- .../components/DataTable/mocked-columns.tsx | 33 +++++----- packages/canon/src/components/Table/Table.tsx | 14 ++-- .../Table/TableCell/TableCell.stories.tsx | 32 +++++++++ .../Table/TableCell/TableCell.styles.css | 20 ++++++ .../components/Table/TableCell/TableCell.tsx | 29 ++++++++ .../TableCellLink/TableCellLink.stories.tsx | 40 +++++++++++ .../TableCellLink/TableCellLink.styles.css | 21 ++++++ .../Table/TableCellLink/TableCellLink.tsx | 46 +++++++++++++ .../components/Table/TableCellLink/types.ts | 26 ++++++++ .../TableCellText/TableCellText.stories.tsx | 39 +++++++++++ .../TableCellText/TableCellText.styles.css | 21 ++++++ .../Table/TableCellText/TableCellText.tsx | 41 ++++++++++++ .../components/Table/TableCellText/types.ts | 22 +++++++ packages/canon/src/components/Table/index.ts | 2 + .../canon/src/components/Table/styles.css | 5 -- packages/canon/src/css/components.css | 3 + 21 files changed, 424 insertions(+), 116 deletions(-) create mode 100644 packages/canon/src/components/Table/TableCell/TableCell.stories.tsx create mode 100644 packages/canon/src/components/Table/TableCell/TableCell.styles.css create mode 100644 packages/canon/src/components/Table/TableCell/TableCell.tsx create mode 100644 packages/canon/src/components/Table/TableCellLink/TableCellLink.stories.tsx create mode 100644 packages/canon/src/components/Table/TableCellLink/TableCellLink.styles.css create mode 100644 packages/canon/src/components/Table/TableCellLink/TableCellLink.tsx create mode 100644 packages/canon/src/components/Table/TableCellLink/types.ts create mode 100644 packages/canon/src/components/Table/TableCellText/TableCellText.stories.tsx create mode 100644 packages/canon/src/components/Table/TableCellText/TableCellText.styles.css create mode 100644 packages/canon/src/components/Table/TableCellText/TableCellText.tsx create mode 100644 packages/canon/src/components/Table/TableCellText/types.ts diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css index 4dae0f5d3a..af4ea8c4f0 100644 --- a/packages/canon/css/components.css +++ b/packages/canon/css/components.css @@ -240,6 +240,12 @@ font-size: var(--canon-font-size-3); } +.canon-TableCellText, .canon-TableCellLink { + gap: var(--canon-space-0_5); + flex-direction: column; + display: flex; +} + .canon-Text { font-family: var(--canon-font-regular); color: var(--canon-fg-primary); diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css index a166a67263..2230922917 100644 --- a/packages/canon/css/styles.css +++ b/packages/canon/css/styles.css @@ -9464,6 +9464,12 @@ font-size: var(--canon-font-size-3); } +.canon-TableCellText, .canon-TableCellLink { + gap: var(--canon-space-0_5); + flex-direction: column; + display: flex; +} + .canon-Text { font-family: var(--canon-font-regular); color: var(--canon-fg-primary); diff --git a/packages/canon/css/table.css b/packages/canon/css/table.css index c27fe3235d..f14ee3759e 100644 --- a/packages/canon/css/table.css +++ b/packages/canon/css/table.css @@ -1,29 +1,3 @@ -.canon-TableRoot { - caption-side: bottom; - border-collapse: collapse; - width: 100%; -} - -.canon-TableHead { - text-align: left; - padding: var(--canon-space-3); - font-size: var(--canon-font-size-3); - color: var(--canon-fg-primary); -} - -.canon-TableBody { - color: var(--canon-fg-primary); -} - -.canon-TableRow { - border-bottom: 1px solid var(--canon-border); - transition: color .2s ease-in-out; -} - -.canon-TableBody .canon-TableRow:hover { - background-color: var(--canon-gray-2); -} - .canon-TableCell { padding: var(--canon-space-3); font-size: var(--canon-font-size-3); diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index ec53a49a92..44d6a3dd44 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -241,43 +241,27 @@ export const DataTable: { RefAttributes >; TableHeader: ForwardRefExoticComponent< - Omit< - HTMLAttributes & - RefAttributes, - 'ref' - > & + HTMLAttributes & RefAttributes >; TableBody: ForwardRefExoticComponent< - Omit< - HTMLAttributes & - RefAttributes, - 'ref' - > & + HTMLAttributes & RefAttributes >; TableRow: ForwardRefExoticComponent< - Omit< - HTMLAttributes & RefAttributes, - 'ref' - > & - RefAttributes + HTMLAttributes & RefAttributes >; TableCell: ForwardRefExoticComponent< - Omit< - TdHTMLAttributes & - RefAttributes, - 'ref' - > & - RefAttributes + TdHTMLAttributes & RefAttributes + >; + TableCellText: ForwardRefExoticComponent< + TableCellTextProps & RefAttributes + >; + TableCellLink: ForwardRefExoticComponent< + TableCellLinkProps & RefAttributes >; TableHead: ForwardRefExoticComponent< - Omit< - ThHTMLAttributes & - RefAttributes, - 'ref' - > & - RefAttributes + ThHTMLAttributes & RefAttributes >; }; @@ -1126,12 +1110,40 @@ export const Table: { Cell: ForwardRefExoticComponent< TdHTMLAttributes & RefAttributes >; + CellText: ForwardRefExoticComponent< + TableCellTextProps & RefAttributes + >; + CellLink: ForwardRefExoticComponent< + TableCellLinkProps & RefAttributes + >; Caption: ForwardRefExoticComponent< HTMLAttributes & RefAttributes >; }; +// @public (undocumented) +export interface TableCellLinkProps + extends React.TdHTMLAttributes { + // (undocumented) + description?: string; + // (undocumented) + href: string; + // (undocumented) + render?: useRender.ComponentProps<'a'>['render']; + // (undocumented) + title: string; +} + +// @public (undocumented) +export interface TableCellTextProps + extends React.TdHTMLAttributes { + // (undocumented) + description?: string; + // (undocumented) + title: string; +} + // @public (undocumented) const Text_2: ForwardRefExoticComponent< TextProps & RefAttributes diff --git a/packages/canon/src/components/DataTable/DataTable.tsx b/packages/canon/src/components/DataTable/DataTable.tsx index 44e32fa404..8be9ae174e 100644 --- a/packages/canon/src/components/DataTable/DataTable.tsx +++ b/packages/canon/src/components/DataTable/DataTable.tsx @@ -27,36 +27,6 @@ const TableRoot = forwardRef< >(({ className, ...props }, ref) => ); TableRoot.displayName = Table.Root.displayName; -const TableHeader = forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ); -TableHeader.displayName = Table.Header.displayName; - -const TableBody = forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ); -TableBody.displayName = Table.Body.displayName; - -const TableRow = forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ); -TableRow.displayName = Table.Row.displayName; - -const TableCell = forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ); -TableCell.displayName = Table.Cell.displayName; - -const TableHead = forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ); -TableHead.displayName = Table.Head.displayName; - /** * DataTable component for displaying tabular data with pagination * @public @@ -70,9 +40,11 @@ export const DataTable = { Pagination: DataTablePagination, Table: DataTableTable, TableRoot: TableRoot, - TableHeader: TableHeader, - TableBody: TableBody, - TableRow: TableRow, - TableCell: TableCell, - TableHead: TableHead, + TableHeader: Table.Header, + TableBody: Table.Body, + TableRow: Table.Row, + TableCell: Table.Cell, + TableCellText: Table.CellText, + TableCellLink: Table.CellLink, + TableHead: Table.Head, }; diff --git a/packages/canon/src/components/DataTable/mocked-columns.tsx b/packages/canon/src/components/DataTable/mocked-columns.tsx index e140f41702..9f2ce72378 100644 --- a/packages/canon/src/components/DataTable/mocked-columns.tsx +++ b/packages/canon/src/components/DataTable/mocked-columns.tsx @@ -17,7 +17,7 @@ import { ColumnDef } from '@tanstack/react-table'; import { DataProps } from './mocked-components'; import { Checkbox } from '../Checkbox'; -import { Text } from '../Text'; +import { DataTable } from './DataTable'; export const columns: ColumnDef[] = [ { @@ -32,11 +32,13 @@ export const columns: ColumnDef[] = [ /> ), cell: ({ row }) => ( - row.toggleSelected(checked)} - aria-label="Select row" - /> + + row.toggleSelected(checked)} + aria-label="Select row" + /> + ), enableSorting: false, enableHiding: false, @@ -45,27 +47,28 @@ export const columns: ColumnDef[] = [ accessorKey: 'name', header: 'Name', cell: ({ row }) => ( -
- {row.getValue('name')} - - {row.original.description} - -
+ ), }, { accessorKey: 'owner', header: 'Owner', - cell: ({ row }) => {row.getValue('owner')}, + cell: ({ row }) => ( + + ), }, { accessorKey: 'type', header: 'Type', - cell: ({ row }) => {row.getValue('type')}, + cell: ({ row }) => , }, { accessorKey: 'tags', header: 'Tags', - cell: ({ row }) => {row.getValue('tags')}, + cell: ({ row }) => , }, ]; diff --git a/packages/canon/src/components/Table/Table.tsx b/packages/canon/src/components/Table/Table.tsx index e3d8a4e859..185c110654 100644 --- a/packages/canon/src/components/Table/Table.tsx +++ b/packages/canon/src/components/Table/Table.tsx @@ -13,8 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { forwardRef } from 'react'; import clsx from 'clsx'; +import { TableCell } from './TableCell/TableCell'; +import { TableCellText } from './TableCellText/TableCellText'; +import { TableCellLink } from './TableCellLink/TableCellLink'; const TableRoot = forwardRef< HTMLTableElement, @@ -62,14 +66,6 @@ const TableHead = forwardRef< )); TableHead.displayName = 'TableHead'; -const TableCell = forwardRef< - HTMLTableCellElement, - React.TdHTMLAttributes ->(({ className, ...props }, ref) => ( - -)); -TableCell.displayName = 'TableCell'; - const TableCaption = forwardRef< HTMLTableCaptionElement, React.HTMLAttributes @@ -93,5 +89,7 @@ export const Table = { Head: TableHead, Row: TableRow, Cell: TableCell, + CellText: TableCellText, + CellLink: TableCellLink, Caption: TableCaption, }; diff --git a/packages/canon/src/components/Table/TableCell/TableCell.stories.tsx b/packages/canon/src/components/Table/TableCell/TableCell.stories.tsx new file mode 100644 index 0000000000..123dca6e39 --- /dev/null +++ b/packages/canon/src/components/Table/TableCell/TableCell.stories.tsx @@ -0,0 +1,32 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { Meta, StoryObj } from '@storybook/react'; +import { TableCell } from './TableCell'; + +const meta = { + title: 'Components/Table/TableCell', + component: TableCell, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + children: 'Hello world', + }, +}; diff --git a/packages/canon/src/components/Table/TableCell/TableCell.styles.css b/packages/canon/src/components/Table/TableCell/TableCell.styles.css new file mode 100644 index 0000000000..26d0868b49 --- /dev/null +++ b/packages/canon/src/components/Table/TableCell/TableCell.styles.css @@ -0,0 +1,20 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.canon-TableCell { + padding: var(--canon-space-3); + font-size: var(--canon-font-size-3); +} diff --git a/packages/canon/src/components/Table/TableCell/TableCell.tsx b/packages/canon/src/components/Table/TableCell/TableCell.tsx new file mode 100644 index 0000000000..a8a87ac038 --- /dev/null +++ b/packages/canon/src/components/Table/TableCell/TableCell.tsx @@ -0,0 +1,29 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { forwardRef } from 'react'; +import clsx from 'clsx'; + +/** @public */ +const TableCell = forwardRef< + HTMLTableCellElement, + React.TdHTMLAttributes +>(({ className, ...props }, ref) => ( + +)); +TableCell.displayName = 'TableCell'; + +export { TableCell }; diff --git a/packages/canon/src/components/Table/TableCellLink/TableCellLink.stories.tsx b/packages/canon/src/components/Table/TableCellLink/TableCellLink.stories.tsx new file mode 100644 index 0000000000..861f2643b2 --- /dev/null +++ b/packages/canon/src/components/Table/TableCellLink/TableCellLink.stories.tsx @@ -0,0 +1,40 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { Meta, StoryObj } from '@storybook/react'; +import { TableCellLink } from './TableCellLink'; + +const meta = { + title: 'Components/Table/TableCellLink', + component: TableCellLink, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + title: 'I am a link', + href: 'https://canon.backstage.io', + }, +}; + +export const WithDescription: Story = { + args: { + ...Default.args, + description: 'This is a description', + }, +}; diff --git a/packages/canon/src/components/Table/TableCellLink/TableCellLink.styles.css b/packages/canon/src/components/Table/TableCellLink/TableCellLink.styles.css new file mode 100644 index 0000000000..3064bbb791 --- /dev/null +++ b/packages/canon/src/components/Table/TableCellLink/TableCellLink.styles.css @@ -0,0 +1,21 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.canon-TableCellLink { + display: flex; + flex-direction: column; + gap: var(--canon-space-0_5); +} diff --git a/packages/canon/src/components/Table/TableCellLink/TableCellLink.tsx b/packages/canon/src/components/Table/TableCellLink/TableCellLink.tsx new file mode 100644 index 0000000000..cb9d3e69a8 --- /dev/null +++ b/packages/canon/src/components/Table/TableCellLink/TableCellLink.tsx @@ -0,0 +1,46 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { forwardRef } from 'react'; +import clsx from 'clsx'; +import { TableCellLinkProps } from './types'; +import { Text } from '../../Text/Text'; +import { Link } from '../../Link/Link'; + +/** @public */ +const TableCellLink = forwardRef( + ({ className, title, description, href, render, ...props }, ref) => ( +
+ {title && ( + + {title} + + )} + {description && ( + + {description} + + )} +
+ ), +); +TableCellLink.displayName = 'TableCellLink'; + +export { TableCellLink }; diff --git a/packages/canon/src/components/Table/TableCellLink/types.ts b/packages/canon/src/components/Table/TableCellLink/types.ts new file mode 100644 index 0000000000..50cac9a45a --- /dev/null +++ b/packages/canon/src/components/Table/TableCellLink/types.ts @@ -0,0 +1,26 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { useRender } from '@base-ui-components/react/use-render'; + +/** @public */ +export interface TableCellLinkProps + extends React.TdHTMLAttributes { + title: string; + description?: string; + href: string; + render?: useRender.ComponentProps<'a'>['render']; +} diff --git a/packages/canon/src/components/Table/TableCellText/TableCellText.stories.tsx b/packages/canon/src/components/Table/TableCellText/TableCellText.stories.tsx new file mode 100644 index 0000000000..3756dd2544 --- /dev/null +++ b/packages/canon/src/components/Table/TableCellText/TableCellText.stories.tsx @@ -0,0 +1,39 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { Meta, StoryObj } from '@storybook/react'; +import { TableCellText } from './TableCellText'; + +const meta = { + title: 'Components/Table/TableCellText', + component: TableCellText, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + title: 'Hello world', + }, +}; + +export const WithDescription: Story = { + args: { + ...Default.args, + description: 'This is a description', + }, +}; diff --git a/packages/canon/src/components/Table/TableCellText/TableCellText.styles.css b/packages/canon/src/components/Table/TableCellText/TableCellText.styles.css new file mode 100644 index 0000000000..7a645a1fcb --- /dev/null +++ b/packages/canon/src/components/Table/TableCellText/TableCellText.styles.css @@ -0,0 +1,21 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.canon-TableCellText { + display: flex; + flex-direction: column; + gap: var(--canon-space-0_5); +} diff --git a/packages/canon/src/components/Table/TableCellText/TableCellText.tsx b/packages/canon/src/components/Table/TableCellText/TableCellText.tsx new file mode 100644 index 0000000000..d5496d799b --- /dev/null +++ b/packages/canon/src/components/Table/TableCellText/TableCellText.tsx @@ -0,0 +1,41 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { forwardRef } from 'react'; +import clsx from 'clsx'; +import { TableCellTextProps } from './types'; +import { Text } from '../../Text/Text'; + +/** @public */ +const TableCellText = forwardRef( + ({ className, title, description, ...props }, ref) => ( +
+ {title && {title}} + {description && ( + + {description} + + )} +
+ ), +); +TableCellText.displayName = 'TableCellText'; + +export { TableCellText }; diff --git a/packages/canon/src/components/Table/TableCellText/types.ts b/packages/canon/src/components/Table/TableCellText/types.ts new file mode 100644 index 0000000000..c6f1814966 --- /dev/null +++ b/packages/canon/src/components/Table/TableCellText/types.ts @@ -0,0 +1,22 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** @public */ +export interface TableCellTextProps + extends React.TdHTMLAttributes { + title: string; + description?: string; +} diff --git a/packages/canon/src/components/Table/index.ts b/packages/canon/src/components/Table/index.ts index 4929b2d36a..0422086b45 100644 --- a/packages/canon/src/components/Table/index.ts +++ b/packages/canon/src/components/Table/index.ts @@ -15,3 +15,5 @@ */ export * from './Table'; +export * from './TableCellText/types'; +export * from './TableCellLink/types'; diff --git a/packages/canon/src/components/Table/styles.css b/packages/canon/src/components/Table/styles.css index 4234095823..723287babe 100644 --- a/packages/canon/src/components/Table/styles.css +++ b/packages/canon/src/components/Table/styles.css @@ -23,8 +23,3 @@ .canon-TableBody .canon-TableRow:hover { background-color: var(--canon-gray-2); } - -.canon-TableCell { - padding: var(--canon-space-3); - font-size: var(--canon-font-size-3); -} diff --git a/packages/canon/src/css/components.css b/packages/canon/src/css/components.css index f6b1db16c5..7dee4afb97 100644 --- a/packages/canon/src/css/components.css +++ b/packages/canon/src/css/components.css @@ -24,6 +24,9 @@ @import '../components/Icon/styles.css'; @import '../components/Checkbox/styles.css'; @import '../components/Table/styles.css'; +@import '../components/Table/TableCell/TableCell.styles.css'; +@import '../components/Table/TableCellText/TableCellText.styles.css'; +@import '../components/Table/TableCellLink/TableCellLink.styles.css'; @import '../components/Text/styles.css'; @import '../components/Heading/styles.css'; @import '../components/IconButton/styles.css';