From 35d47fd8143175ca46f99f2c253ff6feed9a9ab7 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Tue, 29 Sep 2026 11:50:29 +0530 Subject: [PATCH 1/4] Components: Rename inner functions that shadow their component typescript-eslint 8.60.1+ reports `const Foo = forwardRef( function Foo() {} )` under no-shadow. Follow the documented `UnforwardedFoo` convention. --- packages/components/src/composite/group-label.tsx | 2 +- packages/components/src/composite/group.tsx | 2 +- packages/components/src/composite/hover.tsx | 2 +- packages/components/src/composite/index.tsx | 2 +- packages/components/src/composite/item.tsx | 2 +- packages/components/src/composite/row.tsx | 2 +- packages/components/src/composite/typeahead.tsx | 2 +- packages/components/src/menu/checkbox-item.tsx | 2 +- packages/components/src/menu/group.tsx | 2 +- packages/components/src/menu/item-help-text.tsx | 2 +- packages/components/src/menu/item-label.tsx | 2 +- packages/components/src/menu/item.tsx | 2 +- packages/components/src/menu/popover.tsx | 5 ++++- packages/components/src/menu/radio-item.tsx | 2 +- packages/components/src/menu/separator.tsx | 2 +- packages/components/src/menu/stories/index.story.tsx | 8 ++++---- packages/components/src/menu/submenu-trigger-item.tsx | 2 +- packages/components/src/menu/trigger-button.tsx | 5 ++++- packages/components/src/tabs/index.tsx | 4 ++-- packages/components/src/tabs/tab.tsx | 5 ++++- packages/components/src/tabs/tablist.tsx | 2 +- packages/components/src/tabs/tabpanel.tsx | 2 +- 22 files changed, 35 insertions(+), 26 deletions(-) diff --git a/packages/components/src/composite/group-label.tsx b/packages/components/src/composite/group-label.tsx index 6f8783789d6f7d..354384ba4ade48 100644 --- a/packages/components/src/composite/group-label.tsx +++ b/packages/components/src/composite/group-label.tsx @@ -7,7 +7,7 @@ import type { CompositeGroupLabelProps } from './types'; export const CompositeGroupLabel = forwardRef< HTMLDivElement, WordPressComponentProps< CompositeGroupLabelProps, 'div', false > ->( function CompositeGroupLabel( props, ref ) { +>( function UnforwardedCompositeGroupLabel( props, ref ) { const context = useCompositeContext(); const isWithinGroup = useCompositeGroupContext(); diff --git a/packages/components/src/composite/group.tsx b/packages/components/src/composite/group.tsx index 9d10a92208a0b2..c2adeba605a4b8 100644 --- a/packages/components/src/composite/group.tsx +++ b/packages/components/src/composite/group.tsx @@ -7,7 +7,7 @@ import type { CompositeGroupProps } from './types'; export const CompositeGroup = forwardRef< HTMLDivElement, WordPressComponentProps< CompositeGroupProps, 'div', false > ->( function CompositeGroup( props, ref ) { +>( function UnforwardedCompositeGroup( props, ref ) { const context = useCompositeContext(); const { children, ...restProps } = props; diff --git a/packages/components/src/composite/hover.tsx b/packages/components/src/composite/hover.tsx index 4f2f0f873dcc7c..3126433c4d340c 100644 --- a/packages/components/src/composite/hover.tsx +++ b/packages/components/src/composite/hover.tsx @@ -7,7 +7,7 @@ import type { CompositeHoverProps } from './types'; export const CompositeHover = forwardRef< HTMLDivElement, WordPressComponentProps< CompositeHoverProps, 'div', false > ->( function CompositeHover( props, ref ) { +>( function UnforwardedCompositeHover( props, ref ) { const context = useCompositeContext(); // @ts-expect-error The store prop is undocumented and only used by the diff --git a/packages/components/src/composite/index.tsx b/packages/components/src/composite/index.tsx index 91b7a90e19743c..de882bdaca0a4b 100644 --- a/packages/components/src/composite/index.tsx +++ b/packages/components/src/composite/index.tsx @@ -39,7 +39,7 @@ export const Composite = Object.assign( forwardRef< HTMLDivElement, WordPressComponentProps< CompositeProps, 'div', false > - >( function Composite( + >( function UnforwardedComposite( { // Composite store props activeId, diff --git a/packages/components/src/composite/item.tsx b/packages/components/src/composite/item.tsx index 728603c605e59a..166f78526133ba 100644 --- a/packages/components/src/composite/item.tsx +++ b/packages/components/src/composite/item.tsx @@ -8,7 +8,7 @@ import type { CompositeItemProps } from './types'; export const CompositeItem = forwardRef< HTMLButtonElement, WordPressComponentProps< CompositeItemProps, 'button', false > ->( function CompositeItem( props, ref ) { +>( function UnforwardedCompositeItem( props, ref ) { const context = useCompositeContext(); // @ts-expect-error The store prop is undocumented and only used by the diff --git a/packages/components/src/composite/row.tsx b/packages/components/src/composite/row.tsx index affa120129163a..54007a8b3562e9 100644 --- a/packages/components/src/composite/row.tsx +++ b/packages/components/src/composite/row.tsx @@ -7,7 +7,7 @@ import type { CompositeRowProps } from './types'; export const CompositeRow = forwardRef< HTMLDivElement, WordPressComponentProps< CompositeRowProps, 'div', false > ->( function CompositeRow( props, ref ) { +>( function UnforwardedCompositeRow( props, ref ) { const context = useCompositeContext(); // @ts-expect-error The store prop is undocumented and only used by the diff --git a/packages/components/src/composite/typeahead.tsx b/packages/components/src/composite/typeahead.tsx index c4efeaf7bdadeb..b6ea467440e88d 100644 --- a/packages/components/src/composite/typeahead.tsx +++ b/packages/components/src/composite/typeahead.tsx @@ -7,7 +7,7 @@ import type { CompositeTypeaheadProps } from './types'; export const CompositeTypeahead = forwardRef< HTMLDivElement, WordPressComponentProps< CompositeTypeaheadProps, 'div', false > ->( function CompositeTypeahead( props, ref ) { +>( function UnforwardedCompositeTypeahead( props, ref ) { const context = useCompositeContext(); // @ts-expect-error The store prop is undocumented and only used by the diff --git a/packages/components/src/menu/checkbox-item.tsx b/packages/components/src/menu/checkbox-item.tsx index 485ab8064102cd..7eb43e832d3d60 100644 --- a/packages/components/src/menu/checkbox-item.tsx +++ b/packages/components/src/menu/checkbox-item.tsx @@ -10,7 +10,7 @@ import { useMenuItemHideOnClick } from './use-menu-item-hide-on-click'; export const CheckboxItem = forwardRef< HTMLDivElement, WordPressComponentProps< CheckboxItemProps, 'div', false > ->( function CheckboxItem( +>( function UnforwardedCheckboxItem( { suffix, children, disabled = false, hideOnClick = false, ...props }, ref ) { diff --git a/packages/components/src/menu/group.tsx b/packages/components/src/menu/group.tsx index 61617dbe0d47a4..5d9e91e213ec03 100644 --- a/packages/components/src/menu/group.tsx +++ b/packages/components/src/menu/group.tsx @@ -7,7 +7,7 @@ import * as Styled from './styles'; export const Group = forwardRef< HTMLDivElement, WordPressComponentProps< GroupProps, 'div', false > ->( function Group( props, ref ) { +>( function UnforwardedGroup( props, ref ) { const menuContext = useContext( Context ); if ( ! menuContext?.store ) { diff --git a/packages/components/src/menu/item-help-text.tsx b/packages/components/src/menu/item-help-text.tsx index 8c7ad6e180bd0f..1cb596c0704d8c 100644 --- a/packages/components/src/menu/item-help-text.tsx +++ b/packages/components/src/menu/item-help-text.tsx @@ -6,7 +6,7 @@ import * as Styled from './styles'; export const ItemHelpText = forwardRef< HTMLSpanElement, WordPressComponentProps< { children: React.ReactNode }, 'span', true > ->( function ItemHelpText( props, ref ) { +>( function UnforwardedItemHelpText( props, ref ) { const menuContext = useContext( Context ); if ( ! menuContext?.store ) { diff --git a/packages/components/src/menu/item-label.tsx b/packages/components/src/menu/item-label.tsx index f74e652c7f776c..ab01bac3a68921 100644 --- a/packages/components/src/menu/item-label.tsx +++ b/packages/components/src/menu/item-label.tsx @@ -6,7 +6,7 @@ import * as Styled from './styles'; export const ItemLabel = forwardRef< HTMLSpanElement, WordPressComponentProps< { children: React.ReactNode }, 'span', true > ->( function ItemLabel( props, ref ) { +>( function UnforwardedItemLabel( props, ref ) { const menuContext = useContext( Context ); if ( ! menuContext?.store ) { diff --git a/packages/components/src/menu/item.tsx b/packages/components/src/menu/item.tsx index 70f69df6a497af..9dd3ce2f5295a8 100644 --- a/packages/components/src/menu/item.tsx +++ b/packages/components/src/menu/item.tsx @@ -8,7 +8,7 @@ import { useMenuItemHideOnClick } from './use-menu-item-hide-on-click'; export const Item = forwardRef< HTMLDivElement, WordPressComponentProps< ItemProps, 'div', false > ->( function Item( +>( function UnforwardedItem( { prefix, suffix, diff --git a/packages/components/src/menu/popover.tsx b/packages/components/src/menu/popover.tsx index 977257ee67dcd8..ca14b62c1a2237 100644 --- a/packages/components/src/menu/popover.tsx +++ b/packages/components/src/menu/popover.tsx @@ -13,7 +13,10 @@ import { Context } from './context'; export const Popover = forwardRef< HTMLDivElement, WordPressComponentProps< PopoverProps, 'div', false > ->( function Popover( { gutter, shift, modal = true, ...otherProps }, ref ) { +>( function UnforwardedPopover( + { gutter, shift, modal = true, ...otherProps }, + ref +) { const menuContext = useContext( Context ); // Extract the side from the applied placement — useful for animations. diff --git a/packages/components/src/menu/radio-item.tsx b/packages/components/src/menu/radio-item.tsx index 2de8164db8158d..e4644707737cd7 100644 --- a/packages/components/src/menu/radio-item.tsx +++ b/packages/components/src/menu/radio-item.tsx @@ -17,7 +17,7 @@ const radioCheck = ( export const RadioItem = forwardRef< HTMLDivElement, WordPressComponentProps< RadioItemProps, 'div', false > ->( function RadioItem( +>( function UnforwardedRadioItem( { suffix, children, disabled = false, hideOnClick = false, ...props }, ref ) { diff --git a/packages/components/src/menu/separator.tsx b/packages/components/src/menu/separator.tsx index dcde37083cb0c9..f5e3fd1b08f95f 100644 --- a/packages/components/src/menu/separator.tsx +++ b/packages/components/src/menu/separator.tsx @@ -7,7 +7,7 @@ import * as Styled from './styles'; export const Separator = forwardRef< HTMLHRElement, WordPressComponentProps< SeparatorProps, 'hr', false > ->( function Separator( props, ref ) { +>( function UnforwardedSeparator( props, ref ) { const menuContext = useContext( Context ); if ( ! menuContext?.store ) { diff --git a/packages/components/src/menu/stories/index.story.tsx b/packages/components/src/menu/stories/index.story.tsx index 522b8043a72ec5..01dd67e59d2046 100644 --- a/packages/components/src/menu/stories/index.story.tsx +++ b/packages/components/src/menu/stories/index.story.tsx @@ -167,7 +167,7 @@ export const WithSubmenu: StoryObj< typeof Menu > = { }; export const WithCheckboxes: StoryObj< typeof Menu > = { - render: function WithCheckboxes( props: Props ) { + render: function WithCheckboxesRender( props: Props ) { const [ isAChecked, setAChecked ] = useState( false ); const [ isBChecked, setBChecked ] = useState( true ); const [ multipleCheckboxesValue, setMultipleCheckboxesValue ] = @@ -317,7 +317,7 @@ export const WithCheckboxes: StoryObj< typeof Menu > = { }; export const WithRadios: StoryObj< typeof Menu > = { - render: function WithRadios( props: Props ) { + render: function WithRadiosRender( props: Props ) { const [ radioValue, setRadioValue ] = useState( 'two' ); const onRadioChange: React.ComponentProps< typeof Menu.RadioItem @@ -389,7 +389,7 @@ export const WithRadios: StoryObj< typeof Menu > = { }; export const WithModal: StoryObj< typeof Menu > = { - render: function WithModal( props: Props ) { + render: function WithModalRender( props: Props ) { const [ isModalOpen, setModalOpen ] = useState( false ); return ( @@ -566,7 +566,7 @@ export const ToolbarVariant: StoryObj< typeof Menu > = { }; export const InsideModal: StoryObj< typeof Menu > = { - render: function InsideModal( props: Props ) { + render: function InsideModalRender( props: Props ) { const [ isModalOpen, setModalOpen ] = useState( false ); return ( <> diff --git a/packages/components/src/menu/submenu-trigger-item.tsx b/packages/components/src/menu/submenu-trigger-item.tsx index 96ba7ceca51faf..f49eb6a76dc6e4 100644 --- a/packages/components/src/menu/submenu-trigger-item.tsx +++ b/packages/components/src/menu/submenu-trigger-item.tsx @@ -10,7 +10,7 @@ import * as Styled from './styles'; export const SubmenuTriggerItem = forwardRef< HTMLDivElement, WordPressComponentProps< ItemProps, 'div', false > ->( function SubmenuTriggerItem( { suffix, ...otherProps }, ref ) { +>( function UnforwardedSubmenuTriggerItem( { suffix, ...otherProps }, ref ) { const menuContext = useContext( Context ); if ( ! menuContext?.store.parent ) { diff --git a/packages/components/src/menu/trigger-button.tsx b/packages/components/src/menu/trigger-button.tsx index ff7d33339c3539..a97efbfbfd1918 100644 --- a/packages/components/src/menu/trigger-button.tsx +++ b/packages/components/src/menu/trigger-button.tsx @@ -7,7 +7,10 @@ import { Context } from './context'; export const TriggerButton = forwardRef< HTMLDivElement, WordPressComponentProps< TriggerButtonProps, 'button', false > ->( function TriggerButton( { children, disabled = false, ...props }, ref ) { +>( function UnforwardedTriggerButton( + { children, disabled = false, ...props }, + ref +) { const menuContext = useContext( Context ); if ( ! menuContext?.store ) { diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx index 7656c6771fd7d5..ce7d6973e93873 100644 --- a/packages/components/src/tabs/index.tsx +++ b/packages/components/src/tabs/index.tsx @@ -35,7 +35,7 @@ function internalToExternalTabId( * It is responsible for managing the state of the tabs, and rendering one instance of the `Tabs.TabList` component and one or more instances of the `Tab.TabPanel` component. */ export const Tabs = Object.assign( - function Tabs( { + function TabsRoot( { selectOnMove = true, defaultTabId, orientation = 'horizontal', @@ -46,7 +46,7 @@ export const Tabs = Object.assign( defaultActiveTabId, onActiveTabIdChange, }: TabsProps ) { - const instanceId = useInstanceId( Tabs, 'tabs' ); + const instanceId = useInstanceId( TabsRoot, 'tabs' ); const store = Ariakit.useTabStore( { selectOnMove, orientation, diff --git a/packages/components/src/tabs/tab.tsx b/packages/components/src/tabs/tab.tsx index 57d08b9b61af52..72f3d544f1eab5 100644 --- a/packages/components/src/tabs/tab.tsx +++ b/packages/components/src/tabs/tab.tsx @@ -13,7 +13,10 @@ import type { WordPressComponentProps } from '../context'; export const Tab = forwardRef< HTMLButtonElement, Omit< WordPressComponentProps< TabProps, 'button', false >, 'id' > ->( function Tab( { children, tabId, disabled, render, ...otherProps }, ref ) { +>( function UnforwardedTab( + { children, tabId, disabled, render, ...otherProps }, + ref +) { const { store, instanceId } = useTabsContext() ?? {}; if ( ! store ) { diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx index 128c834d2319fa..0cde2d47e23d80 100644 --- a/packages/components/src/tabs/tablist.tsx +++ b/packages/components/src/tabs/tablist.tsx @@ -59,7 +59,7 @@ function useScrollRectIntoView( export const TabList = forwardRef< HTMLDivElement, WordPressComponentProps< TabListProps, 'div', false > ->( function TabList( { children, ...otherProps }, ref ) { +>( function UnforwardedTabList( { children, ...otherProps }, ref ) { const { store } = useTabsContext() ?? {}; const selectedId = useStoreState( store, 'selectedId' ); diff --git a/packages/components/src/tabs/tabpanel.tsx b/packages/components/src/tabs/tabpanel.tsx index 01f749482684c9..4e15713da10bd0 100644 --- a/packages/components/src/tabs/tabpanel.tsx +++ b/packages/components/src/tabs/tabpanel.tsx @@ -9,7 +9,7 @@ import type { WordPressComponentProps } from '../context'; export const TabPanel = forwardRef< HTMLDivElement, Omit< WordPressComponentProps< TabPanelProps, 'div', false >, 'id' > ->( function TabPanel( +>( function UnforwardedTabPanel( { children, tabId, focusable = true, ...otherProps }, ref ) { From 473b7b5904a1d5de6354e7c03048e011fb93c09d Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Tue, 29 Sep 2026 11:50:37 +0530 Subject: [PATCH 2/4] UI: Rename inner functions that shadow their component --- .../src/alert-dialog/stories/index.story.tsx | 4 +- packages/ui/src/badge/badge.tsx | 33 +++--- .../breadcrumb/overflow-trigger-button.tsx | 5 +- packages/ui/src/breadcrumb/separator.tsx | 2 +- .../ui/src/breadcrumb/stories/index.story.tsx | 2 +- packages/ui/src/button/button.tsx | 2 +- packages/ui/src/button/icon.tsx | 2 +- packages/ui/src/calendar/calendar.tsx | 2 +- packages/ui/src/calendar/range-calendar.tsx | 2 +- .../src/collapsible/stories/index.story.tsx | 4 +- .../checkbox-control/checkbox-control.tsx | 2 +- .../src/form/input-control/input-control.tsx | 2 +- .../form/primitives/autocomplete/clear.tsx | 5 +- .../form/primitives/autocomplete/empty.tsx | 2 +- .../primitives/autocomplete/group-label.tsx | 5 +- .../form/primitives/autocomplete/group.tsx | 2 +- .../primitives/autocomplete/input-group.tsx | 2 +- .../form/primitives/autocomplete/input.tsx | 5 +- .../src/form/primitives/autocomplete/item.tsx | 2 +- .../primitives/autocomplete/list-body.tsx | 2 +- .../src/form/primitives/autocomplete/list.tsx | 2 +- .../form/primitives/autocomplete/popup.tsx | 2 +- .../src/form/primitives/autocomplete/row.tsx | 2 +- .../form/primitives/autocomplete/status.tsx | 2 +- .../checkbox-group/checkbox-group.tsx | 5 +- .../checkbox-group/nested-items.tsx | 5 +- .../src/form/primitives/checkbox/checkbox.tsx | 5 +- .../primitives/combobox/chip-with-remove.tsx | 2 +- .../ui/src/form/primitives/combobox/chips.tsx | 2 +- .../ui/src/form/primitives/combobox/clear.tsx | 5 +- .../ui/src/form/primitives/combobox/empty.tsx | 2 +- .../form/primitives/combobox/group-label.tsx | 5 +- .../ui/src/form/primitives/combobox/group.tsx | 2 +- .../form/primitives/combobox/input-group.tsx | 2 +- .../ui/src/form/primitives/combobox/input.tsx | 5 +- .../ui/src/form/primitives/combobox/item.tsx | 2 +- .../form/primitives/combobox/list-body.tsx | 2 +- .../form/primitives/combobox/list-footer.tsx | 2 +- .../ui/src/form/primitives/combobox/list.tsx | 2 +- .../ui/src/form/primitives/combobox/popup.tsx | 2 +- .../src/form/primitives/combobox/status.tsx | 2 +- .../src/form/primitives/combobox/trigger.tsx | 2 +- .../control-with-error/control-with-error.tsx | 2 +- .../test/control-with-error.browser.test.tsx | 5 +- .../test/fixtures/validated-input-control.tsx | 4 +- .../ui/src/form/primitives/field/control.tsx | 2 +- .../src/form/primitives/field/description.tsx | 2 +- .../ui/src/form/primitives/field/details.tsx | 2 +- .../ui/src/form/primitives/field/item.tsx | 2 +- .../ui/src/form/primitives/field/label.tsx | 2 +- .../ui/src/form/primitives/field/root.tsx | 28 ++--- .../form/primitives/field/visual-label.tsx | 5 +- .../form/primitives/fieldset/description.tsx | 2 +- .../src/form/primitives/fieldset/details.tsx | 5 +- .../src/form/primitives/fieldset/legend.tsx | 2 +- .../ui/src/form/primitives/fieldset/root.tsx | 5 +- .../primitives/input-layout/input-layout.tsx | 2 +- .../src/form/primitives/input-layout/slot.tsx | 2 +- .../ui/src/form/primitives/input/input.tsx | 50 ++++----- .../primitives/radio-group/radio-group.tsx | 5 +- .../ui/src/form/primitives/radio/radio.tsx | 37 ++++--- .../searchable-chip-select.tsx | 2 +- .../primitives/searchable-select/item.tsx | 2 +- .../searchable-select/searchable-select.tsx | 2 +- .../form/primitives/select/group-label.tsx | 5 +- .../ui/src/form/primitives/select/group.tsx | 2 +- .../primitives/select/item-description.tsx | 2 +- .../src/form/primitives/select/item-label.tsx | 5 +- .../ui/src/form/primitives/select/item.tsx | 2 +- .../ui/src/form/primitives/select/popup.tsx | 2 +- .../ui/src/form/primitives/select/trigger.tsx | 2 +- .../ui/src/form/primitives/switch/switch.tsx | 2 +- .../src/form/primitives/textarea/textarea.tsx | 2 +- .../radio-group-control.tsx | 2 +- .../searchable-chip-select-control.tsx | 2 +- .../searchable-select-control.tsx | 2 +- packages/ui/src/form/select-control/item.tsx | 2 +- .../form/select-control/select-control.tsx | 2 +- .../form/switch-control/switch-control.tsx | 2 +- .../textarea-control/textarea-control.tsx | 2 +- .../validated-input-control.tsx | 2 +- .../validated-textarea-control.tsx | 2 +- packages/ui/src/icon-button/icon-button.tsx | 2 +- packages/ui/src/icon/icon.tsx | 37 ++++--- packages/ui/src/link-button/icon.tsx | 2 +- packages/ui/src/link-button/link-button.tsx | 2 +- packages/ui/src/link/link.tsx | 100 +++++++++--------- packages/ui/src/popover/stories/utils.tsx | 2 +- packages/ui/src/skeleton/skeleton.tsx | 2 +- packages/ui/src/spinner/spinner.tsx | 2 +- packages/ui/src/stack/stack.tsx | 41 +++---- packages/ui/src/tabs/stories/index.story.tsx | 2 +- packages/ui/src/tabs/tab.tsx | 37 ++++--- packages/ui/src/text/text.tsx | 42 ++++---- packages/ui/src/utils/keyboard-shortcut.tsx | 7 +- .../src/visually-hidden/visually-hidden.tsx | 2 +- 96 files changed, 355 insertions(+), 286 deletions(-) diff --git a/packages/ui/src/alert-dialog/stories/index.story.tsx b/packages/ui/src/alert-dialog/stories/index.story.tsx index 0cfc49a72f044e..eb355cf19e9c19 100644 --- a/packages/ui/src/alert-dialog/stories/index.story.tsx +++ b/packages/ui/src/alert-dialog/stories/index.story.tsx @@ -217,7 +217,7 @@ function sleep( ms: number ) { * reopens. */ export const AsyncConfirm: Story = { - render: function AsyncConfirm( args ) { + render: function AsyncConfirmRender( args ) { const [ shouldFail, setShouldFail ] = useState( false ); const successId = useId(); const failureId = useId(); @@ -374,7 +374,7 @@ export const Scrollable: Story = { * from code or from a non-standard trigger element. */ export const Controlled: Story = { - render: function Controlled( args ) { + render: function ControlledRender( args ) { const [ isOpen, setIsOpen ] = useState( false ); return ( diff --git a/packages/ui/src/badge/badge.tsx b/packages/ui/src/badge/badge.tsx index bda48c427901b3..44c498e337e822 100644 --- a/packages/ui/src/badge/badge.tsx +++ b/packages/ui/src/badge/badge.tsx @@ -7,20 +7,19 @@ import { Text } from '../text'; /** * A badge component for displaying labels with semantic intent. */ -export const Badge = forwardRef< HTMLSpanElement, BadgeProps >( function Badge( - { intent = 'none', className, ...props }, - ref -) { - return ( - - ); -} ); +export const Badge = forwardRef< HTMLSpanElement, BadgeProps >( + function UnforwardedBadge( { intent = 'none', className, ...props }, ref ) { + return ( + + ); + } +); diff --git a/packages/ui/src/breadcrumb/overflow-trigger-button.tsx b/packages/ui/src/breadcrumb/overflow-trigger-button.tsx index 37bf1005f5effa..523a6f8f4c3038 100644 --- a/packages/ui/src/breadcrumb/overflow-trigger-button.tsx +++ b/packages/ui/src/breadcrumb/overflow-trigger-button.tsx @@ -5,7 +5,10 @@ import type { ButtonProps } from '../button/types'; import styles from './style.module.css'; const OverflowTriggerButton = forwardRef< HTMLButtonElement, ButtonProps >( - function OverflowTriggerButton( { children, className, ...props }, ref ) { + function UnforwardedOverflowTriggerButton( + { children, className, ...props }, + ref + ) { return (