codeant-ai-for-open-source[bot] commented on code in PR #36330:
URL: https://github.com/apache/superset/pull/36330#discussion_r2746525616
##########
superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx:
##########
@@ -578,7 +561,14 @@ const SliceHeaderControls = (
padding-right: 0px;
`}
>
- <VerticalDotsTrigger />
+ <Icons.EllipsisOutlined
+ css={css`
+ transform: rotate(90deg);
+ `}
+ iconSize="xl"
+ iconColor={theme.colorTextLabel}
Review Comment:
**Suggestion:** The Icons component likely expects the standard prop name
`color` for its color rather than `iconColor`; using an unknown prop name will
be ignored and the icon color won't change. Replace the prop name so the color
actually applies to the rendered element. [possible bug]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ Kebab menu icon color inconsistent across dashboards.
- ⚠️ Visual regression on dashboard and chart cards.
```
</details>
```suggestion
color={theme.colorTextLabel}
```
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Build and run the frontend (start dev server) and open any dashboard page
that contains
charts so the SliceHeaderControls component renders. The component source is
at
superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
(see the Button
rendering the kebab icon at the NoAnimationDropdown in this file).
2. Locate the kebab button rendered by SliceHeaderControls: the Button has id
`slice_{slice.slice_id}-controls` (see index.tsx where id is set). Inspect
that element in
browser DevTools to find the rendered icon node produced by
<Icons.EllipsisOutlined ... />
(the JSX is at the block around lines 564–571 in the PR hunk; the icon prop
line is at
line 569).
3. Observe the icon's computed color (via Styles panel). Because the code
sets
iconColor={theme.colorTextLabel} (line 569), if Icons.EllipsisOutlined does
not accept an
`iconColor` prop, the theme token will not be applied and the icon will
render with its
default color instead of the intended theme.colorTextLabel.
4. Verify impact by temporarily editing the component to use
color={theme.colorTextLabel}
(or style={{ color: ... }}) and rebuild; the icon color should then match
the theme token.
This confirms that the current prop name (`iconColor`) is ineffective with
the icon
implementation. The relevant JSX is in
superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
around the
NoAnimationDropdown/Button/Icon rendering (hunk lines ~564-571).
```
</details>
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
**Line:** 569:569
**Comment:**
*Possible Bug: The Icons component likely expects the standard prop
name `color` for its color rather than `iconColor`; using an unknown prop name
will be ignored and the icon color won't change. Replace the prop name so the
color actually applies to the rendered element.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
```
</details>
--
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]
