QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-07-09 08:15:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): restore antd5 Tag trailing margin for layout parity

Browse Source 
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>
This commit is contained in:
Evan Rusackas
2026-07-04 12:51:37 -07:00
parent aaf62f8154
commit ece92c87e7
2 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
superset-frontend/packages/superset-core/src/theme/GlobalStyles.tsx
View File

@@ -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 {

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

@@ -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(<Tag>spacing</Tag>);
const tag = getByText('spacing').closest('.ant-tag') as HTMLElement;
expect(getComputedStyle(tag).getPropertyValue('margin-inline-end')).toBe(
'8px',
);
});