[WEB-4561] fix: SVG attributes in react components#7470
[WEB-4561] fix: SVG attributes in react components#7470sriramveeraghanta merged 4 commits intopreviewfrom
Conversation
* fix: replace invalid --env-file with dotenv-cli for tsup onSuccess * fix: replace invalid --env-file usage in start script and move dotenv-cli to dependencies * chor: update SVG attributes to camelCase for JSX compatibility * chor: update SVG attributes to camelCase
WalkthroughThis change standardizes SVG attribute names in various React components from kebab-case (e.g., Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Suggested labels
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
sriramveeraghanta
changed the title
|
Pull Request Linked with Plane Work Items
Comment Automatically Generated by Plane |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
packages/ui/src/icons/off-track-icon.tsx (1)
7-7: Consider generating a uniqueclipPathid to avoid DOM-id collisions
clipPath="url(#clip0_365_7595)"works, but this hard-coded id will be duplicated if the icon is rendered multiple times on the same page, resulting in unexpected styling conflicts.
A lightweight fix is to derive the id viaReact.useId()and interpolate it in both the<g>reference and the<defs>section.-export const OffTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => ( - <svg …> - <g clipPath="url(#clip0_365_7595)"> +export const OffTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => { + const clipId = React.useId(); + return ( + <svg …> + <g clipPath={`url(#${clipId})`}> … - <defs> - <clipPath id="clip0_365_7595"> + <defs> + <clipPath id={clipId}> … - </clipPath> - </defs> - </svg> -); + </clipPath> + </defs> + </svg> + ); +};This preserves behaviour while eliminating id clashes.
packages/ui/src/icons/cycle/circle-dot-full-icon.tsx (1)
7-8:strokeWidthhas no visible effect without astrokecolourOn the inner circle you keep
strokeWidth="0.5"but drop thestrokeattribute, so the stroke won’t render in most browsers. Either removestrokeWidthor re-add a stroke colour:- <circle cx="12" cy="12" r="6.25" fill="currentColor" strokeWidth="0.5" /> + <circle cx="12" cy="12" r="6.25" fill="currentColor" stroke="currentColor" strokeWidth="0.5" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (22)
packages/ui/src/form-fields/checkbox.tsx(1 hunks)packages/ui/src/form-fields/input-color-picker.tsx(2 hunks)packages/ui/src/icons/activity-icon.tsx(1 hunks)packages/ui/src/icons/ai-icon.tsx(1 hunks)packages/ui/src/icons/at-risk-icon.tsx(1 hunks)packages/ui/src/icons/center-panel-icon.tsx(1 hunks)packages/ui/src/icons/cycle/circle-dot-full-icon.tsx(1 hunks)packages/ui/src/icons/discord-icon.tsx(1 hunks)packages/ui/src/icons/done-icon.tsx(1 hunks)packages/ui/src/icons/favorite-folder-icon.tsx(1 hunks)packages/ui/src/icons/in-progress-icon.tsx(1 hunks)packages/ui/src/icons/info-icon.tsx(1 hunks)packages/ui/src/icons/lead-icon.tsx(1 hunks)packages/ui/src/icons/multiple-sticky.tsx(1 hunks)packages/ui/src/icons/off-track-icon.tsx(1 hunks)packages/ui/src/icons/on-track-icon.tsx(1 hunks)packages/ui/src/icons/pending-icon.tsx(1 hunks)packages/ui/src/icons/plane-icon.tsx(1 hunks)packages/ui/src/icons/planned-icon.tsx(1 hunks)packages/ui/src/icons/sticky-note-icon.tsx(1 hunks)packages/ui/src/icons/updates-icon.tsx(1 hunks)packages/ui/src/icons/wiki-icon.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: lifeiscontent
PR: makeplane/plane#7164
File: packages/ui/.storybook/main.ts:24-47
Timestamp: 2025-06-04T16:22:44.344Z
Learning: In packages/ui/.storybook/main.ts, the webpackFinal function intentionally overrides the CSS loader strategy by finding and replacing existing CSS rules. This is a temporary workaround for a known upstream issue in Storybook's CSS handling that has been communicated to the Storybook maintainers. The current implementation should not be changed until the upstream issue is resolved.
packages/ui/src/icons/done-icon.tsx (1)
Learnt from: lifeiscontent
PR: #7164
File: packages/ui/.storybook/main.ts:24-47
Timestamp: 2025-06-04T16:22:44.344Z
Learning: In packages/ui/.storybook/main.ts, the webpackFinal function intentionally overrides the CSS loader strategy by finding and replacing existing CSS rules. This is a temporary workaround for a known upstream issue in Storybook's CSS handling that has been communicated to the Storybook maintainers. The current implementation should not be changed until the upstream issue is resolved.
packages/ui/src/icons/in-progress-icon.tsx (1)
Learnt from: lifeiscontent
PR: #7164
File: packages/ui/.storybook/main.ts:24-47
Timestamp: 2025-06-04T16:22:44.344Z
Learning: In packages/ui/.storybook/main.ts, the webpackFinal function intentionally overrides the CSS loader strategy by finding and replacing existing CSS rules. This is a temporary workaround for a known upstream issue in Storybook's CSS handling that has been communicated to the Storybook maintainers. The current implementation should not be changed until the upstream issue is resolved.
packages/ui/src/icons/plane-icon.tsx (1)
Learnt from: vamsikrishnamathala
PR: #7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias @/plane-web resolves to the ce directory, making imports like @/plane-web/hooks/use-notification-preview correctly resolve to files in web/ce/hooks/.
packages/ui/src/icons/multiple-sticky.tsx (1)
Learnt from: lifeiscontent
PR: #7164
File: packages/ui/.storybook/main.ts:24-47
Timestamp: 2025-06-04T16:22:44.344Z
Learning: In packages/ui/.storybook/main.ts, the webpackFinal function intentionally overrides the CSS loader strategy by finding and replacing existing CSS rules. This is a temporary workaround for a known upstream issue in Storybook's CSS handling that has been communicated to the Storybook maintainers. The current implementation should not be changed until the upstream issue is resolved.
packages/ui/src/form-fields/input-color-picker.tsx (1)
Learnt from: lifeiscontent
PR: #7164
File: packages/ui/.storybook/main.ts:24-47
Timestamp: 2025-06-04T16:22:44.344Z
Learning: In packages/ui/.storybook/main.ts, the webpackFinal function intentionally overrides the CSS loader strategy by finding and replacing existing CSS rules. This is a temporary workaround for a known upstream issue in Storybook's CSS handling that has been communicated to the Storybook maintainers. The current implementation should not be changed until the upstream issue is resolved.
🔇 Additional comments (27)
packages/ui/src/icons/planned-icon.tsx (4)
14-14: Correct JSX attribute casing forclipPath.Renaming
clip-path→clipPathaligns with React’s SVG attribute requirements. ✔️
16-17:fillRule/clipRuleconverted to camelCase.React now parses these attributes correctly; no further action needed.
22-23: Consistent attribute casing on the second<path>element.Change mirrors the first path; maintains consistency across the component.
28-29: Third<path>element attribute fix looks good.All SVG attributes are now React-compliant; component should render without warnings.
packages/ui/src/icons/off-track-icon.tsx (1)
9-10: Attribute-name change is correct
fillRule/clipRuleare the proper camel-case JSX equivalents of the SVG attributes and fix React warnings. Nothing else to address here.packages/ui/src/icons/pending-icon.tsx (2)
15-16: Corrected to camelCase – resolves React warnings
Switchingfill-rule→fillRuleandclip-rule→clipRulebrings the SVG props in line with JSX naming conventions, silencing React console warnings. Looks good.
21-22: Second<path>updated consistently – LGTM
The same attribute-name correction is applied to the second<path>, keeping the component consistent. No further action required.packages/ui/src/icons/multiple-sticky.tsx (1)
16-17: SVG attributes correctly camel-cased – LGTMThe switch to
fillRule/clipRuleis the proper JSX form and fixes the React warning without altering rendering.Also applies to: 22-23
packages/ui/src/icons/discord-icon.tsx (1)
14-14: Attribute camel-cased – looks good
clipPathis the correct JSX spelling and resolves the prior React console warning.packages/ui/src/icons/ai-icon.tsx (1)
14-14: Correct JSX attribute
clipPathis now compliant with React; no further action needed.packages/ui/src/icons/plane-icon.tsx (1)
19-19:clipPathupdate confirmedGood catch – this removes the invalid
clip-pathattribute for JSX.packages/ui/src/icons/sticky-note-icon.tsx (1)
26-27: LGTM! Correct SVG attribute conversion for React JSX.The conversion from
fill-ruleandclip-ruletofillRuleandclipRuleproperly aligns with React's JSX naming conventions for SVG properties.packages/ui/src/icons/wiki-icon.tsx (1)
14-14: LGTM! Correct SVG attribute conversion for React JSX.The conversion from
clip-pathtoclipPathproperly follows React's JSX naming conventions for SVG properties.packages/ui/src/icons/updates-icon.tsx (1)
8-9: LGTM! Correct SVG attribute conversion for React JSX.The conversion from
fill-ruleandclip-ruletofillRuleandclipRuleproperly aligns with React's JSX naming conventions for SVG properties.packages/ui/src/icons/center-panel-icon.tsx (2)
17-19: LGTM! Correct SVG attribute conversion for React JSX.The conversion of stroke attributes from kebab-case (
stroke-width,stroke-linecap,stroke-linejoin) to camelCase (strokeWidth,strokeLinecap,strokeLinejoin) properly follows React's JSX naming conventions.
25-27: LGTM! Consistent SVG attribute conversion.The stroke attribute conversions are applied consistently across both path elements, maintaining proper React JSX compliance.
packages/ui/src/form-fields/checkbox.tsx (1)
81-81: LGTM! Correct SVG attribute conversion for React JSX.The conversion of stroke attributes from kebab-case to camelCase (
strokeWidth,strokeLinecap,strokeLinejoin) properly aligns with React's JSX naming conventions for SVG properties.packages/ui/src/icons/info-icon.tsx (1)
11-13: Correct JSX-compliant attribute names – good catch.
Switching tostrokeWidth,strokeLinecap, andstrokeLinejoineliminates the React warning and is semantically correct.packages/ui/src/icons/done-icon.tsx (1)
14-18: Attributes correctly camel-cased – looks good.
strokeWidth,fillRule, andclipRuleare now React-friendly. No further action needed.packages/ui/src/icons/activity-icon.tsx (1)
7-13: Camel-cased SVG attributes – good.packages/ui/src/icons/at-risk-icon.tsx (1)
7-11: Attribute names correctly updated to React format.packages/ui/src/icons/lead-icon.tsx (2)
11-11: LGTM! SVG attribute standardization.The
clip-pathtoclipPathconversion aligns with React's JSX camelCase naming requirements.
14-15: LGTM! SVG attribute standardization.The conversion of
fill-ruletofillRuleandclip-ruletoclipRulefollows React's JSX camelCase conventions for SVG attributes.packages/ui/src/form-fields/input-color-picker.tsx (2)
2-2: LGTM! Import organization improvement.The reordering of imports with React import placement and component grouping improves code organization without affecting functionality.
Also applies to: 7-9
74-76: LGTM! SVG attribute standardization.The stroke-related attributes have been correctly converted to camelCase (
strokeWidth,strokeLinecap,strokeLinejoin) for React JSX compliance.packages/ui/src/icons/on-track-icon.tsx (2)
7-7: LGTM! SVG attribute standardization.The
clip-pathtoclipPathconversion follows React's JSX camelCase requirements.
9-10: LGTM! Consistent SVG attribute standardization across all path elements.All instances of
fill-ruleandclip-rulehave been correctly converted tofillRuleandclipRulethroughout the component, ensuring consistent React JSX compliance.Also applies to: 15-16, 21-22, 27-28
* chore: svg attribute fix (#7446) * fix: replace invalid --env-file with dotenv-cli for tsup onSuccess * fix: replace invalid --env-file usage in start script and move dotenv-cli to dependencies * chor: update SVG attributes to camelCase for JSX compatibility * chor: update SVG attributes to camelCase * fix: removed dontenv-cli * fix: svg attibute fixes * chore: minor attribute customizations --------- Co-authored-by: Donal Noye <68372408+Donal-Noye@users.noreply.github.com>
3 participants
Description
Type of Change
Summary by CodeRabbit