diff --git a/.changeset/tidy-pumpkins-clean.md b/.changeset/tidy-pumpkins-clean.md new file mode 100644 index 0000000000..c5a067a98c --- /dev/null +++ b/.changeset/tidy-pumpkins-clean.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Fix bug where `` component would not take into account header styles defined in `columns[*].headerStyle`. diff --git a/packages/core-components/src/components/Table/Table.test.tsx b/packages/core-components/src/components/Table/Table.test.tsx index ff17409502..ffdca26d98 100644 --- a/packages/core-components/src/components/Table/Table.test.tsx +++ b/packages/core-components/src/components/Table/Table.test.tsx @@ -142,6 +142,62 @@ describe('
', () => { }); }); + describe('with style headers', () => { + describe('with CSS properties object', () => { + it('renders styled headers', async () => { + const columns = [ + column1, + { + ...column2, + headerStyle: { + backgroundColor: 'pink', + }, + }, + ]; + + const rendered = await renderInTestApp( +
, + ); + + expect(rendered.getByText(column1.title).closest('th')).not.toHaveStyle( + { + backgroundColor: 'pink', + }, + ); + expect(rendered.getByText(column2.title).closest('th')).toHaveStyle({ + backgroundColor: 'pink', + }); + }); + + it('renders styled headers with highlight', async () => { + const columns = [ + { + ...column1, + highlight: true, + }, + { + ...column2, + highlight: true, + headerStyle: { + backgroundColor: 'pink', + }, + }, + ]; + + const rendered = await renderInTestApp( +
, + ); + + const column1Header = rendered.getByText(column1.title).closest('th'); + expect(column1Header?.style.backgroundColor).toBe(''); + expect(column1Header?.style.color).toBe('rgb(0, 0, 0)'); + const column2Header = rendered.getByText(column2.title).closest('th'); + expect(column2Header?.style.backgroundColor).toBe('pink'); + expect(column2Header?.style.color).toBe('rgb(0, 0, 0)'); + }); + }); + }); + it('renders with subtitle', async () => { const rendered = await renderInTestApp(
, diff --git a/packages/core-components/src/components/Table/Table.tsx b/packages/core-components/src/components/Table/Table.tsx index 89a1d69b96..c43345c9d2 100644 --- a/packages/core-components/src/components/Table/Table.tsx +++ b/packages/core-components/src/components/Table/Table.tsx @@ -169,7 +169,7 @@ function convertColumns( theme: BackstageTheme, ): TableColumn[] { return columns.map(column => { - const headerStyle: React.CSSProperties = {}; + const headerStyle: React.CSSProperties = column.headerStyle ?? {}; let cellStyle = column.cellStyle || {};