dosubot[bot] commented on issue #36324: URL: https://github.com/apache/superset/issues/36324#issuecomment-3589168211
<!-- Answer --> There’s a confirmed inconsistency in both the color and interaction of the three-dot menu button across Welcome and Dashboard pages. On the Welcome page, the button typically uses the `colorPrimaryText` token and opens on hover, while on the Dashboard page (especially in chart headers), it uses `colorTextLabel` and opens on click only. The relevant components are `DashboardCard`, `ChartCard`, and `SliceHeaderControls`—each sets its own theme token and trigger props for the menu button ([source](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx)). To achieve consistency, align both the color token (e.g., use `colorPrimaryText` or `colorTextLabel` everywhere) and the interaction pattern (set the `Dropdown` trigger prop to either `['click']` or `['hover', 'click']` across all menu buttons). Superset recommends using Emotion and theme variables for styling ([style guidelines](https://github.com/apache/superset/wiki/Component-Style-Guidelines-and-Best-Practices)), and you can extend Ant Design components with Emotion for more granular control ([best practices](https://github.com/apache/superset/wiki/Emotion-Styling-Guidelines-and-Best-Practices)). For future-proofing, keep an eye on the Ant Design 5 upgrade, which will improve per-component theming via tokens. If you want a reusable fix, consider creating a styled menu button component in `src/components` that standardizes both the color and trigger props, then use it everywhere the three-dot menu appears. Document it in Storybook for design system alignment. <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/ee086ac2-82d4-4c4b-a176-8bb32c6035c0?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/ee086ac2-82d4-4c4b-a176-8bb32c6035c0?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/ee086ac2-82d4-4c4b-a176-8bb32c6035c0?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/ee086ac2-82d4-4c4b-a176-8bb32c6035c0?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/ee086ac2-82d4-4c4b-a176-8bb32c6035c0?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/ee086ac2-82d4-4c4b-a176-8bb32c6035c0?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/ee086ac2-82d4-4c4b-a176-8bb32c6035c0?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=There%E2%80%99s%20a%20confirmed%20inconsistency%20in%20both%20the%20color%20and%20interaction%20of%20the%20three-dot%20menu%20button%20across%20Welcome%20and%20Dashboard%20pages.%20On%20the%20Welcome%20page%2C%20the%20button%20typically%20uses%20the%20%60colorPrimaryText%60%20token%20and%20opens%20on%20hover%2C%20while%20on%20the%20Dashboard%20page%20%28especially%20in%20chart%20headers%29%2C%20it%20uses%20%60colorTextLabel%60%20and%20opens%20on%20click%20only.%20The%20relevant%20components%20are%20%60DashboardCard%60%2C%20%60ChartCard%60%2C%20and%20%60SliceHeaderControls%60%E2%80%94each%20sets%20its%20own%20theme%20token%20and%20trigger%20props%20for%20the%20menu%20button%20%28%5Bsource%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91cea e4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx%29%29.%0A%0ATo%20achieve%20consistency%2C%20align%20both%20the%20color%20token%20%28e.g.%2C%20use%20%60colorPrimaryText%60%20or%20%60colorTextLabel%60%20everywhere%29%20and%20the%20interaction%20pattern%20%28set%20the%20%60Dropdown%60%20trigger%20prop%20to%20either%20%60%5B%27click%27%5D%60%20or%20%60%5B%27hover%27%2C%20%27click%27%5D%60%20across%20all%20menu%20buttons%29.%20Superset%20recommends%20using%20Emotion%20and%20theme%20variables%20for%20styling%20%28%5Bstyle%20guidelines%5D%28https%3A//github.com/apache/superset/wiki/Component-Style-Guidelines-and-Best-Practices%29%29%2C%20and%20you%20can%20extend%20Ant%20Design%20components%20with%20Emotion%20for%20more%20granular%20control%20%28%5Bbest%20practices%5D%28https%3A//github.com/apache/superset/wiki/Emotion-Styling-Guidelines-and-Best-Practices%29%29.%20For%20future-proofing%2C%20keep%20an%20eye%20on%20the%20Ant%20Design%205%20 upgrade%2C%20which%20will%20improve%20per-component%20theming%20via%20tokens.%0A%0AIf%20you%20want%20a%20reusable%20fix%2C%20consider%20creating%20a%20styled%20menu%20button%20component%20in%20%60src/components%60%20that%20standardizes%20both%20the%20color%20and%20trigger%20props%2C%20then%20use%20it%20everywhere%20the%20three-dot%20menu%20appears.%20Document%20it%20in%20Storybook%20for%20design%20system%20alignment.) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/issues/36324) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
