feat(theming): Custom label tokens by msyavuz · Pull Request #38679 · apache/superset

msyavuz · 2026-03-16T14:48:13Z

User description

SUMMARY

Add superset specific tokens to make different labels customizable through theming.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

After:

TESTING INSTRUCTIONS

Published/Draft (dashboard status):

labelPublishedColor, labelPublishedBg, labelPublishedBorderColor, labelPublishedIconColor
labelDraftColor, labelDraftBg, labelDraftBorderColor, labelDraftIconColor

Physical/Virtual (dataset type):

labelDatasetPhysicalColor, labelDatasetPhysicalBg, labelDatasetPhysicalBorderColor, labelDatasetPhysicalIconColor
labelDatasetVirtualColor, labelDatasetVirtualBg, labelDatasetVirtualBorderColor, labelDatasetVirtualIconColor

tokens should work when set through theming

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

CodeAnt-AI Description

Add customizable theme tokens for Published/Draft and Physical/Virtual labels

What Changed

Dashboard "Published"/"Draft" labels now honor theme tokens for text color, background, border, and icon color so their appearance can be fully customized via theme.
Dataset "Physical"/"Virtual" labels now honor theme tokens for text color, background, border, and icon color so dataset-type badges can be themed.
Theme type definitions and the recognized custom-token list were extended to include the new label tokens.
Unit tests and a test helper were added to verify token recognition and that labels apply custom token overrides (including partial overrides and icon colors).

Impact

✅ Customizable label colors via theme
✅ Consistent dashboard status visuals when theming
✅ Fewer manual CSS overrides when applying custom themes

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

bito-code-review · 2026-03-16T14:48:24Z

Code Review Agent Run #c1a222

Actionable Suggestions - 0

Additional Suggestions - 4

superset-frontend/packages/superset-ui-core/src/components/Label/reusable/PublishedLabel.test.tsx - 4
- Incomplete test assertion · Line 40-43
  
  Test only checks text rendering but not the icon, which is part of the component's behavior. Per BITO rule [6262], tests should assert actual logic beyond mere rendering.
- Incomplete test assertion · Line 45-48
  
  Test only checks text rendering but not the icon, which is part of the component's behavior. Per BITO rule [6262], tests should assert actual logic beyond mere rendering.
- Incomplete test assertion · Line 50-54
  
  Test checks tag color but not icon color, which uses theme.colorSuccess. Per BITO rule [6262], tests should assert full behavior logic.
- Incomplete test assertion · Line 56-60
  
  Test checks tag color but not icon color, which uses theme.colorPrimary. Per BITO rule [6262], tests should assert full behavior logic.

Review Details

Files reviewed - 6 · Commit Range: d70dca8..4e52af1
- superset-frontend/packages/superset-core/src/theme/types.ts
- superset-frontend/packages/superset-ui-core/src/components/Label/reusable/DatasetTypeLabel.test.tsx
- superset-frontend/packages/superset-ui-core/src/components/Label/reusable/DatasetTypeLabel.tsx
- superset-frontend/packages/superset-ui-core/src/components/Label/reusable/PublishedLabel.test.tsx
- superset-frontend/packages/superset-ui-core/src/components/Label/reusable/PublishedLabel.tsx
- superset-frontend/src/theme/utils/antdTokenNames.ts
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful
- Eslint (Linter) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

codeant-ai-for-open-source · 2026-03-16T14:49:39Z

Sequence Diagram

This PR introduces Superset specific theme tokens for Published Draft and Physical Virtual labels. During rendering, label components now read these tokens from the active theme and fall back to existing default colors when custom values are not set.

sequenceDiagram
    participant Admin as Theme Author
    participant Theme as Theme System
    participant UI as Dashboard UI
    participant Label as Label Component

    Admin->>Theme: Set custom label tokens in theme config
    Theme->>Theme: Register custom token names
    UI->>Label: Render status or dataset label
    Label->>Theme: Resolve label and icon style tokens
    Theme-->>Label: Return custom values or defaults
    Label-->>UI: Display styled label

Generated by CodeAnt AI

netlify · 2026-03-16T14:50:23Z

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	`7d03f4e`
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/69b81a1dd4dbc000089dbde2
😎 Deploy Preview	https://deploy-preview-38679--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

msyavuz · 2026-03-16T14:52:08Z

Also as a side note i think we should move our common styling customizations to superset default theme whenever we can so that people can adjust them to their needs

bito-code-review · 2026-03-16T15:58:33Z

Code Review Agent Run #9150ec

Actionable Suggestions - 0

Review Details

Files reviewed - 3 · Commit Range: 4e52af1..86a4cd6
- superset-frontend/packages/superset-ui-core/src/components/Label/reusable/DatasetTypeLabel.test.tsx
- superset-frontend/packages/superset-ui-core/src/components/Label/reusable/PublishedLabel.test.tsx
- superset-frontend/packages/superset-ui-core/src/components/Label/reusable/PublishedLabel.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

...set-frontend/packages/superset-ui-core/src/components/Label/reusable/PublishedLabel.test.tsx

sadpandajoe · 2026-03-16T22:01:51Z

...set-frontend/packages/superset-ui-core/src/components/Label/reusable/PublishedLabel.test.tsx

+function renderWithTokens(
+  ui: ReactElement,
+  tokenOverrides: Record<string, string>,
+) {
+  const customTheme = Theme.fromConfig({ token: tokenOverrides });
+  return render(<ThemeProvider theme={customTheme.theme}>{ui}</ThemeProvider>);
+}


Same as above.

There are some more of this function scattered across the repo. It might be worthwile to have a follow up for consolidating those as well. I think it's out of scope for this pr though.

bito-code-review · 2026-03-16T22:02:39Z

Yes, the renderWithDefaultTheme and renderWithTokens functions in PublishedLabel.test.tsx are identical to those in DatasetTypeLabel.test.tsx. Both are new files in this PR with duplicate helper functions.

superset-frontend/packages/superset-ui-core/src/components/Label/reusable/PublishedLabel.test.tsx

function renderWithDefaultTheme(ui: ReactElement) {
  return render(<ThemeProvider theme={supersetTheme}>{ui}</ThemeProvider>);
}

function renderWithTokens(
  ui: ReactElement,
  tokenOverrides: Record<string, string>,
) {
  const customTheme = Theme.fromConfig({ token: tokenOverrides });
  return render(<ThemeProvider theme={customTheme.theme}>{ui}</ThemeProvider>);
}

superset-frontend/packages/superset-ui-core/src/components/Label/reusable/DatasetTypeLabel.test.tsx

function renderWithDefaultTheme(ui: ReactElement) {
  return render(<ThemeProvider theme={supersetTheme}>{ui}</ThemeProvider>);
}

function renderWithTokens(
  ui: ReactElement,
  tokenOverrides: Record<string, string>,
) {
  const customTheme = Theme.fromConfig({ token: tokenOverrides });
  return render(<ThemeProvider theme={customTheme.theme}>{ui}</ThemeProvider>);
}

sadpandajoe · 2026-03-16T22:12:31Z

Some notes on testing.

superset-frontend/src/theme/utils/antdTokenNames.test.ts - wondering if we should add a test in there to validate new tokens
Do we want to have a test for partial token overrides? Example is to set maybe bg without a color and then validate the spread works.
PublishedLabel accepts an onClick prop (used by PublishedStatus to toggle status). The new tests don't verify click behavior at all.
Tests verify custom icon colors work, but don't assert default icon colors. E.g., physical dataset icon should default to theme.colorPrimary, virtual dataset icon should have no explicit color. PublishedLabel published icon should default to theme.colorSuccess.

bito-code-review · 2026-03-17T08:16:46Z

Code Review Agent Run #66c686

Actionable Suggestions - 0

Additional Suggestions - 1

superset-frontend/packages/superset-ui-core/src/components/Label/reusable/testUtils.tsx - 1
- Missing return type annotation · Line 24-24
  
  The renderWithTheme function lacks an explicit return type annotation, which violates the project's coding standards requiring explicit type hints for all functions. This improves consistency and enables better static type checking. Add : RenderResult after the parameters and import the type from @testing-library/react.

Review Details

Files reviewed - 4 · Commit Range: 86a4cd6..767e961
- superset-frontend/packages/superset-ui-core/src/components/Label/reusable/DatasetTypeLabel.test.tsx
- superset-frontend/packages/superset-ui-core/src/components/Label/reusable/PublishedLabel.test.tsx
- superset-frontend/packages/superset-ui-core/src/components/Label/reusable/testUtils.tsx
- superset-frontend/src/theme/utils/antdTokenNames.test.ts
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful
- Eslint (Linter) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

alexandrusoare

This looks good to me, just 2 questions. Shouldn't we also config these tokens in config.py for the system themes? Also are there some tests we can add to make sure that there are no visual regressions from this?

EnxDev · 2026-03-17T10:09:59Z

...t-frontend/packages/superset-ui-core/src/components/Label/reusable/DatasetTypeLabel.test.tsx

+
+test('uses default primary color for physical label', () => {
+  renderWithTheme(<DatasetTypeLabel datasetType="physical" />);
+  const tag = screen.getByText('Physical').closest('.ant-tag');


Do you think it would be better to use a data-test instead of relying on an Ant Design class name that might change across versions?

msyavuz added 2 commits March 16, 2026 17:40

feat(theme): Add label specific theme tokens

d70dca8

chore: add tests

4e52af1

pull-request-size bot added the size/L label Mar 16, 2026

codeant-ai-for-open-source bot added the size:L This PR changes 100-499 lines, ignoring generated files label Mar 16, 2026

dosubot bot added change:frontend Requires changing the frontend global:theming Related to theming Superset labels Mar 16, 2026

msyavuz requested review from EnxDev, alexandrusoare, kgabryje, mistercrunch and sadpandajoe March 16, 2026 14:52

msyavuz changed the title ~~Msyavuz/feat/custom label tokens~~ feat(theming): Custom label tokens Mar 16, 2026

Merge branch 'master' into msyavuz/feat/custom-label-tokens

7d03f4e

github-actions bot added packages preset-io labels Mar 16, 2026

fix: ci

86a4cd6

sadpandajoe reviewed Mar 16, 2026

View reviewed changes

...set-frontend/packages/superset-ui-core/src/components/Label/reusable/PublishedLabel.test.tsx Outdated Show resolved Hide resolved

sadpandajoe reviewed Mar 16, 2026

View reviewed changes

chore: testing fixes

74a7985

codeant-ai-for-open-source bot added size:L This PR changes 100-499 lines, ignoring generated files and removed size:L This PR changes 100-499 lines, ignoring generated files labels Mar 17, 2026

fix: format

767e961

alexandrusoare reviewed Mar 17, 2026

View reviewed changes

alexandrusoare approved these changes Mar 17, 2026

View reviewed changes

EnxDev reviewed Mar 17, 2026

View reviewed changes

Conversation

msyavuz commented Mar 16, 2026 • edited by codeant-ai-for-open-source bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

CodeAnt-AI Description

What Changed

Impact

Checking Your Pull Request

Talking to CodeAnt AI

Example

Preserve Org Learnings with CodeAnt

Example

Retrigger review

Check Your Repository Health

Uh oh!

bito-code-review bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #c1a222

Uh oh!

codeant-ai-for-open-source bot commented Mar 16, 2026

Sequence Diagram

Uh oh!

netlify bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for superset-docs-preview ready!

Uh oh!

msyavuz commented Mar 16, 2026

Uh oh!

bito-code-review bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #9150ec

Uh oh!

Uh oh!

sadpandajoe Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

msyavuz Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

bito-code-review bot commented Mar 16, 2026

Uh oh!

sadpandajoe commented Mar 16, 2026

Uh oh!

bito-code-review bot commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #66c686

Uh oh!

alexandrusoare left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

EnxDev Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

msyavuz commented Mar 16, 2026 •

edited by codeant-ai-for-open-source bot

Loading

bito-code-review bot commented Mar 16, 2026 •

edited

Loading

netlify bot commented Mar 16, 2026 •

edited

Loading

bito-code-review bot commented Mar 16, 2026 •

edited

Loading

bito-code-review bot commented Mar 17, 2026 •

edited

Loading

alexandrusoare left a comment •

edited

Loading