fix(Tabs)!: Rename onChange to onTabChange (#1908)

Author: alimpens

packages/react/src/Tabs/Tabs.test.tsx

@@ -91,12 +91,12 @@ describe('Tabs', () => {
     expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 2')
   })
 
-  it('calls onChange with the newly activated tab', async () => {
+  it('calls onTabChange with the newly activated tab', async () => {
     const user = userEvent.setup()
 
-    const onChange = jest.fn()
+    const onTabChange = jest.fn()
     render(
-      <Tabs onChange={onChange}>
+      <Tabs onTabChange={onTabChange}>
         <Tabs.List>
           <Tabs.Button tab={1}>Tab 1</Tabs.Button>
         </Tabs.List>
@@ -106,7 +106,7 @@ describe('Tabs', () => {
     const button = screen.getByRole('tab', { name: 'Tab 1' })
     await user.click(button)
 
-    expect(onChange).toHaveBeenCalledWith(1)
+    expect(onTabChange).toHaveBeenCalledWith(1)
   })
 
   it('should be able to set the initially active tab', () => {

packages/react/src/Tabs/Tabs.tsx

@@ -16,11 +16,11 @@ export type TabsProps = {
   /** The number of the active tab. Corresponds to its `tab` value. */
   activeTab?: number
   /* Provides the id of the activated tab. */
-  onChange?: (tabId: number) => void
+  onTabChange?: (tabId: number) => void
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 const TabsRoot = forwardRef(
-  ({ activeTab, children, className, onChange, ...restProps }: TabsProps, ref: ForwardedRef<HTMLDivElement>) => {
+  ({ activeTab, children, className, onTabChange, ...restProps }: TabsProps, ref: ForwardedRef<HTMLDivElement>) => {
     const tabsId = useId()
     const innerRef = useRef<HTMLDivElement>(null)
     const [activeTabId, setActiveTabId] = useState(0)
@@ -45,7 +45,7 @@ const TabsRoot = forwardRef(
 
     const updateTab = (tab: number) => {
       setActiveTabId(tab)
-      onChange?.(tab)
+      onTabChange?.(tab)
     }
 
     // Use a passed ref if it's there, otherwise use innerRef

storybook/src/components/Tabs/Tabs.stories.tsx

@@ -76,7 +76,7 @@ const meta = {
         type: 'number',
       },
     },
-    onChange: {
+    onTabChange: {
       action: 'clicked',
       description: 'Provides the id of the activated tab.',
     },