Skip to content

Commit ece92c8

Browse files
rusackasclaude
andcommitted
fix(frontend): restore antd5 Tag trailing margin for layout parity
antd 6 removed the Tag's default margin-inline-end: 8px in favor of parents spacing tags via flex/Space gaps. App layouts predate that and rely on the v5 default — most visibly the dashboard header, where the Published tag sat flush against the metadata bar. Restore the margin in GlobalStyles (to be removed once Tag-adjacent layouts declare their own gaps) and pin it with a computed-style regression test that exercises the provider -> GlobalStyles -> Tag chain. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 parent aaf62f8 commit ece92c8

2 files changed

Lines changed: 25 additions & 1 deletion

File tree

superset-frontend/packages/superset-core/src/theme/GlobalStyles.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,16 @@ export const GlobalStyles = () => {
105105
cursor: pointer;
106106
}
107107
108+
// antd 6 removed the Tag's default trailing margin (v5 shipped
109+
// margin-inline-end: 8px on every tag) in favor of parents spacing
110+
// tags via flex/Space gaps. The app's layouts predate that and rely
111+
// on the v5 default (e.g. the dashboard header's Published tag),
112+
// so restore it for visual parity. Remove once Tag-adjacent layouts
113+
// declare their own gaps.
114+
.ant-tag {
115+
margin-inline-end: ${theme.marginXS}px;
116+
}
117+
108118
// Override geostyler CSS that hides AntD ColorPicker alpha input
109119
// See: https://github.com/apache/superset/issues/34721
110120
.ant-color-picker .ant-color-picker-alpha-input {

superset-frontend/packages/superset-ui-core/src/components/antdDomContract.test.tsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
*/
3434
import { render } from '@superset-ui/core/spec';
3535
// eslint-disable-next-line no-restricted-imports
36-
import { Collapse, Modal, Popover, Steps, Tabs, Tooltip } from 'antd';
36+
import { Collapse, Modal, Popover, Steps, Tabs, Tag, Tooltip } from 'antd';
3737
import { Select } from './Select';
3838

3939
const antClasses = (root: ParentNode): string[] => {
@@ -224,3 +224,17 @@ test('Modal body class (many *.styles.ts modal overrides target it)', () => {
224224
);
225225
expect(antClasses(document.body)).toContain('ant-modal-body');
226226
});
227+
228+
test('Tag keeps its v5 trailing margin (GlobalStyles parity rule)', () => {
229+
// antd 6 removed the Tag's default margin-inline-end: 8px, expecting
230+
// parents to space tags via flex/Space gaps. App layouts rely on the v5
231+
// default (e.g. the dashboard header's Published tag sat flush against
232+
// the metadata bar without it), so GlobalStyles restores it. The spec
233+
// renderer mounts SupersetThemeProvider, which renders GlobalStyles, so
234+
// the computed style asserts the whole chain.
235+
const { getByText } = render(<Tag>spacing</Tag>);
236+
const tag = getByText('spacing').closest('.ant-tag') as HTMLElement;
237+
expect(getComputedStyle(tag).getPropertyValue('margin-inline-end')).toBe(
238+
'8px',
239+
);
240+
});

0 commit comments

Comments
 (0)