codeant-ai-for-open-source[bot] commented on code in PR #42147:
URL: https://github.com/apache/superset/pull/42147#discussion_r3606332956
##########
superset-frontend/packages/superset-ui-core/src/components/Label/index.tsx:
##########
@@ -82,13 +82,17 @@ export const Label = forwardRef<HTMLSpanElement,
LabelProps>((props, ref) => {
* which would drop the icon's own color/size. Wrapping the icon in a
span
* lets Tag override the (empty) wrapper style while the real icon keeps
its
* own inline styling.
+ *
+ * The wrapper also breaks Tag's own icon/text spacing rule
+ * (`> .anticon + span`), so the equivalent gap is re-applied here.
*/
icon={
icon ? (
<span
css={css`
display: inline-flex;
align-items: center;
+ ${children ? `margin-inline-end: ${theme.paddingXS}px;` : ''}
Review Comment:
**Suggestion:** The spacing is gated by a truthy check on `children`, which
treats valid renderable values like `0` as false. In that case the icon/text
gap is skipped even though text is rendered, so labels with numeric zero
content regress back to flush icon/text. Use a presence check that treats `0`
as content (for example, checking React children count or explicit
null/undefined) instead of a generic truthiness test. [incorrect condition
logic]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ Core Label component mis-handles numeric zero children.
- ⚠️ Any icon+Label used with 0 loses spacing.
- ⚠️ Visual inconsistency between zero and nonzero Label content.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. In the shared Label component at
`superset-frontend/packages/superset-ui-core/src/components/Label/index.tsx:73-108`,
note
that the icon wrapper span’s Emotion styles (lines 92-96) apply
`margin-inline-end` only
when `children` is truthy: ``${children ? `margin-inline-end:
${theme.paddingXS}px;` :
''}``.
2. In the Label unit tests at
`superset-frontend/packages/superset-ui-core/src/components/Label/Label.test.tsx:8-17`,
observe an existing test that renders a Label with an icon: `<Label
icon={<Icons.CheckCircleOutlined ... />}>labeled</Label>` (lines 8-12),
which exercises
the same icon wrapper path.
3. Render a Label with an icon and numeric zero content, for example in a
new test in
`Label.test.tsx` using the same import paths: `render(<Label
icon={<Icons.CheckCircleOutlined iconSize="m" />}>{0}</Label>);` — React
will render `0`
as visible text (numbers are valid ReactNode children).
4. When this code executes, `children` is the number `0`, so the condition
on line 95
evaluates to false and no `margin-inline-end` is injected into the icon
wrapper span; the
underlying Ant Design Tag still renders the icon and the `0` text inline,
but without the
spacing gap applied, the icon sits flush against the `0`, diverging from the
spacing
behavior for any non-falsy child (e.g., `'1'`, `'Cached'`, or timer strings).
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=2d3f06acb8184aadadf77ee825ee95ad&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
[](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=2d3f06acb8184aadadf77ee825ee95ad&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
*(Use Cmd/Ctrl + Click for best experience)*
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/packages/superset-ui-core/src/components/Label/index.tsx
**Line:** 95:95
**Comment:**
*Incorrect Condition Logic: The spacing is gated by a truthy check on
`children`, which treats valid renderable values like `0` as false. In that
case the icon/text gap is skipped even though text is rendered, so labels with
numeric zero content regress back to flush icon/text. Use a presence check that
treats `0` as content (for example, checking React children count or explicit
null/undefined) instead of a generic truthiness test.
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.
Once fix is implemented, also check other comments on the same PR, and ask
user if the user wants to fix the rest of the comments as well. if said yes,
then fetch all the comments validate the correctness and implement a minimal fix
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F42147&comment_hash=63eab4fc28fec3ee4bd1e6d50b4d5b5f9ed1756df4cacfc05cdb00e88e87e14a&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F42147&comment_hash=63eab4fc28fec3ee4bd1e6d50b4d5b5f9ed1756df4cacfc05cdb00e88e87e14a&reaction=dislike'>👎</a>
--
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]
