Skip to content

fix(MenuItemIcon): remove deprecated label prop#3262

Merged
rivka-ungar merged 4 commits intovibe4from
breaking-change/menuitem-remove-label-prop
Feb 26, 2026
Merged

fix(MenuItemIcon): remove deprecated label prop#3262
rivka-ungar merged 4 commits intovibe4from
breaking-change/menuitem-remove-label-prop

Conversation

@rivka-ungar
Copy link
Contributor

@rivka-ungar rivka-ungar commented Feb 25, 2026

User description

Summary

  • Remove deprecated label prop from internal MenuItemIcon component
  • Remove now-unused iconLabel/rightIconLabel derived variables from MenuItem
  • Update VIBE4_MIGRATION_GUIDE.md and VIBE4_CHANGELOG.md

Breaking Changes

  • MenuItemIcon.label prop removed (was already a no-op — accepted but never passed to the underlying Icon component)
  • MenuItem internal iconLabel / rightIconLabel variables removed

Note: The MenuItem.label prop (visual badge like "New" or "Beta") is not affected.

Migration

No action required for MenuItem users. The removed label prop on MenuItemIcon had no effect. If you used MenuItemIcon directly (internal component, not exported from @vibe/core), remove any label prop.

Task Link

Monday.com Task

Test Plan

  • All 7 MenuItem test files pass (38 tests)
  • Lint passes (0 errors)

🤖 Generated with Claude Code


PR Type

Bug fix


Description

  • Remove deprecated label prop from MenuItemIcon component

  • Remove unused iconLabel/rightIconLabel variables from MenuItem

  • Remove unused rightIconAriaLabel prop from MenuItem interface

  • Allow aria-label to pass through to DOM for accessibility

  • Update migration guide and changelog documentation


Diagram Walkthrough

flowchart LR
  A["MenuItemIcon.types.ts"] -- "remove label prop" --> B["Cleanup deprecated API"]
  C["MenuItem.tsx"] -- "remove label usage" --> B
  C -- "remove rightIconAriaLabel" --> B
  C -- "let aria-label flow through" --> D["Improved accessibility"]
  E["Documentation"] -- "update guides" --> F["Migration clarity"]
Loading

File Walkthrough

Relevant files
Breaking change
MenuItemIcon.types.ts
Remove deprecated label prop from interface                           

packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.types.ts

  • Remove deprecated label prop from MenuItemIconProps interface
  • Remove associated JSDoc comments and deprecation notice
+0/-6     
MenuItem.tsx
Remove label props and cleanup MenuItem component               

packages/core/src/components/Menu/MenuItem/MenuItem.tsx

  • Remove rightIconAriaLabel prop from MenuItemProps interface
  • Remove rightIconAriaLabel from destructuring in component
  • Remove aria-label from destructuring to allow passthrough
  • Remove iconLabel and rightIconLabel derived variables
  • Remove label prop from both MenuItemIcon component usages
+0/-12   
MenuItemIcon.tsx
Remove label parameter from component                                       

packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.tsx

  • Remove label parameter from destructuring
  • Remove eslint-disable comment for unused variable
+0/-2     
Documentation
VIBE4_CHANGELOG.md
Document MenuItem label prop removal                                         

VIBE4_CHANGELOG.md

  • Add MenuItem section documenting removal of deprecated label prop
  • Document reason: prop was a no-op never passed to Icon
  • Note no migration needed for MenuItem users
  • Mark as manual migration (no-op removal)
+7/-0     
VIBE4_MIGRATION_GUIDE.md
Add MenuItem migration guide section                                         

VIBE4_MIGRATION_GUIDE.md

  • Add MenuItem section with migration instructions
  • Clarify that MenuItem.label badge prop is unaffected
  • Explain that MenuItemIcon.label was a no-op
  • Provide guidance for direct MenuItemIcon users
+9/-0     

The MenuItemIcon internal component had a label prop marked for removal
in the next major version (TODO: [breaking] remove in next major).
The prop was a no-op — accepted but never passed to the underlying Icon.

Changes:
- MenuItemIcon.types.ts: remove deprecated label prop
- MenuItemIcon.tsx: remove label from destructuring + eslint-disable comment
- MenuItem.tsx: remove label={iconLabel} and label={rightIconLabel} usages;
  remove now-unused iconLabel and rightIconLabel derived variables
- Update VIBE4_MIGRATION_GUIDE.md and VIBE4_CHANGELOG.md

BREAKING CHANGE: MenuItemIcon.label prop removed (was a no-op).
No migration needed for MenuItem users.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
@qodo-free-for-open-source-projects
Copy link
Contributor

qodo-free-for-open-source-projects bot commented Feb 25, 2026

PR Reviewer Guide 🔍

(Review updated until commit f5eab62)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

A11y Regression

The previous derived iconLabel/rightIconLabel logic ensured an accessible label fallback (e.g., when title is a React component). After removing rightIconAriaLabel and the derived labels, validate that icons still have an accessible name (via aria-label, title, or other mechanism) in all variants, especially when title is not a plain string.

    disableReason,
    selected = false,
    key,
    children,
    tooltipContent,
    tooltipPosition = "right",
    tooltipShowDelay = 300,
    tooltipProps,
    ...baseMenuProps
  }: MenuItemProps | MenuItemTitleComponentProps,
  ref: ForwardedRef<HTMLElement>
) => {
  const titleRef = useRef();

  const isTitleHoveredAndOverflowing = useIsOverflowing({ ref: titleRef });
  const shouldShowTooltip = isTitleHoveredAndOverflowing || disabled || tooltipContent;

  const finalTooltipContent = useMemo(() => {
    if (disabled) return disableReason;
    if (tooltipContent) return tooltipContent;
API Break

rightIconAriaLabel was removed from MenuItemProps. Confirm this prop was not part of the public API (or update public docs/types accordingly) and that consumers have an alternative way to label the right icon for accessibility if needed.

/**
 * The background color of the right icon.
 */
rightIconBackgroundColor?: string;
/**
 * Class name applied to the icon wrapper.
 */
rightIconWrapperClassName?: string;
/**
 * If true, the menu item is disabled.
 */
disabled?: boolean;
/**
Prop Passthrough

aria-label is no longer destructured and is passed through via ...baseMenuProps. Verify baseMenuProps is ultimately spread onto a DOM element (not an intermediate component that filters props), so the aria-label actually reaches the rendered element without React unknown-prop warnings.

  disabled={disabled}
  selected={selected}
  {...baseMenuProps}
>
  {Boolean(icon) && (
    <MenuItemIcon
      icon={icon}
      type={iconType}
      disabled={disabled}
      selected={selected}
      backgroundColor={iconBackgroundColor}
      wrapperClassName={iconWrapperClassName}
    />

@github-actions
Copy link
Contributor

github-actions bot commented Feb 25, 2026

📦 Bundle Size Analysis

✅ No bundle size changes detected.

Unchanged Components
Component Base PR Diff
@vibe/button 17.74KB 17.75KB +9B 🔺
@vibe/clickable 6.07KB 6.05KB -21B 🟢
@vibe/dialog 53.85KB 53.8KB -48B 🟢
@vibe/icon-button 68.09KB 67.96KB -134B 🟢
@vibe/icon 13.01KB 12.99KB -19B 🟢
@vibe/layer 2.96KB 2.96KB 0B ➖
@vibe/layout 10.56KB 10.54KB -26B 🟢
@vibe/loader 5.8KB 5.82KB +16B 🔺
@vibe/tooltip 62.98KB 62.96KB -18B 🟢
@vibe/typography 65.4KB 65.45KB +50B 🔺
Accordion 6.35KB 6.34KB -16B 🟢
AccordionItem 68.13KB 68.19KB +55B 🔺
AlertBanner 72.93KB 72.89KB -40B 🟢
AlertBannerButton 19.23KB 19.24KB +9B 🔺
AlertBannerLink 15.56KB 15.53KB -27B 🟢
AlertBannerText 65.53KB 65.44KB -87B 🟢
AttentionBox 74.53KB 74.46KB -66B 🟢
AttentionBoxLink 15.41KB 15.4KB -10B 🟢
Avatar 68.36KB 68.26KB -111B 🟢
AvatarGroup 96.04KB 96.06KB +14B 🔺
Badge 43.53KB 43.56KB +26B 🔺
BreadcrumbItem 66.26KB 66.13KB -139B 🟢
BreadcrumbMenu 70.3KB 70.33KB +25B 🔺
BreadcrumbMenuItem 79.45KB 79.32KB -141B 🟢
BreadcrumbsBar 5.81KB 5.78KB -31B 🟢
ButtonGroup 70.25KB 70.28KB +33B 🔺
Checkbox 68.43KB 68.47KB +34B 🔺
Chips 77.18KB 77.05KB -131B 🟢
ColorPicker 76.35KB 76.32KB -27B 🟢
ColorPickerContent 75.57KB 75.49KB -76B 🟢
Combobox 86.37KB 86.46KB +98B 🔺
Counter 42.49KB 42.42KB -72B 🟢
DatePicker 134.59KB 134.39KB -204B 🟢
Divider 5.56KB 5.58KB +22B 🔺
Dropdown 125.94KB 125.9KB -42B 🟢
menu 59.95KB 59.94KB -13B 🟢
option 93.15KB 93.1KB -49B 🟢
singleValue 93.09KB 93KB -93B 🟢
EditableHeading 68.35KB 68.33KB -22B 🟢
EditableText 68.26KB 68.22KB -37B 🟢
EmptyState 72.75KB 72.66KB -93B 🟢
ExpandCollapse 68KB 67.91KB -94B 🟢
FormattedNumber 5.91KB 5.94KB +33B 🔺
GridKeyboardNavigationContext 4.66KB 4.65KB -5B 🟢
HiddenText 5.45KB 5.45KB -4B 🟢
Info 74.34KB 74.27KB -72B 🟢
Label 70.43KB 70.33KB -110B 🟢
LegacyModal 76.89KB 76.81KB -81B 🟢
LegacyModalContent 66.82KB 66.85KB +38B 🔺
LegacyModalFooter 3.45KB 3.45KB 0B ➖
LegacyModalFooterButtons 20.68KB 20.66KB -28B 🟢
LegacyModalHeader 72.97KB 72.89KB -83B 🟢
Link 15.23KB 15.21KB -22B 🟢
List 74.99KB 74.91KB -83B 🟢
ListItem 67.34KB 67.34KB -8B 🟢
ListItemAvatar 68.57KB 68.51KB -53B 🟢
ListItemIcon 14.21KB 14.17KB -45B 🟢
ListTitle 66.75KB 66.82KB +69B 🔺
Menu 8.71KB 8.72KB +10B 🔺
MenuDivider 5.65KB 5.65KB +5B 🔺
MenuGridItem 7.24KB 7.21KB -30B 🟢
MenuItem 79.22KB 79.28KB +61B 🔺
MenuItemButton 72.2KB 72.28KB +75B 🔺
MenuTitle 67.21KB 67.15KB -64B 🟢
MenuButton 67.8KB 67.81KB +7B 🔺
Modal 111.93KB 111.93KB +1B 🔺
ModalContent 4.77KB 4.77KB +2B 🔺
ModalHeader 67.64KB 67.51KB -125B 🟢
ModalMedia 7.77KB 7.75KB -11B 🟢
ModalFooter 69.48KB 69.47KB -13B 🟢
ModalFooterWizard 70.48KB 70.5KB +28B 🔺
ModalBasicLayout 9.25KB 9.23KB -15B 🟢
ModalMediaLayout 8.32KB 8.31KB -19B 🟢
ModalSideBySideLayout 6.36KB 6.38KB +26B 🔺
MultiStepIndicator 53.31KB 53.29KB -22B 🟢
NumberField 74.87KB 74.89KB +23B 🔺
LinearProgressBar 7.49KB 7.48KB -6B 🟢
RadioButton 67.59KB 67.65KB +63B 🔺
Search 72.45KB 72.41KB -35B 🟢
Skeleton 6.18KB 6.22KB +41B 🔺
Slider 75.97KB 75.87KB -105B 🟢
SplitButton 68.83KB 68.82KB -17B 🟢
SplitButtonMenu 8.89KB 8.88KB -7B 🟢
Steps 73.52KB 73.51KB -9B 🟢
Table 7.33KB 7.32KB -10B 🟢
TableBody 68.67KB 68.65KB -12B 🟢
TableCell 66.9KB 66.97KB +69B 🔺
TableContainer 5.36KB 5.37KB +14B 🔺
TableHeader 5.69KB 5.71KB +17B 🔺
TableHeaderCell 74.24KB 74.15KB -94B 🟢
TableRow 5.63KB 5.63KB +3B 🔺
TableRowMenu 70.62KB 70.58KB -49B 🟢
TableVirtualizedBody 73.42KB 73.29KB -134B 🟢
Tab 65.54KB 65.53KB -8B 🟢
TabList 8.97KB 8.94KB -28B 🟢
TabPanel 5.34KB 5.34KB -3B 🟢
TabPanels 5.97KB 5.96KB -12B 🟢
TabsContext 5.55KB 5.56KB +18B 🔺
TextArea 68.08KB 67.99KB -91B 🟢
TextField 71.36KB 71.34KB -24B 🟢
TextWithHighlight 65.86KB 65.87KB +8B 🔺
ThemeProvider 4.68KB 4.69KB +7B 🔺
Tipseen 73.16KB 73.13KB -30B 🟢
TipseenContent 73.65KB 73.67KB +17B 🔺
TipseenImage 73.49KB 73.57KB +81B 🔺
TipseenMedia 73.39KB 73.44KB +55B 🔺
TipseenWizard 76KB 75.94KB -60B 🟢
Toast 76.19KB 76.24KB +56B 🔺
ToastButton 19.07KB 19.03KB -45B 🟢
ToastLink 15.37KB 15.37KB +3B 🔺
Toggle 68.3KB 68.37KB +73B 🔺
TransitionView 37.69KB 37.73KB +41B 🔺
VirtualizedGrid 12.63KB 12.67KB +39B 🔺
VirtualizedList 12.42KB 12.4KB -14B 🟢
AttentionBox (Next) 76.41KB 76.43KB +17B 🔺
DatePicker (Next) 114.46KB 114.52KB +57B 🔺
Dialog (Next) 52.71KB 52.7KB -9B 🟢
Dropdown (Next) 97.57KB 97.41KB -165B 🟢
List (Next) 8.2KB 8.2KB +3B 🔺
ListItem (Next) 71.66KB 71.57KB -88B 🟢
ListTitle (Next) 67.08KB 67.04KB -44B 🟢

📊 Summary:

  • Total Base Size: 5.88MB
  • Total PR Size: 5.88MB
  • Total Difference: 2.37KB

@rivka-ungar rivka-ungar self-assigned this Feb 26, 2026
rivka-ungar and others added 2 commits February 26, 2026 14:04
…rough

- Remove rightIconAriaLabel from props interface and destructuring
  since it's no longer consumed after label removal
- Stop swallowing aria-label — let it flow through baseMenuProps
  to the DOM for proper accessibility support

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@rivka-ungar rivka-ungar changed the title breaking: remove deprecated label prop from MenuItemIcon fix(MenuItemIcon): remove deprecated label prop Feb 26, 2026
@rivka-ungar rivka-ungar merged commit 1e37c32 into vibe4 Feb 26, 2026
14 checks passed
@rivka-ungar rivka-ungar deleted the breaking-change/menuitem-remove-label-prop branch February 26, 2026 13:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant