From 9bd16d3a7a9747d168e545191bd7fe9345142f71 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 20 Feb 2023 13:27:45 +0000 Subject: [PATCH 1/7] Create ComponentSlots interface for Joy --- packages/mui-joy/src/Alert/AlertProps.ts | 20 +++++- .../src/AspectRatio/AspectRatioProps.ts | 15 ++++- .../src/Autocomplete/AutocompleteProps.ts | 65 ++++++++++++++++++- packages/mui-joy/src/Avatar/AvatarProps.ts | 20 +++++- packages/mui-joy/src/Badge/BadgeProps.ts | 15 ++++- .../src/Breadcrumbs/BreadcrumbsProps.ts | 25 ++++++- packages/mui-joy/src/Button/ButtonProps.ts | 25 ++++++- .../mui-joy/src/Checkbox/CheckboxProps.ts | 30 ++++++++- packages/mui-joy/src/Chip/ChipProps.ts | 30 ++++++++- .../CircularProgress/CircularProgressProps.ts | 25 ++++++- .../mui-joy/src/FormLabel/FormLabelProps.ts | 15 ++++- packages/mui-joy/src/Input/InputProps.ts | 25 ++++++- packages/mui-joy/src/Link/LinkProps.ts | 20 +++++- .../mui-joy/src/ListItem/ListItemProps.ts | 20 +++++- packages/mui-joy/src/Modal/ModalProps.ts | 15 ++++- packages/mui-joy/src/Radio/RadioProps.ts | 35 +++++++++- packages/mui-joy/src/Select/SelectProps.ts | 35 +++++++++- packages/mui-joy/src/Slider/SliderProps.ts | 45 ++++++++++++- packages/mui-joy/src/Switch/SwitchProps.ts | 40 +++++++++++- .../mui-joy/src/Textarea/TextareaProps.ts | 25 ++++++- packages/mui-joy/src/Tooltip/TooltipProps.ts | 15 ++++- .../mui-joy/src/Typography/TypographyProps.ts | 20 +++++- packages/mui-joy/src/utils/types.ts | 6 +- 23 files changed, 560 insertions(+), 26 deletions(-) diff --git a/packages/mui-joy/src/Alert/AlertProps.ts b/packages/mui-joy/src/Alert/AlertProps.ts index 2f6ebbbf359153..708419b0fb1915 100644 --- a/packages/mui-joy/src/Alert/AlertProps.ts +++ b/packages/mui-joy/src/Alert/AlertProps.ts @@ -5,8 +5,26 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type AlertSlot = 'root' | 'startDecorator' | 'endDecorator'; +export interface AlertSlots { + /** + * The component used to render the root. + * @default 'div' + */ + root: React.ElementType; + /** + * The component used to render the start decorator. + * @default 'span' + */ + startDecorator: React.ElementType; + /** + * The component used to render the end decorator. + * @default 'span' + */ + endDecorator: React.ElementType; +} + export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps< - AlertSlot, + AlertSlots, { root: SlotProps<'div', {}, AlertOwnerState>; startDecorator: SlotProps<'span', {}, AlertOwnerState>; diff --git a/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts b/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts index 393600635c41a9..da81cccff7d0e7 100644 --- a/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts +++ b/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts @@ -5,11 +5,24 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type AspectRatioSlot = 'root' | 'content'; +export interface AspectRatioSlots { + /** + * The component used to render the root. + * @default 'div' + */ + root: React.ElementType; + /** + * The component used to render the content. + * @default 'div' + */ + content: React.ElementType; +} + export interface AspectRatioPropsColorOverrides {} export interface AspectRatioPropsVariantOverrides {} export type AspectRatioSlotsAndSlotProps = CreateSlotsAndSlotProps< - AspectRatioSlot, + AspectRatioSlots, { root: SlotProps<'div', {}, AspectRatioOwnerState>; content: SlotProps<'div', {}, AspectRatioOwnerState>; diff --git a/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts b/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts index 2fa7cdbeaf8ab5..160b536b353dd1 100644 --- a/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts +++ b/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts @@ -25,6 +25,69 @@ export type AutocompleteSlot = | 'loading' | 'noOptions' | 'limitTag'; + +export interface AutocompleteSlots { + /** + * The component used to render the root. + * @default 'div' + */ + root: React.ElementType; + /** + * The component used to render the wrapper. + * @default 'div' + */ + wrapper: React.ElementType; + /** + * The component used to render the input. + * @default 'input' + */ + input: React.ElementType; + /** + * The component used to render the start decorator. + * @default 'span' + */ + startDecorator: React.ElementType; + /** + * The component used to render the end decorator. + * @default 'span' + */ + endDecorator: React.ElementType; + /** + * The component used to render the clear indicator. + * @default 'button' + */ + clearIndicator: React.ElementType; + /** + * The component used to render the popup indicator. + * @default 'button' + */ + popupIndicator: React.ElementType; + /** + * The component used to render the listbox. + * @default 'ul' + */ + listbox: React.ElementType; + /** + * The component used to render the option. + * @default 'li' + */ + option: React.ElementType; + /** + * The component used to render the loading. + * @default 'li' + */ + loading: React.ElementType; + /** + * The component used to render the no-options. + * @default 'li' + */ + noOptions: React.ElementType; + /** + * The component used to render the limit tag. + * @default 'span' + */ + limitTag: React.ElementType; +} export interface AutocompletePropsVariantOverrides {} @@ -60,7 +123,7 @@ export interface AutocompleteRenderGroupParams { } export type AutocompleteSlotsAndSlotProps = CreateSlotsAndSlotProps< - AutocompleteSlot, + AutocompleteSlots, { root: SlotProps<'div', {}, AutocompleteOwnerState>; wrapper: SlotProps<'div', {}, AutocompleteOwnerState>; diff --git a/packages/mui-joy/src/Avatar/AvatarProps.ts b/packages/mui-joy/src/Avatar/AvatarProps.ts index 3b595d6528f8e9..7d1a98912bbfc5 100644 --- a/packages/mui-joy/src/Avatar/AvatarProps.ts +++ b/packages/mui-joy/src/Avatar/AvatarProps.ts @@ -5,12 +5,30 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type AvatarSlot = 'root' | 'img' | 'fallback'; +export interface AvatarSlots { + /** + * The component used to render the root. + * @default 'div' + */ + root: React.ElementType; + /** + * The component used to render the img. + * @default 'img' + */ + img: React.ElementType; + /** + * The component used to render the fallback. + * @default 'svg' + */ + fallback: React.ElementType; +} + export interface AvatarPropsColorOverrides {} export interface AvatarPropsVariantOverrides {} export interface AvatarPropsSizeOverrides {} export type AvatarSlotsAndSlotProps = CreateSlotsAndSlotProps< - AvatarSlot, + AvatarSlots, { root: SlotProps<'div', {}, AvatarOwnerState>; img: SlotProps<'img', {}, AvatarOwnerState>; diff --git a/packages/mui-joy/src/Badge/BadgeProps.ts b/packages/mui-joy/src/Badge/BadgeProps.ts index 965f5d9e1427d9..1a88112bbe6079 100644 --- a/packages/mui-joy/src/Badge/BadgeProps.ts +++ b/packages/mui-joy/src/Badge/BadgeProps.ts @@ -5,6 +5,19 @@ import { SlotProps, CreateSlotsAndSlotProps } from '../utils/types'; export type BadgeSlot = 'root' | 'badge'; +export interface BadgeSlots { + /** + * The component used to render the root. + * @default 'div' + */ + root: React.ElementType; + /** + * The component used to render the badge. + * @default 'div' + */ + badge: React.ElementType; +} + export interface BadgePropsVariantOverrides {} export interface BadgePropsColorOverrides {} @@ -17,7 +30,7 @@ export interface BadgeOrigin { } export type BadgeSlotsAndSlotProps = CreateSlotsAndSlotProps< - BadgeSlot, + BadgeSlots, { root: SlotProps<'div', {}, BadgeOwnerState>; badge: SlotProps<'div', {}, BadgeOwnerState>; diff --git a/packages/mui-joy/src/Breadcrumbs/BreadcrumbsProps.ts b/packages/mui-joy/src/Breadcrumbs/BreadcrumbsProps.ts index 36de94a0fb378f..bf9845498ee21b 100644 --- a/packages/mui-joy/src/Breadcrumbs/BreadcrumbsProps.ts +++ b/packages/mui-joy/src/Breadcrumbs/BreadcrumbsProps.ts @@ -5,10 +5,33 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type BreadcrumbsSlot = 'root' | 'ol' | 'li' | 'separator'; +export interface BreadcrumbsSlots { + /** + * The component used to render the root. + * @default 'nav' + */ + root: React.ElementType; + /** + * The component used to render the ol. + * @default 'ol' + */ + ol: React.ElementType; + /** + * The component used to render the li. + * @default 'li' + */ + li: React.ElementType; + /** + * The component used to render the separator. + * @default 'li' + */ + separator: React.ElementType; +} + export interface BreadcrumbsPropsSizeOverrides {} export type BreadcrumbsSlotsAndSlotProps = CreateSlotsAndSlotProps< - BreadcrumbsSlot, + BreadcrumbsSlots, { root: SlotProps<'nav', {}, BreadcrumbsOwnerState>; ol: SlotProps<'ol', {}, BreadcrumbsOwnerState>; diff --git a/packages/mui-joy/src/Button/ButtonProps.ts b/packages/mui-joy/src/Button/ButtonProps.ts index 88487633c9b1b8..a62d6a213d46d6 100644 --- a/packages/mui-joy/src/Button/ButtonProps.ts +++ b/packages/mui-joy/src/Button/ButtonProps.ts @@ -10,12 +10,35 @@ import { SlotProps, CreateSlotsAndSlotProps } from '../utils/types'; export type ButtonSlot = 'root' | 'startDecorator' | 'endDecorator' | 'loadingIndicatorCenter'; +export interface ButtonSlots { + /** + * The component used to render the root. + * @default 'button' + */ + root: React.ElementType; + /** + * The component used to render the start decorator. + * @default 'span' + */ + startDecorator: React.ElementType; + /** + * The component used to render the end decorator. + * @default 'span' + */ + endDecorator: React.ElementType; + /** + * The component used to render the loading indicator center. + * @default 'span' + */ + loadingIndicatorCenter: React.ElementType; +} + export interface ButtonPropsVariantOverrides {} export interface ButtonPropsColorOverrides {} export interface ButtonPropsSizeOverrides {} export type ButtonSlotsAndSlotProps = CreateSlotsAndSlotProps< - ButtonSlot, + ButtonSlots, { root: SlotProps<'button', {}, ButtonOwnerState>; startDecorator: SlotProps<'span', {}, ButtonOwnerState>; diff --git a/packages/mui-joy/src/Checkbox/CheckboxProps.ts b/packages/mui-joy/src/Checkbox/CheckboxProps.ts index 7e67a381a136c8..69b5f79b7fc1b7 100644 --- a/packages/mui-joy/src/Checkbox/CheckboxProps.ts +++ b/packages/mui-joy/src/Checkbox/CheckboxProps.ts @@ -6,12 +6,40 @@ import { SlotProps, CreateSlotsAndSlotProps } from '../utils/types'; export type CheckboxSlot = 'root' | 'checkbox' | 'action' | 'input' | 'label'; +export interface CheckboxSlots { + /** + * The component used to render the root. + * @default 'span' + */ + root: React.ElementType; + /** + * The component used to render the checkbox. + * @default 'span' + */ + checkbox: React.ElementType; + /** + * The component used to render the action. + * @default 'span' + */ + action: React.ElementType; + /** + * The component used to render the input. + * @default 'input' + */ + input: React.ElementType; + /** + * The component used to render the label. + * @default 'label' + */ + label: React.ElementType; +} + export interface CheckboxPropsVariantOverrides {} export interface CheckboxPropsColorOverrides {} export interface CheckboxPropsSizeOverrides {} export type CheckboxSlotsAndSlotProps = CreateSlotsAndSlotProps< - CheckboxSlot, + CheckboxSlots, { root: SlotProps<'span', {}, CheckboxOwnerState>; checkbox: SlotProps<'span', {}, CheckboxOwnerState>; diff --git a/packages/mui-joy/src/Chip/ChipProps.ts b/packages/mui-joy/src/Chip/ChipProps.ts index 4a39ec66b9615c..de73a866765ace 100644 --- a/packages/mui-joy/src/Chip/ChipProps.ts +++ b/packages/mui-joy/src/Chip/ChipProps.ts @@ -5,12 +5,40 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type ChipSlot = 'root' | 'label' | 'action' | 'startDecorator' | 'endDecorator'; +export interface ChipSlots { + /** + * The component used to render the root. + * @default 'div' + */ + root: React.ElementType; + /** + * The component used to render the label. + * @default 'span' + */ + label: React.ElementType; + /** + * The component used to render the action. + * @default 'button' + */ + action: React.ElementType; + /** + * The component used to render the start decorator. + * @default 'span' + */ + startDecorator: React.ElementType; + /** + * The component used to render the end decorator. + * @default 'span' + */ + endDecorator: React.ElementType; +} + export interface ChipPropsColorOverrides {} export interface ChipPropsSizeOverrides {} export interface ChipPropsVariantOverrides {} export type ChipSlotsAndSlotProps = CreateSlotsAndSlotProps< - ChipSlot, + ChipSlots, { root: SlotProps<'div', {}, ChipOwnerState>; label: SlotProps<'span', {}, ChipOwnerState>; diff --git a/packages/mui-joy/src/CircularProgress/CircularProgressProps.ts b/packages/mui-joy/src/CircularProgress/CircularProgressProps.ts index 6f8c80cac85e18..e3881e20257d45 100644 --- a/packages/mui-joy/src/CircularProgress/CircularProgressProps.ts +++ b/packages/mui-joy/src/CircularProgress/CircularProgressProps.ts @@ -5,12 +5,35 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type CircularProgressSlot = 'root' | 'svg' | 'track' | 'progress'; +export interface CircularProgressSlots { + /** + * The component used to render the root. + * @default 'span' + */ + root: React.ElementType; + /** + * The component used to render the svg. + * @default 'svg' + */ + svg: React.ElementType; + /** + * The component used to render the track. + * @default 'circle' + */ + track: React.ElementType; + /** + * The component used to render the progress. + * @default 'circle' + */ + progress: React.ElementType; +} + export interface CircularProgressPropsColorOverrides {} export interface CircularProgressPropsSizeOverrides {} export interface CircularProgressPropsVariantOverrides {} export type CircularProgressSlotsAndSlotProps = CreateSlotsAndSlotProps< - CircularProgressSlot, + CircularProgressSlots, { root: SlotProps<'span', {}, CircularProgressOwnerState>; svg: SlotProps<'svg', {}, CircularProgressOwnerState>; diff --git a/packages/mui-joy/src/FormLabel/FormLabelProps.ts b/packages/mui-joy/src/FormLabel/FormLabelProps.ts index 1572f72551a04f..41c592eaa9405f 100644 --- a/packages/mui-joy/src/FormLabel/FormLabelProps.ts +++ b/packages/mui-joy/src/FormLabel/FormLabelProps.ts @@ -5,8 +5,21 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type FormLabelSlot = 'root' | 'asterisk'; +export interface FormLabelSlots { + /** + * The component used to render the root. + * @default 'label' + */ + root: React.ElementType; + /** + * The component used to render the asterisk. + * @default 'span' + */ + asterisk: React.ElementType; +} + export type FormLabelSlotsAndSlotProps = CreateSlotsAndSlotProps< - FormLabelSlot, + FormLabelSlots, { root: SlotProps<'label', {}, FormLabelOwnerState>; asterisk: SlotProps<'span', {}, FormLabelOwnerState>; diff --git a/packages/mui-joy/src/Input/InputProps.ts b/packages/mui-joy/src/Input/InputProps.ts index 4965cdfc851126..1680b53b9e4082 100644 --- a/packages/mui-joy/src/Input/InputProps.ts +++ b/packages/mui-joy/src/Input/InputProps.ts @@ -5,12 +5,35 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type InputSlot = 'root' | 'input' | 'startDecorator' | 'endDecorator'; +export interface InputSlots { + /** + * The component used to render the root. + * @default 'div' + */ + root: React.ElementType; + /** + * The component used to render the input. + * @default 'input' + */ + input: React.ElementType; + /** + * The component used to render the start decorator. + * @default 'span' + */ + startDecorator: React.ElementType; + /** + * The component used to render the end decorator. + * @default 'span' + */ + endDecorator: React.ElementType; +} + export interface InputPropsVariantOverrides {} export interface InputPropsColorOverrides {} export interface InputPropsSizeOverrides {} export type InputSlotsAndSlotProps = CreateSlotsAndSlotProps< - InputSlot, + InputSlots, { root: SlotProps<'div', {}, InputOwnerState>; input: SlotProps<'input', {}, InputOwnerState>; diff --git a/packages/mui-joy/src/Link/LinkProps.ts b/packages/mui-joy/src/Link/LinkProps.ts index 7f23ddb82419dd..3915ac8e661f02 100644 --- a/packages/mui-joy/src/Link/LinkProps.ts +++ b/packages/mui-joy/src/Link/LinkProps.ts @@ -13,12 +13,30 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type LinkSlot = 'root' | 'startDecorator' | 'endDecorator'; +export interface LinkSlots { + /** + * The component used to render the root. + * @default 'a' + */ + root: React.ElementType; + /** + * The component used to render the start decorator. + * @default 'span' + */ + startDecorator: React.ElementType; + /** + * The component used to render the end decorator. + * @default 'span' + */ + endDecorator: React.ElementType; +} + export interface LinkPropsVariantOverrides {} export interface LinkPropsColorOverrides {} export type LinkSlotsAndSlotProps = CreateSlotsAndSlotProps< - LinkSlot, + LinkSlots, { root: SlotProps<'a', {}, LinkOwnerState>; startDecorator: SlotProps<'span', {}, LinkOwnerState>; diff --git a/packages/mui-joy/src/ListItem/ListItemProps.ts b/packages/mui-joy/src/ListItem/ListItemProps.ts index 2dc941b5e8e9ba..1d0e6ad0e07ece 100644 --- a/packages/mui-joy/src/ListItem/ListItemProps.ts +++ b/packages/mui-joy/src/ListItem/ListItemProps.ts @@ -5,11 +5,29 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type ListItemSlot = 'root' | 'startAction' | 'endAction'; +export interface ListItemSlots { + /** + * The component used to render the root. + * @default 'li' + */ + root: React.ElementType; + /** + * The component used to render the start action. + * @default 'div' + */ + startAction: React.ElementType; + /** + * The component used to render the end action. + * @default 'div' + */ + endAction: React.ElementType; +} + export interface ListItemPropsVariantOverrides {} export interface ListItemPropsColorOverrides {} export type ListItemSlotsAndSlotProps = CreateSlotsAndSlotProps< - ListItemSlot, + ListItemSlots, { root: SlotProps<'li', {}, ListItemOwnerState>; startAction: SlotProps<'div', {}, ListItemOwnerState>; diff --git a/packages/mui-joy/src/Modal/ModalProps.ts b/packages/mui-joy/src/Modal/ModalProps.ts index ef47d1cf539277..33b4c487852ada 100644 --- a/packages/mui-joy/src/Modal/ModalProps.ts +++ b/packages/mui-joy/src/Modal/ModalProps.ts @@ -6,8 +6,21 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type ModalSlot = 'root' | 'backdrop'; +export interface ModalSlots { + /** + * The component used to render the root. + * @default 'div' + */ + root: React.ElementType; + /** + * The component used to render the backdrop. + * @default 'div' + */ + backdrop: React.ElementType; +} + export type ModalSlotsAndSlotProps = CreateSlotsAndSlotProps< - ModalSlot, + ModalSlots, { root: SlotProps<'div', {}, ModalOwnerState>; backdrop: SlotProps<'div', {}, ModalOwnerState>; diff --git a/packages/mui-joy/src/Radio/RadioProps.ts b/packages/mui-joy/src/Radio/RadioProps.ts index d6e83063903805..7584541d989f86 100644 --- a/packages/mui-joy/src/Radio/RadioProps.ts +++ b/packages/mui-joy/src/Radio/RadioProps.ts @@ -6,6 +6,39 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type RadioSlot = 'root' | 'radio' | 'icon' | 'action' | 'input' | 'label'; +export interface RadioSlots { + /** + * The component used to render the root. + * @default 'span' + */ + root: React.ElementType; + /** + * The component used to render the radio. + * @default 'span' + */ + radio: React.ElementType; + /** + * The component used to render the icon. + * @default 'span' + */ + icon: React.ElementType; + /** + * The component used to render the action. + * @default 'span' + */ + action: React.ElementType; + /** + * The component used to render the input. + * @default 'input' + */ + input: React.ElementType; + /** + * The component used to render the label. + * @default 'label' + */ + label: React.ElementType; +} + export interface RadioPropsVariantOverrides {} export interface RadioPropsColorOverrides {} @@ -13,7 +46,7 @@ export interface RadioPropsColorOverrides {} export interface RadioPropsSizeOverrides {} export type RadioSlotsAndSlotProps = CreateSlotsAndSlotProps< - RadioSlot, + RadioSlots, { root: SlotProps<'span', {}, RadioOwnerState>; radio: SlotProps<'span', {}, RadioOwnerState>; diff --git a/packages/mui-joy/src/Select/SelectProps.ts b/packages/mui-joy/src/Select/SelectProps.ts index f7563f10a231d2..bd0352299510ff 100644 --- a/packages/mui-joy/src/Select/SelectProps.ts +++ b/packages/mui-joy/src/Select/SelectProps.ts @@ -16,12 +16,45 @@ export type SelectSlot = | 'indicator' | 'listbox'; +export interface SelectSlots { + /** + * The component used to render the root. + * @default 'div' + */ + root: React.ElementType; + /** + * The component used to render the button. + * @default 'button' + */ + button: React.ElementType; + /** + * The component used to render the start decorator. + * @default 'span' + */ + startDecorator: React.ElementType; + /** + * The component used to render the end decorator. + * @default 'span' + */ + endDecorator: React.ElementType; + /** + * The component used to render the indicator. + * @default 'span' + */ + indicator: React.ElementType; + /** + * The component used to render the listbox. + * @default 'ul' + */ + listbox: React.ElementType; +} + export interface SelectPropsVariantOverrides {} export interface SelectPropsColorOverrides {} export interface SelectPropsSizeOverrides {} export type SelectSlotsAndSlotProps = CreateSlotsAndSlotProps< - SelectSlot, + SelectSlots, { root: SlotProps<'div', {}, SelectOwnerState>; button: SlotProps<'button', {}, SelectOwnerState>; diff --git a/packages/mui-joy/src/Slider/SliderProps.ts b/packages/mui-joy/src/Slider/SliderProps.ts index f08f2289f87f82..515413c6582bda 100644 --- a/packages/mui-joy/src/Slider/SliderProps.ts +++ b/packages/mui-joy/src/Slider/SliderProps.ts @@ -14,8 +14,51 @@ export type SliderSlot = | 'valueLabel' | 'input'; +export interface SliderSlots { + /** + * The component used to render the root. + * @default 'span' + */ + root: React.ElementType; + /** + * The component used to render the track. + * @default 'span' + */ + track: React.ElementType; + /** + * The component used to render the rail. + * @default 'span' + */ + rail: React.ElementType; + /** + * The component used to render the thumb. + * @default 'span' + */ + thumb: React.ElementType; + /** + * The component used to render the mark. + * @default 'span' + */ + mark: React.ElementType; + /** + * The component used to render the mark label. + * @default 'span' + */ + markLabel: React.ElementType; + /** + * The component used to render the value label. + * @default 'span' + */ + valueLabel: React.ElementType; + /** + * The component used to render the input. + * @default 'input' + */ + input: React.ElementType; +} + export type SliderSlotsAndSlotProps = CreateSlotsAndSlotProps< - SliderSlot, + SliderSlots, { root: SlotProps<'span', {}, SliderOwnerState>; track: SlotProps<'span', {}, SliderOwnerState>; diff --git a/packages/mui-joy/src/Switch/SwitchProps.ts b/packages/mui-joy/src/Switch/SwitchProps.ts index aeec909c1d29b6..2ecda1a6ee4345 100644 --- a/packages/mui-joy/src/Switch/SwitchProps.ts +++ b/packages/mui-joy/src/Switch/SwitchProps.ts @@ -13,12 +13,50 @@ export type SwitchSlot = | 'startDecorator' | 'endDecorator'; +export interface SwitchSlots { + /** + * The component used to render the root. + * @default 'div' + */ + root: React.ElementType; + /** + * The component used to render the thumb. + * @default 'span' + */ + thumb: React.ElementType; + /** + * The component used to render the action. + * @default 'div' + */ + action: React.ElementType; + /** + * The component used to render the input. + * @default 'input' + */ + input: React.ElementType; + /** + * The component used to render the track. + * @default 'span' + */ + track: React.ElementType; + /** + * The component used to render the start decorator. + * @default 'span' + */ + startDecorator: React.ElementType; + /** + * The component used to render the end decorator. + * @default 'span' + */ + endDecorator: React.ElementType; +} + export interface SwitchPropsVariantOverrides {} export interface SwitchPropsColorOverrides {} export interface SwitchPropsSizeOverrides {} export type SwitchSlotsAndSlotProps = CreateSlotsAndSlotProps< - SwitchSlot, + SwitchSlots, { root: SlotProps<'div', {}, SwitchOwnerState>; thumb: SlotProps<'span', {}, SwitchOwnerState>; diff --git a/packages/mui-joy/src/Textarea/TextareaProps.ts b/packages/mui-joy/src/Textarea/TextareaProps.ts index 79e6ec874b79c7..3d7f12c121877a 100644 --- a/packages/mui-joy/src/Textarea/TextareaProps.ts +++ b/packages/mui-joy/src/Textarea/TextareaProps.ts @@ -5,12 +5,35 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type TextareaSlot = 'root' | 'textarea' | 'startDecorator' | 'endDecorator'; +export interface TextareaSlots { + /** + * The component used to render the root. + * @default 'div' + */ + root: React.ElementType; + /** + * The component used to render the textarea. + * @default 'textarea' + */ + textarea: React.ElementType; + /** + * The component used to render the start decorator. + * @default 'div' + */ + startDecorator: React.ElementType; + /** + * The component used to render the end decorator. + * @default 'div' + */ + endDecorator: React.ElementType; +} + export interface TextareaPropsVariantOverrides {} export interface TextareaPropsColorOverrides {} export interface TextareaPropsSizeOverrides {} export type TextareaSlotsAndSlotProps = CreateSlotsAndSlotProps< - TextareaSlot, + TextareaSlots, { root: SlotProps<'div', {}, TextareaOwnerState>; textarea: SlotProps<'textarea', {}, TextareaOwnerState>; diff --git a/packages/mui-joy/src/Tooltip/TooltipProps.ts b/packages/mui-joy/src/Tooltip/TooltipProps.ts index cf7cd385bd258f..623c8bbef11227 100644 --- a/packages/mui-joy/src/Tooltip/TooltipProps.ts +++ b/packages/mui-joy/src/Tooltip/TooltipProps.ts @@ -6,12 +6,25 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type TooltipSlot = 'root' | 'arrow'; +export interface TooltipSlots { + /** + * The component used to render the root. + * @default 'div' + */ + root: React.ElementType; + /** + * The component used to render the arrow. + * @default 'span' + */ + arrow: React.ElementType; +} + export interface TooltipPropsVariantOverrides {} export interface TooltipPropsColorOverrides {} export interface TooltipPropsSizeOverrides {} export type TooltipSlotsAndSlotProps = CreateSlotsAndSlotProps< - TooltipSlot, + TooltipSlots, { root: SlotProps< 'div', diff --git a/packages/mui-joy/src/Typography/TypographyProps.ts b/packages/mui-joy/src/Typography/TypographyProps.ts index a9702034245640..09a2687f3a2d70 100644 --- a/packages/mui-joy/src/Typography/TypographyProps.ts +++ b/packages/mui-joy/src/Typography/TypographyProps.ts @@ -13,11 +13,29 @@ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type TypographySlot = 'root' | 'startDecorator' | 'endDecorator'; +export interface TypographySlots { + /** + * The component used to render the root. + * @default 'a' + */ + root: React.ElementType; + /** + * The component used to render the start decorator. + * @default 'span' + */ + startDecorator: React.ElementType; + /** + * The component used to render the end decorator. + * @default 'span' + */ + endDecorator: React.ElementType; +} + export interface TypographyPropsColorOverrides {} export interface TypographyPropsVariantOverrides {} export type TypographySlotsAndSlotProps = CreateSlotsAndSlotProps< - TypographySlot, + TypographySlots, { root: SlotProps<'a', {}, TypographyOwnerState>; startDecorator: SlotProps<'span', {}, TypographyOwnerState>; diff --git a/packages/mui-joy/src/utils/types.ts b/packages/mui-joy/src/utils/types.ts index 60d58524503db9..3eadb7b6886433 100644 --- a/packages/mui-joy/src/utils/types.ts +++ b/packages/mui-joy/src/utils/types.ts @@ -23,10 +23,8 @@ export type SlotProps */ -export type CreateSlotsAndSlotProps> = { - slots?: { - [P in keyof K]?: React.ElementType; - }; +export type CreateSlotsAndSlotProps> = { + slots?: Slots; slotProps?: { [P in keyof K]?: K[P]; }; From 067753484851a36a0ed1ba6a249ac107126be482 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 20 Feb 2023 12:25:56 +0000 Subject: [PATCH 2/7] Update api docs --- docs/pages/joy-ui/api/alert.json | 20 +++++ docs/pages/joy-ui/api/aspect-ratio.json | 14 ++++ docs/pages/joy-ui/api/autocomplete.json | 74 +++++++++++++++++++ docs/pages/joy-ui/api/avatar.json | 20 +++++ docs/pages/joy-ui/api/badge.json | 14 ++++ docs/pages/joy-ui/api/breadcrumbs.json | 26 +++++++ docs/pages/joy-ui/api/button.json | 26 +++++++ docs/pages/joy-ui/api/checkbox.json | 32 ++++++++ docs/pages/joy-ui/api/chip.json | 32 ++++++++ docs/pages/joy-ui/api/circular-progress.json | 16 ++++ docs/pages/joy-ui/api/form-label.json | 14 ++++ docs/pages/joy-ui/api/input.json | 26 +++++++ docs/pages/joy-ui/api/link.json | 20 +++++ docs/pages/joy-ui/api/list-item.json | 20 +++++ docs/pages/joy-ui/api/modal.json | 14 ++++ docs/pages/joy-ui/api/radio.json | 38 ++++++++++ docs/pages/joy-ui/api/select.json | 38 ++++++++++ docs/pages/joy-ui/api/slider.json | 50 +++++++++++++ docs/pages/joy-ui/api/switch.json | 44 +++++++++++ docs/pages/joy-ui/api/textarea.json | 26 +++++++ docs/pages/joy-ui/api/tooltip.json | 14 ++++ docs/pages/joy-ui/api/typography.json | 20 +++++ .../api-docs-joy/alert/alert.json | 7 +- .../aspect-ratio/aspect-ratio.json | 6 +- .../autocomplete/autocomplete.json | 16 +++- .../api-docs-joy/avatar/avatar.json | 7 +- .../api-docs-joy/badge/badge.json | 6 +- .../api-docs-joy/breadcrumbs/breadcrumbs.json | 8 +- .../api-docs-joy/button/button.json | 8 +- .../api-docs-joy/checkbox/checkbox.json | 9 ++- docs/translations/api-docs-joy/chip/chip.json | 9 ++- .../circular-progress/circular-progress.json | 8 +- .../api-docs-joy/form-label/form-label.json | 6 +- .../api-docs-joy/input/input.json | 8 +- docs/translations/api-docs-joy/link/link.json | 7 +- .../api-docs-joy/list-item/list-item.json | 7 +- .../api-docs-joy/modal/modal.json | 6 +- .../api-docs-joy/radio/radio.json | 10 ++- .../api-docs-joy/select/select.json | 10 ++- .../api-docs-joy/slider/slider.json | 10 +++ .../api-docs-joy/switch/switch.json | 11 ++- .../api-docs-joy/textarea/textarea.json | 8 +- .../api-docs-joy/tooltip/tooltip.json | 6 +- .../api-docs-joy/typography/typography.json | 7 +- 44 files changed, 757 insertions(+), 21 deletions(-) diff --git a/docs/pages/joy-ui/api/alert.json b/docs/pages/joy-ui/api/alert.json index a14f33833b7487..3002c56816afb7 100644 --- a/docs/pages/joy-ui/api/alert.json +++ b/docs/pages/joy-ui/api/alert.json @@ -33,6 +33,26 @@ }, "name": "Alert", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "endDecorator", + "description": "The component used to render the end decorator.", + "default": "'span'", + "class": ".MuiAlert-endDecorator" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'div'", + "class": ".MuiAlert-root" + }, + { + "name": "startDecorator", + "description": "The component used to render the start decorator.", + "default": "'span'", + "class": ".MuiAlert-startDecorator" + } + ], "spread": true, "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-joy/src/Alert/Alert.tsx", diff --git a/docs/pages/joy-ui/api/aspect-ratio.json b/docs/pages/joy-ui/api/aspect-ratio.json index aa59d1410edd7b..5d6bba7a6ee9e1 100644 --- a/docs/pages/joy-ui/api/aspect-ratio.json +++ b/docs/pages/joy-ui/api/aspect-ratio.json @@ -37,6 +37,20 @@ }, "name": "AspectRatio", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "content", + "description": "The component used to render the content.", + "default": "'div'", + "class": ".MuiAspectRatio-content" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'div'", + "class": ".MuiAspectRatio-root" + } + ], "spread": true, "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-joy/src/AspectRatio/AspectRatio.tsx", diff --git a/docs/pages/joy-ui/api/autocomplete.json b/docs/pages/joy-ui/api/autocomplete.json index 51e53cad382c16..83f9c79dfac7d3 100644 --- a/docs/pages/joy-ui/api/autocomplete.json +++ b/docs/pages/joy-ui/api/autocomplete.json @@ -88,6 +88,80 @@ }, "name": "Autocomplete", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "clearIndicator", + "description": "The component used to render the clear indicator.", + "default": "'button'", + "class": ".MuiAutocomplete-clearIndicator" + }, + { + "name": "endDecorator", + "description": "The component used to render the end decorator.", + "default": "'span'", + "class": ".MuiAutocomplete-endDecorator" + }, + { + "name": "input", + "description": "The component used to render the input.", + "default": "'input'", + "class": ".MuiAutocomplete-input" + }, + { + "name": "limitTag", + "description": "The component used to render the limit tag.", + "default": "'span'", + "class": ".MuiAutocomplete-limitTag" + }, + { + "name": "listbox", + "description": "The component used to render the listbox.", + "default": "'ul'", + "class": ".MuiAutocomplete-listbox" + }, + { + "name": "loading", + "description": "The component used to render the loading.", + "default": "'li'", + "class": ".MuiAutocomplete-loading" + }, + { + "name": "noOptions", + "description": "The component used to render the no-options.", + "default": "'li'", + "class": ".MuiAutocomplete-noOptions" + }, + { + "name": "option", + "description": "The component used to render the option.", + "default": "'li'", + "class": ".MuiAutocomplete-option" + }, + { + "name": "popupIndicator", + "description": "The component used to render the popup indicator.", + "default": "'button'", + "class": ".MuiAutocomplete-popupIndicator" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'div'", + "class": ".MuiAutocomplete-root" + }, + { + "name": "startDecorator", + "description": "The component used to render the start decorator.", + "default": "'span'", + "class": ".MuiAutocomplete-startDecorator" + }, + { + "name": "wrapper", + "description": "The component used to render the wrapper.", + "default": "'div'", + "class": ".MuiAutocomplete-wrapper" + } + ], "spread": true, "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-joy/src/Autocomplete/Autocomplete.tsx", diff --git a/docs/pages/joy-ui/api/avatar.json b/docs/pages/joy-ui/api/avatar.json index c77d4923817a95..7532c474561c1a 100644 --- a/docs/pages/joy-ui/api/avatar.json +++ b/docs/pages/joy-ui/api/avatar.json @@ -34,6 +34,26 @@ }, "name": "Avatar", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "fallback", + "description": "The component used to render the fallback.", + "default": "'svg'", + "class": ".MuiAvatar-fallback" + }, + { + "name": "img", + "description": "The component used to render the img.", + "default": "'img'", + "class": ".MuiAvatar-img" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'div'", + "class": ".MuiAvatar-root" + } + ], "spread": true, "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-joy/src/Avatar/Avatar.tsx", diff --git a/docs/pages/joy-ui/api/badge.json b/docs/pages/joy-ui/api/badge.json index 2acb56e0d61ff2..7e1e7aa8bd2941 100644 --- a/docs/pages/joy-ui/api/badge.json +++ b/docs/pages/joy-ui/api/badge.json @@ -46,6 +46,20 @@ }, "name": "Badge", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "badge", + "description": "The component used to render the badge.", + "default": "'div'", + "class": ".MuiBadge-badge" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'div'", + "class": ".MuiBadge-root" + } + ], "spread": true, "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-joy/src/Badge/Badge.tsx", diff --git a/docs/pages/joy-ui/api/breadcrumbs.json b/docs/pages/joy-ui/api/breadcrumbs.json index 6f18365509c763..ec063f68febfb3 100644 --- a/docs/pages/joy-ui/api/breadcrumbs.json +++ b/docs/pages/joy-ui/api/breadcrumbs.json @@ -18,6 +18,32 @@ }, "name": "Breadcrumbs", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "li", + "description": "The component used to render the li.", + "default": "'li'", + "class": ".MuiBreadcrumbs-li" + }, + { + "name": "ol", + "description": "The component used to render the ol.", + "default": "'ol'", + "class": ".MuiBreadcrumbs-ol" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'nav'", + "class": ".MuiBreadcrumbs-root" + }, + { + "name": "separator", + "description": "The component used to render the separator.", + "default": "'li'", + "class": ".MuiBreadcrumbs-separator" + } + ], "spread": true, "forwardsRefTo": "HTMLElement", "filename": "/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx", diff --git a/docs/pages/joy-ui/api/button.json b/docs/pages/joy-ui/api/button.json index 869d65a9f8c837..a58c6bea8b2520 100644 --- a/docs/pages/joy-ui/api/button.json +++ b/docs/pages/joy-ui/api/button.json @@ -49,6 +49,32 @@ }, "name": "Button", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "endDecorator", + "description": "The component used to render the end decorator.", + "default": "'span'", + "class": ".MuiButton-endDecorator" + }, + { + "name": "loadingIndicatorCenter", + "description": "The component used to render the loading indicator center.", + "default": "'span'", + "class": ".MuiButton-loadingIndicatorCenter" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'button'", + "class": ".MuiButton-root" + }, + { + "name": "startDecorator", + "description": "The component used to render the start decorator.", + "default": "'span'", + "class": ".MuiButton-startDecorator" + } + ], "spread": false, "forwardsRefTo": "HTMLButtonElement", "filename": "/packages/mui-joy/src/Button/Button.tsx", diff --git a/docs/pages/joy-ui/api/checkbox.json b/docs/pages/joy-ui/api/checkbox.json index 9884b3aa24316f..3eb8745d08d650 100644 --- a/docs/pages/joy-ui/api/checkbox.json +++ b/docs/pages/joy-ui/api/checkbox.json @@ -48,6 +48,38 @@ }, "name": "Checkbox", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "action", + "description": "The component used to render the action.", + "default": "'span'", + "class": ".MuiCheckbox-action" + }, + { + "name": "checkbox", + "description": "The component used to render the checkbox.", + "default": "'span'", + "class": ".MuiCheckbox-checkbox" + }, + { + "name": "input", + "description": "The component used to render the input.", + "default": "'input'", + "class": ".MuiCheckbox-input" + }, + { + "name": "label", + "description": "The component used to render the label.", + "default": "'label'", + "class": ".MuiCheckbox-label" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'span'", + "class": ".MuiCheckbox-root" + } + ], "spread": false, "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-joy/src/Checkbox/Checkbox.tsx", diff --git a/docs/pages/joy-ui/api/chip.json b/docs/pages/joy-ui/api/chip.json index 270c9d91ac4be9..4bf01fcc76f198 100644 --- a/docs/pages/joy-ui/api/chip.json +++ b/docs/pages/joy-ui/api/chip.json @@ -35,6 +35,38 @@ }, "name": "Chip", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "action", + "description": "The component used to render the action.", + "default": "'button'", + "class": ".MuiChip-action" + }, + { + "name": "endDecorator", + "description": "The component used to render the end decorator.", + "default": "'span'", + "class": ".MuiChip-endDecorator" + }, + { + "name": "label", + "description": "The component used to render the label.", + "default": "'span'", + "class": ".MuiChip-label" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'div'", + "class": ".MuiChip-root" + }, + { + "name": "startDecorator", + "description": "The component used to render the start decorator.", + "default": "'span'", + "class": ".MuiChip-startDecorator" + } + ], "spread": true, "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-joy/src/Chip/Chip.tsx", diff --git a/docs/pages/joy-ui/api/circular-progress.json b/docs/pages/joy-ui/api/circular-progress.json index 3aad5f08bdec17..ac872c7c837897 100644 --- a/docs/pages/joy-ui/api/circular-progress.json +++ b/docs/pages/joy-ui/api/circular-progress.json @@ -33,6 +33,22 @@ }, "name": "CircularProgress", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { "name": "progress", "description": "", "class": ".MuiCircularProgress-progress" }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'span'", + "class": ".MuiCircularProgress-root" + }, + { + "name": "svg", + "description": "The component used to render the svg.", + "default": "'svg'", + "class": ".MuiCircularProgress-svg" + }, + { "name": "track", "description": "", "class": ".MuiCircularProgress-track" } + ], "spread": true, "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-joy/src/CircularProgress/CircularProgress.tsx", diff --git a/docs/pages/joy-ui/api/form-label.json b/docs/pages/joy-ui/api/form-label.json index 7e19c2cee1cc3e..d199f557f450f7 100644 --- a/docs/pages/joy-ui/api/form-label.json +++ b/docs/pages/joy-ui/api/form-label.json @@ -12,6 +12,20 @@ }, "name": "FormLabel", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "asterisk", + "description": "The component used to render the asterisk.", + "default": "'span'", + "class": ".MuiFormLabel-asterisk" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'label'", + "class": ".MuiFormLabel-root" + } + ], "spread": true, "forwardsRefTo": "HTMLLabelElement", "filename": "/packages/mui-joy/src/FormLabel/FormLabel.tsx", diff --git a/docs/pages/joy-ui/api/input.json b/docs/pages/joy-ui/api/input.json index ec9e8ebe0c13b8..67d049bc3e1983 100644 --- a/docs/pages/joy-ui/api/input.json +++ b/docs/pages/joy-ui/api/input.json @@ -32,6 +32,32 @@ }, "name": "Input", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "endDecorator", + "description": "The component used to render the end decorator.", + "default": "'span'", + "class": ".MuiInput-endDecorator" + }, + { + "name": "input", + "description": "The component used to render the input.", + "default": "'input'", + "class": ".MuiInput-input" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'div'", + "class": ".MuiInput-root" + }, + { + "name": "startDecorator", + "description": "The component used to render the start decorator.", + "default": "'span'", + "class": ".MuiInput-startDecorator" + } + ], "spread": false, "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-joy/src/Input/Input.tsx", diff --git a/docs/pages/joy-ui/api/link.json b/docs/pages/joy-ui/api/link.json index f38f446d8d516f..0c30f17298dc7d 100644 --- a/docs/pages/joy-ui/api/link.json +++ b/docs/pages/joy-ui/api/link.json @@ -43,6 +43,26 @@ }, "name": "Link", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "endDecorator", + "description": "The component used to render the end decorator.", + "default": "'span'", + "class": ".MuiLink-endDecorator" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'a'", + "class": ".MuiLink-root" + }, + { + "name": "startDecorator", + "description": "The component used to render the start decorator.", + "default": "'span'", + "class": ".MuiLink-startDecorator" + } + ], "spread": true, "forwardsRefTo": "HTMLAnchorElement", "filename": "/packages/mui-joy/src/Link/Link.tsx", diff --git a/docs/pages/joy-ui/api/list-item.json b/docs/pages/joy-ui/api/list-item.json index e2b710e25ce572..5f17839ea63a2d 100644 --- a/docs/pages/joy-ui/api/list-item.json +++ b/docs/pages/joy-ui/api/list-item.json @@ -29,6 +29,26 @@ }, "name": "ListItem", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "endAction", + "description": "The component used to render the end action.", + "default": "'div'", + "class": ".MuiListItem-endAction" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'li'", + "class": ".MuiListItem-root" + }, + { + "name": "startAction", + "description": "The component used to render the start action.", + "default": "'div'", + "class": ".MuiListItem-startAction" + } + ], "spread": true, "forwardsRefTo": "HTMLLIElement", "filename": "/packages/mui-joy/src/ListItem/ListItem.tsx", diff --git a/docs/pages/joy-ui/api/modal.json b/docs/pages/joy-ui/api/modal.json index 5d4f34849be2de..5f8fb3272fe761 100644 --- a/docs/pages/joy-ui/api/modal.json +++ b/docs/pages/joy-ui/api/modal.json @@ -21,6 +21,20 @@ }, "name": "Modal", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "backdrop", + "description": "The component used to render the backdrop.", + "default": "'div'", + "class": ".MuiModal-backdrop" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'div'", + "class": ".MuiModal-root" + } + ], "spread": true, "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-joy/src/Modal/Modal.tsx", diff --git a/docs/pages/joy-ui/api/radio.json b/docs/pages/joy-ui/api/radio.json index 588807a69252f1..66e30e8ba4a9ab 100644 --- a/docs/pages/joy-ui/api/radio.json +++ b/docs/pages/joy-ui/api/radio.json @@ -44,6 +44,44 @@ }, "name": "Radio", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "action", + "description": "The component used to render the action.", + "default": "'span'", + "class": ".MuiRadio-action" + }, + { + "name": "icon", + "description": "The component used to render the icon.", + "default": "'span'", + "class": ".MuiRadio-icon" + }, + { + "name": "input", + "description": "The component used to render the input.", + "default": "'input'", + "class": ".MuiRadio-input" + }, + { + "name": "label", + "description": "The component used to render the label.", + "default": "'label'", + "class": ".MuiRadio-label" + }, + { + "name": "radio", + "description": "The component used to render the radio.", + "default": "'span'", + "class": ".MuiRadio-radio" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'span'", + "class": ".MuiRadio-root" + } + ], "spread": false, "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-joy/src/Radio/Radio.tsx", diff --git a/docs/pages/joy-ui/api/select.json b/docs/pages/joy-ui/api/select.json index fde9fbbe594902..4a1363000f3d75 100644 --- a/docs/pages/joy-ui/api/select.json +++ b/docs/pages/joy-ui/api/select.json @@ -45,6 +45,44 @@ }, "name": "Select", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "button", + "description": "The component used to render the button.", + "default": "'button'", + "class": ".MuiSelect-button" + }, + { + "name": "endDecorator", + "description": "The component used to render the end decorator.", + "default": "'span'", + "class": ".MuiSelect-endDecorator" + }, + { + "name": "indicator", + "description": "The component used to render the indicator.", + "default": "'span'", + "class": ".MuiSelect-indicator" + }, + { + "name": "listbox", + "description": "The component used to render the listbox.", + "default": "'ul'", + "class": ".MuiSelect-listbox" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'div'", + "class": ".MuiSelect-root" + }, + { + "name": "startDecorator", + "description": "The component used to render the start decorator.", + "default": "'span'", + "class": ".MuiSelect-startDecorator" + } + ], "spread": false, "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-joy/src/Select/Select.tsx", diff --git a/docs/pages/joy-ui/api/slider.json b/docs/pages/joy-ui/api/slider.json index c578c11558eba8..36ffceb53dbda7 100644 --- a/docs/pages/joy-ui/api/slider.json +++ b/docs/pages/joy-ui/api/slider.json @@ -103,6 +103,56 @@ }, "name": "MuiSlider" }, + "slots": [ + { + "name": "input", + "description": "The component used to render the input.", + "default": "'input'", + "class": ".MuiSlider-input" + }, + { + "name": "mark", + "description": "The component used to render the mark.", + "default": "'span'", + "class": ".MuiSlider-mark" + }, + { + "name": "markLabel", + "description": "The component used to render the mark label.", + "default": "'span'", + "class": ".MuiSlider-markLabel" + }, + { + "name": "rail", + "description": "The component used to render the rail.", + "default": "'span'", + "class": ".MuiSlider-rail" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'span'", + "class": ".MuiSlider-root" + }, + { + "name": "thumb", + "description": "The component used to render the thumb.", + "default": "'span'", + "class": ".MuiSlider-thumb" + }, + { + "name": "track", + "description": "The component used to render the track.", + "default": "'span'", + "class": ".MuiSlider-track" + }, + { + "name": "valueLabel", + "description": "The component used to render the value label.", + "default": "'span'", + "class": ".MuiSlider-valueLabel" + } + ], "spread": false, "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-joy/src/Slider/Slider.tsx", diff --git a/docs/pages/joy-ui/api/switch.json b/docs/pages/joy-ui/api/switch.json index 04e93fb9c65fb4..2c93b01248da2a 100644 --- a/docs/pages/joy-ui/api/switch.json +++ b/docs/pages/joy-ui/api/switch.json @@ -38,6 +38,50 @@ }, "name": "Switch", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "action", + "description": "The component used to render the action.", + "default": "'div'", + "class": ".MuiSwitch-action" + }, + { + "name": "endDecorator", + "description": "The component used to render the end decorator.", + "default": "'span'", + "class": ".MuiSwitch-endDecorator" + }, + { + "name": "input", + "description": "The component used to render the input.", + "default": "'input'", + "class": ".MuiSwitch-input" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'div'", + "class": ".MuiSwitch-root" + }, + { + "name": "startDecorator", + "description": "The component used to render the start decorator.", + "default": "'span'", + "class": ".MuiSwitch-startDecorator" + }, + { + "name": "thumb", + "description": "The component used to render the thumb.", + "default": "'span'", + "class": ".MuiSwitch-thumb" + }, + { + "name": "track", + "description": "The component used to render the track.", + "default": "'span'", + "class": ".MuiSwitch-track" + } + ], "spread": true, "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-joy/src/Switch/Switch.tsx", diff --git a/docs/pages/joy-ui/api/textarea.json b/docs/pages/joy-ui/api/textarea.json index 8a813b2132d4c1..45a440668d50dc 100644 --- a/docs/pages/joy-ui/api/textarea.json +++ b/docs/pages/joy-ui/api/textarea.json @@ -32,6 +32,32 @@ }, "name": "Textarea", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "endDecorator", + "description": "The component used to render the end decorator.", + "default": "'div'", + "class": ".MuiTextarea-endDecorator" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'div'", + "class": ".MuiTextarea-root" + }, + { + "name": "startDecorator", + "description": "The component used to render the start decorator.", + "default": "'div'", + "class": ".MuiTextarea-startDecorator" + }, + { + "name": "textarea", + "description": "The component used to render the textarea.", + "default": "'textarea'", + "class": ".MuiTextarea-textarea" + } + ], "spread": false, "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-joy/src/Textarea/Textarea.tsx", diff --git a/docs/pages/joy-ui/api/tooltip.json b/docs/pages/joy-ui/api/tooltip.json index 4b45846fa8de0e..c84df8852cf980 100644 --- a/docs/pages/joy-ui/api/tooltip.json +++ b/docs/pages/joy-ui/api/tooltip.json @@ -64,6 +64,20 @@ }, "name": "Tooltip", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "arrow", + "description": "The component used to render the arrow.", + "default": "'span'", + "class": ".MuiTooltip-arrow" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'div'", + "class": ".MuiTooltip-root" + } + ], "spread": true, "forwardsRefTo": "HTMLButtonElement", "filename": "/packages/mui-joy/src/Tooltip/Tooltip.tsx", diff --git a/docs/pages/joy-ui/api/typography.json b/docs/pages/joy-ui/api/typography.json index 2c8be9de8fb4e1..f1faec7c07e5b0 100644 --- a/docs/pages/joy-ui/api/typography.json +++ b/docs/pages/joy-ui/api/typography.json @@ -39,6 +39,26 @@ }, "name": "Typography", "styles": { "classes": [], "globalClasses": {}, "name": null }, + "slots": [ + { + "name": "endDecorator", + "description": "The component used to render the end decorator.", + "default": "'span'", + "class": ".MuiTypography-endDecorator" + }, + { + "name": "root", + "description": "The component used to render the root.", + "default": "'a'", + "class": ".MuiTypography-root" + }, + { + "name": "startDecorator", + "description": "The component used to render the start decorator.", + "default": "'span'", + "class": ".MuiTypography-startDecorator" + } + ], "spread": true, "forwardsRefTo": "HTMLParagraphElement", "filename": "/packages/mui-joy/src/Typography/Typography.tsx", diff --git a/docs/translations/api-docs-joy/alert/alert.json b/docs/translations/api-docs-joy/alert/alert.json index 428feeb2dac75d..5d838a57976ee4 100644 --- a/docs/translations/api-docs-joy/alert/alert.json +++ b/docs/translations/api-docs-joy/alert/alert.json @@ -9,5 +9,10 @@ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "endDecorator": "The component used to render the end decorator.", + "root": "The component used to render the root.", + "startDecorator": "The component used to render the start decorator." + } } diff --git a/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json b/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json index dedc711a69a889..790d706c093c75 100644 --- a/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json +++ b/docs/translations/api-docs-joy/aspect-ratio/aspect-ratio.json @@ -10,5 +10,9 @@ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "content": "The component used to render the content.", + "root": "The component used to render the root." + } } diff --git a/docs/translations/api-docs-joy/autocomplete/autocomplete.json b/docs/translations/api-docs-joy/autocomplete/autocomplete.json index 584d9d526f86a8..d9f978b8fd2435 100644 --- a/docs/translations/api-docs-joy/autocomplete/autocomplete.json +++ b/docs/translations/api-docs-joy/autocomplete/autocomplete.json @@ -52,5 +52,19 @@ "value": "The value of the autocomplete.
The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the isOptionEqualToValue prop.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "clearIndicator": "The component used to render the clear indicator.", + "endDecorator": "The component used to render the end decorator.", + "input": "The component used to render the input.", + "limitTag": "The component used to render the limit tag.", + "listbox": "The component used to render the listbox.", + "loading": "The component used to render the loading.", + "noOptions": "The component used to render the no-options.", + "option": "The component used to render the option.", + "popupIndicator": "The component used to render the popup indicator.", + "root": "The component used to render the root.", + "startDecorator": "The component used to render the start decorator.", + "wrapper": "The component used to render the wrapper." + } } diff --git a/docs/translations/api-docs-joy/avatar/avatar.json b/docs/translations/api-docs-joy/avatar/avatar.json index e0e27ec923ea84..cd850c62198632 100644 --- a/docs/translations/api-docs-joy/avatar/avatar.json +++ b/docs/translations/api-docs-joy/avatar/avatar.json @@ -10,5 +10,10 @@ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "fallback": "The component used to render the fallback.", + "img": "The component used to render the img.", + "root": "The component used to render the root." + } } diff --git a/docs/translations/api-docs-joy/badge/badge.json b/docs/translations/api-docs-joy/badge/badge.json index d125244d9f16a7..2344e407734e22 100644 --- a/docs/translations/api-docs-joy/badge/badge.json +++ b/docs/translations/api-docs-joy/badge/badge.json @@ -13,5 +13,9 @@ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "badge": "The component used to render the badge.", + "root": "The component used to render the root." + } } diff --git a/docs/translations/api-docs-joy/breadcrumbs/breadcrumbs.json b/docs/translations/api-docs-joy/breadcrumbs/breadcrumbs.json index 4e6791681916aa..eaf316ae06fd6d 100644 --- a/docs/translations/api-docs-joy/breadcrumbs/breadcrumbs.json +++ b/docs/translations/api-docs-joy/breadcrumbs/breadcrumbs.json @@ -6,5 +6,11 @@ "size": "The size of the component. It accepts theme values between 'sm' and 'lg'.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "li": "The component used to render the li.", + "ol": "The component used to render the ol.", + "root": "The component used to render the root.", + "separator": "The component used to render the separator." + } } diff --git a/docs/translations/api-docs-joy/button/button.json b/docs/translations/api-docs-joy/button/button.json index ee38c292f67cd1..eebe316cc2826b 100644 --- a/docs/translations/api-docs-joy/button/button.json +++ b/docs/translations/api-docs-joy/button/button.json @@ -14,5 +14,11 @@ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "endDecorator": "The component used to render the end decorator.", + "loadingIndicatorCenter": "The component used to render the loading indicator center.", + "root": "The component used to render the root.", + "startDecorator": "The component used to render the start decorator." + } } diff --git a/docs/translations/api-docs-joy/checkbox/checkbox.json b/docs/translations/api-docs-joy/checkbox/checkbox.json index b3b8131b09b249..ac3eb9c889376f 100644 --- a/docs/translations/api-docs-joy/checkbox/checkbox.json +++ b/docs/translations/api-docs-joy/checkbox/checkbox.json @@ -22,5 +22,12 @@ "value": "The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "action": "The component used to render the action.", + "checkbox": "The component used to render the checkbox.", + "input": "The component used to render the input.", + "label": "The component used to render the label.", + "root": "The component used to render the root." + } } diff --git a/docs/translations/api-docs-joy/chip/chip.json b/docs/translations/api-docs-joy/chip/chip.json index 2c1576b528c6bc..fd76ef66d0a83f 100644 --- a/docs/translations/api-docs-joy/chip/chip.json +++ b/docs/translations/api-docs-joy/chip/chip.json @@ -11,5 +11,12 @@ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "action": "The component used to render the action.", + "endDecorator": "The component used to render the end decorator.", + "label": "The component used to render the label.", + "root": "The component used to render the root.", + "startDecorator": "The component used to render the start decorator." + } } diff --git a/docs/translations/api-docs-joy/circular-progress/circular-progress.json b/docs/translations/api-docs-joy/circular-progress/circular-progress.json index 2b527d0a1ca52e..35b7bc9101741f 100644 --- a/docs/translations/api-docs-joy/circular-progress/circular-progress.json +++ b/docs/translations/api-docs-joy/circular-progress/circular-progress.json @@ -9,5 +9,11 @@ "value": "The value of the progress indicator for the determinate variant. Value between 0 and 100.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "progress": "", + "root": "The component used to render the root.", + "svg": "The component used to render the svg.", + "track": "" + } } diff --git a/docs/translations/api-docs-joy/form-label/form-label.json b/docs/translations/api-docs-joy/form-label/form-label.json index 5ec77c29cd103a..61f43cf2afae0a 100644 --- a/docs/translations/api-docs-joy/form-label/form-label.json +++ b/docs/translations/api-docs-joy/form-label/form-label.json @@ -6,5 +6,9 @@ "required": "The asterisk is added if required=true", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "asterisk": "The component used to render the asterisk.", + "root": "The component used to render the root." + } } diff --git a/docs/translations/api-docs-joy/input/input.json b/docs/translations/api-docs-joy/input/input.json index ddd21dbb81b993..de91a2a9ca5835 100644 --- a/docs/translations/api-docs-joy/input/input.json +++ b/docs/translations/api-docs-joy/input/input.json @@ -11,5 +11,11 @@ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "endDecorator": "The component used to render the end decorator.", + "input": "The component used to render the input.", + "root": "The component used to render the root.", + "startDecorator": "The component used to render the start decorator." + } } diff --git a/docs/translations/api-docs-joy/link/link.json b/docs/translations/api-docs-joy/link/link.json index 474352de3533d7..46c7a7d69204cf 100644 --- a/docs/translations/api-docs-joy/link/link.json +++ b/docs/translations/api-docs-joy/link/link.json @@ -13,5 +13,10 @@ "underline": "Controls when the link should have an underline.", "variant": "Applies the theme link styles." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "endDecorator": "The component used to render the end decorator.", + "root": "The component used to render the root.", + "startDecorator": "The component used to render the start decorator." + } } diff --git a/docs/translations/api-docs-joy/list-item/list-item.json b/docs/translations/api-docs-joy/list-item/list-item.json index 762b4c9e1220b6..49e8055c9bd6a8 100644 --- a/docs/translations/api-docs-joy/list-item/list-item.json +++ b/docs/translations/api-docs-joy/list-item/list-item.json @@ -11,5 +11,10 @@ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "endAction": "The component used to render the end action.", + "root": "The component used to render the root.", + "startAction": "The component used to render the start action." + } } diff --git a/docs/translations/api-docs-joy/modal/modal.json b/docs/translations/api-docs-joy/modal/modal.json index 2a9a7779b25300..88a1379f4bdf4c 100644 --- a/docs/translations/api-docs-joy/modal/modal.json +++ b/docs/translations/api-docs-joy/modal/modal.json @@ -15,5 +15,9 @@ "open": "If true, the component is shown.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "backdrop": "The component used to render the backdrop.", + "root": "The component used to render the root." + } } diff --git a/docs/translations/api-docs-joy/radio/radio.json b/docs/translations/api-docs-joy/radio/radio.json index ff780a15e0cdfb..d22aa9be44d1cc 100644 --- a/docs/translations/api-docs-joy/radio/radio.json +++ b/docs/translations/api-docs-joy/radio/radio.json @@ -20,5 +20,13 @@ "value": "The value of the component. The DOM API casts this to a string.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "action": "The component used to render the action.", + "icon": "The component used to render the icon.", + "input": "The component used to render the input.", + "label": "The component used to render the label.", + "radio": "The component used to render the radio.", + "root": "The component used to render the root." + } } diff --git a/docs/translations/api-docs-joy/select/select.json b/docs/translations/api-docs-joy/select/select.json index d2a9acb1db0a66..9d64fbd15247ed 100644 --- a/docs/translations/api-docs-joy/select/select.json +++ b/docs/translations/api-docs-joy/select/select.json @@ -19,5 +19,13 @@ "value": "The selected value. Set to null to deselect all options.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "button": "The component used to render the button.", + "endDecorator": "The component used to render the end decorator.", + "indicator": "The component used to render the indicator.", + "listbox": "The component used to render the listbox.", + "root": "The component used to render the root.", + "startDecorator": "The component used to render the start decorator." + } } diff --git a/docs/translations/api-docs-joy/slider/slider.json b/docs/translations/api-docs-joy/slider/slider.json index b9d183eaf41dcf..c1fe0f7e8b83fc 100644 --- a/docs/translations/api-docs-joy/slider/slider.json +++ b/docs/translations/api-docs-joy/slider/slider.json @@ -101,5 +101,15 @@ "nodeName": "the mark label element", "conditions": "active (depending on the value)" } + }, + "slotDescriptions": { + "input": "The component used to render the input.", + "mark": "The component used to render the mark.", + "markLabel": "The component used to render the mark label.", + "rail": "The component used to render the rail.", + "root": "The component used to render the root.", + "thumb": "The component used to render the thumb.", + "track": "The component used to render the track.", + "valueLabel": "The component used to render the value label." } } diff --git a/docs/translations/api-docs-joy/switch/switch.json b/docs/translations/api-docs-joy/switch/switch.json index f188704218e4e5..139bf910d49cb4 100644 --- a/docs/translations/api-docs-joy/switch/switch.json +++ b/docs/translations/api-docs-joy/switch/switch.json @@ -14,5 +14,14 @@ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "action": "The component used to render the action.", + "endDecorator": "The component used to render the end decorator.", + "input": "The component used to render the input.", + "root": "The component used to render the root.", + "startDecorator": "The component used to render the start decorator.", + "thumb": "The component used to render the thumb.", + "track": "The component used to render the track." + } } diff --git a/docs/translations/api-docs-joy/textarea/textarea.json b/docs/translations/api-docs-joy/textarea/textarea.json index 5fa1846304c5a1..79e81ebeccfba8 100644 --- a/docs/translations/api-docs-joy/textarea/textarea.json +++ b/docs/translations/api-docs-joy/textarea/textarea.json @@ -11,5 +11,11 @@ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "endDecorator": "The component used to render the end decorator.", + "root": "The component used to render the root.", + "startDecorator": "The component used to render the start decorator.", + "textarea": "The component used to render the textarea." + } } diff --git a/docs/translations/api-docs-joy/tooltip/tooltip.json b/docs/translations/api-docs-joy/tooltip/tooltip.json index 406157fcf044df..166548d2637a91 100644 --- a/docs/translations/api-docs-joy/tooltip/tooltip.json +++ b/docs/translations/api-docs-joy/tooltip/tooltip.json @@ -29,5 +29,9 @@ "title": "Tooltip title. Zero-length titles string, undefined, null and false are never displayed.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "arrow": "The component used to render the arrow.", + "root": "The component used to render the root." + } } diff --git a/docs/translations/api-docs-joy/typography/typography.json b/docs/translations/api-docs-joy/typography/typography.json index f5359e1c20584f..11bda4a61832c1 100644 --- a/docs/translations/api-docs-joy/typography/typography.json +++ b/docs/translations/api-docs-joy/typography/typography.json @@ -14,5 +14,10 @@ "textColor": "The system color.", "variant": "The variant to use." }, - "classDescriptions": {} + "classDescriptions": {}, + "slotDescriptions": { + "endDecorator": "The component used to render the end decorator.", + "root": "The component used to render the root.", + "startDecorator": "The component used to render the start decorator." + } } From ace994ce2ae51fb37a2c9d2265319c22b1f1c278 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 20 Feb 2023 14:18:53 +0000 Subject: [PATCH 3/7] fix type in CreateSlotsAndSlotProps --- packages/mui-joy/src/utils/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/utils/types.ts b/packages/mui-joy/src/utils/types.ts index 3eadb7b6886433..30aab8ff7a4ad7 100644 --- a/packages/mui-joy/src/utils/types.ts +++ b/packages/mui-joy/src/utils/types.ts @@ -24,7 +24,7 @@ export type SlotProps */ export type CreateSlotsAndSlotProps> = { - slots?: Slots; + slots?: Partial; slotProps?: { [P in keyof K]?: K[P]; }; From 2fc3b385b0c395bc55dee031fb83d292bd9f982e Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 20 Feb 2023 14:18:57 +0000 Subject: [PATCH 4/7] fix useSlot test --- packages/mui-joy/src/utils/useSlot.test.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/mui-joy/src/utils/useSlot.test.tsx b/packages/mui-joy/src/utils/useSlot.test.tsx index 4ed0d1ea139d70..671014d72b1ead 100644 --- a/packages/mui-joy/src/utils/useSlot.test.tsx +++ b/packages/mui-joy/src/utils/useSlot.test.tsx @@ -305,7 +305,10 @@ describe('useSlot', () => { HTMLButtonElement, Props & CreateSlotsAndSlotProps< - 'root' | 'decorator', + { + root: React.ElementType; + decorator: React.ElementType; + }, { root: SlotProps<'button', {}, OwnerState>; decorator: SlotProps<'span', {}, OwnerState>; From 0006da1eb4dffbe2e74fc4fc55aa0761e095fd66 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 20 Feb 2023 14:57:32 +0000 Subject: [PATCH 5/7] prettier --- packages/mui-joy/src/Autocomplete/AutocompleteProps.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts b/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts index 160b536b353dd1..6a9d5b887ddd64 100644 --- a/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts +++ b/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts @@ -25,7 +25,7 @@ export type AutocompleteSlot = | 'loading' | 'noOptions' | 'limitTag'; - + export interface AutocompleteSlots { /** * The component used to render the root. From 9718f5f5f326a59240c29a94b653f2d51370e6c1 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 20 Feb 2023 15:13:16 +0000 Subject: [PATCH 6/7] update api docs again --- docs/pages/joy-ui/api/circular-progress.json | 14 ++++++++++++-- .../circular-progress/circular-progress.json | 4 ++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/docs/pages/joy-ui/api/circular-progress.json b/docs/pages/joy-ui/api/circular-progress.json index ac872c7c837897..89284e9dbb0f0c 100644 --- a/docs/pages/joy-ui/api/circular-progress.json +++ b/docs/pages/joy-ui/api/circular-progress.json @@ -34,7 +34,12 @@ "name": "CircularProgress", "styles": { "classes": [], "globalClasses": {}, "name": null }, "slots": [ - { "name": "progress", "description": "", "class": ".MuiCircularProgress-progress" }, + { + "name": "progress", + "description": "The component used to render the progress.", + "default": "'circle'", + "class": ".MuiCircularProgress-progress" + }, { "name": "root", "description": "The component used to render the root.", @@ -47,7 +52,12 @@ "default": "'svg'", "class": ".MuiCircularProgress-svg" }, - { "name": "track", "description": "", "class": ".MuiCircularProgress-track" } + { + "name": "track", + "description": "The component used to render the track.", + "default": "'circle'", + "class": ".MuiCircularProgress-track" + } ], "spread": true, "forwardsRefTo": "HTMLSpanElement", diff --git a/docs/translations/api-docs-joy/circular-progress/circular-progress.json b/docs/translations/api-docs-joy/circular-progress/circular-progress.json index 35b7bc9101741f..a9492104688606 100644 --- a/docs/translations/api-docs-joy/circular-progress/circular-progress.json +++ b/docs/translations/api-docs-joy/circular-progress/circular-progress.json @@ -11,9 +11,9 @@ }, "classDescriptions": {}, "slotDescriptions": { - "progress": "", + "progress": "The component used to render the progress.", "root": "The component used to render the root.", "svg": "The component used to render the svg.", - "track": "" + "track": "The component used to render the track." } } From da6cd854c0f5898d59ab0d0e623370a87a9cb113 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Wed, 22 Feb 2023 09:49:18 +0000 Subject: [PATCH 7/7] update JSDoc of CreateSlotsAndSlotProps --- packages/mui-joy/src/utils/types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-joy/src/utils/types.ts b/packages/mui-joy/src/utils/types.ts index 30aab8ff7a4ad7..a7d705423c24d9 100644 --- a/packages/mui-joy/src/utils/types.ts +++ b/packages/mui-joy/src/utils/types.ts @@ -19,9 +19,9 @@ export type SlotProps); /** - * Use T to make sure that K contains all of the keys of T + * Use the keys of `Slots` to make sure that K contains all of the keys * - * @example CreateSlotsAndSlotProps<'root' | 'decorator', { root: ..., decorator: ... }> + * @example CreateSlotsAndSlotProps<{ root: React.ElementType, decorator: React.ElementType }, { root: ..., decorator: ... }> */ export type CreateSlotsAndSlotProps> = { slots?: Partial;