feat(dashboard): granular theming for dashboard components #36749
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Planning document for extending Superset's theming system to support per-component themes with full cascade hierarchy: Instance → Dashboard → Tab → Row/Column → Chart/Component Key decisions: - Modal with live preview for theme selection - Color scheme (data viz) remains separate from Theme (UI elements) - Standardized ComponentHeaderControls menu for all dashboard components - Tab themes apply to content area, overridable by child components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
… menus Create a generic menu component for dashboard components (Markdown, Row, Column, Tab) that provides a consistent vertical dots menu pattern, matching the existing SliceHeaderControls used for charts. New files: - ComponentHeaderControls/index.tsx: Main component with: - NoAnimationDropdown + Menu pattern from @superset-ui/core - ComponentMenuKeys enum for standard actions (Delete, ApplyTheme, etc.) - Configurable visibility (editMode, showInViewMode) - ComponentHeaderControls/useComponentMenuItems.tsx: Helper hook that: - Builds standard menu items (theme selection, delete) - Supports custom items before/after standard items - Shows applied theme name in menu This is the foundation for adding granular theming to all dashboard components with a consistent UI pattern. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace the old Markdown component UI controls with the new standardized ComponentHeaderControls menu: Changes: - Add ComponentHeaderControls to Markdown component (top-right position) - Remove MarkdownModeDropdown from WithPopoverMenu - Remove HoverMenu with DeleteComponentButton - Add MarkdownControlsWrapper for positioning (shows on hover) New menu includes: - Edit/Preview toggle (replaces MarkdownModeDropdown) - Apply theme (placeholder for theme selector modal) - Delete (replaces DeleteComponentButton) This brings Markdown in line with the chart component menu pattern, providing a consistent UI across all dashboard components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The custom MarkdownControlsWrapper styled component wasn't showing
because its CSS selectors weren't integrated with the existing
DashboardWrapper hover rules. Using HoverMenu instead leverages
the existing CSS that shows menus on hover:
div:hover > .hover-menu-container .hover-menu { opacity: 1; }
Also updated tests to work with the new menu pattern:
- Tests now click "More Options" button to open dropdown
- Tests look for "Preview" (not "Edit") when in edit mode
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implements the theme selector modal that appears when clicking "Apply theme" on dashboard components. The modal: - Fetches available themes from /api/v1/theme/ API - Displays themes in a dropdown with Default/Dark badges - Stores selected theme ID in component metadata For Markdown components, the theme_id is stored in component.meta. Backend persistence to json_metadata.component_themes will be added in Phase 3. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implements component-level theme application for dashboard components: - Add ComponentThemeProvider wrapper that loads and applies themes - Integrate theming into Row, Column, Tabs, Markdown, and ChartHolder - Wire up theme selector from SliceHeaderControls through Chart hierarchy - Fix re-render issues with stable callback dependencies using ref pattern - Add comprehensive tests for ComponentThemeProvider Theme inheritance now works: Instance → Dashboard → Tab → Row/Column → Chart 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
github-actions
bot
added
doc
- Add Apache license header to GRANULAR_THEMING_PLAN.md - Fix ComponentThemeProvider tests to use data-test attribute - Configure testing-library testIdAttribute for Superset convention - Fix test assertions for fallback behavior 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
SUMMARY
This PR introduces granular theming capabilities for Apache Superset dashboards, allowing users to apply themes at the component level (Charts, Markdown, Rows, Columns, Tabs) in addition to the existing instance and dashboard-level theming.
Key Changes:
ComponentThemeProvider - New wrapper component that loads and applies themes to dashboard components with proper inheritance (Instance → Dashboard → Tab → Row/Column → Chart)
ComponentHeaderControls - Standardized menu component (vertical dots) for all dashboard components, replacing inconsistent UI patterns:
ThemeSelectorModal - Modal for selecting themes to apply to components
Theme inheritance - Components inherit themes from their parent hierarchy and can override specific tokens
Architecture:
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Screenshots to be added after testing
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION
Note: This is a draft PR. Backend persistence (Phase 3) will save component themes to dashboard
json_metadata. Currently themes are stored in component metadata on the client side.🤖 Generated with Claude Code