paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 21 Packages Projects Releases Wiki Activity

Cell -> CellText

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-11-30 09:01:47 +00:00
parent 8bd2335b95
commit 0334faab1f
8 changed files with 350 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-ui/src/content/table.props.ts
+11 -11
View File
@@ -267,7 +267,7 @@ export const tablePaginationPropDefs: Record<string, PropDef> = {
...stylePropDefs,
};
export const tableUsageSnippet = `import { Cell, ..., TableHeader, TablePagination } from '@backstage/ui';
export const tableUsageSnippet = `import { Cell, CellText, ..., TableHeader, TablePagination } from '@backstage/ui';
<Table>
<TableHeader>
@@ -275,14 +275,14 @@ export const tableUsageSnippet = `import { Cell, ..., TableHeader, TablePaginati
</TableHeader>
<TableBody>
<Row>
<Cell />
<CellText title="Example" />
<CellProfile />
</Row>
</TableBody>
</Table>
<TablePagination />`;
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}
/>
<Cell title={item.genre} />
<Cell title={item.yearFormed.toString()} />
<Cell title={item.albums.toString()} />
<CellText title={item.genre} />
<CellText title={item.yearFormed.toString()} />
<CellText title={item.albums.toString()} />
</Row>
))}
</TableBody>
</Table>
<TablePagination {...paginationProps} />`;
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() {
</TableHeader>
<TableBody>
<Row id="1">
<Cell title="Component A" />
<Cell title="Active" />
<CellText title="Component A" />
<CellText title="Active" />
</Row>
<Row id="2">
<Cell title="Component B" />
<Cell title="Inactive" />
<CellText title="Component B" />
<CellText title="Inactive" />
</Row>
</TableBody>
</Table>
packages/ui/src/components/Table/Table.module.css
+18 -1
View File
@@ -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 {
packages/ui/src/components/Table/Table.stories.tsx
+169 -135
View File
@@ -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 = {
<TableBody>
{data1.map(item => (
<Row key={item.name}>
<Cell
<CellText
title={item.name}
leadingIcon={<RiCactusLine />}
description={item.description}
/>
<CellProfileBUI
<CellProfile
name={item.owner.name}
src={item.owner.profilePicture}
href={item.owner.link}
/>
<Cell title={item.type} />
<Cell title={item.lifecycle} />
<CellText title={item.type} />
<CellText title={item.lifecycle} />
</Row>
))}
</TableBody>
@@ -105,14 +106,14 @@ export const WithPaginationUncontrolled: Story = {
<TableBody>
{data?.map(item => (
<Row key={item.name}>
<Cell
<CellText
title={item.name}
leadingIcon={<RiCactusLine />}
description={item.description}
/>
<Cell title={item.owner.name} />
<Cell title={item.type} />
<Cell title={item.lifecycle} />
<CellText title={item.owner.name} />
<CellText title={item.type} />
<CellText title={item.lifecycle} />
</Row>
))}
</TableBody>
@@ -152,14 +153,14 @@ export const WithPaginationControlled: Story = {
<TableBody>
{data?.map(item => (
<Row key={item.name}>
<CellProfileBUI
<CellProfile
name={item.name}
src={item.image}
href={item.website}
/>
<Cell title={item.genre} />
<Cell title={item.yearFormed.toString()} />
<Cell title={item.albums.toString()} />
<CellText title={item.genre} />
<CellText title={item.yearFormed.toString()} />
<CellText title={item.albums.toString()} />
</Row>
))}
</TableBody>
@@ -188,18 +189,18 @@ export const Sorting: Story = {
<TableBody>
{data1.map(item => (
<Row key={item.name}>
<Cell
<CellText
title={item.name}
leadingIcon={<RiCactusLine />}
description={item.description}
/>
<CellProfileBUI
<CellProfile
name={item.owner.name}
src={item.owner.profilePicture}
href={item.owner.link}
/>
<Cell title={item.type} />
<Cell title={item.lifecycle} />
<CellText title={item.type} />
<CellText title={item.lifecycle} />
</Row>
))}
</TableBody>
@@ -229,14 +230,14 @@ export const TableRockBand: Story = {
<TableBody>
{data?.map(item => (
<Row key={item.name}>
<CellProfileBUI
<CellProfile
name={item.name}
src={item.image}
href={item.website}
/>
<Cell title={item.genre} />
<Cell title={item.yearFormed.toString()} />
<Cell title={item.albums.toString()} />
<CellText title={item.genre} />
<CellText title={item.yearFormed.toString()} />
<CellText title={item.albums.toString()} />
</Row>
))}
</TableBody>
@@ -268,14 +269,14 @@ export const RowClick: Story = {
<TableBody>
{data?.map(item => (
<Row key={item.name} onAction={() => alert('Row clicked')}>
<CellProfileBUI
<CellProfile
name={item.name}
src={item.image}
href={item.website}
/>
<Cell title={item.genre} />
<Cell title={item.yearFormed.toString()} />
<Cell title={item.albums.toString()} />
<CellText title={item.genre} />
<CellText title={item.yearFormed.toString()} />
<CellText title={item.albums.toString()} />
</Row>
))}
</TableBody>
@@ -307,14 +308,14 @@ export const RowLink: Story = {
<TableBody>
{data?.map(item => (
<Row key={item.name} href="/band">
<CellProfileBUI
<CellProfile
name={item.name}
src={item.image}
href={item.website}
/>
<Cell title={item.genre} />
<Cell title={item.yearFormed.toString()} />
<Cell title={item.albums.toString()} />
<CellText title={item.genre} />
<CellText title={item.yearFormed.toString()} />
<CellText title={item.albums.toString()} />
</Row>
))}
</TableBody>
@@ -325,7 +326,38 @@ export const RowLink: Story = {
},
};
export const CellText: Story = {
export const CellComponent: Story = {
name: 'Cell',
render: () => {
return (
<Table>
<TableHeader>
<Column isRowHeader>Name</Column>
</TableHeader>
<TableBody>
<Row>
<Cell>Hello world</Cell>
</Row>
<Row>
<Cell>
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.
</Cell>
</Row>
<Row>
<Cell>Hello world</Cell>
</Row>
</TableBody>
</Table>
);
},
};
export const CellTextComponent: Story = {
name: 'CellText',
render: () => {
return (
<Table>
@@ -335,10 +367,11 @@ export const CellText: Story = {
<TableBody>
{data2.map(item => (
<Row key={item.name}>
<Cell
<CellText
title={item.name}
leadingIcon={item.icon}
description={item.description}
href={item.href}
/>
</Row>
))}
@@ -348,7 +381,8 @@ export const CellText: Story = {
},
};
export const CellProfile: Story = {
export const CellProfileComponent: Story = {
name: 'CellProfile',
render: () => {
return (
<Table>
@@ -358,7 +392,7 @@ export const CellProfile: Story = {
<TableBody>
{data3.map(item => (
<Row key={item.name}>
<CellProfileBUI
<CellProfile
name={item.name}
src={item.profilePicture}
href={item.link}
@@ -390,19 +424,19 @@ export const SelectionSingleToggle: Story = {
</TableHeader>
<TableBody>
<Row id="1">
<Cell title="Component Library" />
<Cell title="Design System" />
<Cell title="library" />
<CellText title="Component Library" />
<CellText title="Design System" />
<CellText title="library" />
</Row>
<Row id="2">
<Cell title="API Gateway" />
<Cell title="Platform" />
<Cell title="service" />
<CellText title="API Gateway" />
<CellText title="Platform" />
<CellText title="service" />
</Row>
<Row id="3">
<Cell title="Documentation Site" />
<Cell title="DevEx" />
<Cell title="website" />
<CellText title="Documentation Site" />
<CellText title="DevEx" />
<CellText title="website" />
</Row>
</TableBody>
</Table>
@@ -428,19 +462,19 @@ export const SelectionMultiToggle: Story = {
</TableHeader>
<TableBody>
<Row id="1">
<Cell title="Component Library" />
<Cell title="Design System" />
<Cell title="library" />
<CellText title="Component Library" />
<CellText title="Design System" />
<CellText title="library" />
</Row>
<Row id="2">
<Cell title="API Gateway" />
<Cell title="Platform" />
<Cell title="service" />
<CellText title="API Gateway" />
<CellText title="Platform" />
<CellText title="service" />
</Row>
<Row id="3">
<Cell title="Documentation Site" />
<Cell title="DevEx" />
<Cell title="website" />
<CellText title="Documentation Site" />
<CellText title="DevEx" />
<CellText title="website" />
</Row>
</TableBody>
</Table>
@@ -466,19 +500,19 @@ export const SelectionSingleReplace: Story = {
</TableHeader>
<TableBody>
<Row id="1">
<Cell title="Component Library" />
<Cell title="Design System" />
<Cell title="library" />
<CellText title="Component Library" />
<CellText title="Design System" />
<CellText title="library" />
</Row>
<Row id="2">
<Cell title="API Gateway" />
<Cell title="Platform" />
<Cell title="service" />
<CellText title="API Gateway" />
<CellText title="Platform" />
<CellText title="service" />
</Row>
<Row id="3">
<Cell title="Documentation Site" />
<Cell title="DevEx" />
<Cell title="website" />
<CellText title="Documentation Site" />
<CellText title="DevEx" />
<CellText title="website" />
</Row>
</TableBody>
</Table>
@@ -504,19 +538,19 @@ export const SelectionMultiReplace: Story = {
</TableHeader>
<TableBody>
<Row id="1">
<Cell title="Component Library" />
<Cell title="Design System" />
<Cell title="library" />
<CellText title="Component Library" />
<CellText title="Design System" />
<CellText title="library" />
</Row>
<Row id="2">
<Cell title="API Gateway" />
<Cell title="Platform" />
<Cell title="service" />
<CellText title="API Gateway" />
<CellText title="Platform" />
<CellText title="service" />
</Row>
<Row id="3">
<Cell title="Documentation Site" />
<Cell title="DevEx" />
<Cell title="website" />
<CellText title="Documentation Site" />
<CellText title="DevEx" />
<CellText title="website" />
</Row>
</TableBody>
</Table>
@@ -543,19 +577,19 @@ export const SelectionToggleWithActions: Story = {
</TableHeader>
<TableBody>
<Row id="1">
<Cell title="Component Library" />
<Cell title="Design System" />
<Cell title="library" />
<CellText title="Component Library" />
<CellText title="Design System" />
<CellText title="library" />
</Row>
<Row id="2">
<Cell title="API Gateway" />
<Cell title="Platform" />
<Cell title="service" />
<CellText title="API Gateway" />
<CellText title="Platform" />
<CellText title="service" />
</Row>
<Row id="3">
<Cell title="Documentation Site" />
<Cell title="DevEx" />
<Cell title="website" />
<CellText title="Documentation Site" />
<CellText title="DevEx" />
<CellText title="website" />
</Row>
</TableBody>
</Table>
@@ -582,19 +616,19 @@ export const SelectionReplaceWithActions: Story = {
</TableHeader>
<TableBody>
<Row id="1">
<Cell title="Component Library" />
<Cell title="Design System" />
<Cell title="library" />
<CellText title="Component Library" />
<CellText title="Design System" />
<CellText title="library" />
</Row>
<Row id="2">
<Cell title="API Gateway" />
<Cell title="Platform" />
<Cell title="service" />
<CellText title="API Gateway" />
<CellText title="Platform" />
<CellText title="service" />
</Row>
<Row id="3">
<Cell title="Documentation Site" />
<Cell title="DevEx" />
<Cell title="website" />
<CellText title="Documentation Site" />
<CellText title="DevEx" />
<CellText title="website" />
</Row>
</TableBody>
</Table>
@@ -620,19 +654,19 @@ export const SelectionToggleWithLinks: Story = {
</TableHeader>
<TableBody>
<Row id="1" href="https://example.com/library">
<Cell title="Component Library" />
<Cell title="Design System" />
<Cell title="library" />
<CellText title="Component Library" />
<CellText title="Design System" />
<CellText title="library" />
</Row>
<Row id="2" href="https://example.com/gateway">
<Cell title="API Gateway" />
<Cell title="Platform" />
<Cell title="service" />
<CellText title="API Gateway" />
<CellText title="Platform" />
<CellText title="service" />
</Row>
<Row id="3" href="https://example.com/docs">
<Cell title="Documentation Site" />
<Cell title="DevEx" />
<Cell title="website" />
<CellText title="Documentation Site" />
<CellText title="DevEx" />
<CellText title="website" />
</Row>
</TableBody>
</Table>
@@ -658,19 +692,19 @@ export const SelectionReplaceWithLinks: Story = {
</TableHeader>
<TableBody>
<Row id="1" href="https://example.com/library">
<Cell title="Component Library" />
<Cell title="Design System" />
<Cell title="library" />
<CellText title="Component Library" />
<CellText title="Design System" />
<CellText title="library" />
</Row>
<Row id="2" href="https://example.com/gateway">
<Cell title="API Gateway" />
<Cell title="Platform" />
<Cell title="service" />
<CellText title="API Gateway" />
<CellText title="Platform" />
<CellText title="service" />
</Row>
<Row id="3" href="https://example.com/docs">
<Cell title="Documentation Site" />
<Cell title="DevEx" />
<Cell title="website" />
<CellText title="Documentation Site" />
<CellText title="DevEx" />
<CellText title="website" />
</Row>
</TableBody>
</Table>
@@ -697,19 +731,19 @@ export const SelectionWithDisabledRows: Story = {
</TableHeader>
<TableBody>
<Row id="1">
<Cell title="Component Library" />
<Cell title="Design System" />
<Cell title="library" />
<CellText title="Component Library" />
<CellText title="Design System" />
<CellText title="library" />
</Row>
<Row id="2">
<Cell title="API Gateway (Disabled)" />
<Cell title="Platform" />
<Cell title="service" />
<CellText title="API Gateway (Disabled)" />
<CellText title="Platform" />
<CellText title="service" />
</Row>
<Row id="3">
<Cell title="Documentation Site" />
<Cell title="DevEx" />
<Cell title="website" />
<CellText title="Documentation Site" />
<CellText title="DevEx" />
<CellText title="website" />
</Row>
</TableBody>
</Table>
@@ -744,9 +778,9 @@ export const SelectionWithPagination: Story = {
<TableBody>
{data?.map(item => (
<Row key={item.name} id={item.name}>
<Cell title={item.name} />
<Cell title={item.owner.name} />
<Cell title={item.type} />
<CellText title={item.name} />
<CellText title={item.owner.name} />
<CellText title={item.type} />
</Row>
))}
</TableBody>
@@ -779,19 +813,19 @@ export const SelectionModePlayground: Story = {
</TableHeader>
<TableBody>
<Row id="1">
<Cell title="Component Library" />
<Cell title="Design System" />
<Cell title="library" />
<CellText title="Component Library" />
<CellText title="Design System" />
<CellText title="library" />
</Row>
<Row id="2">
<Cell title="API Gateway" />
<Cell title="Platform" />
<Cell title="service" />
<CellText title="API Gateway" />
<CellText title="Platform" />
<CellText title="service" />
</Row>
<Row id="3">
<Cell title="Documentation Site" />
<Cell title="DevEx" />
<Cell title="website" />
<CellText title="Documentation Site" />
<CellText title="DevEx" />
<CellText title="website" />
</Row>
</TableBody>
</Table>
@@ -839,19 +873,19 @@ export const SelectionBehaviorPlayground: Story = {
</TableHeader>
<TableBody>
<Row id="1">
<Cell title="Component Library" />
<Cell title="Design System" />
<Cell title="library" />
<CellText title="Component Library" />
<CellText title="Design System" />
<CellText title="library" />
</Row>
<Row id="2">
<Cell title="API Gateway" />
<Cell title="Platform" />
<Cell title="service" />
<CellText title="API Gateway" />
<CellText title="Platform" />
<CellText title="service" />
</Row>
<Row id="3">
<Cell title="Documentation Site" />
<Cell title="DevEx" />
<Cell title="website" />
<CellText title="Documentation Site" />
<CellText title="DevEx" />
<CellText title="website" />
</Row>
</TableBody>
</Table>
packages/ui/src/components/Table/components/Cell.tsx
+2 -39
View File
@@ -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 (
<ReactAriaCell
className={clsx(classNames.cell, styles[classNames.cell], className)}
{...rest}
>
<div
className={clsx(
classNames.cellContentWrapper,
styles[classNames.cellContentWrapper],
)}
>
{leadingIcon && (
<div
className={clsx(classNames.cellIcon, styles[classNames.cellIcon])}
>
{leadingIcon}
</div>
)}
<div
className={clsx(
classNames.cellContent,
styles[classNames.cellContent],
)}
>
{href ? (
<Link href={href} variant="body-medium" color={color}>
{title}
</Link>
) : (
<Text as="p" variant="body-medium" color={color}>
{title}
</Text>
)}
{description && (
<Text variant="body-medium" color="secondary">
{description}
</Text>
)}
</div>
</div>
{children}
</ReactAriaCell>
);
};
packages/ui/src/components/Table/components/CellText.tsx
+98
View File
@@ -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 (
<ReactAriaCell
className={clsx(classNames.cell, styles[classNames.cell], className)}
{...rest}
>
<div
className={clsx(
classNames.cellContentWrapper,
styles[classNames.cellContentWrapper],
)}
>
{leadingIcon && (
<div
className={clsx(classNames.cellIcon, styles[classNames.cellIcon])}
>
{leadingIcon}
</div>
)}
<div
className={clsx(
classNames.cellContent,
styles[classNames.cellContent],
)}
>
{href ? (
<Link
href={href}
variant="body-medium"
color={color}
truncate
title={title}
>
{title}
</Link>
) : (
<Text
as="p"
variant="body-medium"
color={color}
truncate
title={title}
>
{title}
</Text>
)}
{description && (
<Text
variant="body-medium"
color="secondary"
truncate
title={description}
>
{description}
</Text>
)}
</div>
</div>
</ReactAriaCell>
);
};
CellText.displayName = 'CellText';
export { CellText };
packages/ui/src/components/Table/index.ts
+7 -1
View File
@@ -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,
packages/ui/src/components/Table/mocked-data2.ts
+41
View File
@@ -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',
},
];
packages/ui/src/components/Table/types.ts
+4 -1
View File
@@ -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;