This is an automated email from the ASF dual-hosted git repository.
sadpandajoe pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 91f4d01ca2c fix(chart-creation): stop antd v6 Steps from doubling the
icon-content gap (#43730)
91f4d01ca2c is described below
commit 91f4d01ca2cbe77fe189c0b695019ef41a727471
Author: Joe Li <[email protected]>
AuthorDate: Tue Sep 8 16:57:55 2026 -0700
fix(chart-creation): stop antd v6 Steps from doubling the icon-content gap
(#43730)
Co-authored-by: Claude Sonnet 5 <[email protected]>
---
.../VizTypeControl/VizTypeControl.test.tsx | 46 +++++++++++++++++++++-
.../controls/VizTypeControl/VizTypeGallery.tsx | 2 +-
.../src/pages/ChartCreation/ChartCreation.test.tsx | 14 +++++++
.../src/pages/ChartCreation/index.tsx | 7 ++++
4 files changed, 67 insertions(+), 2 deletions(-)
diff --git
a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
index 009d63d092d..e1bd74c600d 100644
---
a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
+++
b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
@@ -16,7 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Preset, VizType } from '@superset-ui/core';
+import {
+ ChartLabel,
+ ChartMetadata,
+ ChartPlugin,
+ Preset,
+ VizType,
+} from '@superset-ui/core';
import {
render,
cleanup,
@@ -47,12 +53,31 @@ jest.mock('scroll-into-view-if-needed', () => jest.fn());
jest.useFakeTimers({ advanceTimers: true });
+// A minimal plugin carrying a "Featured" label, so tests can assert on the
+// badge that VizTypeGallery overlays on its thumbnail.
+class FeaturedTestChartPlugin extends ChartPlugin {
+ constructor() {
+ super({
+ metadata: new ChartMetadata({
+ name: 'Featured Test Chart',
+ thumbnail: '',
+ label: ChartLabel.Featured,
+ tags: ['Featured'],
+ }),
+ Chart: () => null,
+ });
+ }
+}
+
class MainPreset extends Preset {
constructor() {
super({
name: 'Legacy charts',
plugins: [
new TableChartPlugin().configure({ key: VizType.Table }),
+ new FeaturedTestChartPlugin().configure({
+ key: 'featured_test_chart',
+ }),
new BigNumberTotalChartPlugin().configure({
key: VizType.BigNumberTotal,
}),
@@ -278,6 +303,25 @@ describe('VizTypeControl', () => {
).not.toBeInTheDocument();
});
+ test('anchors the Featured badge to the bottom-right of the thumbnail
image', async () => {
+ // The badge is positioned relative to the thumbnail image only (not the
+ // whole tile), so it must hang off the image's bottom-right corner
+ // rather than its top edge.
+ await waitForRenderWrapper();
+ userEvent.click(screen.getByRole('tab', { name: 'All charts' }));
+
+ const visualizations = screen.getByTestId(getTestId('viz-row'));
+ const image = await within(visualizations).findByAltText(
+ 'Featured Test Chart',
+ );
+ const badgeWrapper = image.nextElementSibling as HTMLElement;
+
+ expect(badgeWrapper).toHaveStyleRule('bottom', '4px');
+ expect(badgeWrapper).toHaveStyleRule('right', '4px');
+ expect(badgeWrapper).not.toHaveStyleRule('top', expect.anything());
+ expect(within(badgeWrapper).getByText('FEATURED')).toBeInTheDocument();
+ });
+
test('Thumbnail labels expose the full chart name via a title tooltip',
async () => {
// Labels are clamped to a fixed two-line block so every tile is the same
// height; the full (possibly truncated) name must stay discoverable
through
diff --git
a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
index bd06574a902..50900d2c733 100644
---
a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
+++
b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -344,7 +344,7 @@ const ThumbnailImageWrapper = styled.div`
const ThumbnailLabelWrapper = styled.div`
position: absolute;
right: ${({ theme }) => theme.sizeUnit}px;
- top: ${({ theme }) => theme.sizeUnit}px;
+ bottom: ${({ theme }) => theme.sizeUnit}px;
`;
const TitleLabelWrapper = styled.div`
diff --git a/superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx
b/superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx
index 5ef9e07d754..98efdeab06e 100644
--- a/superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx
+++ b/superset-frontend/src/pages/ChartCreation/ChartCreation.test.tsx
@@ -153,6 +153,20 @@ test('renders a select and a VizTypeGallery', async () => {
expect(screen.getByText(/choose chart type/i)).toBeInTheDocument();
});
+test('does not double up the vertical Steps icon-to-content gap', async () => {
+ // antd 6 added its own icon->content gap on `.ant-steps-item-wrapper`
+ // (column-gap), stacking on top of the pre-existing `margin-right` on
+ // `.ant-steps-item-icon` and shifting every step's content to the right.
+ const { container } = await renderComponent();
+ const styledContainer = container.firstChild;
+ expect(styledContainer).toHaveStyleRule('column-gap', '0', {
+ target: '.ant-steps-item-wrapper',
+ });
+ expect(styledContainer).toHaveStyleRule('margin-right', '8px', {
+ target: '.ant-steps-item-icon',
+ });
+});
+
test('renders dataset help text when user lacks dataset write permissions',
async () => {
await renderComponent();
expect(screen.queryByText('Add a dataset')).not.toBeInTheDocument();
diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx
b/superset-frontend/src/pages/ChartCreation/index.tsx
index 9564e07ca41..e79b932c69a 100644
--- a/superset-frontend/src/pages/ChartCreation/index.tsx
+++ b/superset-frontend/src/pages/ChartCreation/index.tsx
@@ -141,6 +141,13 @@ const StyledContainer = styled.div`
display: none;
}
+ /* antd 6 added its own icon->content gap on this flex wrapper
+ (column-gap), on top of the .ant-steps-item-icon margin-right below,
+ doubling the gap. Zero it out so the icon's margin is the only gap. */
+ &&&& .ant-steps-item-wrapper {
+ column-gap: 0;
+ }
+
&&&& .ant-steps-item-icon {
margin-right: ${theme.marginXS}px;
width: ${theme.sizeUnit * 5}px;
