[Tab][base] Drop component prop (mui#36768)

binh1298 · May 17, 2023 · d3daa86 · d3daa86
1 parent 6d2bf2e
commit d3daa86
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 29 deletions.
diff --git a/docs/pages/base/api/tab.json b/docs/pages/base/api/tab.json
@@ -6,7 +6,6 @@
         "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
       }
     },
-    "component": { "type": { "name": "elementType" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "onChange": { "type": { "name": "func" } },
     "slotProps": {

diff --git a/docs/translations/api-docs-base/tab/tab.json b/docs/translations/api-docs-base/tab/tab.json
@@ -2,7 +2,6 @@
   "componentDescription": "",
   "propDescriptions": {
     "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the component is disabled.",
     "onChange": "Callback invoked when new value is being set.",
     "slotProps": "The props used for each slot inside the Tab.",

diff --git a/packages/mui-base/src/Tab/Tab.spec.tsx b/packages/mui-base/src/Tab/Tab.spec.tsx
@@ -20,21 +20,26 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Tab value={0} invalidProp={0} />
 
-      <Tab value={0} component="a" href="#" />
+      <Tab value={0} slots={{ root: 'a' }} href="#" />
 
-      <Tab value={0} component={CustomComponent} stringProp="test" numberProp={0} />
+      <Tab<typeof CustomComponent>
+        value={0}
+        slots={{ root: CustomComponent }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
-      <Tab value={0} component={CustomComponent} />
+      <Tab value={0} slots={{ root: { CustomComponent } }} />
 
       <Tab
         value={0}
-        component="button"
+        slots={{ root: 'button' }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Tab<'button'>
         value={0}
-        component="button"
+        slots={{ root: 'button' }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}

diff --git a/packages/mui-base/src/Tab/Tab.test.tsx b/packages/mui-base/src/Tab/Tab.test.tsx
@@ -65,6 +65,7 @@ describe('<Tab />', () => {
     },
     skip: [
       'reactTestRenderer', // Need to be wrapped with TabsContext
+      'componentProp',
     ],
   }));
 });
diff --git a/packages/mui-base/src/Tab/Tab.tsx b/packages/mui-base/src/Tab/Tab.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import composeClasses from '../composeClasses';
 import { getTabUtilityClass } from './tabClasses';
 import { TabProps, TabTypeMap, TabRootSlotProps, TabOwnerState } from './Tab.types';
 import useTab from '../useTab';
-import { useSlotProps, WithOptionalOwnerState } from '../utils';
+import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils';
 import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
 
 const useUtilityClasses = (ownerState: TabOwnerState) => {
@@ -40,7 +39,6 @@ const Tab = React.forwardRef(function Tab<RootComponentType extends React.Elemen
     onChange,
     onClick,
     onFocus,
-    component,
     slotProps = {},
     slots = {},
     ...other
@@ -64,7 +62,7 @@ const Tab = React.forwardRef(function Tab<RootComponentType extends React.Elemen
 
   const classes = useUtilityClasses(ownerState);
 
-  const TabRoot: React.ElementType = component ?? slots.root ?? 'button';
+  const TabRoot: React.ElementType = slots.root ?? 'button';
   const tabRootProps: WithOptionalOwnerState<TabRootSlotProps> = useSlotProps({
     elementType: TabRoot,
     getSlotProps: getRootProps,
@@ -78,7 +76,7 @@ const Tab = React.forwardRef(function Tab<RootComponentType extends React.Elemen
   });
 
   return <TabRoot {...tabRootProps}>{children}</TabRoot>;
-}) as OverridableComponent<TabTypeMap>;
+}) as PolymorphicComponent<TabTypeMap>;
 
 Tab.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -100,11 +98,6 @@ Tab.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -114,14 +107,6 @@ Tab.propTypes /* remove-proptypes */ = {
    * Callback invoked when new value is being set.
    */
   onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
   /**
    * The props used for each slot inside the Tab.
    * @default {}

diff --git a/packages/mui-base/src/Tab/Tab.types.ts b/packages/mui-base/src/Tab/Tab.types.ts
@@ -1,8 +1,9 @@
-import { OverrideProps, Simplify } from '@mui/types';
+import { Simplify } from '@mui/types';
 import * as React from 'react';
 import { ButtonOwnProps } from '../Button';
 import { SlotComponentProps } from '../utils';
 import { UseTabRootSlotProps } from '../useTab';
+import { PolymorphicProps } from '../utils/PolymorphicComponent';
 
 export interface TabRootSlotPropsOverrides {}
 
@@ -39,9 +40,7 @@ export interface TabSlots {
 }
 
 export type TabProps<RootComponentType extends React.ElementType = TabTypeMap['defaultComponent']> =
-  OverrideProps<TabTypeMap<{}, RootComponentType>, RootComponentType> & {
-    component?: RootComponentType;
-  };
+  PolymorphicProps<TabTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export interface TabTypeMap<
   AdditionalProps = {},