diff --git a/.changeset/fix-table-filters-title-layout.md b/.changeset/fix-table-filters-title-layout.md new file mode 100644 index 0000000000..cfbd72fa90 --- /dev/null +++ b/.changeset/fix-table-filters-title-layout.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Fixed Table component layout when both `filters` and `title` props are used together. The filter controls now use a dedicated CSS class (`filterControls`) instead of incorrectly reusing the root container class. diff --git a/packages/core-components/report.api.md b/packages/core-components/report.api.md index 0cd8a7d866..946fd13c74 100644 --- a/packages/core-components/report.api.md +++ b/packages/core-components/report.api.md @@ -512,7 +512,7 @@ export function FeatureCalloutCircular( ): JSX_2.Element; // @public (undocumented) -export type FiltersContainerClassKey = 'root' | 'title'; +export type FiltersContainerClassKey = 'root' | 'filterControls' | 'title'; // @public export function Gauge(props: GaugeProps): JSX_2.Element; diff --git a/packages/core-components/src/components/Table/Table.test.tsx b/packages/core-components/src/components/Table/Table.test.tsx index dab5a462c2..075dbcc0cd 100644 --- a/packages/core-components/src/components/Table/Table.test.tsx +++ b/packages/core-components/src/components/Table/Table.test.tsx @@ -209,6 +209,23 @@ describe('', () => { expect(rendered.getByText('subtitle')).toBeInTheDocument(); }); + it('renders with both title and filters without layout issues', async () => { + const rendered = await renderInTestApp( +
, + ); + expect(rendered.getByText('My Table')).toBeInTheDocument(); + expect(rendered.getByText('Filters (0)')).toBeInTheDocument(); + }); + it('renders custom empty component if empty', async () => { const rendered = await renderInTestApp(
({ @@ -188,6 +188,10 @@ const useFilterStyles = makeStyles( justifyContent: 'space-between', flexWrap: 'wrap', }, + filterControls: { + display: 'flex', + alignItems: 'center', + }, title: { fontWeight: theme.typography.fontWeightBold, fontSize: 18, @@ -316,7 +320,7 @@ export function TableToolbar(toolbarProps: { if (hasFilters) { return ( - +