diff --git a/superset-frontend/packages/superset-core/src/theme/GlobalStyles.tsx b/superset-frontend/packages/superset-core/src/theme/GlobalStyles.tsx index 249956f378c..2d612815b19 100644 --- a/superset-frontend/packages/superset-core/src/theme/GlobalStyles.tsx +++ b/superset-frontend/packages/superset-core/src/theme/GlobalStyles.tsx @@ -105,6 +105,16 @@ export const GlobalStyles = () => { cursor: pointer; } + // antd 6 removed the Tag's default trailing margin (v5 shipped + // margin-inline-end: 8px on every tag) in favor of parents spacing + // tags via flex/Space gaps. The app's layouts predate that and rely + // on the v5 default (e.g. the dashboard header's Published tag), + // so restore it for visual parity. Remove once Tag-adjacent layouts + // declare their own gaps. + .ant-tag { + margin-inline-end: ${theme.marginXS}px; + } + // Override geostyler CSS that hides AntD ColorPicker alpha input // See: https://github.com/apache/superset/issues/34721 .ant-color-picker .ant-color-picker-alpha-input { diff --git a/superset-frontend/packages/superset-ui-core/src/components/antdDomContract.test.tsx b/superset-frontend/packages/superset-ui-core/src/components/antdDomContract.test.tsx index 7c16817bd98..533df41b546 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/antdDomContract.test.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/antdDomContract.test.tsx @@ -33,7 +33,7 @@ */ import { render } from '@superset-ui/core/spec'; // eslint-disable-next-line no-restricted-imports -import { Collapse, Modal, Popover, Steps, Tabs, Tooltip } from 'antd'; +import { Collapse, Modal, Popover, Steps, Tabs, Tag, Tooltip } from 'antd'; import { Select } from './Select'; const antClasses = (root: ParentNode): string[] => { @@ -224,3 +224,17 @@ test('Modal body class (many *.styles.ts modal overrides target it)', () => { ); expect(antClasses(document.body)).toContain('ant-modal-body'); }); + +test('Tag keeps its v5 trailing margin (GlobalStyles parity rule)', () => { + // antd 6 removed the Tag's default margin-inline-end: 8px, expecting + // parents to space tags via flex/Space gaps. App layouts rely on the v5 + // default (e.g. the dashboard header's Published tag sat flush against + // the metadata bar without it), so GlobalStyles restores it. The spec + // renderer mounts SupersetThemeProvider, which renders GlobalStyles, so + // the computed style asserts the whole chain. + const { getByText } = render(spacing); + const tag = getByText('spacing').closest('.ant-tag') as HTMLElement; + expect(getComputedStyle(tag).getPropertyValue('margin-inline-end')).toBe( + '8px', + ); +});