breaking: remove onClick and clickable from CustomSvgIcon#3264
Open
rivka-ungar wants to merge 5 commits intovibe4from
Open
breaking: remove onClick and clickable from CustomSvgIcon#3264rivka-ungar wants to merge 5 commits intovibe4from
rivka-ungar wants to merge 5 commits intovibe4from
Conversation
SVG icons should be purely decorative. The onClick and clickable props
are removed — wrap CustomSvgIcon in a button element for clickable patterns.
Changes:
- CustomSvgIcon.tsx: remove onClick and clickable from props and implementation
- Icon.tsx: remove onClick={onClickCallback} passed to CustomSvgIcon
- AvatarBadge.tsx: remove clickable={tabIndex === -1} from CustomSvgIcon usage
- Add v3-to-v4 codemod (CustomSvgIcon-component-migration) with 5 tests
- Update VIBE4_MIGRATION_GUIDE.md and VIBE4_CHANGELOG.md
BREAKING CHANGE: CustomSvgIcon.onClick and CustomSvgIcon.clickable removed.
Use a button wrapper for clickable SVG icon patterns.
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Contributor
PR Reviewer Guide 🔍(Review updated until commit cedcdcf)Here are some key observations to aid the review process:
|
After removing onClick/clickable from CustomSvgIcon, the hook call was missing the required isClickable parameter causing a build error. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The codemod removed onClick/clickable props without adding a clickable wrapper, which would silently break clickable icon UIs. Users should manually wrap with a clickable element instead. - Remove CustomSvgIcon-component-migration codemod and tests - Update migration guide: no codemod, manual wrapper needed - Update changelog: mark as manual migration Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
📦 Bundle Size Analysis ✅ No bundle size changes detected. Unchanged Components
📊 Summary:
|
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
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.
User description
Summary
onClickandclickableprops fromCustomSvgIconIcon.tsxto not passonClicktoCustomSvgIconAvatarBadge.tsxto removeclickablefromCustomSvgIconusageCustomSvgIcon-component-migration) with 5 testsVIBE4_MIGRATION_GUIDE.mdandVIBE4_CHANGELOG.mdBreaking Changes
CustomSvgIcon.onClickremovedCustomSvgIcon.clickableremoved<button>)Migration
The codemod removes the props automatically; you'll need to add the button wrapper manually.
Task Link
Monday.com Task
Test Plan
🤖 Generated with Claude Code
PR Type
Bug fix, Enhancement
Description
Remove
onClickandclickableprops fromCustomSvgIconcomponentUpdate
Icon.tsxandAvatarBadge.tsxto remove prop usageChange
blurOnMouseUpdefault from true to false in Button and ButtonGroupUpdate migration guide and changelog with manual migration instructions
Fix
tabIndextype from string to number in ColorPickerItemComponentDiagram Walkthrough
File Walkthrough
CustomSvgIcon.tsx
Remove onClick and clickable propspackages/components/icon/src/Icon/CustomSvgIcon/CustomSvgIcon.tsx
onClickcallback prop from interface and implementationclickableboolean prop from interface and implementationuseIconScreenReaderAccessPropscall to always passisClickable: falseonClickattribute from SVG component renderingIcon.tsx
Stop passing onClick to CustomSvgIconpackages/components/icon/src/Icon/Icon.tsx
onClick={onClickCallback}from CustomSvgIcon component usageAvatarBadge.tsx
Remove clickable prop from CustomSvgIconpackages/core/src/components/Avatar/AvatarBadge.tsx
clickable={tabIndex === -1}prop from CustomSvgIcon usageColorPickerItemComponent.tsx
Fix tabIndex type from string to numberpackages/core/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx
tabIndexfrom string"-1"to numeric-1Button.tsx
Change blurOnMouseUp default to falsepackages/components/button/src/Button/Button.tsx
blurOnMouseUpdefault value fromtruetofalseButtonGroup.tsx
Change blurOnMouseUp default to falsepackages/core/src/components/ButtonGroup/ButtonGroup.tsx
blurOnMouseUpdefault value fromtruetofalseVIBE4_MIGRATION_GUIDE.md
Add CustomSvgIcon migration documentationVIBE4_MIGRATION_GUIDE.md
VIBE4_CHANGELOG.md
Document CustomSvgIcon breaking changeVIBE4_CHANGELOG.md