diff --git a/docs-ui/src/content/table.props.ts b/docs-ui/src/content/table.props.ts index dfd3d12988..21bd5597c6 100644 --- a/docs-ui/src/content/table.props.ts +++ b/docs-ui/src/content/table.props.ts @@ -267,7 +267,7 @@ export const tablePaginationPropDefs: Record = { ...stylePropDefs, }; -export const tableUsageSnippet = `import { Cell, ..., TableHeader, TablePagination } from '@backstage/ui'; +export const tableUsageSnippet = `import { Cell, CellText, ..., TableHeader, TablePagination } from '@backstage/ui'; @@ -275,14 +275,14 @@ export const tableUsageSnippet = `import { Cell, ..., TableHeader, TablePaginati - +
`; -export const tableBasicSnippet = `import { Table, TableHeader, Column, TableBody, Row, Cell, CellProfile, TablePagination, useTable } from '@backstage/ui'; +export const tableBasicSnippet = `import { Table, TableHeader, Column, TableBody, Row, CellText, CellProfile, TablePagination, useTable } from '@backstage/ui'; const data = [ { @@ -318,16 +318,16 @@ const { data: paginatedData, paginationProps } = useTable({ src={item.image} href={item.website} /> - - - + + + ))} `; -export const tableSelectionActionsSnippet = `import { Table, TableHeader, TableBody, Column, Row, Cell } from '@backstage/ui'; +export const tableSelectionActionsSnippet = `import { Table, TableHeader, TableBody, Column, Row, CellText } from '@backstage/ui'; function MyTable() { const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); @@ -346,12 +346,12 @@ function MyTable() { - - + + - - + + diff --git a/packages/ui/src/components/Table/Table.module.css b/packages/ui/src/components/Table/Table.module.css index 6f720f85b2..001d5b21d1 100644 --- a/packages/ui/src/components/Table/Table.module.css +++ b/packages/ui/src/components/Table/Table.module.css @@ -21,6 +21,7 @@ width: 100%; caption-side: bottom; border-collapse: collapse; + table-layout: fixed; } .bui-TableHeader { @@ -109,6 +110,10 @@ .bui-TableCell { padding: var(--bui-space-3); font-size: var(--bui-font-size-3); + font-family: var(--bui-font-regular); + font-weight: var(--bui-font-weight-regular); + min-width: 0; + overflow: hidden; } .bui-TableCellSelection { @@ -116,10 +121,13 @@ } .bui-TableCellContentWrapper { - display: inline-flex; + display: flex; flex-direction: row; align-items: center; gap: var(--bui-space-2); + min-width: 0; + width: 100%; + max-width: 100%; } .bui-TableCellIcon, @@ -133,6 +141,15 @@ display: flex; flex-direction: column; gap: var(--bui-space-0_5); + min-width: 0; + flex: 1; + overflow: hidden; + max-width: 100%; + } + + .bui-TableCellContent > * { + min-width: 0; + max-width: 100%; } .bui-TableCellProfile { diff --git a/packages/ui/src/components/Table/Table.stories.tsx b/packages/ui/src/components/Table/Table.stories.tsx index 547dbef7bf..37790c5055 100644 --- a/packages/ui/src/components/Table/Table.stories.tsx +++ b/packages/ui/src/components/Table/Table.stories.tsx @@ -24,7 +24,8 @@ import { TableBody, Row, Cell, - CellProfile as CellProfileBUI, + CellText, + CellProfile, useTable, } from '.'; import { RadioGroup, Radio } from '../RadioGroup'; @@ -69,18 +70,18 @@ export const TableOnly: Story = { {data1.map(item => ( - } description={item.description} /> - - - + + ))} @@ -105,14 +106,14 @@ export const WithPaginationUncontrolled: Story = { {data?.map(item => ( - } description={item.description} /> - - - + + + ))} @@ -152,14 +153,14 @@ export const WithPaginationControlled: Story = { {data?.map(item => ( - - - - + + + ))} @@ -188,18 +189,18 @@ export const Sorting: Story = { {data1.map(item => ( - } description={item.description} /> - - - + + ))} @@ -229,14 +230,14 @@ export const TableRockBand: Story = { {data?.map(item => ( - - - - + + + ))} @@ -268,14 +269,14 @@ export const RowClick: Story = { {data?.map(item => ( alert('Row clicked')}> - - - - + + + ))} @@ -307,14 +308,14 @@ export const RowLink: Story = { {data?.map(item => ( - - - - + + + ))} @@ -325,7 +326,38 @@ export const RowLink: Story = { }, }; -export const CellText: Story = { +export const CellComponent: Story = { + name: 'Cell', + render: () => { + return ( + + + Name + + + + Hello world + + + + This is a very long text that demonstrates how the Cell component + handles lengthy content. It should wrap appropriately and maintain + proper styling even when the text extends beyond the normal cell + width. This helps ensure that the table remains readable and + visually consistent regardless of the content length. + + + + Hello world + + +
+ ); + }, +}; + +export const CellTextComponent: Story = { + name: 'CellText', render: () => { return ( @@ -335,10 +367,11 @@ export const CellText: Story = { {data2.map(item => ( - ))} @@ -348,7 +381,8 @@ export const CellText: Story = { }, }; -export const CellProfile: Story = { +export const CellProfileComponent: Story = { + name: 'CellProfile', render: () => { return (
@@ -358,7 +392,7 @@ export const CellProfile: Story = { {data3.map(item => ( - - - - + + + - - - + + + - - - + + +
@@ -428,19 +462,19 @@ export const SelectionMultiToggle: Story = { - - - + + + - - - + + + - - - + + + @@ -466,19 +500,19 @@ export const SelectionSingleReplace: Story = { - - - + + + - - - + + + - - - + + + @@ -504,19 +538,19 @@ export const SelectionMultiReplace: Story = { - - - + + + - - - + + + - - - + + + @@ -543,19 +577,19 @@ export const SelectionToggleWithActions: Story = { - - - + + + - - - + + + - - - + + + @@ -582,19 +616,19 @@ export const SelectionReplaceWithActions: Story = { - - - + + + - - - + + + - - - + + + @@ -620,19 +654,19 @@ export const SelectionToggleWithLinks: Story = { - - - + + + - - - + + + - - - + + + @@ -658,19 +692,19 @@ export const SelectionReplaceWithLinks: Story = { - - - + + + - - - + + + - - - + + + @@ -697,19 +731,19 @@ export const SelectionWithDisabledRows: Story = { - - - + + + - - - + + + - - - + + + @@ -744,9 +778,9 @@ export const SelectionWithPagination: Story = { {data?.map(item => ( - - - + + + ))} @@ -779,19 +813,19 @@ export const SelectionModePlayground: Story = { - - - + + + - - - + + + - - - + + + @@ -839,19 +873,19 @@ export const SelectionBehaviorPlayground: Story = { - - - + + + - - - + + + - - - + + + diff --git a/packages/ui/src/components/Table/components/Cell.tsx b/packages/ui/src/components/Table/components/Cell.tsx index 65be8482a7..809b224a07 100644 --- a/packages/ui/src/components/Table/components/Cell.tsx +++ b/packages/ui/src/components/Table/components/Cell.tsx @@ -15,8 +15,6 @@ */ import clsx from 'clsx'; -import { Text } from '../../Text'; -import { Link } from '../../Link'; import { Cell as ReactAriaCell } from 'react-aria-components'; import type { CellProps } from '../types'; import { useStyles } from '../../../hooks/useStyles'; @@ -29,49 +27,14 @@ const Cell = (props: CellProps) => { color: 'primary' as const, ...props, }); - const { className, title, description, color, leadingIcon, href, ...rest } = - cleanedProps; + const { className, children, ...rest } = cleanedProps; return ( -
- {leadingIcon && ( -
- {leadingIcon} -
- )} -
- {href ? ( - - {title} - - ) : ( - - {title} - - )} - {description && ( - - {description} - - )} -
-
+ {children} ); }; diff --git a/packages/ui/src/components/Table/components/CellText.tsx b/packages/ui/src/components/Table/components/CellText.tsx new file mode 100644 index 0000000000..8855c92e80 --- /dev/null +++ b/packages/ui/src/components/Table/components/CellText.tsx @@ -0,0 +1,98 @@ +/* + * 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 clsx from 'clsx'; +import { Text } from '../../Text'; +import { Link } from '../../Link'; +import { Cell as ReactAriaCell } from 'react-aria-components'; +import type { CellTextProps } from '../types'; +import { useStyles } from '../../../hooks/useStyles'; +import { TableDefinition } from '../definition'; +import styles from '../Table.module.css'; + +/** @public */ +const CellText = (props: CellTextProps) => { + const { classNames, cleanedProps } = useStyles(TableDefinition, { + color: 'primary' as const, + ...props, + }); + const { className, title, description, color, leadingIcon, href, ...rest } = + cleanedProps; + + return ( + +
+ {leadingIcon && ( +
+ {leadingIcon} +
+ )} +
+ {href ? ( + + {title} + + ) : ( + + {title} + + )} + {description && ( + + {description} + + )} +
+
+ + ); +}; + +CellText.displayName = 'CellText'; + +export { CellText }; diff --git a/packages/ui/src/components/Table/index.ts b/packages/ui/src/components/Table/index.ts index 8d6603ee00..42ba6ff9c9 100644 --- a/packages/ui/src/components/Table/index.ts +++ b/packages/ui/src/components/Table/index.ts @@ -20,10 +20,16 @@ export { TableBody } from './components/TableBody'; export { Column } from './components/Column'; export { Row } from './components/Row'; export { Cell } from './components/Cell'; +export { CellText } from './components/CellText'; export { CellProfile } from './components/CellProfile'; export { useTable } from './hooks/useTable'; -export type { CellProps, CellProfileProps, ColumnProps } from './types'; +export type { + CellProps, + CellTextProps, + CellProfileProps, + ColumnProps, +} from './types'; export type { UseTableConfig, UseTableResult, diff --git a/packages/ui/src/components/Table/mocked-data2.ts b/packages/ui/src/components/Table/mocked-data2.ts index 30ca36a689..0aff7bcd98 100644 --- a/packages/ui/src/components/Table/mocked-data2.ts +++ b/packages/ui/src/components/Table/mocked-data2.ts @@ -21,6 +21,7 @@ export interface DataProps { name: string; description?: string; icon?: React.ReactNode; + href?: string; } export const data: DataProps[] = [ @@ -43,4 +44,44 @@ export const data: DataProps[] = [ 'A comprehensive service handling user authentication and role-based access control across all applications.', icon: createElement(RiCactusLine), }, + { + icon: createElement(RiCactusLine), + name: 'Cell with extremely long title that demonstrates text wrapping behavior and how the component handles content that extends well beyond typical cell widths in table layouts', + description: + 'This is a comprehensive and detailed description that contains a substantial amount of text to demonstrate how the CellText component handles lengthy content. It includes multiple sentences and covers various aspects of the service or component being described. The text should wrap appropriately within the cell boundaries while maintaining readability and proper spacing. This example helps ensure that the table remains visually consistent and user-friendly even when dealing with extensive content that might otherwise break the layout or cause accessibility issues. The component should gracefully handle such scenarios by providing appropriate text wrapping, maintaining proper line heights, and ensuring that all content remains accessible and readable regardless of its length.', + }, + { + name: 'Cell with title and URL', + href: '/catalog/default/service/auth-service', + }, + { + name: 'Cell with title, description and URL', + description: + 'A comprehensive service handling user authentication and role-based access control across all applications.', + href: '/catalog/default/service/auth-service', + }, + { + name: 'Cell with title, icon and URL', + icon: createElement(RiCactusLine), + href: '/catalog/default/service/auth-service', + }, + { + name: 'Cell with title, description, icon and URL', + description: + 'A comprehensive service handling user authentication and role-based access control across all applications.', + icon: createElement(RiCactusLine), + href: '/catalog/default/service/auth-service', + }, + { + icon: createElement(RiCactusLine), + name: 'Cell with extremely long title that demonstrates text wrapping behavior and how the component handles content that extends well beyond typical cell widths in table layouts', + description: + 'This is a comprehensive and detailed description that contains a substantial amount of text to demonstrate how the CellText component handles lengthy content. It includes multiple sentences and covers various aspects of the service or component being described. The text should wrap appropriately within the cell boundaries while maintaining readability and proper spacing. This example helps ensure that the table remains visually consistent and user-friendly even when dealing with extensive content that might otherwise break the layout or cause accessibility issues. The component should gracefully handle such scenarios by providing appropriate text wrapping, maintaining proper line heights, and ensuring that all content remains accessible and readable regardless of its length.', + href: '/catalog/default/service/auth-service', + }, + { + name: 'External link example', + description: 'This is an external link that opens in a new tab', + href: 'https://backstage.io', + }, ]; diff --git a/packages/ui/src/components/Table/types.ts b/packages/ui/src/components/Table/types.ts index be9e860a0c..1ac477e3ff 100644 --- a/packages/ui/src/components/Table/types.ts +++ b/packages/ui/src/components/Table/types.ts @@ -21,7 +21,10 @@ import { import type { TextColors } from '../../types'; /** @public */ -export interface CellProps extends ReactAriaCellProps { +export interface CellProps extends ReactAriaCellProps {} + +/** @public */ +export interface CellTextProps extends ReactAriaCellProps { title: string; description?: string; color?: TextColors;