diff --git a/.changeset/open-points-beam.md b/.changeset/open-points-beam.md
new file mode 100644
index 0000000000..b58bf2b3d5
--- /dev/null
+++ b/.changeset/open-points-beam.md
@@ -0,0 +1,37 @@
+---
+'@backstage/ui': minor
+---
+
+**Breaking change** The `Cell` component has been refactored to be a generic wrapper component that accepts `children` for custom cell content. The text-specific functionality (previously part of `Cell`) has been moved to a new `CellText` component.
+
+### Migration Guide
+
+If you were using `Cell` with text-specific props (`title`, `description`, `leadingIcon`, `href`), you need to update your code to use `CellText` instead:
+
+**Before:**
+
+```tsx
+}
+ href="/path"
+/>
+```
+
+**After:**
+
+```tsx
+}
+ href="/path"
+/>
+```
+
+For custom cell content, use the new generic `Cell` component:
+
+```tsx
+{/* Your custom content */}
+```
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';
+
+ 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
+
+
+
+ {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 (
+
+
+
+ );
+};
+
+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;