WIP

mui · Apr 26, 2023 · d7defa8 · d7defa8
1 parent 3a29767
commit d7defa8
Show file tree

Hide file tree

Showing 83 changed files with 725 additions and 384 deletions.
diff --git a/docs/data/base/components/input/input.md b/docs/data/base/components/input/input.md
@@ -54,29 +54,20 @@ The Input component is composed of a root `<div>` slot that houses one interior
 </div>
 ```
 
-### Slot props
+### 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 `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
-<Input component="aside" />
+<Input slots={{ root: 'aside' }} />
 ```
 
 Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<Input slots={{ root: 'aside' }} />
+<Input slots={{ root: 'aside', input: 'button' }} />
 ```
 
-:::warning
-If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
-:::
-
 Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-input` to the input slot:
 

diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md
@@ -112,14 +112,9 @@ Option renders as an `<li>`:
 </div>
 ```
 
-### Slot props
+### 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 `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
 <Select component="div" />
@@ -131,10 +126,6 @@ Use the `slots` prop to override any interior slots in addition to the root:
 <Select slots={{ root: 'div', listbox: 'ol' }} />
 ```
 
-:::warning
-If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
-:::
-
 Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-listbox` to the listbox slot:
 

diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md
@@ -98,14 +98,9 @@ The Slider component is composed of a root `<span>` that houses several interior
 Both the `mark` and `markLabel` slots have corresponding `*Active` classes that are applied conditionally.
 :::
 
-### Slot props
+### 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 `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
 <Slider component="div" />
@@ -117,17 +112,27 @@ Use the `slots` prop to override any interior slots in addition to the root:
 <Slider slots={{ root: 'div', thumb: 'div' }} />
 ```
 
-:::warning
-If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
-:::
-
 Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-rail` to the rail slot:
 
 ```jsx
 <Slider slotProps={{ rail: { className: 'my-rail' } }} />
 ```
 
+#### 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
+<Button<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Button<'img'> slots={{ root: 'img' }} src="button.png" />
+```
+
 ## Hook
 
 ```js

diff --git a/docs/data/base/components/snackbar/snackbar.md b/docs/data/base/components/snackbar/snackbar.md
@@ -58,19 +58,28 @@ The Snackbar component is composed of a single root `<div>` slot with no interio
 <div role="presentation" className="BaseSnackbar-root">snackbar content</div>
 ```
 
-### Slot props
+### 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 `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
 <Snackbar component="span" />
 ```
 
+#### 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
+<Button<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Button<'img'> slots={{ root: 'img' }} src="button.png" />
+```
+
 ## Hook
 
 ```js

diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction.js
@@ -87,10 +87,34 @@ export default function UnstyledSwitches() {
 
   return (
     <div>
-      <Switch component={Root} {...label} defaultChecked />
-      <Switch component={Root} {...label} />
-      <Switch component={Root} {...label} defaultChecked disabled />
-      <Switch component={Root} {...label} disabled />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+        disabled
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        disabled
+      />
     </div>
   );
 }
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx
@@ -87,10 +87,34 @@ export default function UnstyledSwitches() {
 
   return (
     <div>
-      <Switch component={Root} {...label} defaultChecked />
-      <Switch component={Root} {...label} />
-      <Switch component={Root} {...label} defaultChecked disabled />
-      <Switch component={Root} {...label} disabled />
+      <Switch<typeof Root>
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+      />
+      <Switch<typeof Root>
+        slots={{
+          root: Root,
+        }}
+        {...label}
+      />
+      <Switch<typeof Root>
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+        disabled
+      />
+      <Switch<typeof Root>
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        disabled
+      />
     </div>
   );
 }
diff --git a/docs/data/base/components/switch/UnstyledSwitches.js b/docs/data/base/components/switch/UnstyledSwitches.js
@@ -87,10 +87,34 @@ export default function UnstyledSwitches() {
 
   return (
     <div>
-      <Switch component={Root} {...label} defaultChecked />
-      <Switch component={Root} {...label} />
-      <Switch component={Root} {...label} defaultChecked disabled />
-      <Switch component={Root} {...label} disabled />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+        disabled
+      />
+      <Switch
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        disabled
+      />
     </div>
   );
 }
diff --git a/docs/data/base/components/switch/UnstyledSwitches.tsx b/docs/data/base/components/switch/UnstyledSwitches.tsx
@@ -87,10 +87,34 @@ export default function UnstyledSwitches() {
 
   return (
     <div>
-      <Switch component={Root} {...label} defaultChecked />
-      <Switch component={Root} {...label} />
-      <Switch component={Root} {...label} defaultChecked disabled />
-      <Switch component={Root} {...label} disabled />
+      <Switch<typeof Root>
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+      />
+      <Switch<typeof Root>
+        slots={{
+          root: Root,
+        }}
+        {...label}
+      />
+      <Switch<typeof Root>
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        defaultChecked
+        disabled
+      />
+      <Switch<typeof Root>
+        slots={{
+          root: Root,
+        }}
+        {...label}
+        disabled
+      />
     </div>
   );
 }
diff --git a/docs/data/base/components/switch/switch.md b/docs/data/base/components/switch/switch.md
@@ -53,14 +53,9 @@ The Switch component is composed of a root `<span>` that houses three interior s
 </span>
 ```
 
-### Slot props
+### 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 `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
 <Switch component="div" />
@@ -72,17 +67,27 @@ Use the `slots` prop to override any interior slots in addition to the root:
 <Switch slots={{ root: 'div', track: 'div' }} />
 ```
 
-:::warning
-If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
-:::
-
 Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-thumb` to the thumb slot:
 
 ```jsx
 <Switch slotProps={{ thumb: { className: 'my-thumb' } }} />
 ```
 
+#### 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
+<Button<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Button<'img'> slots={{ root: 'img' }} src="button.png" />
+```
+
 ## Hook
 
 ```js

diff --git a/docs/data/base/components/table-pagination/table-pagination-pt.md b/docs/data/base/components/table-pagination/table-pagination-pt.md
@@ -92,13 +92,13 @@ The `TablePaginationUnstyled` component is composed of a root `<td>` that houses
 </td>
 ```
 
-### Slot props
+### 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 `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
 <TablePaginationUnstyled component="div" />

diff --git a/docs/data/base/components/table-pagination/table-pagination-zh.md b/docs/data/base/components/table-pagination/table-pagination-zh.md
@@ -92,13 +92,13 @@ The `TablePaginationUnstyled` component is composed of a root `<td>` that houses
 </td>
 ```
 
-### Slot props
+### 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 `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
 <TablePaginationUnstyled component="div" />