From 3b1b1ad5651db4b32b28f9b8ed00e7b202b600c1 Mon Sep 17 00:00:00 2001 From: sai chand Date: Wed, 26 Apr 2023 14:04:29 +0000 Subject: [PATCH 1/9] reopen --- packages/mui-base/src/Tabs/Tabs.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-base/src/Tabs/Tabs.types.ts b/packages/mui-base/src/Tabs/Tabs.types.ts index 1abd353b5d4a78..683178aee58c31 100644 --- a/packages/mui-base/src/Tabs/Tabs.types.ts +++ b/packages/mui-base/src/Tabs/Tabs.types.ts @@ -62,7 +62,7 @@ export interface TabsSlots { * The component that renders the root. * @default 'div' */ - root?: React.ElementType; + root?: React.ElementType } export interface TabsTypeMap

{ From 928028fa29af49f692cbcafde4ad86fc33db8f4f Mon Sep 17 00:00:00 2001 From: sai chand Date: Wed, 26 Apr 2023 14:16:16 +0000 Subject: [PATCH 2/9] update readme --- docs/data/base/components/tabs/tabs.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md index b5c5a7037c4f52..df59523b29eeb1 100644 --- a/docs/data/base/components/tabs/tabs.md +++ b/docs/data/base/components/tabs/tabs.md @@ -91,16 +91,30 @@ The following props are available on all non-utility Base components. See [Usage](/base/getting-started/usage/) for full details. ::: -Use the `component` prop to override the root slot with a custom element: +Use the `slots.root` prop to override the root slot with a custom element: ```jsx - + ``` If you provide a non-interactive element such as a ``, the Tab components will automatically add the necessary accessibility attributes. ## Customization +#### Usage with TypeScript + +In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom compoenent's props directly on the compnent: + +```tsx + slots={{ root: CustomComponent }} customProp /> +``` + +The same applies for props specific to custom primitive elements: + +```tsx + slots={{ root: 'button' }} onClick={() => {}} /> +``` + ### Third-party routing library A common use case for tabs is to implement client-side navigation that doesn't require an HTTP round-trip to the server. From 9cc5533edb22ea4162899e8c67fa2eb3546b72cd Mon Sep 17 00:00:00 2001 From: sai chand Date: Wed, 26 Apr 2023 14:29:53 +0000 Subject: [PATCH 3/9] update code --- docs/pages/base/api/tabs.json | 1 - docs/translations/api-docs-base/tabs/tabs.json | 1 - packages/mui-base/src/Tabs/Tabs.spec.tsx | 18 +++++++++++------- packages/mui-base/src/Tabs/Tabs.test.tsx | 1 + packages/mui-base/src/Tabs/Tabs.tsx | 13 +++---------- packages/mui-base/src/Tabs/Tabs.types.ts | 10 ++++------ 6 files changed, 19 insertions(+), 25 deletions(-) diff --git a/docs/pages/base/api/tabs.json b/docs/pages/base/api/tabs.json index 7999fc0783bbd7..d615a62fc12d7a 100644 --- a/docs/pages/base/api/tabs.json +++ b/docs/pages/base/api/tabs.json @@ -1,7 +1,6 @@ { "props": { "children": { "type": { "name": "node" } }, - "component": { "type": { "name": "elementType" } }, "defaultValue": { "type": { "name": "union", "description": "number
| string" } }, "direction": { "type": { "name": "enum", "description": "'ltr'
| 'rtl'" }, diff --git a/docs/translations/api-docs-base/tabs/tabs.json b/docs/translations/api-docs-base/tabs/tabs.json index fe065328796929..37fa6685b070b8 100644 --- a/docs/translations/api-docs-base/tabs/tabs.json +++ b/docs/translations/api-docs-base/tabs/tabs.json @@ -2,7 +2,6 @@ "componentDescription": "", "propDescriptions": { "children": "The content of the component.", - "component": "The component used for the root node. Either a string to use a HTML element or a component.", "defaultValue": "The default value. Use when the component is not controlled.", "direction": "The direction of the text.", "onChange": "Callback invoked when new value is being set.", diff --git a/packages/mui-base/src/Tabs/Tabs.spec.tsx b/packages/mui-base/src/Tabs/Tabs.spec.tsx index 3d9a9bc5da5c10..432291b9003f16 100644 --- a/packages/mui-base/src/Tabs/Tabs.spec.tsx +++ b/packages/mui-base/src/Tabs/Tabs.spec.tsx @@ -20,19 +20,23 @@ const polymorphicComponentTest = () => { {/* @ts-expect-error */} - + slots={{ root: 'a' }} href="#" /> - - {/* @ts-expect-error */} - + + slots={{ root: CustomComponent }} + stringProp="test" + numberProp={0} + /> + {/* @ts-expect-error required props not specified */} + slots={{ root: CustomComponent }} /> - + slots={{ root: 'button' }} onClick={(e: React.MouseEvent) => e.currentTarget.checkValidity()} /> - component="button" + slots={{ root: 'button' }} ref={(elem) => { expectType(elem); }} diff --git a/packages/mui-base/src/Tabs/Tabs.test.tsx b/packages/mui-base/src/Tabs/Tabs.test.tsx index 105baae2f05825..42404704ff06d0 100644 --- a/packages/mui-base/src/Tabs/Tabs.test.tsx +++ b/packages/mui-base/src/Tabs/Tabs.test.tsx @@ -43,6 +43,7 @@ describe('', () => { expectedClassName: classes.root, }, }, + skip: ['componentProp'], })); it('can be named via `aria-label`', () => { diff --git a/packages/mui-base/src/Tabs/Tabs.tsx b/packages/mui-base/src/Tabs/Tabs.tsx index ea0d05cde6f7c1..e01791527b8e01 100644 --- a/packages/mui-base/src/Tabs/Tabs.tsx +++ b/packages/mui-base/src/Tabs/Tabs.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { OverridableComponent } from '@mui/types'; -import { useSlotProps, WithOptionalOwnerState } from '../utils'; +import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils'; import composeClasses from '../composeClasses'; import { getTabsUtilityClass } from './tabsClasses'; import { TabsProps, TabsRootSlotProps, TabsTypeMap } from './Tabs.types'; @@ -36,7 +35,6 @@ const Tabs = React.forwardRef(function Tabs(props, ref) { defaultValue, orientation = 'horizontal', direction = 'ltr', - component, onChange, selectionFollowsFocus, slotProps = {}, @@ -54,7 +52,7 @@ const Tabs = React.forwardRef(function Tabs(props, ref) { const classes = useUtilityClasses(ownerState); - const TabsRoot: React.ElementType = component ?? slots.root ?? 'div'; + const TabsRoot: React.ElementType = slots.root ?? 'div'; const tabsRootProps: WithOptionalOwnerState = useSlotProps({ elementType: TabsRoot, externalSlotProps: slotProps.root, @@ -71,7 +69,7 @@ const Tabs = React.forwardRef(function Tabs(props, ref) { {children} ); -}) as OverridableComponent; +}) as PolymorphicComponent; Tabs.propTypes /* remove-proptypes */ = { // ----------------------------- Warning -------------------------------- @@ -82,11 +80,6 @@ Tabs.propTypes /* remove-proptypes */ = { * The content of the component. */ children: PropTypes.node, - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, /** * The default value. Use when the component is not controlled. */ diff --git a/packages/mui-base/src/Tabs/Tabs.types.ts b/packages/mui-base/src/Tabs/Tabs.types.ts index 683178aee58c31..40456c9de8b074 100644 --- a/packages/mui-base/src/Tabs/Tabs.types.ts +++ b/packages/mui-base/src/Tabs/Tabs.types.ts @@ -1,6 +1,7 @@ import * as React from 'react'; -import { OverrideProps } from '@mui/types'; +import { Simplify } from '@mui/types'; import { SlotComponentProps } from '../utils'; +import { PolymorphicProps } from '../utils/PolymorphicComponent'; export interface TabsRootSlotPropsOverrides {} @@ -71,11 +72,8 @@ export interface TabsTypeMap

{ } export type TabsProps< - D extends React.ElementType = TabsTypeMap['defaultComponent'], - P = {}, -> = OverrideProps, D> & { - component?: D; -}; + RootComponentType extends React.ElementType = TabsTypeMap['defaultComponent'], +> = PolymorphicProps, RootComponentType>; export type TabsOwnerState = TabsProps & { orientation: TabsOrientation; From d8ff499215dbfb020553b2692eb279008506744a Mon Sep 17 00:00:00 2001 From: sai chand Date: Wed, 26 Apr 2023 14:39:21 +0000 Subject: [PATCH 4/9] prettier --- docs/data/base/components/tabs/tabs.md | 2 +- packages/mui-base/src/Tabs/Tabs.types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md index df59523b29eeb1..fad03a67861d01 100644 --- a/docs/data/base/components/tabs/tabs.md +++ b/docs/data/base/components/tabs/tabs.md @@ -94,7 +94,7 @@ See [Usage](/base/getting-started/usage/) for full details. Use the `slots.root` prop to override the root slot with a custom element: ```jsx - + ``` If you provide a non-interactive element such as a ``, the Tab components will automatically add the necessary accessibility attributes. diff --git a/packages/mui-base/src/Tabs/Tabs.types.ts b/packages/mui-base/src/Tabs/Tabs.types.ts index 84ec2f001e6df2..10d552b3bff283 100644 --- a/packages/mui-base/src/Tabs/Tabs.types.ts +++ b/packages/mui-base/src/Tabs/Tabs.types.ts @@ -63,7 +63,7 @@ export interface TabsSlots { * The component that renders the root. * @default 'div' */ - root?: React.ElementType + root?: React.ElementType; } export interface TabsTypeMap< From bf7bd07dcb0efb98cbff521458e44753c155c09b Mon Sep 17 00:00:00 2001 From: sai chand Date: Wed, 26 Apr 2023 15:53:17 +0000 Subject: [PATCH 5/9] yarn markdownlint --- docs/data/base/components/tabs/tabs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md index fad03a67861d01..1d7f2dfa1c59a5 100644 --- a/docs/data/base/components/tabs/tabs.md +++ b/docs/data/base/components/tabs/tabs.md @@ -101,7 +101,7 @@ If you provide a non-interactive element such as a ``, the Tab components ## Customization -#### Usage with TypeScript +### Usage with TypeScript In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom compoenent's props directly on the compnent: From 375562f253b5e39f93267449c78baee165409bff Mon Sep 17 00:00:00 2001 From: sai chand Date: Wed, 26 Apr 2023 15:55:33 +0000 Subject: [PATCH 6/9] typo --- docs/data/base/components/tabs/tabs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md index 1d7f2dfa1c59a5..885dae60cb7455 100644 --- a/docs/data/base/components/tabs/tabs.md +++ b/docs/data/base/components/tabs/tabs.md @@ -103,7 +103,7 @@ If you provide a non-interactive element such as a ``, the Tab components ### Usage with TypeScript -In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom compoenent's props directly on the compnent: +In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component: ```tsx slots={{ root: CustomComponent }} customProp /> From a0a492a5420afb3c8131a0c885ee83df612ea97a Mon Sep 17 00:00:00 2001 From: sai chand Date: Wed, 26 Apr 2023 16:27:23 +0000 Subject: [PATCH 7/9] trigger From c36195b63e62b058f5eacfd17d7207151c5eaa2d Mon Sep 17 00:00:00 2001 From: sai chand Date: Thu, 27 Apr 2023 12:23:59 +0000 Subject: [PATCH 8/9] info update --- docs/data/base/components/tabs/tabs.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md index 885dae60cb7455..168b207531425a 100644 --- a/docs/data/base/components/tabs/tabs.md +++ b/docs/data/base/components/tabs/tabs.md @@ -84,7 +84,7 @@ The Tab components are each composed of a root slot with no interior slots: ``` -### Slot props +### Custom structure :::info The following props are available on all non-utility Base components. @@ -99,6 +99,11 @@ Use the `slots.root` prop to override the root slot with a custom element: If you provide a non-interactive element such as a ``, the Tab components will automatically add the necessary accessibility attributes. +:::info +The `slots` prop is available on all non-utility Base components. +See [Overriding component structure](/base/guides/overriding-component-structure/) for full details. +::: + ## Customization ### Usage with TypeScript From 455d06a156a547ef8fbf1e53c56cee3001eb69a0 Mon Sep 17 00:00:00 2001 From: sai chand Date: Fri, 28 Apr 2023 10:49:15 +0000 Subject: [PATCH 9/9] address comments --- docs/data/base/components/tabs/tabs.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md index 168b207531425a..d25f2658269a53 100644 --- a/docs/data/base/components/tabs/tabs.md +++ b/docs/data/base/components/tabs/tabs.md @@ -86,12 +86,7 @@ The Tab components are each composed of a root slot with no interior slots: ### Custom structure -:::info -The following props are available on all non-utility Base components. -See [Usage](/base/getting-started/usage/) for full details. -::: - -Use the `slots.root` prop to override the root slot with a custom element: +Use the `slots` prop to override the root or any other interior slot: ```jsx