diff --git a/docs/pages/api/app-bar.md b/docs/pages/api/app-bar.md index 82aee082185ee7..86766e109c8f62 100644 --- a/docs/pages/api/app-bar.md +++ b/docs/pages/api/app-bar.md @@ -24,10 +24,10 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | -| position | 'absolute'
| 'fixed'
| 'relative'
| 'static'
| 'sticky' | 'fixed' | The positioning type. The behavior of the different options is described [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). Note: `sticky` is not universally supported and will fall back to `static` when unavailable. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | +| position | 'absolute'
| 'fixed'
| 'relative'
| 'static'
| 'sticky' | 'fixed' | The positioning type. The behavior of the different options is described [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). Note: `sticky` is not universally supported and will fall back to `static` when unavailable. | The `ref` is forwarded to the root element. @@ -40,15 +40,15 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiAppBar-root | Styles applied to the root element. -| positionFixed | .MuiAppBar-positionFixed | Styles applied to the root element if `position="fixed"`. -| positionAbsolute | .MuiAppBar-positionAbsolute | Styles applied to the root element if `position="absolute"`. -| positionSticky | .MuiAppBar-positionSticky | Styles applied to the root element if `position="sticky"`. -| positionStatic | .MuiAppBar-positionStatic | Styles applied to the root element if `position="static"`. -| positionRelative | .MuiAppBar-positionRelative | Styles applied to the root element if `position="relative"`. -| colorDefault | .MuiAppBar-colorDefault | Styles applied to the root element if `color="default"`. -| colorPrimary | .MuiAppBar-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiAppBar-colorSecondary | Styles applied to the root element if `color="secondary"`. +| root | .MuiAppBar-root | Styles applied to the root element. +| positionFixed | .MuiAppBar-positionFixed | Styles applied to the root element if `position="fixed"`. +| positionAbsolute | .MuiAppBar-positionAbsolute | Styles applied to the root element if `position="absolute"`. +| positionSticky | .MuiAppBar-positionSticky | Styles applied to the root element if `position="sticky"`. +| positionStatic | .MuiAppBar-positionStatic | Styles applied to the root element if `position="static"`. +| positionRelative | .MuiAppBar-positionRelative | Styles applied to the root element if `position="relative"`. +| colorDefault | .MuiAppBar-colorDefault | Styles applied to the root element if `color="default"`. +| colorPrimary | .MuiAppBar-colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | .MuiAppBar-colorSecondary | Styles applied to the root element if `color="secondary"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index 0fb62c43dcfc94..2c8191f7776c82 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -24,52 +24,52 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| autoComplete | bool | false | If `true`, the portion of the selected suggestion that has not been typed by the user, known as the completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state. | -| autoHighlight | bool | false | If `true`, the first option is automatically highlighted. | -| autoSelect | bool | false | If `true`, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| clearOnEscape | bool | false | If `true`, clear all values when the user presses escape and the popup is closed. | -| clearText | string | 'Clear' | Override the default text for the *clear* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| closeIcon | node | <CloseIcon fontSize="small" /> | The icon to display in place of the default close icon. | -| closeText | string | 'Close' | Override the default text for the *close popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| debug | bool | false | If `true`, the popup will ignore the blur event if the input if filled. You can inspect the popup markup with your browser tools. Consider this option when you need to customize the component. | -| defaultValue | any | | The default input value. Use when the component is not controlled. | -| disableClearable | bool | false | If `true`, the input can't be cleared. | -| disableCloseOnSelect | bool | false | If `true`, the popup won't close when a value is selected. | -| disabled | bool | false | If `true`, the input will be disabled. | -| disableListWrap | bool | false | If `true`, the list box in the popup will not wrap focus. | -| disableOpenOnFocus | bool | false | If `true`, the popup won't open on input focus. | -| disablePortal | bool | false | Disable the portal behavior. The children stay within it's parent DOM hierarchy. | -| filterOptions | func | | A filter function that determines the options that are eligible.

**Signature:**
`function(options: undefined, state: object) => undefined`
*options:* The options to render.
*state:* The state of the component. | -| filterSelectedOptions | bool | false | If `true`, hide the selected options from the list box. | -| freeSolo | bool | false | If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. | -| getOptionDisabled | func | | Used to determine the disabled state for a given option. | -| getOptionLabel | func | x => x | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided). | -| groupBy | func | | If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when `renderGroup` is not provided.

**Signature:**
`function(options: any) => string`
*options:* The option to group. | -| id | string | | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. | -| includeInputInList | bool | false | If `true`, the highlight can move to the input. | -| inputValue | string | | The input value. | -| ListboxComponent | elementType | 'ul' | The component used to render the listbox. | -| loading | bool | false | If `true`, the component is in a loading state. | -| loadingText | node | 'Loading…' | Text to display when in a loading state.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| multiple | bool | false | If `true`, `value` must be an array and the menu will support multiple selections. | -| noOptionsText | node | 'No options' | Text to display when there are no options.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: any) => void`
*event:* The event source of the callback
*value:* null | -| onClose | func | | Callback fired when the popup requests to be closed. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | -| onInputChange | func | | Callback fired when the input value changes.

**Signature:**
`function(event: object, value: string) => void`
*event:* The event source of the callback.
*value:* null | -| onOpen | func | | Callback fired when the popup requests to be opened. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | -| open | bool | | Control the popup` open state. | -| openText | string | 'Open' | Override the default text for the *open popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| options | array | [] | Array of options. | -| PaperComponent | elementType | Paper | The component used to render the body of the popup. | -| PopperComponent | elementType | Popper | The component used to position the popup. | -| popupIcon | node | <ArrowDropDownIcon /> | The icon to display in place of the default popup icon. | -| renderGroup | func | | Render the group.

**Signature:**
`function(option: any) => ReactNode`
*option:* The group to render. | -| renderInput * | func | | Render the input.

**Signature:**
`function(params: object) => ReactNode`
*params:* null | -| renderOption | func | | Render the option, use `getOptionLabel` by default.

**Signature:**
`function(option: any, state: object) => ReactNode`
*option:* The option to render.
*state:* The state of the component. | -| renderTags | func | | Render the selected value.

**Signature:**
`function(value: any, getTagProps: function) => ReactNode`
*value:* The `value` provided to the component.
*getTagProps:* A tag props getter. | -| size | 'medium'
| 'small' | 'medium' | The size of the autocomplete. | -| value | any | | 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 `getOptionSelected` prop. | +| autoComplete | bool | false | If `true`, the portion of the selected suggestion that has not been typed by the user, known as the completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state. | +| autoHighlight | bool | false | If `true`, the first option is automatically highlighted. | +| autoSelect | bool | false | If `true`, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| clearOnEscape | bool | false | If `true`, clear all values when the user presses escape and the popup is closed. | +| clearText | string | 'Clear' | Override the default text for the *clear* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | +| closeIcon | node | <CloseIcon fontSize="small" /> | The icon to display in place of the default close icon. | +| closeText | string | 'Close' | Override the default text for the *close popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | +| debug | bool | false | If `true`, the popup will ignore the blur event if the input if filled. You can inspect the popup markup with your browser tools. Consider this option when you need to customize the component. | +| defaultValue | any | | The default input value. Use when the component is not controlled. | +| disableClearable | bool | false | If `true`, the input can't be cleared. | +| disableCloseOnSelect | bool | false | If `true`, the popup won't close when a value is selected. | +| disabled | bool | false | If `true`, the input will be disabled. | +| disableListWrap | bool | false | If `true`, the list box in the popup will not wrap focus. | +| disableOpenOnFocus | bool | false | If `true`, the popup won't open on input focus. | +| disablePortal | bool | false | Disable the portal behavior. The children stay within it's parent DOM hierarchy. | +| filterOptions | func | | A filter function that determines the options that are eligible.

**Signature:**
`function(options: undefined, state: object) => undefined`
*options:* The options to render.
*state:* The state of the component. | +| filterSelectedOptions | bool | false | If `true`, hide the selected options from the list box. | +| freeSolo | bool | false | If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. | +| getOptionDisabled | func | | Used to determine the disabled state for a given option. | +| getOptionLabel | func | x => x | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided). | +| groupBy | func | | If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when `renderGroup` is not provided.

**Signature:**
`function(options: any) => string`
*options:* The option to group. | +| id | string | | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. | +| includeInputInList | bool | false | If `true`, the highlight can move to the input. | +| inputValue | string | | The input value. | +| ListboxComponent | elementType | 'ul' | The component used to render the listbox. | +| loading | bool | false | If `true`, the component is in a loading state. | +| loadingText | node | 'Loading…' | Text to display when in a loading state.
For localization purposes, you can use the provided [translations](/guides/localization/). | +| multiple | bool | false | If `true`, `value` must be an array and the menu will support multiple selections. | +| noOptionsText | node | 'No options' | Text to display when there are no options.
For localization purposes, you can use the provided [translations](/guides/localization/). | +| onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: any) => void`
*event:* The event source of the callback
*value:* null | +| onClose | func | | Callback fired when the popup requests to be closed. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | +| onInputChange | func | | Callback fired when the input value changes.

**Signature:**
`function(event: object, value: string) => void`
*event:* The event source of the callback.
*value:* null | +| onOpen | func | | Callback fired when the popup requests to be opened. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | +| open | bool | | Control the popup` open state. | +| openText | string | 'Open' | Override the default text for the *open popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | +| options | array | [] | Array of options. | +| PaperComponent | elementType | Paper | The component used to render the body of the popup. | +| PopperComponent | elementType | Popper | The component used to position the popup. | +| popupIcon | node | <ArrowDropDownIcon /> | The icon to display in place of the default popup icon. | +| renderGroup | func | | Render the group.

**Signature:**
`function(option: any) => ReactNode`
*option:* The group to render. | +| renderInput * | func | | Render the input.

**Signature:**
`function(params: object) => ReactNode`
*params:* null | +| renderOption | func | | Render the option, use `getOptionLabel` by default.

**Signature:**
`function(option: any, state: object) => ReactNode`
*option:* The option to render.
*state:* The state of the component. | +| renderTags | func | | Render the selected value.

**Signature:**
`function(value: any, getTagProps: function) => ReactNode`
*value:* The `value` provided to the component.
*getTagProps:* A tag props getter. | +| size | 'medium'
| 'small' | 'medium' | The size of the autocomplete. | +| value | any | | 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 `getOptionSelected` prop. | The `ref` is forwarded to the root element. @@ -82,27 +82,27 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiAutocomplete-root | Styles applied to the root element. -| focused | .Mui-focused | Pseudo-class applied to the root element if focused. -| tag | .MuiAutocomplete-tag | Styles applied to the tag elements, e.g. the chips. -| tagSizeSmall | .MuiAutocomplete-tagSizeSmall | Styles applied to the tag elements, e.g. the chips if `size="small"`. -| inputRoot | .MuiAutocomplete-inputRoot | Styles applied to the Input element. -| input | .MuiAutocomplete-input | Styles applied to the input element. -| inputFocused | .MuiAutocomplete-inputFocused | Styles applied to the input element if tag focused. -| endAdornment | .MuiAutocomplete-endAdornment | Styles applied to the endAdornment element. -| clearIndicator | .MuiAutocomplete-clearIndicator | Styles applied to the clear indictator. -| clearIndicatorDirty | .MuiAutocomplete-clearIndicatorDirty | Styles applied to the clear indictator if the input is dirty. -| popupIndicator | .MuiAutocomplete-popupIndicator | Styles applied to the popup indictator. -| popupIndicatorOpen | .MuiAutocomplete-popupIndicatorOpen | Styles applied to the popup indictator if the popup is open. -| popper | .MuiAutocomplete-popper | Styles applied to the popper element. -| popperDisablePortal | .MuiAutocomplete-popperDisablePortal | Styles applied to the popper element if `disablePortal={true}`. -| paper | .MuiAutocomplete-paper | Styles applied to the `Paper` component. -| listbox | .MuiAutocomplete-listbox | Styles applied to the `listbox` component. -| loading | .MuiAutocomplete-loading | Styles applied to the loading wrapper. -| noOptions | .MuiAutocomplete-noOptions | Styles applied to the no option wrapper. -| option | .MuiAutocomplete-option | Styles applied to the option elements. -| groupLabel | .MuiAutocomplete-groupLabel | Styles applied to the group's label elements. -| groupUl | .MuiAutocomplete-groupUl | Styles applied to the group's ul elements. +| root | .MuiAutocomplete-root | Styles applied to the root element. +| focused | .Mui-focused | Pseudo-class applied to the root element if focused. +| tag | .MuiAutocomplete-tag | Styles applied to the tag elements, e.g. the chips. +| tagSizeSmall | .MuiAutocomplete-tagSizeSmall | Styles applied to the tag elements, e.g. the chips if `size="small"`. +| inputRoot | .MuiAutocomplete-inputRoot | Styles applied to the Input element. +| input | .MuiAutocomplete-input | Styles applied to the input element. +| inputFocused | .MuiAutocomplete-inputFocused | Styles applied to the input element if tag focused. +| endAdornment | .MuiAutocomplete-endAdornment | Styles applied to the endAdornment element. +| clearIndicator | .MuiAutocomplete-clearIndicator | Styles applied to the clear indictator. +| clearIndicatorDirty | .MuiAutocomplete-clearIndicatorDirty | Styles applied to the clear indictator if the input is dirty. +| popupIndicator | .MuiAutocomplete-popupIndicator | Styles applied to the popup indictator. +| popupIndicatorOpen | .MuiAutocomplete-popupIndicatorOpen | Styles applied to the popup indictator if the popup is open. +| popper | .MuiAutocomplete-popper | Styles applied to the popper element. +| popperDisablePortal | .MuiAutocomplete-popperDisablePortal | Styles applied to the popper element if `disablePortal={true}`. +| paper | .MuiAutocomplete-paper | Styles applied to the `Paper` component. +| listbox | .MuiAutocomplete-listbox | Styles applied to the `listbox` component. +| loading | .MuiAutocomplete-loading | Styles applied to the loading wrapper. +| noOptions | .MuiAutocomplete-noOptions | Styles applied to the no option wrapper. +| option | .MuiAutocomplete-option | Styles applied to the option elements. +| groupLabel | .MuiAutocomplete-groupLabel | Styles applied to the group's label elements. +| groupUl | .MuiAutocomplete-groupUl | Styles applied to the group's ul elements. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/avatar.md b/docs/pages/api/avatar.md index 2801c3a8718d05..062bd175083232 100644 --- a/docs/pages/api/avatar.md +++ b/docs/pages/api/avatar.md @@ -24,15 +24,15 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| alt | string | | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. | -| children | node | | Used to render icon or text elements inside the Avatar if `src` is not set. This can be an element, or just a string. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| imgProps | object | | Attributes applied to the `img` element if the component is used to display an image. | -| sizes | string | | The `sizes` attribute for the `img` element. | -| src | string | | The `src` attribute for the `img` element. | -| srcSet | string | | The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. | -| variant | 'circle'
| 'rounded'
| 'square' | 'circle' | The shape of the avatar. | +| alt | string | | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. | +| children | node | | Used to render icon or text elements inside the Avatar if `src` is not set. This can be an element, or just a string. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| imgProps | object | | Attributes applied to the `img` element if the component is used to display an image. | +| sizes | string | | The `sizes` attribute for the `img` element. | +| src | string | | The `src` attribute for the `img` element. | +| srcSet | string | | The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. | +| variant | 'circle'
| 'rounded'
| 'square' | 'circle' | The shape of the avatar. | The `ref` is forwarded to the root element. @@ -45,12 +45,12 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiAvatar-root | Styles applied to the root element. -| colorDefault | .MuiAvatar-colorDefault | Styles applied to the root element if there are children and not `src` or `srcSet`. -| circle | .MuiAvatar-circle | Styles applied to the root element if `variant="circle"`. -| rounded | .MuiAvatar-rounded | Styles applied to the root element if `variant="rounded"`. -| square | .MuiAvatar-square | Styles applied to the root element if `variant="square"`. -| img | .MuiAvatar-img | Styles applied to the img element if either `src` or `srcSet` is defined. +| root | .MuiAvatar-root | Styles applied to the root element. +| colorDefault | .MuiAvatar-colorDefault | Styles applied to the root element if there are children and not `src` or `srcSet`. +| circle | .MuiAvatar-circle | Styles applied to the root element if `variant="circle"`. +| rounded | .MuiAvatar-rounded | Styles applied to the root element if `variant="rounded"`. +| square | .MuiAvatar-square | Styles applied to the root element if `variant="square"`. +| img | .MuiAvatar-img | Styles applied to the img element if either `src` or `srcSet` is defined. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/backdrop.md b/docs/pages/api/backdrop.md index 9d9cca2e306498..f489f76575d2d0 100644 --- a/docs/pages/api/backdrop.md +++ b/docs/pages/api/backdrop.md @@ -24,11 +24,11 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| invisible | bool | false | If `true`, the backdrop is invisible. It can be used when rendering a popover or a custom select component. | -| open * | bool | | If `true`, the backdrop is open. | -| transitionDuration | number
| { appear?: number, enter?: number, exit?: number } | | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| invisible | bool | false | If `true`, the backdrop is invisible. It can be used when rendering a popover or a custom select component. | +| open * | bool | | If `true`, the backdrop is open. | +| transitionDuration | number
| { appear?: number, enter?: number, exit?: number } | | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | The `ref` is forwarded to the root element. @@ -41,8 +41,8 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiBackdrop-root | Styles applied to the root element. -| invisible | .MuiBackdrop-invisible | Styles applied to the root element if `invisible={true}`. +| root | .MuiBackdrop-root | Styles applied to the root element. +| invisible | .MuiBackdrop-invisible | Styles applied to the root element if `invisible={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/badge.md b/docs/pages/api/badge.md index 17ef2e8ec3b86f..9d4495dcbbff6c 100644 --- a/docs/pages/api/badge.md +++ b/docs/pages/api/badge.md @@ -24,17 +24,17 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| anchorOrigin | { horizontal: 'left'
| 'right', vertical: 'bottom'
| 'top' } | { vertical: 'top', horizontal: 'right',} | The anchor of the badge. | -| badgeContent | node | | The content rendered within the badge. | -| children | node | | The badge will be added relative to this node. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'default'
| 'error'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'span' | The component used for the root node. Either a string to use a DOM element or a component. | -| invisible | bool | | If `true`, the badge will be invisible. | -| max | number | 99 | Max count to show. | -| overlap | 'circle'
| 'rectangle' | 'rectangle' | Wrapped shape the badge should overlap. | -| showZero | bool | false | Controls whether the badge is hidden when `badgeContent` is zero. | -| variant | 'dot'
| 'standard' | 'standard' | The variant to use. | +| anchorOrigin | { horizontal: 'left'
| 'right', vertical: 'bottom'
| 'top' } | { vertical: 'top', horizontal: 'right',} | The anchor of the badge. | +| badgeContent | node | | The content rendered within the badge. | +| children | node | | The badge will be added relative to this node. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'default'
| 'error'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | +| component | elementType | 'span' | The component used for the root node. Either a string to use a DOM element or a component. | +| invisible | bool | | If `true`, the badge will be invisible. | +| max | number | 99 | Max count to show. | +| overlap | 'circle'
| 'rectangle' | 'rectangle' | Wrapped shape the badge should overlap. | +| showZero | bool | false | Controls whether the badge is hidden when `badgeContent` is zero. | +| variant | 'dot'
| 'standard' | 'standard' | The variant to use. | The `ref` is forwarded to the root element. @@ -47,21 +47,21 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiBadge-root | Styles applied to the root element. -| badge | .MuiBadge-badge | Styles applied to the badge `span` element. -| colorPrimary | .MuiBadge-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiBadge-colorSecondary | Styles applied to the root element if `color="secondary"`. -| colorError | .MuiBadge-colorError | Styles applied to the root element if `color="error"`. -| dot | .MuiBadge-dot | Styles applied to the root element if `variant="dot"`. -| anchorOriginTopRightRectangle | .MuiBadge-anchorOriginTopRightRectangle | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangle"`. -| anchorOriginBottomRightRectangle | .MuiBadge-anchorOriginBottomRightRectangle | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`. -| anchorOriginTopLeftRectangle | .MuiBadge-anchorOriginTopLeftRectangle | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`. -| anchorOriginBottomLeftRectangle | .MuiBadge-anchorOriginBottomLeftRectangle | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`. -| anchorOriginTopRightCircle | .MuiBadge-anchorOriginTopRightCircle | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`. -| anchorOriginBottomRightCircle | .MuiBadge-anchorOriginBottomRightCircle | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`. -| anchorOriginTopLeftCircle | .MuiBadge-anchorOriginTopLeftCircle | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`. -| anchorOriginBottomLeftCircle | .MuiBadge-anchorOriginBottomLeftCircle | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`. -| invisible | .MuiBadge-invisible | Pseudo-class to the badge `span` element if `invisible={true}`. +| root | .MuiBadge-root | Styles applied to the root element. +| badge | .MuiBadge-badge | Styles applied to the badge `span` element. +| colorPrimary | .MuiBadge-colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | .MuiBadge-colorSecondary | Styles applied to the root element if `color="secondary"`. +| colorError | .MuiBadge-colorError | Styles applied to the root element if `color="error"`. +| dot | .MuiBadge-dot | Styles applied to the root element if `variant="dot"`. +| anchorOriginTopRightRectangle | .MuiBadge-anchorOriginTopRightRectangle | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangle"`. +| anchorOriginBottomRightRectangle | .MuiBadge-anchorOriginBottomRightRectangle | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`. +| anchorOriginTopLeftRectangle | .MuiBadge-anchorOriginTopLeftRectangle | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`. +| anchorOriginBottomLeftRectangle | .MuiBadge-anchorOriginBottomLeftRectangle | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`. +| anchorOriginTopRightCircle | .MuiBadge-anchorOriginTopRightCircle | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`. +| anchorOriginBottomRightCircle | .MuiBadge-anchorOriginBottomRightCircle | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`. +| anchorOriginTopLeftCircle | .MuiBadge-anchorOriginTopLeftCircle | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`. +| anchorOriginBottomLeftCircle | .MuiBadge-anchorOriginBottomLeftCircle | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`. +| invisible | .MuiBadge-invisible | Pseudo-class to the badge `span` element if `invisible={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/bottom-navigation-action.md b/docs/pages/api/bottom-navigation-action.md index 1ac724ce80a1db..ffa5cb281dcd84 100644 --- a/docs/pages/api/bottom-navigation-action.md +++ b/docs/pages/api/bottom-navigation-action.md @@ -24,12 +24,12 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | unsupportedProp | | This prop isn't supported. Use the `component` prop if you need to change the children structure. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| icon | node | | The icon element. | -| label | node | | The label element. | -| showLabel | bool | | If `true`, the `BottomNavigationAction` will show its label. By default, only the selected `BottomNavigationAction` inside `BottomNavigation` will show its label. | -| value | any | | You can provide your own value. Otherwise, we fallback to the child position index. | +| children | unsupportedProp | | This prop isn't supported. Use the `component` prop if you need to change the children structure. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| icon | node | | The icon element. | +| label | node | | The label element. | +| showLabel | bool | | If `true`, the `BottomNavigationAction` will show its label. By default, only the selected `BottomNavigationAction` inside `BottomNavigation` will show its label. | +| value | any | | You can provide your own value. Otherwise, we fallback to the child position index. | The `ref` is forwarded to the root element. @@ -42,11 +42,11 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiBottomNavigationAction-root | Styles applied to the root element. -| selected | .Mui-selected | Pseudo-class applied to the root element if selected. -| iconOnly | .MuiBottomNavigationAction-iconOnly | Pseudo-class applied to the root element if `showLabel={false}` and not selected. -| wrapper | .MuiBottomNavigationAction-wrapper | Styles applied to the span element that wraps the icon and label. -| label | .MuiBottomNavigationAction-label | Styles applied to the label's span element. +| root | .MuiBottomNavigationAction-root | Styles applied to the root element. +| selected | .Mui-selected | Pseudo-class applied to the root element if selected. +| iconOnly | .MuiBottomNavigationAction-iconOnly | Pseudo-class applied to the root element if `showLabel={false}` and not selected. +| wrapper | .MuiBottomNavigationAction-wrapper | Styles applied to the span element that wraps the icon and label. +| label | .MuiBottomNavigationAction-label | Styles applied to the label's span element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/bottom-navigation.md b/docs/pages/api/bottom-navigation.md index 920e0da34c78a1..46060a018cbe95 100644 --- a/docs/pages/api/bottom-navigation.md +++ b/docs/pages/api/bottom-navigation.md @@ -24,12 +24,12 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: any) => void`
*event:* The event source of the callback
*value:* We default to the index of the child | -| showLabels | bool | false | If `true`, all `BottomNavigationAction`s will show their labels. By default, only the selected `BottomNavigationAction` will show its label. | -| value | any | | The value of the currently selected `BottomNavigationAction`. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: any) => void`
*event:* The event source of the callback
*value:* We default to the index of the child | +| showLabels | bool | false | If `true`, all `BottomNavigationAction`s will show their labels. By default, only the selected `BottomNavigationAction` will show its label. | +| value | any | | The value of the currently selected `BottomNavigationAction`. | The `ref` is forwarded to the root element. @@ -42,7 +42,7 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiBottomNavigation-root | Styles applied to the root element. +| root | .MuiBottomNavigation-root | Styles applied to the root element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/breadcrumbs.md b/docs/pages/api/breadcrumbs.md index 31e67d71f95657..eefcf73b9580ad 100644 --- a/docs/pages/api/breadcrumbs.md +++ b/docs/pages/api/breadcrumbs.md @@ -24,13 +24,13 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The breadcrumb children. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'nav' | The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component. | -| itemsAfterCollapse | number | 1 | If max items is exceeded, the number of items to show after the ellipsis. | -| itemsBeforeCollapse | number | 1 | If max items is exceeded, the number of items to show before the ellipsis. | -| maxItems | number | 8 | Specifies the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse` will be shown, with an ellipsis in between. | -| separator | node | '/' | Custom separator node. | +| children * | node | | The breadcrumb children. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'nav' | The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component. | +| itemsAfterCollapse | number | 1 | If max items is exceeded, the number of items to show after the ellipsis. | +| itemsBeforeCollapse | number | 1 | If max items is exceeded, the number of items to show before the ellipsis. | +| maxItems | number | 8 | Specifies the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse` will be shown, with an ellipsis in between. | +| separator | node | '/' | Custom separator node. | The `ref` is forwarded to the root element. @@ -43,10 +43,10 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiBreadcrumbs-root | Styles applied to the root element. -| ol | .MuiBreadcrumbs-ol | Styles applied to the ol element. -| li | .MuiBreadcrumbs-li | Styles applied to the li element. -| separator | .MuiBreadcrumbs-separator | Styles applied to the separator element. +| root | .MuiBreadcrumbs-root | Styles applied to the root element. +| ol | .MuiBreadcrumbs-ol | Styles applied to the ol element. +| li | .MuiBreadcrumbs-li | Styles applied to the li element. +| separator | .MuiBreadcrumbs-separator | Styles applied to the separator element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/button-base.md b/docs/pages/api/button-base.md index 3c8312a609e63d..a81ad6ab39502d 100644 --- a/docs/pages/api/button-base.md +++ b/docs/pages/api/button-base.md @@ -26,19 +26,19 @@ It contains a load of style reset and some focus/ripple logic. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| action | ref | | A ref for imperative actions. It currently only supports `focusVisible()` action. | -| centerRipple | bool | false | If `true`, the ripples will be centered. They won't start at the cursor interaction position. | -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | element type | 'button' | The component used for the root node. Either a string to use a DOM element or a component.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | -| disabled | bool | false | If `true`, the base button will be disabled. | -| disableRipple | bool | false | If `true`, the ripple effect will be disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `focusVisibleClassName`. | -| disableTouchRipple | bool | false | If `true`, the touch ripple effect will be disabled. | -| focusRipple | bool | false | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. | -| focusVisibleClassName | string | | This prop can help a person know which element has the keyboard focus. The class name will be applied when the element gain the focus through a keyboard interaction. It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md). A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components if needed. | -| onFocusVisible | func | | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. | -| TouchRippleProps | object | | Props applied to the `TouchRipple` element. | -| type | 'submit'
| 'reset'
| 'button' | 'button' | Used to control the button's purpose. This prop passes the value to the `type` attribute of the native button component. | +| action | ref | | A ref for imperative actions. It currently only supports `focusVisible()` action. | +| centerRipple | bool | false | If `true`, the ripples will be centered. They won't start at the cursor interaction position. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | element type | 'button' | The component used for the root node. Either a string to use a DOM element or a component.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | +| disabled | bool | false | If `true`, the base button will be disabled. | +| disableRipple | bool | false | If `true`, the ripple effect will be disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `focusVisibleClassName`. | +| disableTouchRipple | bool | false | If `true`, the touch ripple effect will be disabled. | +| focusRipple | bool | false | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. | +| focusVisibleClassName | string | | This prop can help a person know which element has the keyboard focus. The class name will be applied when the element gain the focus through a keyboard interaction. It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md). A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components if needed. | +| onFocusVisible | func | | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. | +| TouchRippleProps | object | | Props applied to the `TouchRipple` element. | +| type | 'submit'
| 'reset'
| 'button' | 'button' | Used to control the button's purpose. This prop passes the value to the `type` attribute of the native button component. | The `ref` is forwarded to the root element. @@ -51,9 +51,9 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiButtonBase-root | Styles applied to the root element. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the root element if keyboard focused. +| root | .MuiButtonBase-root | Styles applied to the root element. +| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. +| focusVisible | .Mui-focusVisible | Pseudo-class applied to the root element if keyboard focused. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/button-group.md b/docs/pages/api/button-group.md index 9728013fd01035..c28c4724b6cf04 100644 --- a/docs/pages/api/button-group.md +++ b/docs/pages/api/button-group.md @@ -24,16 +24,16 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the button group. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| disabled | bool | false | If `true`, the buttons will be disabled. | -| disableFocusRipple | bool | false | If `true`, the button keyboard focus ripple will be disabled. `disableRipple` must also be true. | -| disableRipple | bool | false | If `true`, the button ripple effect will be disabled. | -| fullWidth | bool | false | If `true`, the buttons will take up the full width of its container. | -| size | 'small'
| 'medium'
| 'large' | 'medium' | The size of the button. `small` is equivalent to the dense button styling. | -| variant | 'text'
| 'outlined'
| 'contained' | 'outlined' | The variant to use. | +| children * | node | | The content of the button group. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | +| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| disabled | bool | false | If `true`, the buttons will be disabled. | +| disableFocusRipple | bool | false | If `true`, the button keyboard focus ripple will be disabled. `disableRipple` must also be true. | +| disableRipple | bool | false | If `true`, the button ripple effect will be disabled. | +| fullWidth | bool | false | If `true`, the buttons will take up the full width of its container. | +| size | 'small'
| 'medium'
| 'large' | 'medium' | The size of the button. `small` is equivalent to the dense button styling. | +| variant | 'text'
| 'outlined'
| 'contained' | 'outlined' | The variant to use. | The `ref` is forwarded to the root element. @@ -46,20 +46,20 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiButtonGroup-root | Styles applied to the root element. -| contained | .MuiButtonGroup-contained | Styles applied to the root element if `variant="contained"`. -| fullWidth | .MuiButtonGroup-fullWidth | Styles applied to the root element if `fullWidth={true}`. -| grouped | .MuiButtonGroup-grouped | Styles applied to the children. -| groupedText | .MuiButtonGroup-groupedText | Styles applied to the children if `variant="text"`. -| groupedTextPrimary | .MuiButtonGroup-groupedTextPrimary | Styles applied to the children if `variant="text"` and `color="primary"`. -| groupedTextSecondary | .MuiButtonGroup-groupedTextSecondary | Styles applied to the children if `variant="text"` and `color="secondary"`. -| groupedOutlined | .MuiButtonGroup-groupedOutlined | Styles applied to the children if `variant="outlined"`. -| groupedOutlinedPrimary | .MuiButtonGroup-groupedOutlinedPrimary | Styles applied to the children if `variant="outlined"` and `color="primary"`. -| groupedOutlinedSecondary | .MuiButtonGroup-groupedOutlinedSecondary | Styles applied to the children if `variant="outlined"` and `color="secondary"`. -| groupedContained | .MuiButtonGroup-groupedContained | Styles applied to the children if `variant="contained"`. -| groupedContainedPrimary | .MuiButtonGroup-groupedContainedPrimary | Styles applied to the children if `variant="contained"` and `color="primary"`. -| groupedContainedSecondary | .MuiButtonGroup-groupedContainedSecondary | Styles applied to the children if `variant="contained"` and `color="secondary"`. -| disabled | .Mui-disabled | Pseudo-class applied to child elements if `disabled={true}`. +| root | .MuiButtonGroup-root | Styles applied to the root element. +| contained | .MuiButtonGroup-contained | Styles applied to the root element if `variant="contained"`. +| fullWidth | .MuiButtonGroup-fullWidth | Styles applied to the root element if `fullWidth={true}`. +| grouped | .MuiButtonGroup-grouped | Styles applied to the children. +| groupedText | .MuiButtonGroup-groupedText | Styles applied to the children if `variant="text"`. +| groupedTextPrimary | .MuiButtonGroup-groupedTextPrimary | Styles applied to the children if `variant="text"` and `color="primary"`. +| groupedTextSecondary | .MuiButtonGroup-groupedTextSecondary | Styles applied to the children if `variant="text"` and `color="secondary"`. +| groupedOutlined | .MuiButtonGroup-groupedOutlined | Styles applied to the children if `variant="outlined"`. +| groupedOutlinedPrimary | .MuiButtonGroup-groupedOutlinedPrimary | Styles applied to the children if `variant="outlined"` and `color="primary"`. +| groupedOutlinedSecondary | .MuiButtonGroup-groupedOutlinedSecondary | Styles applied to the children if `variant="outlined"` and `color="secondary"`. +| groupedContained | .MuiButtonGroup-groupedContained | Styles applied to the children if `variant="contained"`. +| groupedContainedPrimary | .MuiButtonGroup-groupedContainedPrimary | Styles applied to the children if `variant="contained"` and `color="primary"`. +| groupedContainedSecondary | .MuiButtonGroup-groupedContainedSecondary | Styles applied to the children if `variant="contained"` and `color="secondary"`. +| disabled | .Mui-disabled | Pseudo-class applied to child elements if `disabled={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/button.md b/docs/pages/api/button.md index d55281445220c6..3646705effeae0 100644 --- a/docs/pages/api/button.md +++ b/docs/pages/api/button.md @@ -24,19 +24,19 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the button. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'button' | The component used for the root node. Either a string to use a DOM element or a component. | -| disabled | bool | false | If `true`, the button will be disabled. | -| disableFocusRipple | bool | false | If `true`, the keyboard focus ripple will be disabled. `disableRipple` must also be true. | -| disableRipple | bool | | If `true`, the ripple effect will be disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `focusVisibleClassName`. | -| endIcon | node | | Element placed after the children. | -| fullWidth | bool | false | If `true`, the button will take up the full width of its container. | -| href | string | | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. | -| size | 'small'
| 'medium'
| 'large' | 'medium' | The size of the button. `small` is equivalent to the dense button styling. | -| startIcon | node | | Element placed before the children. | -| variant | 'text'
| 'outlined'
| 'contained' | 'text' | The variant to use. | +| children * | node | | The content of the button. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | +| component | elementType | 'button' | The component used for the root node. Either a string to use a DOM element or a component. | +| disabled | bool | false | If `true`, the button will be disabled. | +| disableFocusRipple | bool | false | If `true`, the keyboard focus ripple will be disabled. `disableRipple` must also be true. | +| disableRipple | bool | | If `true`, the ripple effect will be disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `focusVisibleClassName`. | +| endIcon | node | | Element placed after the children. | +| fullWidth | bool | false | If `true`, the button will take up the full width of its container. | +| href | string | | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. | +| size | 'small'
| 'medium'
| 'large' | 'medium' | The size of the button. `small` is equivalent to the dense button styling. | +| startIcon | node | | Element placed before the children. | +| variant | 'text'
| 'outlined'
| 'contained' | 'text' | The variant to use. | The `ref` is forwarded to the root element. @@ -49,34 +49,34 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiButton-root | Styles applied to the root element. -| label | .MuiButton-label | Styles applied to the span element that wraps the children. -| text | .MuiButton-text | Styles applied to the root element if `variant="text"`. -| textPrimary | .MuiButton-textPrimary | Styles applied to the root element if `variant="text"` and `color="primary"`. -| textSecondary | .MuiButton-textSecondary | Styles applied to the root element if `variant="text"` and `color="secondary"`. -| outlined | .MuiButton-outlined | Styles applied to the root element if `variant="outlined"`. -| outlinedPrimary | .MuiButton-outlinedPrimary | Styles applied to the root element if `variant="outlined"` and `color="primary"`. -| outlinedSecondary | .MuiButton-outlinedSecondary | Styles applied to the root element if `variant="outlined"` and `color="secondary"`. -| contained | .MuiButton-contained | Styles applied to the root element if `variant="contained"`. -| containedPrimary | .MuiButton-containedPrimary | Styles applied to the root element if `variant="contained"` and `color="primary"`. -| containedSecondary | .MuiButton-containedSecondary | Styles applied to the root element if `variant="contained"` and `color="secondary"`. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| colorInherit | .MuiButton-colorInherit | Styles applied to the root element if `color="inherit"`. -| textSizeSmall | .MuiButton-textSizeSmall | Styles applied to the root element if `size="small"` and `variant="text"`. -| textSizeLarge | .MuiButton-textSizeLarge | Styles applied to the root element if `size="large"` and `variant="text"`. -| outlinedSizeSmall | .MuiButton-outlinedSizeSmall | Styles applied to the root element if `size="small"` and `variant="outlined"`. -| outlinedSizeLarge | .MuiButton-outlinedSizeLarge | Styles applied to the root element if `size="large"` and `variant="outlined"`. -| containedSizeSmall | .MuiButton-containedSizeSmall | Styles applied to the root element if `size="small"` and `variant="contained"`. -| containedSizeLarge | .MuiButton-containedSizeLarge | Styles applied to the root element if `size="large"` and `variant="contained"`. -| sizeSmall | .MuiButton-sizeSmall | Styles applied to the root element if `size="small"`. -| sizeLarge | .MuiButton-sizeLarge | Styles applied to the root element if `size="large"`. -| fullWidth | .MuiButton-fullWidth | Styles applied to the root element if `fullWidth={true}`. -| startIcon | .MuiButton-startIcon | Styles applied to the startIcon element if supplied. -| endIcon | .MuiButton-endIcon | Styles applied to the endIcon element if supplied. -| iconSizeSmall | .MuiButton-iconSizeSmall | Styles applied to the icon element if supplied and `size="small"`. -| iconSizeMedium | .MuiButton-iconSizeMedium | Styles applied to the icon element if supplied and `size="medium"`. -| iconSizeLarge | .MuiButton-iconSizeLarge | Styles applied to the icon element if supplied and `size="large"`. +| root | .MuiButton-root | Styles applied to the root element. +| label | .MuiButton-label | Styles applied to the span element that wraps the children. +| text | .MuiButton-text | Styles applied to the root element if `variant="text"`. +| textPrimary | .MuiButton-textPrimary | Styles applied to the root element if `variant="text"` and `color="primary"`. +| textSecondary | .MuiButton-textSecondary | Styles applied to the root element if `variant="text"` and `color="secondary"`. +| outlined | .MuiButton-outlined | Styles applied to the root element if `variant="outlined"`. +| outlinedPrimary | .MuiButton-outlinedPrimary | Styles applied to the root element if `variant="outlined"` and `color="primary"`. +| outlinedSecondary | .MuiButton-outlinedSecondary | Styles applied to the root element if `variant="outlined"` and `color="secondary"`. +| contained | .MuiButton-contained | Styles applied to the root element if `variant="contained"`. +| containedPrimary | .MuiButton-containedPrimary | Styles applied to the root element if `variant="contained"` and `color="primary"`. +| containedSecondary | .MuiButton-containedSecondary | Styles applied to the root element if `variant="contained"` and `color="secondary"`. +| focusVisible | .Mui-focusVisible | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. +| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. +| colorInherit | .MuiButton-colorInherit | Styles applied to the root element if `color="inherit"`. +| textSizeSmall | .MuiButton-textSizeSmall | Styles applied to the root element if `size="small"` and `variant="text"`. +| textSizeLarge | .MuiButton-textSizeLarge | Styles applied to the root element if `size="large"` and `variant="text"`. +| outlinedSizeSmall | .MuiButton-outlinedSizeSmall | Styles applied to the root element if `size="small"` and `variant="outlined"`. +| outlinedSizeLarge | .MuiButton-outlinedSizeLarge | Styles applied to the root element if `size="large"` and `variant="outlined"`. +| containedSizeSmall | .MuiButton-containedSizeSmall | Styles applied to the root element if `size="small"` and `variant="contained"`. +| containedSizeLarge | .MuiButton-containedSizeLarge | Styles applied to the root element if `size="large"` and `variant="contained"`. +| sizeSmall | .MuiButton-sizeSmall | Styles applied to the root element if `size="small"`. +| sizeLarge | .MuiButton-sizeLarge | Styles applied to the root element if `size="large"`. +| fullWidth | .MuiButton-fullWidth | Styles applied to the root element if `fullWidth={true}`. +| startIcon | .MuiButton-startIcon | Styles applied to the startIcon element if supplied. +| endIcon | .MuiButton-endIcon | Styles applied to the endIcon element if supplied. +| iconSizeSmall | .MuiButton-iconSizeSmall | Styles applied to the icon element if supplied and `size="small"`. +| iconSizeMedium | .MuiButton-iconSizeMedium | Styles applied to the icon element if supplied and `size="medium"`. +| iconSizeLarge | .MuiButton-iconSizeLarge | Styles applied to the icon element if supplied and `size="large"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/card-action-area.md b/docs/pages/api/card-action-area.md index db137c1e1253eb..c6d1d6f56dff00 100644 --- a/docs/pages/api/card-action-area.md +++ b/docs/pages/api/card-action-area.md @@ -24,8 +24,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | The `ref` is forwarded to the root element. @@ -38,9 +38,9 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiCardActionArea-root | Styles applied to the root element. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the ButtonBase root element if the action area is keyboard focused. -| focusHighlight | .MuiCardActionArea-focusHighlight | Styles applied to the overlay that covers the action area when it is keyboard focused. +| root | .MuiCardActionArea-root | Styles applied to the root element. +| focusVisible | .Mui-focusVisible | Pseudo-class applied to the ButtonBase root element if the action area is keyboard focused. +| focusHighlight | .MuiCardActionArea-focusHighlight | Styles applied to the overlay that covers the action area when it is keyboard focused. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/card-actions.md b/docs/pages/api/card-actions.md index 5054909e158c60..5325aa0598095c 100644 --- a/docs/pages/api/card-actions.md +++ b/docs/pages/api/card-actions.md @@ -24,9 +24,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| disableSpacing | bool | false | If `true`, the actions do not have additional margin. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| disableSpacing | bool | false | If `true`, the actions do not have additional margin. | The `ref` is forwarded to the root element. @@ -39,8 +39,8 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiCardActions-root | Styles applied to the root element. -| spacing | .MuiCardActions-spacing | Styles applied to the root element if `disableSpacing={false}`. +| root | .MuiCardActions-root | Styles applied to the root element. +| spacing | .MuiCardActions-spacing | Styles applied to the root element if `disableSpacing={false}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/card-content.md b/docs/pages/api/card-content.md index bbbf5c36a2fab6..295c0002ca700f 100644 --- a/docs/pages/api/card-content.md +++ b/docs/pages/api/card-content.md @@ -24,9 +24,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | The `ref` is forwarded to the root element. @@ -39,7 +39,7 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiCardContent-root | Styles applied to the root element. +| root | .MuiCardContent-root | Styles applied to the root element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/card-header.md b/docs/pages/api/card-header.md index a9fdb31b04e1e7..08e856d5380a6c 100644 --- a/docs/pages/api/card-header.md +++ b/docs/pages/api/card-header.md @@ -24,15 +24,15 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| action | node | | The action to display in the card header. | -| avatar | node | | The Avatar for the Card Header. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| disableTypography | bool | false | If `true`, `subheader` and `title` won't be wrapped by a Typography component. This can be useful to render an alternative Typography variant by wrapping the `title` text, and optional `subheader` text with the Typography component. | -| subheader | node | | The content of the component. | -| subheaderTypographyProps | object | | These props will be forwarded to the subheader (as long as disableTypography is not `true`). | -| title | node | | The content of the Card Title. | -| titleTypographyProps | object | | These props will be forwarded to the title (as long as disableTypography is not `true`). | +| action | node | | The action to display in the card header. | +| avatar | node | | The Avatar for the Card Header. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| disableTypography | bool | false | If `true`, `subheader` and `title` won't be wrapped by a Typography component. This can be useful to render an alternative Typography variant by wrapping the `title` text, and optional `subheader` text with the Typography component. | +| subheader | node | | The content of the component. | +| subheaderTypographyProps | object | | These props will be forwarded to the subheader (as long as disableTypography is not `true`). | +| title | node | | The content of the Card Title. | +| titleTypographyProps | object | | These props will be forwarded to the title (as long as disableTypography is not `true`). | The `ref` is forwarded to the root element. @@ -45,12 +45,12 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiCardHeader-root | Styles applied to the root element. -| avatar | .MuiCardHeader-avatar | Styles applied to the avatar element. -| action | .MuiCardHeader-action | Styles applied to the action element. -| content | .MuiCardHeader-content | Styles applied to the content wrapper element. -| title | .MuiCardHeader-title | Styles applied to the title Typography element. -| subheader | .MuiCardHeader-subheader | Styles applied to the subheader Typography element. +| root | .MuiCardHeader-root | Styles applied to the root element. +| avatar | .MuiCardHeader-avatar | Styles applied to the avatar element. +| action | .MuiCardHeader-action | Styles applied to the action element. +| content | .MuiCardHeader-content | Styles applied to the content wrapper element. +| title | .MuiCardHeader-title | Styles applied to the title Typography element. +| subheader | .MuiCardHeader-subheader | Styles applied to the subheader Typography element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/card-media.md b/docs/pages/api/card-media.md index b6ba259cf63d92..3ae471075b23ef 100644 --- a/docs/pages/api/card-media.md +++ b/docs/pages/api/card-media.md @@ -24,11 +24,11 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | Component for rendering image. Either a string to use a DOM element or a component. | -| image | string | | Image to be displayed as a background image. Either `image` or `src` prop must be specified. Note that caller must specify height otherwise the image will not be visible. | -| src | string | | An alias for `image` property. Available only with media components. Media components: `video`, `audio`, `picture`, `iframe`, `img`. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'div' | Component for rendering image. Either a string to use a DOM element or a component. | +| image | string | | Image to be displayed as a background image. Either `image` or `src` prop must be specified. Note that caller must specify height otherwise the image will not be visible. | +| src | string | | An alias for `image` property. Available only with media components. Media components: `video`, `audio`, `picture`, `iframe`, `img`. | The `ref` is forwarded to the root element. @@ -41,9 +41,9 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiCardMedia-root | Styles applied to the root element. -| media | .MuiCardMedia-media | Styles applied to the root element if `component="video, audio, picture, iframe, or img"`. -| img | .MuiCardMedia-img | Styles applied to the root element if `component="picture or img"`. +| root | .MuiCardMedia-root | Styles applied to the root element. +| media | .MuiCardMedia-media | Styles applied to the root element if `component="video, audio, picture, iframe, or img"`. +| img | .MuiCardMedia-img | Styles applied to the root element if `component="picture or img"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/card.md b/docs/pages/api/card.md index 3daa8bed0c59a4..df67813bbcb03a 100644 --- a/docs/pages/api/card.md +++ b/docs/pages/api/card.md @@ -24,9 +24,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| raised | bool | false | If `true`, the card will use raised styling. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| raised | bool | false | If `true`, the card will use raised styling. | The `ref` is forwarded to the root element. @@ -39,7 +39,7 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiCard-root | Styles applied to the root element. +| root | .MuiCard-root | Styles applied to the root element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/checkbox.md b/docs/pages/api/checkbox.md index eae509c28830f4..07c237a15b0691 100644 --- a/docs/pages/api/checkbox.md +++ b/docs/pages/api/checkbox.md @@ -24,22 +24,22 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| checked | bool | | If `true`, the component is checked. | -| checkedIcon | node | <CheckBoxIcon /> | The icon to display when the component is checked. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary'
| 'default' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | -| disabled | bool | false | If `true`, the switch will be disabled. | -| disableRipple | bool | | If `true`, the ripple effect will be disabled. | -| icon | node | <CheckBoxOutlineBlankIcon /> | The icon to display when the component is unchecked. | -| id | string | | The id of the `input` element. | -| indeterminate | bool | false | If `true`, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a `data-indeterminate` attribute on the input. | -| indeterminateIcon | node | <IndeterminateCheckBoxIcon /> | The icon to display when the component is indeterminate. | -| inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | Pass a ref to the `input` element. | -| onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). | -| required | bool | | If `true`, the `input` element will be required. | -| type | string | | The input component prop `type`. | -| value | any | | The value of the component. The DOM API casts this to a string. | +| checked | bool | | If `true`, the component is checked. | +| checkedIcon | node | <CheckBoxIcon /> | The icon to display when the component is checked. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'primary'
| 'secondary'
| 'default' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | +| disabled | bool | false | If `true`, the switch will be disabled. | +| disableRipple | bool | | If `true`, the ripple effect will be disabled. | +| icon | node | <CheckBoxOutlineBlankIcon /> | The icon to display when the component is unchecked. | +| id | string | | The id of the `input` element. | +| indeterminate | bool | false | If `true`, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a `data-indeterminate` attribute on the input. | +| indeterminateIcon | node | <IndeterminateCheckBoxIcon /> | The icon to display when the component is indeterminate. | +| inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | +| inputRef | ref | | Pass a ref to the `input` element. | +| onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). | +| required | bool | | If `true`, the `input` element will be required. | +| type | string | | The input component prop `type`. | +| value | any | | The value of the component. The DOM API casts this to a string. | The `ref` is forwarded to the root element. @@ -52,12 +52,12 @@ Any other props supplied will be provided to the root element ([IconButton](/api | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiCheckbox-root | Styles applied to the root element. -| checked | .Mui-checked | Pseudo-class applied to the root element if `checked={true}`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| indeterminate | .MuiCheckbox-indeterminate | Pseudo-class applied to the root element if `indeterminate={true}`. -| colorPrimary | .MuiCheckbox-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiCheckbox-colorSecondary | Styles applied to the root element if `color="secondary"`. +| root | .MuiCheckbox-root | Styles applied to the root element. +| checked | .Mui-checked | Pseudo-class applied to the root element if `checked={true}`. +| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. +| indeterminate | .MuiCheckbox-indeterminate | Pseudo-class applied to the root element if `indeterminate={true}`. +| colorPrimary | .MuiCheckbox-colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | .MuiCheckbox-colorSecondary | Styles applied to the root element if `color="secondary"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/chip.md b/docs/pages/api/chip.md index e4d8a89a94b434..d3e7778cd7b70c 100644 --- a/docs/pages/api/chip.md +++ b/docs/pages/api/chip.md @@ -24,19 +24,19 @@ Chips represent complex entities in small blocks, such as a contact. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| avatar | element | | Avatar element. | -| children | unsupportedProp | | This prop isn't supported. Use the `component` prop if you need to change the children structure. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| clickable | bool | | If `true`, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If false, the chip will not be clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. | -| color | 'default'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. | -| deleteIcon | element | | Override the default delete icon element. Shown only if `onDelete` is set. | -| disabled | bool | false | If `true`, the chip should be displayed in a disabled state. | -| icon | element | | Icon element. | -| label | node | | The content of the label. | -| onDelete | func | | Callback function fired when the delete icon is clicked. If set, the delete icon will be shown. | -| size | 'small'
| 'medium' | 'medium' | The size of the chip. | -| variant | 'default'
| 'outlined' | 'default' | The variant to use. | +| avatar | element | | Avatar element. | +| children | unsupportedProp | | This prop isn't supported. Use the `component` prop if you need to change the children structure. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| clickable | bool | | If `true`, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If false, the chip will not be clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. | +| color | 'default'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | +| component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. | +| deleteIcon | element | | Override the default delete icon element. Shown only if `onDelete` is set. | +| disabled | bool | false | If `true`, the chip should be displayed in a disabled state. | +| icon | element | | Icon element. | +| label | node | | The content of the label. | +| onDelete | func | | Callback function fired when the delete icon is clicked. If set, the delete icon will be shown. | +| size | 'small'
| 'medium' | 'medium' | The size of the chip. | +| variant | 'default'
| 'outlined' | 'default' | The variant to use. | The `ref` is forwarded to the root element. @@ -49,36 +49,36 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiChip-root | Styles applied to the root element. -| sizeSmall | .MuiChip-sizeSmall | Styles applied to the root element if `size="small"`. -| colorPrimary | .MuiChip-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiChip-colorSecondary | Styles applied to the root element if `color="secondary"`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| clickable | .MuiChip-clickable | Styles applied to the root element if `onClick` is defined or `clickable={true}`. -| clickableColorPrimary | .MuiChip-clickableColorPrimary | Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. -| clickableColorSecondary | .MuiChip-clickableColorSecondary | Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. -| deletable | .MuiChip-deletable | Styles applied to the root element if `onDelete` is defined. -| deletableColorPrimary | .MuiChip-deletableColorPrimary | Styles applied to the root element if `onDelete` and `color="primary"` is defined. -| deletableColorSecondary | .MuiChip-deletableColorSecondary | Styles applied to the root element if `onDelete` and `color="secondary"` is defined. -| outlined | .MuiChip-outlined | Styles applied to the root element if `variant="outlined"`. -| outlinedPrimary | .MuiChip-outlinedPrimary | Styles applied to the root element if `variant="outlined"` and `color="primary"`. -| outlinedSecondary | .MuiChip-outlinedSecondary | Styles applied to the root element if `variant="outlined"` and `color="secondary"`. -| avatar | .MuiChip-avatar | Styles applied to the `avatar` element. -| avatarSmall | .MuiChip-avatarSmall | Styles applied to the `avatar` element if `size="small"`. -| avatarColorPrimary | .MuiChip-avatarColorPrimary | Styles applied to the `avatar` element if `color="primary"`. -| avatarColorSecondary | .MuiChip-avatarColorSecondary | Styles applied to the `avatar` element if `color="secondary"`. -| icon | .MuiChip-icon | Styles applied to the `icon` element. -| iconSmall | .MuiChip-iconSmall | Styles applied to the `icon` element if `size="small"`. -| iconColorPrimary | .MuiChip-iconColorPrimary | Styles applied to the `icon` element if `color="primary"`. -| iconColorSecondary | .MuiChip-iconColorSecondary | Styles applied to the `icon` element if `color="secondary"`. -| label | .MuiChip-label | Styles applied to the label `span` element`. -| labelSmall | .MuiChip-labelSmall | -| deleteIcon | .MuiChip-deleteIcon | Styles applied to the `deleteIcon` element. -| deleteIconSmall | .MuiChip-deleteIconSmall | Styles applied to the `deleteIcon` element if `size="small"`. -| deleteIconColorPrimary | .MuiChip-deleteIconColorPrimary | Styles applied to the deleteIcon element if `color="primary"` and `variant="default"`. -| deleteIconColorSecondary | .MuiChip-deleteIconColorSecondary | Styles applied to the deleteIcon element if `color="secondary"` and `variant="default"`. -| deleteIconOutlinedColorPrimary | .MuiChip-deleteIconOutlinedColorPrimary | Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. -| deleteIconOutlinedColorSecondary | .MuiChip-deleteIconOutlinedColorSecondary | Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. +| root | .MuiChip-root | Styles applied to the root element. +| sizeSmall | .MuiChip-sizeSmall | Styles applied to the root element if `size="small"`. +| colorPrimary | .MuiChip-colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | .MuiChip-colorSecondary | Styles applied to the root element if `color="secondary"`. +| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. +| clickable | .MuiChip-clickable | Styles applied to the root element if `onClick` is defined or `clickable={true}`. +| clickableColorPrimary | .MuiChip-clickableColorPrimary | Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. +| clickableColorSecondary | .MuiChip-clickableColorSecondary | Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. +| deletable | .MuiChip-deletable | Styles applied to the root element if `onDelete` is defined. +| deletableColorPrimary | .MuiChip-deletableColorPrimary | Styles applied to the root element if `onDelete` and `color="primary"` is defined. +| deletableColorSecondary | .MuiChip-deletableColorSecondary | Styles applied to the root element if `onDelete` and `color="secondary"` is defined. +| outlined | .MuiChip-outlined | Styles applied to the root element if `variant="outlined"`. +| outlinedPrimary | .MuiChip-outlinedPrimary | Styles applied to the root element if `variant="outlined"` and `color="primary"`. +| outlinedSecondary | .MuiChip-outlinedSecondary | Styles applied to the root element if `variant="outlined"` and `color="secondary"`. +| avatar | .MuiChip-avatar | Styles applied to the `avatar` element. +| avatarSmall | .MuiChip-avatarSmall | Styles applied to the `avatar` element if `size="small"`. +| avatarColorPrimary | .MuiChip-avatarColorPrimary | Styles applied to the `avatar` element if `color="primary"`. +| avatarColorSecondary | .MuiChip-avatarColorSecondary | Styles applied to the `avatar` element if `color="secondary"`. +| icon | .MuiChip-icon | Styles applied to the `icon` element. +| iconSmall | .MuiChip-iconSmall | Styles applied to the `icon` element if `size="small"`. +| iconColorPrimary | .MuiChip-iconColorPrimary | Styles applied to the `icon` element if `color="primary"`. +| iconColorSecondary | .MuiChip-iconColorSecondary | Styles applied to the `icon` element if `color="secondary"`. +| label | .MuiChip-label | Styles applied to the label `span` element`. +| labelSmall | .MuiChip-labelSmall | +| deleteIcon | .MuiChip-deleteIcon | Styles applied to the `deleteIcon` element. +| deleteIconSmall | .MuiChip-deleteIconSmall | Styles applied to the `deleteIcon` element if `size="small"`. +| deleteIconColorPrimary | .MuiChip-deleteIconColorPrimary | Styles applied to the deleteIcon element if `color="primary"` and `variant="default"`. +| deleteIconColorSecondary | .MuiChip-deleteIconColorSecondary | Styles applied to the deleteIcon element if `color="secondary"` and `variant="default"`. +| deleteIconOutlinedColorPrimary | .MuiChip-deleteIconOutlinedColorPrimary | Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. +| deleteIconOutlinedColorSecondary | .MuiChip-deleteIconOutlinedColorSecondary | Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/circular-progress.md b/docs/pages/api/circular-progress.md index 04d67493907897..cc34f48f9a47c8 100644 --- a/docs/pages/api/circular-progress.md +++ b/docs/pages/api/circular-progress.md @@ -28,13 +28,13 @@ attribute to `true` on that region until it has finished loading. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary'
| 'inherit' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | -| disableShrink | bool | false | If `true`, the shrink animation is disabled. This only works if variant is `indeterminate`. | -| size | number
| string | 40 | The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'. | -| thickness | number | 3.6 | The thickness of the circle. | -| value | number | 0 | The value of the progress indicator for the determinate and static variants. Value between 0 and 100. | -| variant | 'determinate'
| 'indeterminate'
| 'static' | 'indeterminate' | The variant to use. Use indeterminate when there is no progress value. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'primary'
| 'secondary'
| 'inherit' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | +| disableShrink | bool | false | If `true`, the shrink animation is disabled. This only works if variant is `indeterminate`. | +| size | number
| string | 40 | The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'. | +| thickness | number | 3.6 | The thickness of the circle. | +| value | number | 0 | The value of the progress indicator for the determinate and static variants. Value between 0 and 100. | +| variant | 'determinate'
| 'indeterminate'
| 'static' | 'indeterminate' | The variant to use. Use indeterminate when there is no progress value. | The `ref` is forwarded to the root element. @@ -47,16 +47,16 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiCircularProgress-root | Styles applied to the root element. -| static | .MuiCircularProgress-static | Styles applied to the root element if `variant="static"`. -| indeterminate | .MuiCircularProgress-indeterminate | Styles applied to the root element if `variant="indeterminate"`. -| colorPrimary | .MuiCircularProgress-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiCircularProgress-colorSecondary | Styles applied to the root element if `color="secondary"`. -| svg | .MuiCircularProgress-svg | Styles applied to the `svg` element. -| circle | .MuiCircularProgress-circle | Styles applied to the `circle` svg path. -| circleStatic | .MuiCircularProgress-circleStatic | Styles applied to the `circle` svg path if `variant="static"`. -| circleIndeterminate | .MuiCircularProgress-circleIndeterminate | Styles applied to the `circle` svg path if `variant="indeterminate"`. -| circleDisableShrink | .MuiCircularProgress-circleDisableShrink | Styles applied to the `circle` svg path if `disableShrink={true}`. +| root | .MuiCircularProgress-root | Styles applied to the root element. +| static | .MuiCircularProgress-static | Styles applied to the root element if `variant="static"`. +| indeterminate | .MuiCircularProgress-indeterminate | Styles applied to the root element if `variant="indeterminate"`. +| colorPrimary | .MuiCircularProgress-colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | .MuiCircularProgress-colorSecondary | Styles applied to the root element if `color="secondary"`. +| svg | .MuiCircularProgress-svg | Styles applied to the `svg` element. +| circle | .MuiCircularProgress-circle | Styles applied to the `circle` svg path. +| circleStatic | .MuiCircularProgress-circleStatic | Styles applied to the `circle` svg path if `variant="static"`. +| circleIndeterminate | .MuiCircularProgress-circleIndeterminate | Styles applied to the `circle` svg path if `variant="indeterminate"`. +| circleDisableShrink | .MuiCircularProgress-circleDisableShrink | Styles applied to the `circle` svg path if `disableShrink={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/click-away-listener.md b/docs/pages/api/click-away-listener.md index 154c725d88c356..200cfcc0be29bd 100644 --- a/docs/pages/api/click-away-listener.md +++ b/docs/pages/api/click-away-listener.md @@ -25,10 +25,10 @@ For instance, if you need to hide a menu when people click anywhere else on your | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | element | | The wrapped element.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | -| mouseEvent | 'onClick'
| 'onMouseDown'
| 'onMouseUp'
| false | 'onClick' | The mouse event to listen to. You can disable the listener by providing `false`. | -| onClickAway * | func | | Callback fired when a "click away" event is detected. | -| touchEvent | 'onTouchStart'
| 'onTouchEnd'
| false | 'onTouchEnd' | The touch event to listen to. You can disable the listener by providing `false`. | +| children * | element | | The wrapped element.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | +| mouseEvent | 'onClick'
| 'onMouseDown'
| 'onMouseUp'
| false | 'onClick' | The mouse event to listen to. You can disable the listener by providing `false`. | +| onClickAway * | func | | Callback fired when a "click away" event is detected. | +| touchEvent | 'onTouchStart'
| 'onTouchEnd'
| false | 'onTouchEnd' | The touch event to listen to. You can disable the listener by providing `false`. | The component cannot hold a ref. diff --git a/docs/pages/api/collapse.md b/docs/pages/api/collapse.md index bbd4bd119cc344..76a4fb951f1ed3 100644 --- a/docs/pages/api/collapse.md +++ b/docs/pages/api/collapse.md @@ -26,12 +26,12 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content node to be collapsed. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| collapsedHeight | string
| number | '0px' | The height of the container when collapsed. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| in | bool | | If `true`, the component will transition in. | -| timeout | number
| { enter?: number, exit?: number }
| 'auto' | duration.standard | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height. | +| children | node | | The content node to be collapsed. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| collapsedHeight | string
| number | '0px' | The height of the container when collapsed. | +| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| in | bool | | If `true`, the component will transition in. | +| timeout | number
| { enter?: number, exit?: number }
| 'auto' | duration.standard | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height. | The `ref` is forwarded to the root element. @@ -44,11 +44,11 @@ Any other props supplied will be provided to the root element ([Transition](http | Rule name | Global class | Description | |:-----|:-------------|:------------| -| container | .MuiCollapse-container | Styles applied to the container element. -| entered | .MuiCollapse-entered | Styles applied to the container element when the transition has entered. -| hidden | .MuiCollapse-hidden | Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px. -| wrapper | .MuiCollapse-wrapper | Styles applied to the outer wrapper element. -| wrapperInner | .MuiCollapse-wrapperInner | Styles applied to the inner wrapper element. +| container | .MuiCollapse-container | Styles applied to the container element. +| entered | .MuiCollapse-entered | Styles applied to the container element when the transition has entered. +| hidden | .MuiCollapse-hidden | Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px. +| wrapper | .MuiCollapse-wrapper | Styles applied to the outer wrapper element. +| wrapperInner | .MuiCollapse-wrapperInner | Styles applied to the inner wrapper element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/container.md b/docs/pages/api/container.md index 29a12ca2b89b05..fc71064f5d7c1b 100644 --- a/docs/pages/api/container.md +++ b/docs/pages/api/container.md @@ -24,11 +24,11 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| fixed | bool | false | Set the max-width to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport. It's fluid by default. | -| maxWidth | 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| false | 'lg' | Determine the max-width of the container. The container width grows with the size of the screen. Set to `false` to disable `maxWidth`. | +| children * | node | | | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| fixed | bool | false | Set the max-width to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport. It's fluid by default. | +| maxWidth | 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| false | 'lg' | Determine the max-width of the container. The container width grows with the size of the screen. Set to `false` to disable `maxWidth`. | The `ref` is forwarded to the root element. @@ -41,13 +41,13 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiContainer-root | Styles applied to the root element. -| fixed | .MuiContainer-fixed | Styles applied to the root element if `fixed={true}`. -| maxWidthXs | .MuiContainer-maxWidthXs | Styles applied to the root element if `maxWidth="xs"`. -| maxWidthSm | .MuiContainer-maxWidthSm | Styles applied to the root element if `maxWidth="sm"`. -| maxWidthMd | .MuiContainer-maxWidthMd | Styles applied to the root element if `maxWidth="md"`. -| maxWidthLg | .MuiContainer-maxWidthLg | Styles applied to the root element if `maxWidth="lg"`. -| maxWidthXl | .MuiContainer-maxWidthXl | Styles applied to the root element if `maxWidth="xl"`. +| root | .MuiContainer-root | Styles applied to the root element. +| fixed | .MuiContainer-fixed | Styles applied to the root element if `fixed={true}`. +| maxWidthXs | .MuiContainer-maxWidthXs | Styles applied to the root element if `maxWidth="xs"`. +| maxWidthSm | .MuiContainer-maxWidthSm | Styles applied to the root element if `maxWidth="sm"`. +| maxWidthMd | .MuiContainer-maxWidthMd | Styles applied to the root element if `maxWidth="md"`. +| maxWidthLg | .MuiContainer-maxWidthLg | Styles applied to the root element if `maxWidth="lg"`. +| maxWidthXl | .MuiContainer-maxWidthXl | Styles applied to the root element if `maxWidth="xl"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/css-baseline.md b/docs/pages/api/css-baseline.md index 5b36805d0c7e56..81978487e709a3 100644 --- a/docs/pages/api/css-baseline.md +++ b/docs/pages/api/css-baseline.md @@ -24,7 +24,7 @@ Kickstart an elegant, consistent, and simple baseline to build upon. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | null | You can wrap a node. | +| children | node | null | You can wrap a node. | The component cannot hold a ref. diff --git a/docs/pages/api/dialog-actions.md b/docs/pages/api/dialog-actions.md index 81f6649e65bda4..3e04c92ddf1d78 100644 --- a/docs/pages/api/dialog-actions.md +++ b/docs/pages/api/dialog-actions.md @@ -24,9 +24,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| disableSpacing | bool | false | If `true`, the actions do not have additional margin. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| disableSpacing | bool | false | If `true`, the actions do not have additional margin. | The `ref` is forwarded to the root element. @@ -39,8 +39,8 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiDialogActions-root | Styles applied to the root element. -| spacing | .MuiDialogActions-spacing | Styles applied to the root element if `disableSpacing={false}`. +| root | .MuiDialogActions-root | Styles applied to the root element. +| spacing | .MuiDialogActions-spacing | Styles applied to the root element if `disableSpacing={false}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/dialog-content-text.md b/docs/pages/api/dialog-content-text.md index 994b84674f601a..13b4bc2d706898 100644 --- a/docs/pages/api/dialog-content-text.md +++ b/docs/pages/api/dialog-content-text.md @@ -24,8 +24,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | The `ref` is forwarded to the root element. @@ -38,7 +38,7 @@ Any other props supplied will be provided to the root element ([Typography](/api | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiDialogContentText-root | Styles applied to the root element. +| root | .MuiDialogContentText-root | Styles applied to the root element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/dialog-content.md b/docs/pages/api/dialog-content.md index d90421630f5931..38994bf0a3272c 100644 --- a/docs/pages/api/dialog-content.md +++ b/docs/pages/api/dialog-content.md @@ -24,9 +24,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| dividers | bool | false | Display the top and bottom dividers. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| dividers | bool | false | Display the top and bottom dividers. | The `ref` is forwarded to the root element. @@ -39,8 +39,8 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiDialogContent-root | Styles applied to the root element. -| dividers | .MuiDialogContent-dividers | Styles applied to the root element if `dividers={true}`. +| root | .MuiDialogContent-root | Styles applied to the root element. +| dividers | .MuiDialogContent-dividers | Styles applied to the root element if `dividers={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/dialog-title.md b/docs/pages/api/dialog-title.md index fea131909cef9e..d76490ea5c23a8 100644 --- a/docs/pages/api/dialog-title.md +++ b/docs/pages/api/dialog-title.md @@ -24,9 +24,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| disableTypography | bool | false | If `true`, the children won't be wrapped by a typography component. For instance, this can be useful to render an h4 instead of the default h2. | +| children * | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| disableTypography | bool | false | If `true`, the children won't be wrapped by a typography component. For instance, this can be useful to render an h4 instead of the default h2. | The `ref` is forwarded to the root element. @@ -39,7 +39,7 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiDialogTitle-root | Styles applied to the root element. +| root | .MuiDialogTitle-root | Styles applied to the root element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/dialog.md b/docs/pages/api/dialog.md index 5fda37ae2c6c80..d427c93b835d31 100644 --- a/docs/pages/api/dialog.md +++ b/docs/pages/api/dialog.md @@ -24,31 +24,31 @@ Dialogs are overlaid modal paper based components with a backdrop. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| aria-describedby | string | | The id(s) of the element(s) that describe the dialog. | -| aria-labelledby | string | | The id(s) of the element(s) that label the dialog. | -| children * | node | | Dialog children, usually the included sub-components. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| disableBackdropClick | bool | false | If `true`, clicking the backdrop will not fire the `onClose` callback. | -| disableEscapeKeyDown | bool | false | If `true`, hitting escape will not fire the `onClose` callback. | -| fullScreen | bool | false | If `true`, the dialog will be full-screen | -| fullWidth | bool | false | If `true`, the dialog stretches to `maxWidth`.
Notice that the dialog width grow is limited by the default margin. | -| maxWidth | 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| false | 'sm' | Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`. | -| onBackdropClick | func | | Callback fired when the backdrop is clicked. | -| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback.
*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"`. | -| onEnter | func | | Callback fired before the dialog enters. | -| onEntered | func | | Callback fired when the dialog has entered. | -| onEntering | func | | Callback fired when the dialog is entering. | -| onEscapeKeyDown | func | | Callback fired when the escape key is pressed, `disableKeyboard` is false and the modal is in focus. | -| onExit | func | | Callback fired before the dialog exits. | -| onExited | func | | Callback fired when the dialog has exited. | -| onExiting | func | | Callback fired when the dialog is exiting. | -| open * | bool | | If `true`, the Dialog is open. | -| PaperComponent | elementType | Paper | The component used to render the body of the dialog. | -| PaperProps | object | {} | Props applied to the [`Paper`](/api/paper/) element. | -| scroll | 'body'
| 'paper' | 'paper' | Determine the container for scrolling the dialog. | -| TransitionComponent | elementType | Fade | The component used for the transition. | -| transitionDuration | number
| { enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | -| TransitionProps | object | | Props applied to the `Transition` element. | +| aria-describedby | string | | The id(s) of the element(s) that describe the dialog. | +| aria-labelledby | string | | The id(s) of the element(s) that label the dialog. | +| children * | node | | Dialog children, usually the included sub-components. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| disableBackdropClick | bool | false | If `true`, clicking the backdrop will not fire the `onClose` callback. | +| disableEscapeKeyDown | bool | false | If `true`, hitting escape will not fire the `onClose` callback. | +| fullScreen | bool | false | If `true`, the dialog will be full-screen | +| fullWidth | bool | false | If `true`, the dialog stretches to `maxWidth`.
Notice that the dialog width grow is limited by the default margin. | +| maxWidth | 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| false | 'sm' | Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`. | +| onBackdropClick | func | | Callback fired when the backdrop is clicked. | +| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback.
*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"`. | +| onEnter | func | | Callback fired before the dialog enters. | +| onEntered | func | | Callback fired when the dialog has entered. | +| onEntering | func | | Callback fired when the dialog is entering. | +| onEscapeKeyDown | func | | Callback fired when the escape key is pressed, `disableKeyboard` is false and the modal is in focus. | +| onExit | func | | Callback fired before the dialog exits. | +| onExited | func | | Callback fired when the dialog has exited. | +| onExiting | func | | Callback fired when the dialog is exiting. | +| open * | bool | | If `true`, the Dialog is open. | +| PaperComponent | elementType | Paper | The component used to render the body of the dialog. | +| PaperProps | object | {} | Props applied to the [`Paper`](/api/paper/) element. | +| scroll | 'body'
| 'paper' | 'paper' | Determine the container for scrolling the dialog. | +| TransitionComponent | elementType | Fade | The component used for the transition. | +| transitionDuration | number
| { enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | +| TransitionProps | object | | Props applied to the `Transition` element. | The `ref` is forwarded to the root element. @@ -61,21 +61,21 @@ Any other props supplied will be provided to the root element ([Modal](/api/moda | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiDialog-root | Styles applied to the root element. -| scrollPaper | .MuiDialog-scrollPaper | Styles applied to the container element if `scroll="paper"`. -| scrollBody | .MuiDialog-scrollBody | Styles applied to the container element if `scroll="body"`. -| container | .MuiDialog-container | Styles applied to the container element. -| paper | .MuiDialog-paper | Styles applied to the `Paper` component. -| paperScrollPaper | .MuiDialog-paperScrollPaper | Styles applied to the `Paper` component if `scroll="paper"`. -| paperScrollBody | .MuiDialog-paperScrollBody | Styles applied to the `Paper` component if `scroll="body"`. -| paperWidthFalse | .MuiDialog-paperWidthFalse | Styles applied to the `Paper` component if `maxWidth=false`. -| paperWidthXs | .MuiDialog-paperWidthXs | Styles applied to the `Paper` component if `maxWidth="xs"`. -| paperWidthSm | .MuiDialog-paperWidthSm | Styles applied to the `Paper` component if `maxWidth="sm"`. -| paperWidthMd | .MuiDialog-paperWidthMd | Styles applied to the `Paper` component if `maxWidth="md"`. -| paperWidthLg | .MuiDialog-paperWidthLg | Styles applied to the `Paper` component if `maxWidth="lg"`. -| paperWidthXl | .MuiDialog-paperWidthXl | Styles applied to the `Paper` component if `maxWidth="xl"`. -| paperFullWidth | .MuiDialog-paperFullWidth | Styles applied to the `Paper` component if `fullWidth={true}`. -| paperFullScreen | .MuiDialog-paperFullScreen | Styles applied to the `Paper` component if `fullScreen={true}`. +| root | .MuiDialog-root | Styles applied to the root element. +| scrollPaper | .MuiDialog-scrollPaper | Styles applied to the container element if `scroll="paper"`. +| scrollBody | .MuiDialog-scrollBody | Styles applied to the container element if `scroll="body"`. +| container | .MuiDialog-container | Styles applied to the container element. +| paper | .MuiDialog-paper | Styles applied to the `Paper` component. +| paperScrollPaper | .MuiDialog-paperScrollPaper | Styles applied to the `Paper` component if `scroll="paper"`. +| paperScrollBody | .MuiDialog-paperScrollBody | Styles applied to the `Paper` component if `scroll="body"`. +| paperWidthFalse | .MuiDialog-paperWidthFalse | Styles applied to the `Paper` component if `maxWidth=false`. +| paperWidthXs | .MuiDialog-paperWidthXs | Styles applied to the `Paper` component if `maxWidth="xs"`. +| paperWidthSm | .MuiDialog-paperWidthSm | Styles applied to the `Paper` component if `maxWidth="sm"`. +| paperWidthMd | .MuiDialog-paperWidthMd | Styles applied to the `Paper` component if `maxWidth="md"`. +| paperWidthLg | .MuiDialog-paperWidthLg | Styles applied to the `Paper` component if `maxWidth="lg"`. +| paperWidthXl | .MuiDialog-paperWidthXl | Styles applied to the `Paper` component if `maxWidth="xl"`. +| paperFullWidth | .MuiDialog-paperFullWidth | Styles applied to the `Paper` component if `fullWidth={true}`. +| paperFullScreen | .MuiDialog-paperFullScreen | Styles applied to the `Paper` component if `fullScreen={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/divider.md b/docs/pages/api/divider.md index dddc6a536285dc..6599354bc0701a 100644 --- a/docs/pages/api/divider.md +++ b/docs/pages/api/divider.md @@ -24,12 +24,12 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| absolute | bool | false | Absolutely position the element. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'hr' | The component used for the root node. Either a string to use a DOM element or a component. | -| light | bool | false | If `true`, the divider will have a lighter color. | -| orientation | 'horizontal'
| 'vertical' | 'horizontal' | The divider orientation. | -| variant | 'fullWidth'
| 'inset'
| 'middle' | 'fullWidth' | The variant to use. | +| absolute | bool | false | Absolutely position the element. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'hr' | The component used for the root node. Either a string to use a DOM element or a component. | +| light | bool | false | If `true`, the divider will have a lighter color. | +| orientation | 'horizontal'
| 'vertical' | 'horizontal' | The divider orientation. | +| variant | 'fullWidth'
| 'inset'
| 'middle' | 'fullWidth' | The variant to use. | The `ref` is forwarded to the root element. @@ -42,12 +42,12 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiDivider-root | Styles applied to the root element. -| absolute | .MuiDivider-absolute | Styles applied to the root element if `absolute={true}`. -| inset | .MuiDivider-inset | Styles applied to the root element if `variant="inset"`. -| light | .MuiDivider-light | Styles applied to the root element if `light={true}`. -| middle | .MuiDivider-middle | Styles applied to the root element if `variant="middle"`. -| vertical | .MuiDivider-vertical | Styles applied to the root element if `orientation="vertical"`. +| root | .MuiDivider-root | Styles applied to the root element. +| absolute | .MuiDivider-absolute | Styles applied to the root element if `absolute={true}`. +| inset | .MuiDivider-inset | Styles applied to the root element if `variant="inset"`. +| light | .MuiDivider-light | Styles applied to the root element if `light={true}`. +| middle | .MuiDivider-middle | Styles applied to the root element if `variant="middle"`. +| vertical | .MuiDivider-vertical | Styles applied to the root element if `orientation="vertical"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/drawer.md b/docs/pages/api/drawer.md index 495dbcdc297ae9..59248a80adac8d 100644 --- a/docs/pages/api/drawer.md +++ b/docs/pages/api/drawer.md @@ -25,17 +25,17 @@ when `variant="temporary"` is set. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| anchor | 'left'
| 'top'
| 'right'
| 'bottom' | 'left' | Side from which the drawer will appear. | -| children | node | | The contents of the drawer. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| elevation | number | 16 | The elevation of the drawer. | -| ModalProps | object | {} | Props applied to the [`Modal`](/api/modal/) element. | -| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | -| open | bool | false | If `true`, the drawer is open. | -| PaperProps | object | | Props applied to the [`Paper`](/api/paper/) element. | -| SlideProps | object | | Props applied to the [`Slide`](/api/slide/) element. | -| transitionDuration | number
| { enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | -| variant | 'permanent'
| 'persistent'
| 'temporary' | 'temporary' | The variant to use. | +| anchor | 'left'
| 'top'
| 'right'
| 'bottom' | 'left' | Side from which the drawer will appear. | +| children | node | | The contents of the drawer. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| elevation | number | 16 | The elevation of the drawer. | +| ModalProps | object | {} | Props applied to the [`Modal`](/api/modal/) element. | +| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | +| open | bool | false | If `true`, the drawer is open. | +| PaperProps | object | | Props applied to the [`Paper`](/api/paper/) element. | +| SlideProps | object | | Props applied to the [`Slide`](/api/slide/) element. | +| transitionDuration | number
| { enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | +| variant | 'permanent'
| 'persistent'
| 'temporary' | 'temporary' | The variant to use. | The `ref` is forwarded to the root element. @@ -48,18 +48,18 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiDrawer-root | Styles applied to the root element. -| docked | .MuiDrawer-docked | Styles applied to the root element if `variant="permanent or persistent"`. -| paper | .MuiDrawer-paper | Styles applied to the `Paper` component. -| paperAnchorLeft | .MuiDrawer-paperAnchorLeft | Styles applied to the `Paper` component if `anchor="left"`. -| paperAnchorRight | .MuiDrawer-paperAnchorRight | Styles applied to the `Paper` component if `anchor="right"`. -| paperAnchorTop | .MuiDrawer-paperAnchorTop | Styles applied to the `Paper` component if `anchor="top"`. -| paperAnchorBottom | .MuiDrawer-paperAnchorBottom | Styles applied to the `Paper` component if `anchor="bottom"`. -| paperAnchorDockedLeft | .MuiDrawer-paperAnchorDockedLeft | Styles applied to the `Paper` component if `anchor="left"` and `variant` is not "temporary". -| paperAnchorDockedTop | .MuiDrawer-paperAnchorDockedTop | Styles applied to the `Paper` component if `anchor="top"` and `variant` is not "temporary". -| paperAnchorDockedRight | .MuiDrawer-paperAnchorDockedRight | Styles applied to the `Paper` component if `anchor="right"` and `variant` is not "temporary". -| paperAnchorDockedBottom | .MuiDrawer-paperAnchorDockedBottom | Styles applied to the `Paper` component if `anchor="bottom"` and `variant` is not "temporary". -| modal | .MuiDrawer-modal | Styles applied to the `Modal` component. +| root | .MuiDrawer-root | Styles applied to the root element. +| docked | .MuiDrawer-docked | Styles applied to the root element if `variant="permanent or persistent"`. +| paper | .MuiDrawer-paper | Styles applied to the `Paper` component. +| paperAnchorLeft | .MuiDrawer-paperAnchorLeft | Styles applied to the `Paper` component if `anchor="left"`. +| paperAnchorRight | .MuiDrawer-paperAnchorRight | Styles applied to the `Paper` component if `anchor="right"`. +| paperAnchorTop | .MuiDrawer-paperAnchorTop | Styles applied to the `Paper` component if `anchor="top"`. +| paperAnchorBottom | .MuiDrawer-paperAnchorBottom | Styles applied to the `Paper` component if `anchor="bottom"`. +| paperAnchorDockedLeft | .MuiDrawer-paperAnchorDockedLeft | Styles applied to the `Paper` component if `anchor="left"` and `variant` is not "temporary". +| paperAnchorDockedTop | .MuiDrawer-paperAnchorDockedTop | Styles applied to the `Paper` component if `anchor="top"` and `variant` is not "temporary". +| paperAnchorDockedRight | .MuiDrawer-paperAnchorDockedRight | Styles applied to the `Paper` component if `anchor="right"` and `variant` is not "temporary". +| paperAnchorDockedBottom | .MuiDrawer-paperAnchorDockedBottom | Styles applied to the `Paper` component if `anchor="bottom"` and `variant` is not "temporary". +| modal | .MuiDrawer-modal | Styles applied to the `Modal` component. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/expansion-panel-actions.md b/docs/pages/api/expansion-panel-actions.md index 0ae8ac71604e94..d0d6756b166d0a 100644 --- a/docs/pages/api/expansion-panel-actions.md +++ b/docs/pages/api/expansion-panel-actions.md @@ -24,9 +24,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| disableSpacing | bool | false | If `true`, the actions do not have additional margin. | +| children * | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| disableSpacing | bool | false | If `true`, the actions do not have additional margin. | The `ref` is forwarded to the root element. @@ -39,8 +39,8 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiExpansionPanelActions-root | Styles applied to the root element. -| spacing | .MuiExpansionPanelActions-spacing | Styles applied to the root element if `disableSpacing={false}`. +| root | .MuiExpansionPanelActions-root | Styles applied to the root element. +| spacing | .MuiExpansionPanelActions-spacing | Styles applied to the root element if `disableSpacing={false}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/expansion-panel-details.md b/docs/pages/api/expansion-panel-details.md index ce27f5346fb214..12b596f7cc234f 100644 --- a/docs/pages/api/expansion-panel-details.md +++ b/docs/pages/api/expansion-panel-details.md @@ -24,8 +24,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the expansion panel details. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| children * | node | | The content of the expansion panel details. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | The `ref` is forwarded to the root element. @@ -38,7 +38,7 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiExpansionPanelDetails-root | Styles applied to the root element. +| root | .MuiExpansionPanelDetails-root | Styles applied to the root element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/expansion-panel-summary.md b/docs/pages/api/expansion-panel-summary.md index 81387c0a040fbf..c95e98f69b0fa5 100644 --- a/docs/pages/api/expansion-panel-summary.md +++ b/docs/pages/api/expansion-panel-summary.md @@ -24,10 +24,10 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the expansion panel summary. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| expandIcon | node | | The icon to display as the expand indicator. | -| IconButtonProps | object | | Props applied to the `IconButton` element wrapping the expand icon. | +| children | node | | The content of the expansion panel summary. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| expandIcon | node | | The icon to display as the expand indicator. | +| IconButtonProps | object | | Props applied to the `IconButton` element wrapping the expand icon. | The `ref` is forwarded to the root element. @@ -40,12 +40,12 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiExpansionPanelSummary-root | Styles applied to the root element. -| expanded | .Mui-expanded | Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. -| focused | .Mui-focused | Pseudo-class applied to the root element if `focused={true}`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| content | .MuiExpansionPanelSummary-content | Styles applied to the children wrapper element. -| expandIcon | .MuiExpansionPanelSummary-expandIcon | Styles applied to the `IconButton` component when `expandIcon` is supplied. +| root | .MuiExpansionPanelSummary-root | Styles applied to the root element. +| expanded | .Mui-expanded | Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. +| focused | .Mui-focused | Pseudo-class applied to the root element if `focused={true}`. +| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. +| content | .MuiExpansionPanelSummary-content | Styles applied to the children wrapper element. +| expandIcon | .MuiExpansionPanelSummary-expandIcon | Styles applied to the `IconButton` component when `expandIcon` is supplied. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/expansion-panel.md b/docs/pages/api/expansion-panel.md index 01e19ccac0683b..cf262103f6cfaa 100644 --- a/docs/pages/api/expansion-panel.md +++ b/docs/pages/api/expansion-panel.md @@ -24,14 +24,14 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the expansion panel. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| defaultExpanded | bool | false | If `true`, expands the panel by default. | -| disabled | bool | false | If `true`, the panel will be displayed in a disabled state. | -| expanded | bool | | If `true`, expands the panel, otherwise collapse it. Setting this prop enables control over the panel. | -| onChange | func | | Callback fired when the expand/collapse state is changed.

**Signature:**
`function(event: object, expanded: boolean) => void`
*event:* The event source of the callback.
*expanded:* The `expanded` state of the panel. | -| TransitionComponent | elementType | Collapse | The component used for the collapse effect. | -| TransitionProps | object | | Props applied to the `Transition` element. | +| children * | node | | The content of the expansion panel. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| defaultExpanded | bool | false | If `true`, expands the panel by default. | +| disabled | bool | false | If `true`, the panel will be displayed in a disabled state. | +| expanded | bool | | If `true`, expands the panel, otherwise collapse it. Setting this prop enables control over the panel. | +| onChange | func | | Callback fired when the expand/collapse state is changed.

**Signature:**
`function(event: object, expanded: boolean) => void`
*event:* The event source of the callback.
*expanded:* The `expanded` state of the panel. | +| TransitionComponent | elementType | Collapse | The component used for the collapse effect. | +| TransitionProps | object | | Props applied to the `Transition` element. | The `ref` is forwarded to the root element. @@ -44,10 +44,10 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiExpansionPanel-root | Styles applied to the root element. -| rounded | .MuiExpansionPanel-rounded | Styles applied to the root element if `square={false}`. -| expanded | .Mui-expanded | Styles applied to the root element if `expanded={true}`. -| disabled | .Mui-disabled | Styles applied to the root element if `disabled={true}`. +| root | .MuiExpansionPanel-root | Styles applied to the root element. +| rounded | .MuiExpansionPanel-rounded | Styles applied to the root element if `square={false}`. +| expanded | .Mui-expanded | Styles applied to the root element if `expanded={true}`. +| disabled | .Mui-disabled | Styles applied to the root element if `disabled={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/fab.md b/docs/pages/api/fab.md index 1e1b84787e0c39..b3f3d46ab9eda3 100644 --- a/docs/pages/api/fab.md +++ b/docs/pages/api/fab.md @@ -24,16 +24,16 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the button. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'button' | The component used for the root node. Either a string to use a DOM element or a component. | -| disabled | bool | false | If `true`, the button will be disabled. | -| disableFocusRipple | bool | false | If `true`, the keyboard focus ripple will be disabled. `disableRipple` must also be true. | -| disableRipple | bool | | If `true`, the ripple effect will be disabled. | -| href | string | | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. | -| size | 'small'
| 'medium'
| 'large' | 'large' | The size of the button. `small` is equivalent to the dense button styling. | -| variant | 'round'
| 'extended' | 'round' | The variant to use. | +| children * | node | | The content of the button. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | +| component | elementType | 'button' | The component used for the root node. Either a string to use a DOM element or a component. | +| disabled | bool | false | If `true`, the button will be disabled. | +| disableFocusRipple | bool | false | If `true`, the keyboard focus ripple will be disabled. `disableRipple` must also be true. | +| disableRipple | bool | | If `true`, the ripple effect will be disabled. | +| href | string | | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. | +| size | 'small'
| 'medium'
| 'large' | 'large' | The size of the button. `small` is equivalent to the dense button styling. | +| variant | 'round'
| 'extended' | 'round' | The variant to use. | The `ref` is forwarded to the root element. @@ -46,16 +46,16 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiFab-root | Styles applied to the root element. -| label | .MuiFab-label | Styles applied to the span element that wraps the children. -| primary | .MuiFab-primary | Styles applied to the root element if `color="primary"`. -| secondary | .MuiFab-secondary | Styles applied to the root element if `color="secondary"`. -| extended | .MuiFab-extended | Styles applied to the root element if `variant="extended"`. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| colorInherit | .MuiFab-colorInherit | Styles applied to the root element if `color="inherit"`. -| sizeSmall | .MuiFab-sizeSmall | Styles applied to the root element if `size="small"``. -| sizeMedium | .MuiFab-sizeMedium | Styles applied to the root element if `size="medium"``. +| root | .MuiFab-root | Styles applied to the root element. +| label | .MuiFab-label | Styles applied to the span element that wraps the children. +| primary | .MuiFab-primary | Styles applied to the root element if `color="primary"`. +| secondary | .MuiFab-secondary | Styles applied to the root element if `color="secondary"`. +| extended | .MuiFab-extended | Styles applied to the root element if `variant="extended"`. +| focusVisible | .Mui-focusVisible | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. +| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. +| colorInherit | .MuiFab-colorInherit | Styles applied to the root element if `color="inherit"`. +| sizeSmall | .MuiFab-sizeSmall | Styles applied to the root element if `size="small"``. +| sizeMedium | .MuiFab-sizeMedium | Styles applied to the root element if `size="medium"``. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/fade.md b/docs/pages/api/fade.md index 0834c75a6b196a..a813dd7c416df0 100644 --- a/docs/pages/api/fade.md +++ b/docs/pages/api/fade.md @@ -25,9 +25,9 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | element | | A single child content element. | -| in | bool | | If `true`, the component will transition in. | -| timeout | number
| { enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | +| children | element | | A single child content element. | +| in | bool | | If `true`, the component will transition in. | +| timeout | number
| { enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api/filled-input.md b/docs/pages/api/filled-input.md index 862202de0cec57..0c7c1d4dea3f72 100644 --- a/docs/pages/api/filled-input.md +++ b/docs/pages/api/filled-input.md @@ -24,33 +24,33 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| autoComplete | string | | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). | -| autoFocus | bool | | If `true`, the `input` element will be focused during the first mount. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| className | string | | The CSS class name of the wrapper element. | -| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | -| defaultValue | any | | The default `input` element value. Use when the component is not controlled. | -| disabled | bool | | If `true`, the `input` element will be disabled. | -| disableUnderline | bool | | If `true`, the input will not have an underline. | -| endAdornment | node | | End `InputAdornment` for this component. | -| error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | -| fullWidth | bool | false | If `true`, the input will take up the full width of its container. | -| id | string | | The id of the `input` element. | -| inputComponent | elementType | 'input' | The component used for the native input. Either a string to use a DOM element or a component. | -| inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | Pass a ref to the `input` element. | -| margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | -| multiline | bool | false | If `true`, a textarea element will be rendered. | -| name | string | | Name attribute of the `input` element. | -| onChange | func | | Callback fired when the value is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). | -| placeholder | string | | The short hint displayed in the input before the user enters a value. | -| readOnly | bool | | It prevents the user from changing the value of the field (not from interacting with the field). | -| required | bool | | If `true`, the `input` element will be required. | -| rows | string
| number | | Number of rows to display when multiline option is set to true. | -| rowsMax | string
| number | | Maximum number of rows to display when multiline option is set to true. | -| startAdornment | node | | Start `InputAdornment` for this component. | -| type | string | 'text' | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | -| value | any | | The value of the `input` element, required for a controlled component. | +| autoComplete | string | | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). | +| autoFocus | bool | | If `true`, the `input` element will be focused during the first mount. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| className | string | | The CSS class name of the wrapper element. | +| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | +| defaultValue | any | | The default `input` element value. Use when the component is not controlled. | +| disabled | bool | | If `true`, the `input` element will be disabled. | +| disableUnderline | bool | | If `true`, the input will not have an underline. | +| endAdornment | node | | End `InputAdornment` for this component. | +| error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | +| fullWidth | bool | false | If `true`, the input will take up the full width of its container. | +| id | string | | The id of the `input` element. | +| inputComponent | elementType | 'input' | The component used for the native input. Either a string to use a DOM element or a component. | +| inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | +| inputRef | ref | | Pass a ref to the `input` element. | +| margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | +| multiline | bool | false | If `true`, a textarea element will be rendered. | +| name | string | | Name attribute of the `input` element. | +| onChange | func | | Callback fired when the value is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). | +| placeholder | string | | The short hint displayed in the input before the user enters a value. | +| readOnly | bool | | It prevents the user from changing the value of the field (not from interacting with the field). | +| required | bool | | If `true`, the `input` element will be required. | +| rows | string
| number | | Number of rows to display when multiline option is set to true. | +| rowsMax | string
| number | | Maximum number of rows to display when multiline option is set to true. | +| startAdornment | node | | Start `InputAdornment` for this component. | +| type | string | 'text' | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | +| value | any | | The value of the `input` element, required for a controlled component. | The `ref` is forwarded to the root element. @@ -63,22 +63,22 @@ Any other props supplied will be provided to the root element ([InputBase](/api/ | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiFilledInput-root | Styles applied to the root element. -| colorSecondary | .MuiFilledInput-colorSecondary | Styles applied to the root element if color secondary. -| underline | .MuiFilledInput-underline | Styles applied to the root element if `disableUnderline={false}`. -| focused | .Mui-focused | Pseudo-class applied to the root element if the component is focused. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| adornedStart | .MuiFilledInput-adornedStart | Styles applied to the root element if `startAdornment` is provided. -| adornedEnd | .MuiFilledInput-adornedEnd | Styles applied to the root element if `endAdornment` is provided. -| error | .Mui-error | Styles applied to the root element if `error={true}`. -| marginDense | .MuiFilledInput-marginDense | Styles applied to the `input` element if `margin="dense"`. -| multiline | .MuiFilledInput-multiline | Styles applied to the root element if `multiline={true}`. -| input | .MuiFilledInput-input | Styles applied to the `input` element. -| inputMarginDense | .MuiFilledInput-inputMarginDense | Styles applied to the `input` element if `margin="dense"`. -| inputHiddenLabel | .MuiFilledInput-inputHiddenLabel | Styles applied to the `input` if in ``. -| inputMultiline | .MuiFilledInput-inputMultiline | Styles applied to the `input` element if `multiline={true}`. -| inputAdornedStart | .MuiFilledInput-inputAdornedStart | Styles applied to the `input` element if `startAdornment` is provided. -| inputAdornedEnd | .MuiFilledInput-inputAdornedEnd | Styles applied to the `input` element if `endAdornment` is provided. +| root | .MuiFilledInput-root | Styles applied to the root element. +| colorSecondary | .MuiFilledInput-colorSecondary | Styles applied to the root element if color secondary. +| underline | .MuiFilledInput-underline | Styles applied to the root element if `disableUnderline={false}`. +| focused | .Mui-focused | Pseudo-class applied to the root element if the component is focused. +| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. +| adornedStart | .MuiFilledInput-adornedStart | Styles applied to the root element if `startAdornment` is provided. +| adornedEnd | .MuiFilledInput-adornedEnd | Styles applied to the root element if `endAdornment` is provided. +| error | .Mui-error | Styles applied to the root element if `error={true}`. +| marginDense | .MuiFilledInput-marginDense | Styles applied to the `input` element if `margin="dense"`. +| multiline | .MuiFilledInput-multiline | Styles applied to the root element if `multiline={true}`. +| input | .MuiFilledInput-input | Styles applied to the `input` element. +| inputMarginDense | .MuiFilledInput-inputMarginDense | Styles applied to the `input` element if `margin="dense"`. +| inputHiddenLabel | .MuiFilledInput-inputHiddenLabel | Styles applied to the `input` if in ``. +| inputMultiline | .MuiFilledInput-inputMultiline | Styles applied to the `input` element if `multiline={true}`. +| inputAdornedStart | .MuiFilledInput-inputAdornedStart | Styles applied to the `input` element if `startAdornment` is provided. +| inputAdornedEnd | .MuiFilledInput-inputAdornedEnd | Styles applied to the `input` element if `endAdornment` is provided. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/form-control-label.md b/docs/pages/api/form-control-label.md index ab7ee9720ead05..0a969e897e2c29 100644 --- a/docs/pages/api/form-control-label.md +++ b/docs/pages/api/form-control-label.md @@ -25,16 +25,16 @@ Use this component if you want to display an extra label. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| checked | bool | | If `true`, the component appears selected. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| control | element | | A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. | -| disabled | bool | | If `true`, the control will be disabled. | -| inputRef | ref | | Pass a ref to the `input` element. | -| label | node | | The text to be used in an enclosing label element. | -| labelPlacement | 'end'
| 'start'
| 'top'
| 'bottom' | 'end' | The position of the label. | -| name | string | | | -| onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). | -| value | any | | The value of the component. | +| checked | bool | | If `true`, the component appears selected. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| control | element | | A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. | +| disabled | bool | | If `true`, the control will be disabled. | +| inputRef | ref | | Pass a ref to the `input` element. | +| label | node | | The text to be used in an enclosing label element. | +| labelPlacement | 'end'
| 'start'
| 'top'
| 'bottom' | 'end' | The position of the label. | +| name | string | | | +| onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). | +| value | any | | The value of the component. | The `ref` is forwarded to the root element. @@ -47,12 +47,12 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiFormControlLabel-root | Styles applied to the root element. -| labelPlacementStart | .MuiFormControlLabel-labelPlacementStart | Styles applied to the root element if `labelPlacement="start"`. -| labelPlacementTop | .MuiFormControlLabel-labelPlacementTop | Styles applied to the root element if `labelPlacement="top"`. -| labelPlacementBottom | .MuiFormControlLabel-labelPlacementBottom | Styles applied to the root element if `labelPlacement="bottom"`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| label | .MuiFormControlLabel-label | Styles applied to the label's Typography component. +| root | .MuiFormControlLabel-root | Styles applied to the root element. +| labelPlacementStart | .MuiFormControlLabel-labelPlacementStart | Styles applied to the root element if `labelPlacement="start"`. +| labelPlacementTop | .MuiFormControlLabel-labelPlacementTop | Styles applied to the root element if `labelPlacement="top"`. +| labelPlacementBottom | .MuiFormControlLabel-labelPlacementBottom | Styles applied to the root element if `labelPlacement="bottom"`. +| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. +| label | .MuiFormControlLabel-label | Styles applied to the label's Typography component. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/form-control.md b/docs/pages/api/form-control.md index 77499c388a6032..6f5fe5bb1b8c56 100644 --- a/docs/pages/api/form-control.md +++ b/docs/pages/api/form-control.md @@ -44,18 +44,18 @@ You can find one composition example below and more going to [the demos](/compon | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The contents of the form control. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| disabled | bool | false | If `true`, the label, input and helper text should be displayed in a disabled state. | -| error | bool | false | If `true`, the label should be displayed in an error state. | -| fullWidth | bool | false | If `true`, the component will take up the full width of its container. | -| hiddenLabel | bool | false | If `true`, the label will be hidden. This is used to increase density for a `FilledInput`. Be sure to add `aria-label` to the `input` element. | -| margin | 'none'
| 'dense'
| 'normal' | 'none' | If `dense` or `normal`, will adjust vertical spacing of this and contained components. | -| required | bool | false | If `true`, the label will indicate that the input is required. | -| size | 'small'
| 'medium' | | The size of the text field. | -| variant | 'standard'
| 'outlined'
| 'filled' | 'standard' | The variant to use. | +| children | node | | The contents of the form control. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | +| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| disabled | bool | false | If `true`, the label, input and helper text should be displayed in a disabled state. | +| error | bool | false | If `true`, the label should be displayed in an error state. | +| fullWidth | bool | false | If `true`, the component will take up the full width of its container. | +| hiddenLabel | bool | false | If `true`, the label will be hidden. This is used to increase density for a `FilledInput`. Be sure to add `aria-label` to the `input` element. | +| margin | 'none'
| 'dense'
| 'normal' | 'none' | If `dense` or `normal`, will adjust vertical spacing of this and contained components. | +| required | bool | false | If `true`, the label will indicate that the input is required. | +| size | 'small'
| 'medium' | | The size of the text field. | +| variant | 'standard'
| 'outlined'
| 'filled' | 'standard' | The variant to use. | The `ref` is forwarded to the root element. @@ -68,10 +68,10 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiFormControl-root | Styles applied to the root element. -| marginNormal | .MuiFormControl-marginNormal | Styles applied to the root element if `margin="normal"`. -| marginDense | .MuiFormControl-marginDense | Styles applied to the root element if `margin="dense"`. -| fullWidth | .MuiFormControl-fullWidth | Styles applied to the root element if `fullWidth={true}`. +| root | .MuiFormControl-root | Styles applied to the root element. +| marginNormal | .MuiFormControl-marginNormal | Styles applied to the root element if `margin="normal"`. +| marginDense | .MuiFormControl-marginDense | Styles applied to the root element if `margin="dense"`. +| fullWidth | .MuiFormControl-fullWidth | Styles applied to the root element if `fullWidth={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/form-group.md b/docs/pages/api/form-group.md index 1aecbe6cb59715..1349984b9fea22 100644 --- a/docs/pages/api/form-group.md +++ b/docs/pages/api/form-group.md @@ -26,9 +26,9 @@ For the `Radio`, you should be using the `RadioGroup` component instead of this | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| row | bool | false | Display group of elements in a compact row. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| row | bool | false | Display group of elements in a compact row. | The `ref` is forwarded to the root element. @@ -41,8 +41,8 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiFormGroup-root | Styles applied to the root element. -| row | .MuiFormGroup-row | Styles applied to the root element if `row={true}`. +| root | .MuiFormGroup-root | Styles applied to the root element. +| row | .MuiFormGroup-row | Styles applied to the root element if `row={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/form-helper-text.md b/docs/pages/api/form-helper-text.md index f72c00d622b515..7fd349176a2644 100644 --- a/docs/pages/api/form-helper-text.md +++ b/docs/pages/api/form-helper-text.md @@ -24,16 +24,16 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'p' | The component used for the root node. Either a string to use a DOM element or a component. | -| disabled | bool | | If `true`, the helper text should be displayed in a disabled state. | -| error | bool | | If `true`, helper text should be displayed in an error state. | -| filled | bool | | If `true`, the helper text should use filled classes key. | -| focused | bool | | If `true`, the helper text should use focused classes key. | -| margin | 'dense' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | -| required | bool | | If `true`, the helper text should use required classes key. | -| variant | 'standard'
| 'outlined'
| 'filled' | | The variant to use. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'p' | The component used for the root node. Either a string to use a DOM element or a component. | +| disabled | bool | | If `true`, the helper text should be displayed in a disabled state. | +| error | bool | | If `true`, helper text should be displayed in an error state. | +| filled | bool | | If `true`, the helper text should use filled classes key. | +| focused | bool | | If `true`, the helper text should use focused classes key. | +| margin | 'dense' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | +| required | bool | | If `true`, the helper text should use required classes key. | +| variant | 'standard'
| 'outlined'
| 'filled' | | The variant to use. | The `ref` is forwarded to the root element. @@ -46,14 +46,14 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiFormHelperText-root | Styles applied to the root element. -| error | .Mui-error | Pseudo-class applied to the root element if `error={true}`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| marginDense | .MuiFormHelperText-marginDense | Styles applied to the root element if `margin="dense"`. -| contained | .MuiFormHelperText-contained | Styles applied to the root element if `variant="filled"` or `variant="outlined"`. -| focused | .Mui-focused | Pseudo-class applied to the root element if `focused={true}`. -| filled | .MuiFormHelperText-filled | Pseudo-class applied to the root element if `filled={true}`. -| required | .Mui-required | Pseudo-class applied to the root element if `required={true}`. +| root | .MuiFormHelperText-root | Styles applied to the root element. +| error | .Mui-error | Pseudo-class applied to the root element if `error={true}`. +| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. +| marginDense | .MuiFormHelperText-marginDense | Styles applied to the root element if `margin="dense"`. +| contained | .MuiFormHelperText-contained | Styles applied to the root element if `variant="filled"` or `variant="outlined"`. +| focused | .Mui-focused | Pseudo-class applied to the root element if `focused={true}`. +| filled | .MuiFormHelperText-filled | Pseudo-class applied to the root element if `filled={true}`. +| required | .Mui-required | Pseudo-class applied to the root element if `required={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/form-label.md b/docs/pages/api/form-label.md index 6f6112fecba5cb..d892af67ebf21c 100644 --- a/docs/pages/api/form-label.md +++ b/docs/pages/api/form-label.md @@ -24,15 +24,15 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'label' | The component used for the root node. Either a string to use a DOM element or a component. | -| disabled | bool | | If `true`, the label should be displayed in a disabled state. | -| error | bool | | If `true`, the label should be displayed in an error state. | -| filled | bool | | If `true`, the label should use filled classes key. | -| focused | bool | | If `true`, the input of this label is focused (used by `FormGroup` components). | -| required | bool | | If `true`, the label will indicate that the input is required. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | +| component | elementType | 'label' | The component used for the root node. Either a string to use a DOM element or a component. | +| disabled | bool | | If `true`, the label should be displayed in a disabled state. | +| error | bool | | If `true`, the label should be displayed in an error state. | +| filled | bool | | If `true`, the label should use filled classes key. | +| focused | bool | | If `true`, the input of this label is focused (used by `FormGroup` components). | +| required | bool | | If `true`, the label will indicate that the input is required. | The `ref` is forwarded to the root element. @@ -45,14 +45,14 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiFormLabel-root | Styles applied to the root element. -| colorSecondary | .MuiFormLabel-colorSecondary | Styles applied to the root element if the color is secondary. -| focused | .Mui-focused | Pseudo-class applied to the root element if `focused={true}`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| error | .Mui-error | Pseudo-class applied to the root element if `error={true}`. -| filled | .MuiFormLabel-filled | Pseudo-class applied to the root element if `filled={true}`. -| required | .Mui-required | Pseudo-class applied to the root element if `required={true}`. -| asterisk | .MuiFormLabel-asterisk | Styles applied to the asterisk element. +| root | .MuiFormLabel-root | Styles applied to the root element. +| colorSecondary | .MuiFormLabel-colorSecondary | Styles applied to the root element if the color is secondary. +| focused | .Mui-focused | Pseudo-class applied to the root element if `focused={true}`. +| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. +| error | .Mui-error | Pseudo-class applied to the root element if `error={true}`. +| filled | .MuiFormLabel-filled | Pseudo-class applied to the root element if `filled={true}`. +| required | .Mui-required | Pseudo-class applied to the root element if `required={true}`. +| asterisk | .MuiFormLabel-asterisk | Styles applied to the asterisk element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/grid-list-tile-bar.md b/docs/pages/api/grid-list-tile-bar.md index cd0e27df912c23..e3a569e985d234 100644 --- a/docs/pages/api/grid-list-tile-bar.md +++ b/docs/pages/api/grid-list-tile-bar.md @@ -24,12 +24,12 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| actionIcon | node | | An IconButton element to be used as secondary action target (primary action target is the tile itself). | -| actionPosition | 'left'
| 'right' | 'right' | Position of secondary action IconButton. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| subtitle | node | | String or element serving as subtitle (support text). | -| title | node | | Title to be displayed on tile. | -| titlePosition | 'top'
| 'bottom' | 'bottom' | Position of the title bar. | +| actionIcon | node | | An IconButton element to be used as secondary action target (primary action target is the tile itself). | +| actionPosition | 'left'
| 'right' | 'right' | Position of secondary action IconButton. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| subtitle | node | | String or element serving as subtitle (support text). | +| title | node | | Title to be displayed on tile. | +| titlePosition | 'top'
| 'bottom' | 'bottom' | Position of the title bar. | The `ref` is forwarded to the root element. @@ -42,17 +42,17 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiGridListTileBar-root | Styles applied to the root element. -| titlePositionBottom | .MuiGridListTileBar-titlePositionBottom | Styles applied to the root element if `titlePosition="bottom"`. -| titlePositionTop | .MuiGridListTileBar-titlePositionTop | Styles applied to the root element if `titlePosition="top"`. -| rootSubtitle | .MuiGridListTileBar-rootSubtitle | Styles applied to the root element if a `subtitle` is provided. -| titleWrap | .MuiGridListTileBar-titleWrap | Styles applied to the title and subtitle container element. -| titleWrapActionPosLeft | .MuiGridListTileBar-titleWrapActionPosLeft | Styles applied to the container element if `actionPosition="left"`. -| titleWrapActionPosRight | .MuiGridListTileBar-titleWrapActionPosRight | Styles applied to the container element if `actionPosition="right"`. -| title | .MuiGridListTileBar-title | Styles applied to the title container element. -| subtitle | .MuiGridListTileBar-subtitle | Styles applied to the subtitle container element. -| actionIcon | .MuiGridListTileBar-actionIcon | Styles applied to the actionIcon if supplied. -| actionIconActionPosLeft | .MuiGridListTileBar-actionIconActionPosLeft | Styles applied to the actionIcon if `actionPosition="left"`. +| root | .MuiGridListTileBar-root | Styles applied to the root element. +| titlePositionBottom | .MuiGridListTileBar-titlePositionBottom | Styles applied to the root element if `titlePosition="bottom"`. +| titlePositionTop | .MuiGridListTileBar-titlePositionTop | Styles applied to the root element if `titlePosition="top"`. +| rootSubtitle | .MuiGridListTileBar-rootSubtitle | Styles applied to the root element if a `subtitle` is provided. +| titleWrap | .MuiGridListTileBar-titleWrap | Styles applied to the title and subtitle container element. +| titleWrapActionPosLeft | .MuiGridListTileBar-titleWrapActionPosLeft | Styles applied to the container element if `actionPosition="left"`. +| titleWrapActionPosRight | .MuiGridListTileBar-titleWrapActionPosRight | Styles applied to the container element if `actionPosition="right"`. +| title | .MuiGridListTileBar-title | Styles applied to the title container element. +| subtitle | .MuiGridListTileBar-subtitle | Styles applied to the subtitle container element. +| actionIcon | .MuiGridListTileBar-actionIcon | Styles applied to the actionIcon if supplied. +| actionIconActionPosLeft | .MuiGridListTileBar-actionIconActionPosLeft | Styles applied to the actionIcon if `actionPosition="left"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/grid-list-tile.md b/docs/pages/api/grid-list-tile.md index e57090793d4f09..2cb5dc667900c9 100644 --- a/docs/pages/api/grid-list-tile.md +++ b/docs/pages/api/grid-list-tile.md @@ -24,11 +24,11 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| cols | number | 1 | Width of the tile in number of grid cells. | -| component | elementType | 'li' | The component used for the root node. Either a string to use a DOM element or a component. | -| rows | number | 1 | Height of the tile in number of grid cells. | +| children | node | | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| cols | number | 1 | Width of the tile in number of grid cells. | +| component | elementType | 'li' | The component used for the root node. Either a string to use a DOM element or a component. | +| rows | number | 1 | Height of the tile in number of grid cells. | The `ref` is forwarded to the root element. @@ -41,10 +41,10 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiGridListTile-root | Styles applied to the root element. -| tile | .MuiGridListTile-tile | Styles applied to the `div` element that wraps the children. -| imgFullHeight | .MuiGridListTile-imgFullHeight | Styles applied to an `img` element child, if needed to ensure it covers the tile. -| imgFullWidth | .MuiGridListTile-imgFullWidth | Styles applied to an `img` element child, if needed to ensure it covers the tile. +| root | .MuiGridListTile-root | Styles applied to the root element. +| tile | .MuiGridListTile-tile | Styles applied to the `div` element that wraps the children. +| imgFullHeight | .MuiGridListTile-imgFullHeight | Styles applied to an `img` element child, if needed to ensure it covers the tile. +| imgFullWidth | .MuiGridListTile-imgFullWidth | Styles applied to an `img` element child, if needed to ensure it covers the tile. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/grid-list.md b/docs/pages/api/grid-list.md index cb3b66a4bac7ec..bdd5836bfc18a4 100644 --- a/docs/pages/api/grid-list.md +++ b/docs/pages/api/grid-list.md @@ -24,12 +24,12 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| cellHeight | number
| 'auto' | 180 | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. | -| children * | node | | Grid Tiles that will be in Grid List. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| cols | number | 2 | Number of columns. | -| component | elementType | 'ul' | The component used for the root node. Either a string to use a DOM element or a component. | -| spacing | number | 4 | Number of px for the spacing between tiles. | +| cellHeight | number
| 'auto' | 180 | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. | +| children * | node | | Grid Tiles that will be in Grid List. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| cols | number | 2 | Number of columns. | +| component | elementType | 'ul' | The component used for the root node. Either a string to use a DOM element or a component. | +| spacing | number | 4 | Number of px for the spacing between tiles. | The `ref` is forwarded to the root element. @@ -42,7 +42,7 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiGridList-root | Styles applied to the root element. +| root | .MuiGridList-root | Styles applied to the root element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/grid.md b/docs/pages/api/grid.md index 08d2cfcce7994f..4a3fc208fd9cd0 100644 --- a/docs/pages/api/grid.md +++ b/docs/pages/api/grid.md @@ -24,23 +24,23 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| alignContent | 'stretch'
| 'center'
| 'flex-start'
| 'flex-end'
| 'space-between'
| 'space-around' | 'stretch' | Defines the `align-content` style property. It's applied for all screen sizes. | -| alignItems | 'flex-start'
| 'center'
| 'flex-end'
| 'stretch'
| 'baseline' | 'stretch' | Defines the `align-items` style property. It's applied for all screen sizes. | -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| container | bool | false | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. | -| direction | 'row'
| 'row-reverse'
| 'column'
| 'column-reverse' | 'row' | Defines the `flex-direction` style property. It is applied for all screen sizes. | -| item | bool | false | If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. | -| justify | 'flex-start'
| 'center'
| 'flex-end'
| 'space-between'
| 'space-around'
| 'space-evenly' | 'flex-start' | Defines the `justify-content` style property. It is applied for all screen sizes. | -| lg | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. | -| md | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. | -| sm | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. | -| spacing | 0
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10 | 0 | Defines the space between the type `item` component. It can only be used on a type `container` component. | -| wrap | 'nowrap'
| 'wrap'
| 'wrap-reverse' | 'wrap' | Defines the `flex-wrap` style property. It's applied for all screen sizes. | -| xl | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for the `xl` breakpoint and wider screens. | -| xs | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. | -| zeroMinWidth | bool | false | If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. | +| alignContent | 'stretch'
| 'center'
| 'flex-start'
| 'flex-end'
| 'space-between'
| 'space-around' | 'stretch' | Defines the `align-content` style property. It's applied for all screen sizes. | +| alignItems | 'flex-start'
| 'center'
| 'flex-end'
| 'stretch'
| 'baseline' | 'stretch' | Defines the `align-items` style property. It's applied for all screen sizes. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| container | bool | false | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. | +| direction | 'row'
| 'row-reverse'
| 'column'
| 'column-reverse' | 'row' | Defines the `flex-direction` style property. It is applied for all screen sizes. | +| item | bool | false | If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. | +| justify | 'flex-start'
| 'center'
| 'flex-end'
| 'space-between'
| 'space-around'
| 'space-evenly' | 'flex-start' | Defines the `justify-content` style property. It is applied for all screen sizes. | +| lg | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. | +| md | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. | +| sm | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. | +| spacing | 0
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10 | 0 | Defines the space between the type `item` component. It can only be used on a type `container` component. | +| wrap | 'nowrap'
| 'wrap'
| 'wrap-reverse' | 'wrap' | Defines the `flex-wrap` style property. It's applied for all screen sizes. | +| xl | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for the `xl` breakpoint and wider screens. | +| xs | false
| 'auto'
| true
| 1
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12 | false | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. | +| zeroMinWidth | bool | false | If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. | The `ref` is forwarded to the root element. @@ -53,53 +53,53 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiGrid-root | Styles applied to the root element -| container | .MuiGrid-container | Styles applied to the root element if `container={true}`. -| item | .MuiGrid-item | Styles applied to the root element if `item={true}`. -| zeroMinWidth | .MuiGrid-zeroMinWidth | Styles applied to the root element if `zeroMinWidth={true}`. -| direction-xs-column | .MuiGrid-direction-xs-column | -| direction-xs-column-reverse | .MuiGrid-direction-xs-column-reverse | -| direction-xs-row-reverse | .MuiGrid-direction-xs-row-reverse | -| wrap-xs-nowrap | .MuiGrid-wrap-xs-nowrap | -| wrap-xs-wrap-reverse | .MuiGrid-wrap-xs-wrap-reverse | -| align-items-xs-center | .MuiGrid-align-items-xs-center | -| align-items-xs-flex-start | .MuiGrid-align-items-xs-flex-start | -| align-items-xs-flex-end | .MuiGrid-align-items-xs-flex-end | -| align-items-xs-baseline | .MuiGrid-align-items-xs-baseline | -| align-content-xs-center | .MuiGrid-align-content-xs-center | -| align-content-xs-flex-start | .MuiGrid-align-content-xs-flex-start | -| align-content-xs-flex-end | .MuiGrid-align-content-xs-flex-end | -| align-content-xs-space-between | .MuiGrid-align-content-xs-space-between | -| align-content-xs-space-around | .MuiGrid-align-content-xs-space-around | -| justify-xs-center | .MuiGrid-justify-xs-center | -| justify-xs-flex-end | .MuiGrid-justify-xs-flex-end | -| justify-xs-space-between | .MuiGrid-justify-xs-space-between | -| justify-xs-space-around | .MuiGrid-justify-xs-space-around | -| justify-xs-space-evenly | .MuiGrid-justify-xs-space-evenly | -| spacing-xs-1 | .MuiGrid-spacing-xs-1 | -| spacing-xs-2 | .MuiGrid-spacing-xs-2 | -| spacing-xs-3 | .MuiGrid-spacing-xs-3 | -| spacing-xs-4 | .MuiGrid-spacing-xs-4 | -| spacing-xs-5 | .MuiGrid-spacing-xs-5 | -| spacing-xs-6 | .MuiGrid-spacing-xs-6 | -| spacing-xs-7 | .MuiGrid-spacing-xs-7 | -| spacing-xs-8 | .MuiGrid-spacing-xs-8 | -| spacing-xs-9 | .MuiGrid-spacing-xs-9 | -| spacing-xs-10 | .MuiGrid-spacing-xs-10 | -| grid-xs-auto | .MuiGrid-grid-xs-auto | -| grid-xs-true | .MuiGrid-grid-xs-true | -| grid-xs-1 | .MuiGrid-grid-xs-1 | -| grid-xs-2 | .MuiGrid-grid-xs-2 | -| grid-xs-3 | .MuiGrid-grid-xs-3 | -| grid-xs-4 | .MuiGrid-grid-xs-4 | -| grid-xs-5 | .MuiGrid-grid-xs-5 | -| grid-xs-6 | .MuiGrid-grid-xs-6 | -| grid-xs-7 | .MuiGrid-grid-xs-7 | -| grid-xs-8 | .MuiGrid-grid-xs-8 | -| grid-xs-9 | .MuiGrid-grid-xs-9 | -| grid-xs-10 | .MuiGrid-grid-xs-10 | -| grid-xs-11 | .MuiGrid-grid-xs-11 | -| grid-xs-12 | .MuiGrid-grid-xs-12 | +| root | .MuiGrid-root | Styles applied to the root element +| container | .MuiGrid-container | Styles applied to the root element if `container={true}`. +| item | .MuiGrid-item | Styles applied to the root element if `item={true}`. +| zeroMinWidth | .MuiGrid-zeroMinWidth | Styles applied to the root element if `zeroMinWidth={true}`. +| direction-xs-column | .MuiGrid-direction-xs-column | +| direction-xs-column-reverse | .MuiGrid-direction-xs-column-reverse | +| direction-xs-row-reverse | .MuiGrid-direction-xs-row-reverse | +| wrap-xs-nowrap | .MuiGrid-wrap-xs-nowrap | +| wrap-xs-wrap-reverse | .MuiGrid-wrap-xs-wrap-reverse | +| align-items-xs-center | .MuiGrid-align-items-xs-center | +| align-items-xs-flex-start | .MuiGrid-align-items-xs-flex-start | +| align-items-xs-flex-end | .MuiGrid-align-items-xs-flex-end | +| align-items-xs-baseline | .MuiGrid-align-items-xs-baseline | +| align-content-xs-center | .MuiGrid-align-content-xs-center | +| align-content-xs-flex-start | .MuiGrid-align-content-xs-flex-start | +| align-content-xs-flex-end | .MuiGrid-align-content-xs-flex-end | +| align-content-xs-space-between | .MuiGrid-align-content-xs-space-between | +| align-content-xs-space-around | .MuiGrid-align-content-xs-space-around | +| justify-xs-center | .MuiGrid-justify-xs-center | +| justify-xs-flex-end | .MuiGrid-justify-xs-flex-end | +| justify-xs-space-between | .MuiGrid-justify-xs-space-between | +| justify-xs-space-around | .MuiGrid-justify-xs-space-around | +| justify-xs-space-evenly | .MuiGrid-justify-xs-space-evenly | +| spacing-xs-1 | .MuiGrid-spacing-xs-1 | +| spacing-xs-2 | .MuiGrid-spacing-xs-2 | +| spacing-xs-3 | .MuiGrid-spacing-xs-3 | +| spacing-xs-4 | .MuiGrid-spacing-xs-4 | +| spacing-xs-5 | .MuiGrid-spacing-xs-5 | +| spacing-xs-6 | .MuiGrid-spacing-xs-6 | +| spacing-xs-7 | .MuiGrid-spacing-xs-7 | +| spacing-xs-8 | .MuiGrid-spacing-xs-8 | +| spacing-xs-9 | .MuiGrid-spacing-xs-9 | +| spacing-xs-10 | .MuiGrid-spacing-xs-10 | +| grid-xs-auto | .MuiGrid-grid-xs-auto | +| grid-xs-true | .MuiGrid-grid-xs-true | +| grid-xs-1 | .MuiGrid-grid-xs-1 | +| grid-xs-2 | .MuiGrid-grid-xs-2 | +| grid-xs-3 | .MuiGrid-grid-xs-3 | +| grid-xs-4 | .MuiGrid-grid-xs-4 | +| grid-xs-5 | .MuiGrid-grid-xs-5 | +| grid-xs-6 | .MuiGrid-grid-xs-6 | +| grid-xs-7 | .MuiGrid-grid-xs-7 | +| grid-xs-8 | .MuiGrid-grid-xs-8 | +| grid-xs-9 | .MuiGrid-grid-xs-9 | +| grid-xs-10 | .MuiGrid-grid-xs-10 | +| grid-xs-11 | .MuiGrid-grid-xs-11 | +| grid-xs-12 | .MuiGrid-grid-xs-12 | You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/grow.md b/docs/pages/api/grow.md index c2513ae6ec418d..a53c876f74311d 100644 --- a/docs/pages/api/grow.md +++ b/docs/pages/api/grow.md @@ -26,9 +26,9 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | element | | A single child content element. | -| in | bool | | If `true`, show the component; triggers the enter or exit animation. | -| timeout | number
| { enter?: number, exit?: number }
| 'auto' | 'auto' | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height. | +| children | element | | A single child content element. | +| in | bool | | If `true`, show the component; triggers the enter or exit animation. | +| timeout | number
| { enter?: number, exit?: number }
| 'auto' | 'auto' | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api/hidden.md b/docs/pages/api/hidden.md index 9ea18a2f108a22..b9884681e99911 100644 --- a/docs/pages/api/hidden.md +++ b/docs/pages/api/hidden.md @@ -24,20 +24,20 @@ Responsively hides children based on the selected implementation. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| implementation | 'js'
| 'css' | 'js' | Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering. | -| initialWidth | 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl' | | You can use this prop when choosing the `js` implementation with server-side rendering.
As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width.
For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint | -| lgDown | bool | false | If `true`, screens this size and down will be hidden. | -| lgUp | bool | false | If `true`, screens this size and up will be hidden. | -| mdDown | bool | false | If `true`, screens this size and down will be hidden. | -| mdUp | bool | false | If `true`, screens this size and up will be hidden. | -| only | 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| Array<'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'> | | Hide the given breakpoint(s). | -| smDown | bool | false | If `true`, screens this size and down will be hidden. | -| smUp | bool | false | If `true`, screens this size and up will be hidden. | -| xlDown | bool | false | If `true`, screens this size and down will be hidden. | -| xlUp | bool | false | If `true`, screens this size and up will be hidden. | -| xsDown | bool | false | If `true`, screens this size and down will be hidden. | -| xsUp | bool | false | If `true`, screens this size and up will be hidden. | +| children | node | | The content of the component. | +| implementation | 'js'
| 'css' | 'js' | Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering. | +| initialWidth | 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl' | | You can use this prop when choosing the `js` implementation with server-side rendering.
As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width.
For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint | +| lgDown | bool | false | If `true`, screens this size and down will be hidden. | +| lgUp | bool | false | If `true`, screens this size and up will be hidden. | +| mdDown | bool | false | If `true`, screens this size and down will be hidden. | +| mdUp | bool | false | If `true`, screens this size and up will be hidden. | +| only | 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| Array<'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'> | | Hide the given breakpoint(s). | +| smDown | bool | false | If `true`, screens this size and down will be hidden. | +| smUp | bool | false | If `true`, screens this size and up will be hidden. | +| xlDown | bool | false | If `true`, screens this size and down will be hidden. | +| xlUp | bool | false | If `true`, screens this size and up will be hidden. | +| xsDown | bool | false | If `true`, screens this size and down will be hidden. | +| xsUp | bool | false | If `true`, screens this size and up will be hidden. | The component cannot hold a ref. diff --git a/docs/pages/api/icon-button.md b/docs/pages/api/icon-button.md index 9038538e3ad1c4..f215729ce28059 100644 --- a/docs/pages/api/icon-button.md +++ b/docs/pages/api/icon-button.md @@ -25,14 +25,14 @@ regarding the available icon options. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The icon element. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | -| disabled | bool | false | If `true`, the button will be disabled. | -| disableFocusRipple | bool | false | If `true`, the keyboard focus ripple will be disabled. `disableRipple` must also be true. | -| disableRipple | bool | | If `true`, the ripple effect will be disabled. | -| edge | 'start'
| 'end'
| false | false | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). | -| size | 'small'
| 'medium' | 'medium' | The size of the button. `small` is equivalent to the dense button styling. | +| children | node | | The icon element. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | +| disabled | bool | false | If `true`, the button will be disabled. | +| disableFocusRipple | bool | false | If `true`, the keyboard focus ripple will be disabled. `disableRipple` must also be true. | +| disableRipple | bool | | If `true`, the ripple effect will be disabled. | +| edge | 'start'
| 'end'
| false | false | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). | +| size | 'small'
| 'medium' | 'medium' | The size of the button. `small` is equivalent to the dense button styling. | The `ref` is forwarded to the root element. @@ -45,15 +45,15 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiIconButton-root | Styles applied to the root element. -| edgeStart | .MuiIconButton-edgeStart | Styles applied to the root element if `edge="start"`. -| edgeEnd | .MuiIconButton-edgeEnd | Styles applied to the root element if `edge="end"`. -| colorInherit | .MuiIconButton-colorInherit | Styles applied to the root element if `color="inherit"`. -| colorPrimary | .MuiIconButton-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiIconButton-colorSecondary | Styles applied to the root element if `color="secondary"`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| sizeSmall | .MuiIconButton-sizeSmall | Styles applied to the root element if `size="small"`. -| label | .MuiIconButton-label | Styles applied to the children container element. +| root | .MuiIconButton-root | Styles applied to the root element. +| edgeStart | .MuiIconButton-edgeStart | Styles applied to the root element if `edge="start"`. +| edgeEnd | .MuiIconButton-edgeEnd | Styles applied to the root element if `edge="end"`. +| colorInherit | .MuiIconButton-colorInherit | Styles applied to the root element if `color="inherit"`. +| colorPrimary | .MuiIconButton-colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | .MuiIconButton-colorSecondary | Styles applied to the root element if `color="secondary"`. +| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. +| sizeSmall | .MuiIconButton-sizeSmall | Styles applied to the root element if `size="small"`. +| label | .MuiIconButton-label | Styles applied to the children container element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/icon.md b/docs/pages/api/icon.md index e99dc2d4e7b239..59aca3796f911e 100644 --- a/docs/pages/api/icon.md +++ b/docs/pages/api/icon.md @@ -24,11 +24,11 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The name of the icon font ligature. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'inherit'
| 'primary'
| 'secondary'
| 'action'
| 'error'
| 'disabled' | 'inherit' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'span' | The component used for the root node. Either a string to use a DOM element or a component. | -| fontSize | 'inherit'
| 'default'
| 'small'
| 'large' | 'default' | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. | +| children | node | | The name of the icon font ligature. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'inherit'
| 'primary'
| 'secondary'
| 'action'
| 'error'
| 'disabled' | 'inherit' | The color of the component. It supports those theme colors that make sense for this component. | +| component | elementType | 'span' | The component used for the root node. Either a string to use a DOM element or a component. | +| fontSize | 'inherit'
| 'default'
| 'small'
| 'large' | 'default' | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. | The `ref` is forwarded to the root element. @@ -41,15 +41,15 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiIcon-root | Styles applied to the root element. -| colorPrimary | .MuiIcon-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiIcon-colorSecondary | Styles applied to the root element if `color="secondary"`. -| colorAction | .MuiIcon-colorAction | Styles applied to the root element if `color="action"`. -| colorError | .MuiIcon-colorError | Styles applied to the root element if `color="error"`. -| colorDisabled | .MuiIcon-colorDisabled | Styles applied to the root element if `color="disabled"`. -| fontSizeInherit | .MuiIcon-fontSizeInherit | -| fontSizeSmall | .MuiIcon-fontSizeSmall | Styles applied to the root element if `fontSize="small"`. -| fontSizeLarge | .MuiIcon-fontSizeLarge | Styles applied to the root element if `fontSize="large"`. +| root | .MuiIcon-root | Styles applied to the root element. +| colorPrimary | .MuiIcon-colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | .MuiIcon-colorSecondary | Styles applied to the root element if `color="secondary"`. +| colorAction | .MuiIcon-colorAction | Styles applied to the root element if `color="action"`. +| colorError | .MuiIcon-colorError | Styles applied to the root element if `color="error"`. +| colorDisabled | .MuiIcon-colorDisabled | Styles applied to the root element if `color="disabled"`. +| fontSizeInherit | .MuiIcon-fontSizeInherit | +| fontSizeSmall | .MuiIcon-fontSizeSmall | Styles applied to the root element if `fontSize="small"`. +| fontSizeLarge | .MuiIcon-fontSizeLarge | Styles applied to the root element if `fontSize="large"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/input-adornment.md b/docs/pages/api/input-adornment.md index 94912250921564..b73d23991fa453 100644 --- a/docs/pages/api/input-adornment.md +++ b/docs/pages/api/input-adornment.md @@ -24,13 +24,13 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the component, normally an `IconButton` or string. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| disablePointerEvents | bool | false | Disable pointer events on the root. This allows for the content of the adornment to focus the input on click. | -| disableTypography | bool | false | If children is a string then disable wrapping in a Typography component. | -| position | 'start'
| 'end' | | The position this adornment should appear relative to the `Input`. | -| variant | 'standard'
| 'outlined'
| 'filled' | | The variant to use. Note: If you are using the `TextField` component or the `FormControl` component you do not have to set this manually. | +| children * | node | | The content of the component, normally an `IconButton` or string. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| disablePointerEvents | bool | false | Disable pointer events on the root. This allows for the content of the adornment to focus the input on click. | +| disableTypography | bool | false | If children is a string then disable wrapping in a Typography component. | +| position | 'start'
| 'end' | | The position this adornment should appear relative to the `Input`. | +| variant | 'standard'
| 'outlined'
| 'filled' | | The variant to use. Note: If you are using the `TextField` component or the `FormControl` component you do not have to set this manually. | The `ref` is forwarded to the root element. @@ -43,13 +43,13 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiInputAdornment-root | Styles applied to the root element. -| filled | .MuiInputAdornment-filled | Styles applied to the root element if `variant="filled"`. -| positionStart | .MuiInputAdornment-positionStart | Styles applied to the root element if `position="start"`. -| positionEnd | .MuiInputAdornment-positionEnd | Styles applied to the root element if `position="end"`. -| disablePointerEvents | .MuiInputAdornment-disablePointerEvents | Styles applied to the root element if `disablePointerEvents=true`. -| hiddenLabel | .MuiInputAdornment-hiddenLabel | Styles applied if the adornment is used inside <FormControl hiddenLabel />. -| marginDense | .MuiInputAdornment-marginDense | Styles applied if the adornment is used inside <FormControl margin="dense" />. +| root | .MuiInputAdornment-root | Styles applied to the root element. +| filled | .MuiInputAdornment-filled | Styles applied to the root element if `variant="filled"`. +| positionStart | .MuiInputAdornment-positionStart | Styles applied to the root element if `position="start"`. +| positionEnd | .MuiInputAdornment-positionEnd | Styles applied to the root element if `position="end"`. +| disablePointerEvents | .MuiInputAdornment-disablePointerEvents | Styles applied to the root element if `disablePointerEvents=true`. +| hiddenLabel | .MuiInputAdornment-hiddenLabel | Styles applied if the adornment is used inside <FormControl hiddenLabel />. +| marginDense | .MuiInputAdornment-marginDense | Styles applied if the adornment is used inside <FormControl margin="dense" />. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/input-base.md b/docs/pages/api/input-base.md index 0fbee8398e66f3..b2eb92d464d548 100644 --- a/docs/pages/api/input-base.md +++ b/docs/pages/api/input-base.md @@ -26,32 +26,32 @@ It contains a load of style reset and some state logic. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| autoComplete | string | | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). | -| autoFocus | bool | | If `true`, the `input` element will be focused during the first mount. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| className | string | | The CSS class name of the wrapper element. | -| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | -| defaultValue | any | | The default `input` element value. Use when the component is not controlled. | -| disabled | bool | | If `true`, the `input` element will be disabled. | -| endAdornment | node | | End `InputAdornment` for this component. | -| error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | -| fullWidth | bool | false | If `true`, the input will take up the full width of its container. | -| id | string | | The id of the `input` element. | -| inputComponent | elementType | 'input' | The component used for the `input` element. Either a string to use a DOM element or a component. | -| inputProps | object | {} | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | Pass a ref to the `input` element. | -| margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | -| multiline | bool | false | If `true`, a textarea element will be rendered. | -| name | string | | Name attribute of the `input` element. | -| onChange | func | | Callback fired when the value is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). | -| placeholder | string | | The short hint displayed in the input before the user enters a value. | -| readOnly | bool | | It prevents the user from changing the value of the field (not from interacting with the field). | -| required | bool | | If `true`, the `input` element will be required. | -| rows | string
| number | | Number of rows to display when multiline option is set to true. | -| rowsMax | string
| number | | Maximum number of rows to display when multiline option is set to true. | -| startAdornment | node | | Start `InputAdornment` for this component. | -| type | string | 'text' | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | -| value | any | | The value of the `input` element, required for a controlled component. | +| autoComplete | string | | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). | +| autoFocus | bool | | If `true`, the `input` element will be focused during the first mount. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| className | string | | The CSS class name of the wrapper element. | +| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | +| defaultValue | any | | The default `input` element value. Use when the component is not controlled. | +| disabled | bool | | If `true`, the `input` element will be disabled. | +| endAdornment | node | | End `InputAdornment` for this component. | +| error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | +| fullWidth | bool | false | If `true`, the input will take up the full width of its container. | +| id | string | | The id of the `input` element. | +| inputComponent | elementType | 'input' | The component used for the `input` element. Either a string to use a DOM element or a component. | +| inputProps | object | {} | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | +| inputRef | ref | | Pass a ref to the `input` element. | +| margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | +| multiline | bool | false | If `true`, a textarea element will be rendered. | +| name | string | | Name attribute of the `input` element. | +| onChange | func | | Callback fired when the value is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). | +| placeholder | string | | The short hint displayed in the input before the user enters a value. | +| readOnly | bool | | It prevents the user from changing the value of the field (not from interacting with the field). | +| required | bool | | If `true`, the `input` element will be required. | +| rows | string
| number | | Number of rows to display when multiline option is set to true. | +| rowsMax | string
| number | | Maximum number of rows to display when multiline option is set to true. | +| startAdornment | node | | Start `InputAdornment` for this component. | +| type | string | 'text' | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | +| value | any | | The value of the `input` element, required for a controlled component. | The `ref` is forwarded to the root element. @@ -64,24 +64,24 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiInputBase-root | Styles applied to the root element. -| formControl | .MuiInputBase-formControl | Styles applied to the root element if the component is a descendant of `FormControl`. -| focused | .Mui-focused | Styles applied to the root element if the component is focused. -| disabled | .Mui-disabled | Styles applied to the root element if `disabled={true}`. -| adornedStart | .MuiInputBase-adornedStart | Styles applied to the root element if `startAdornment` is provided. -| adornedEnd | .MuiInputBase-adornedEnd | Styles applied to the root element if `endAdornment` is provided. -| error | .Mui-error | Styles applied to the root element if `error={true}`. -| marginDense | .MuiInputBase-marginDense | Styles applied to the `input` element if `margin="dense"`. -| multiline | .MuiInputBase-multiline | Styles applied to the root element if `multiline={true}`. -| colorSecondary | .MuiInputBase-colorSecondary | Styles applied to the root element if the color is secondary. -| fullWidth | .MuiInputBase-fullWidth | Styles applied to the root element if `fullWidth={true}`. -| input | .MuiInputBase-input | Styles applied to the `input` element. -| inputMarginDense | .MuiInputBase-inputMarginDense | Styles applied to the `input` element if `margin="dense"`. -| inputMultiline | .MuiInputBase-inputMultiline | Styles applied to the `input` element if `multiline={true}`. -| inputTypeSearch | .MuiInputBase-inputTypeSearch | Styles applied to the `input` element if `type="search"`. -| inputAdornedStart | .MuiInputBase-inputAdornedStart | Styles applied to the `input` element if `startAdornment` is provided. -| inputAdornedEnd | .MuiInputBase-inputAdornedEnd | Styles applied to the `input` element if `endAdornment` is provided. -| inputHiddenLabel | .MuiInputBase-inputHiddenLabel | Styles applied to the `input` element if `hiddenLabel={true}`. +| root | .MuiInputBase-root | Styles applied to the root element. +| formControl | .MuiInputBase-formControl | Styles applied to the root element if the component is a descendant of `FormControl`. +| focused | .Mui-focused | Styles applied to the root element if the component is focused. +| disabled | .Mui-disabled | Styles applied to the root element if `disabled={true}`. +| adornedStart | .MuiInputBase-adornedStart | Styles applied to the root element if `startAdornment` is provided. +| adornedEnd | .MuiInputBase-adornedEnd | Styles applied to the root element if `endAdornment` is provided. +| error | .Mui-error | Styles applied to the root element if `error={true}`. +| marginDense | .MuiInputBase-marginDense | Styles applied to the `input` element if `margin="dense"`. +| multiline | .MuiInputBase-multiline | Styles applied to the root element if `multiline={true}`. +| colorSecondary | .MuiInputBase-colorSecondary | Styles applied to the root element if the color is secondary. +| fullWidth | .MuiInputBase-fullWidth | Styles applied to the root element if `fullWidth={true}`. +| input | .MuiInputBase-input | Styles applied to the `input` element. +| inputMarginDense | .MuiInputBase-inputMarginDense | Styles applied to the `input` element if `margin="dense"`. +| inputMultiline | .MuiInputBase-inputMultiline | Styles applied to the `input` element if `multiline={true}`. +| inputTypeSearch | .MuiInputBase-inputTypeSearch | Styles applied to the `input` element if `type="search"`. +| inputAdornedStart | .MuiInputBase-inputAdornedStart | Styles applied to the `input` element if `startAdornment` is provided. +| inputAdornedEnd | .MuiInputBase-inputAdornedEnd | Styles applied to the `input` element if `endAdornment` is provided. +| inputHiddenLabel | .MuiInputBase-inputHiddenLabel | Styles applied to the `input` element if `hiddenLabel={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/input-label.md b/docs/pages/api/input-label.md index 27d021bf2c39d5..de81d184beaf21 100644 --- a/docs/pages/api/input-label.md +++ b/docs/pages/api/input-label.md @@ -24,17 +24,17 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The contents of the `InputLabel`. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | -| disableAnimation | bool | false | If `true`, the transition animation is disabled. | -| disabled | bool | | If `true`, apply disabled class. | -| error | bool | | If `true`, the label will be displayed in an error state. | -| focused | bool | | If `true`, the input of this label is focused. | -| margin | 'dense' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | -| required | bool | | if `true`, the label will indicate that the input is required. | -| shrink | bool | | If `true`, the label is shrunk. | -| variant | 'standard'
| 'outlined'
| 'filled' | | The variant to use. | +| children | node | | The contents of the `InputLabel`. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | +| disableAnimation | bool | false | If `true`, the transition animation is disabled. | +| disabled | bool | | If `true`, apply disabled class. | +| error | bool | | If `true`, the label will be displayed in an error state. | +| focused | bool | | If `true`, the input of this label is focused. | +| margin | 'dense' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | +| required | bool | | if `true`, the label will indicate that the input is required. | +| shrink | bool | | If `true`, the label is shrunk. | +| variant | 'standard'
| 'outlined'
| 'filled' | | The variant to use. | The `ref` is forwarded to the root element. @@ -47,18 +47,18 @@ Any other props supplied will be provided to the root element ([FormLabel](/api/ | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiInputLabel-root | Styles applied to the root element. -| focused | .Mui-focused | Pseudo-class applied to the root element if `focused={true}`. -| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. -| error | .Mui-error | Pseudo-class applied to the root element if `error={true}`. -| required | .Mui-required | Pseudo-class applied to the root element if `required={true}`. -| asterisk | .MuiInputLabel-asterisk | Pseudo-class applied to the asterisk element. -| formControl | .MuiInputLabel-formControl | Styles applied to the root element if the component is a descendant of `FormControl`. -| marginDense | .MuiInputLabel-marginDense | Styles applied to the root element if `margin="dense"`. -| shrink | .MuiInputLabel-shrink | Styles applied to the `input` element if `shrink={true}`. -| animated | .MuiInputLabel-animated | Styles applied to the `input` element if `disableAnimation={false}`. -| filled | .MuiInputLabel-filled | Styles applied to the root element if `variant="filled"`. -| outlined | .MuiInputLabel-outlined | Styles applied to the root element if `variant="outlined"`. +| root | .MuiInputLabel-root | Styles applied to the root element. +| focused | .Mui-focused | Pseudo-class applied to the root element if `focused={true}`. +| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. +| error | .Mui-error | Pseudo-class applied to the root element if `error={true}`. +| required | .Mui-required | Pseudo-class applied to the root element if `required={true}`. +| asterisk | .MuiInputLabel-asterisk | Pseudo-class applied to the asterisk element. +| formControl | .MuiInputLabel-formControl | Styles applied to the root element if the component is a descendant of `FormControl`. +| marginDense | .MuiInputLabel-marginDense | Styles applied to the root element if `margin="dense"`. +| shrink | .MuiInputLabel-shrink | Styles applied to the `input` element if `shrink={true}`. +| animated | .MuiInputLabel-animated | Styles applied to the `input` element if `disableAnimation={false}`. +| filled | .MuiInputLabel-filled | Styles applied to the root element if `variant="filled"`. +| outlined | .MuiInputLabel-outlined | Styles applied to the root element if `variant="outlined"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/input.md b/docs/pages/api/input.md index c0b829588d41da..e049ab89d6d9ea 100644 --- a/docs/pages/api/input.md +++ b/docs/pages/api/input.md @@ -24,33 +24,33 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| autoComplete | string | | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). | -| autoFocus | bool | | If `true`, the `input` element will be focused during the first mount. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| className | string | | The CSS class name of the wrapper element. | -| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | -| defaultValue | any | | The default `input` element value. Use when the component is not controlled. | -| disabled | bool | | If `true`, the `input` element will be disabled. | -| disableUnderline | bool | | If `true`, the input will not have an underline. | -| endAdornment | node | | End `InputAdornment` for this component. | -| error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | -| fullWidth | bool | false | If `true`, the input will take up the full width of its container. | -| id | string | | The id of the `input` element. | -| inputComponent | elementType | 'input' | The component used for the native input. Either a string to use a DOM element or a component. | -| inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | Pass a ref to the `input` element. | -| margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | -| multiline | bool | false | If `true`, a textarea element will be rendered. | -| name | string | | Name attribute of the `input` element. | -| onChange | func | | Callback fired when the value is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). | -| placeholder | string | | The short hint displayed in the input before the user enters a value. | -| readOnly | bool | | It prevents the user from changing the value of the field (not from interacting with the field). | -| required | bool | | If `true`, the `input` element will be required. | -| rows | string
| number | | Number of rows to display when multiline option is set to true. | -| rowsMax | string
| number | | Maximum number of rows to display when multiline option is set to true. | -| startAdornment | node | | Start `InputAdornment` for this component. | -| type | string | 'text' | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | -| value | any | | The value of the `input` element, required for a controlled component. | +| autoComplete | string | | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). | +| autoFocus | bool | | If `true`, the `input` element will be focused during the first mount. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| className | string | | The CSS class name of the wrapper element. | +| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | +| defaultValue | any | | The default `input` element value. Use when the component is not controlled. | +| disabled | bool | | If `true`, the `input` element will be disabled. | +| disableUnderline | bool | | If `true`, the input will not have an underline. | +| endAdornment | node | | End `InputAdornment` for this component. | +| error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | +| fullWidth | bool | false | If `true`, the input will take up the full width of its container. | +| id | string | | The id of the `input` element. | +| inputComponent | elementType | 'input' | The component used for the native input. Either a string to use a DOM element or a component. | +| inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | +| inputRef | ref | | Pass a ref to the `input` element. | +| margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | +| multiline | bool | false | If `true`, a textarea element will be rendered. | +| name | string | | Name attribute of the `input` element. | +| onChange | func | | Callback fired when the value is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). | +| placeholder | string | | The short hint displayed in the input before the user enters a value. | +| readOnly | bool | | It prevents the user from changing the value of the field (not from interacting with the field). | +| required | bool | | If `true`, the `input` element will be required. | +| rows | string
| number | | Number of rows to display when multiline option is set to true. | +| rowsMax | string
| number | | Maximum number of rows to display when multiline option is set to true. | +| startAdornment | node | | Start `InputAdornment` for this component. | +| type | string | 'text' | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | +| value | any | | The value of the `input` element, required for a controlled component. | The `ref` is forwarded to the root element. @@ -63,20 +63,20 @@ Any other props supplied will be provided to the root element ([InputBase](/api/ | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiInput-root | Styles applied to the root element. -| formControl | .MuiInput-formControl | Styles applied to the root element if the component is a descendant of `FormControl`. -| focused | .Mui-focused | Styles applied to the root element if the component is focused. -| disabled | .Mui-disabled | Styles applied to the root element if `disabled={true}`. -| colorSecondary | .MuiInput-colorSecondary | Styles applied to the root element if color secondary. -| underline | .MuiInput-underline | Styles applied to the root element if `disableUnderline={false}`. -| error | .Mui-error | Styles applied to the root element if `error={true}`. -| marginDense | .MuiInput-marginDense | Styles applied to the `input` element if `margin="dense"`. -| multiline | .MuiInput-multiline | Styles applied to the root element if `multiline={true}`. -| fullWidth | .MuiInput-fullWidth | Styles applied to the root element if `fullWidth={true}`. -| input | .MuiInput-input | Styles applied to the `input` element. -| inputMarginDense | .MuiInput-inputMarginDense | Styles applied to the `input` element if `margin="dense"`. -| inputMultiline | .MuiInput-inputMultiline | Styles applied to the `input` element if `multiline={true}`. -| inputTypeSearch | .MuiInput-inputTypeSearch | Styles applied to the `input` element if `type="search"`. +| root | .MuiInput-root | Styles applied to the root element. +| formControl | .MuiInput-formControl | Styles applied to the root element if the component is a descendant of `FormControl`. +| focused | .Mui-focused | Styles applied to the root element if the component is focused. +| disabled | .Mui-disabled | Styles applied to the root element if `disabled={true}`. +| colorSecondary | .MuiInput-colorSecondary | Styles applied to the root element if color secondary. +| underline | .MuiInput-underline | Styles applied to the root element if `disableUnderline={false}`. +| error | .Mui-error | Styles applied to the root element if `error={true}`. +| marginDense | .MuiInput-marginDense | Styles applied to the `input` element if `margin="dense"`. +| multiline | .MuiInput-multiline | Styles applied to the root element if `multiline={true}`. +| fullWidth | .MuiInput-fullWidth | Styles applied to the root element if `fullWidth={true}`. +| input | .MuiInput-input | Styles applied to the `input` element. +| inputMarginDense | .MuiInput-inputMarginDense | Styles applied to the `input` element if `margin="dense"`. +| inputMultiline | .MuiInput-inputMultiline | Styles applied to the `input` element if `multiline={true}`. +| inputTypeSearch | .MuiInput-inputTypeSearch | Styles applied to the `input` element if `type="search"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/linear-progress.md b/docs/pages/api/linear-progress.md index bba1a126f847ed..8bd152b88674a8 100644 --- a/docs/pages/api/linear-progress.md +++ b/docs/pages/api/linear-progress.md @@ -28,11 +28,11 @@ attribute to `true` on that region until it has finished loading. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | -| value | number | | The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100. | -| valueBuffer | number | | The value for the buffer variant. Value between 0 and 100. | -| variant | 'determinate'
| 'indeterminate'
| 'buffer'
| 'query' | 'indeterminate' | The variant to use. Use indeterminate or query when there is no progress value. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | +| value | number | | The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100. | +| valueBuffer | number | | The value for the buffer variant. Value between 0 and 100. | +| variant | 'determinate'
| 'indeterminate'
| 'buffer'
| 'query' | 'indeterminate' | The variant to use. Use indeterminate or query when there is no progress value. | The `ref` is forwarded to the root element. @@ -45,24 +45,24 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiLinearProgress-root | Styles applied to the root element. -| colorPrimary | .MuiLinearProgress-colorPrimary | Styles applied to the root and bar2 element if `color="primary"`; bar2 if `variant-"buffer"`. -| colorSecondary | .MuiLinearProgress-colorSecondary | Styles applied to the root and bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`. -| determinate | .MuiLinearProgress-determinate | Styles applied to the root element if `variant="determinate"`. -| indeterminate | .MuiLinearProgress-indeterminate | Styles applied to the root element if `variant="indeterminate"`. -| buffer | .MuiLinearProgress-buffer | Styles applied to the root element if `variant="buffer"`. -| query | .MuiLinearProgress-query | Styles applied to the root element if `variant="query"`. -| dashed | .MuiLinearProgress-dashed | Styles applied to the additional bar element if `variant="buffer"`. -| dashedColorPrimary | .MuiLinearProgress-dashedColorPrimary | Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`. -| dashedColorSecondary | .MuiLinearProgress-dashedColorSecondary | Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`. -| bar | .MuiLinearProgress-bar | Styles applied to the layered bar1 and bar2 elements. -| barColorPrimary | .MuiLinearProgress-barColorPrimary | Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". -| barColorSecondary | .MuiLinearProgress-barColorSecondary | Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". -| bar1Indeterminate | .MuiLinearProgress-bar1Indeterminate | Styles applied to the bar1 element if `variant="indeterminate or query"`. -| bar1Determinate | .MuiLinearProgress-bar1Determinate | Styles applied to the bar1 element if `variant="determinate"`. -| bar1Buffer | .MuiLinearProgress-bar1Buffer | Styles applied to the bar1 element if `variant="buffer"`. -| bar2Indeterminate | .MuiLinearProgress-bar2Indeterminate | Styles applied to the bar2 element if `variant="indeterminate or query"`. -| bar2Buffer | .MuiLinearProgress-bar2Buffer | Styles applied to the bar2 element if `variant="buffer"`. +| root | .MuiLinearProgress-root | Styles applied to the root element. +| colorPrimary | .MuiLinearProgress-colorPrimary | Styles applied to the root and bar2 element if `color="primary"`; bar2 if `variant-"buffer"`. +| colorSecondary | .MuiLinearProgress-colorSecondary | Styles applied to the root and bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`. +| determinate | .MuiLinearProgress-determinate | Styles applied to the root element if `variant="determinate"`. +| indeterminate | .MuiLinearProgress-indeterminate | Styles applied to the root element if `variant="indeterminate"`. +| buffer | .MuiLinearProgress-buffer | Styles applied to the root element if `variant="buffer"`. +| query | .MuiLinearProgress-query | Styles applied to the root element if `variant="query"`. +| dashed | .MuiLinearProgress-dashed | Styles applied to the additional bar element if `variant="buffer"`. +| dashedColorPrimary | .MuiLinearProgress-dashedColorPrimary | Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`. +| dashedColorSecondary | .MuiLinearProgress-dashedColorSecondary | Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`. +| bar | .MuiLinearProgress-bar | Styles applied to the layered bar1 and bar2 elements. +| barColorPrimary | .MuiLinearProgress-barColorPrimary | Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". +| barColorSecondary | .MuiLinearProgress-barColorSecondary | Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". +| bar1Indeterminate | .MuiLinearProgress-bar1Indeterminate | Styles applied to the bar1 element if `variant="indeterminate or query"`. +| bar1Determinate | .MuiLinearProgress-bar1Determinate | Styles applied to the bar1 element if `variant="determinate"`. +| bar1Buffer | .MuiLinearProgress-bar1Buffer | Styles applied to the bar1 element if `variant="buffer"`. +| bar2Indeterminate | .MuiLinearProgress-bar2Indeterminate | Styles applied to the bar2 element if `variant="indeterminate or query"`. +| bar2Buffer | .MuiLinearProgress-bar2Buffer | Styles applied to the bar2 element if `variant="buffer"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/link.md b/docs/pages/api/link.md index 0027a6a1ab03a4..8e86921c982410 100644 --- a/docs/pages/api/link.md +++ b/docs/pages/api/link.md @@ -24,13 +24,13 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the link. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'default'
| 'error'
| 'inherit'
| 'primary'
| 'secondary'
| 'textPrimary'
| 'textSecondary' | 'primary' | The color of the link. | -| component | element type | 'a' | The component used for the root node. Either a string to use a DOM element or a component.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | -| TypographyClasses | object | | `classes` prop applied to the [`Typography`](/api/typography/) element. | -| underline | 'none'
| 'hover'
| 'always' | 'hover' | Controls when the link should have an underline. | -| variant | string | 'inherit' | Applies the theme typography styles. | +| children * | node | | The content of the link. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'default'
| 'error'
| 'inherit'
| 'primary'
| 'secondary'
| 'textPrimary'
| 'textSecondary' | 'primary' | The color of the link. | +| component | element type | 'a' | The component used for the root node. Either a string to use a DOM element or a component.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | +| TypographyClasses | object | | `classes` prop applied to the [`Typography`](/api/typography/) element. | +| underline | 'none'
| 'hover'
| 'always' | 'hover' | Controls when the link should have an underline. | +| variant | string | 'inherit' | Applies the theme typography styles. | The `ref` is forwarded to the root element. @@ -43,12 +43,12 @@ Any other props supplied will be provided to the root element ([Typography](/api | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiLink-root | Styles applied to the root element. -| underlineNone | .MuiLink-underlineNone | Styles applied to the root element if `underline="none"`. -| underlineHover | .MuiLink-underlineHover | Styles applied to the root element if `underline="hover"`. -| underlineAlways | .MuiLink-underlineAlways | Styles applied to the root element if `underline="always"`. -| button | .MuiLink-button | Styles applied to the root element if `component="button"`. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the root element if the link is keyboard focused. +| root | .MuiLink-root | Styles applied to the root element. +| underlineNone | .MuiLink-underlineNone | Styles applied to the root element if `underline="none"`. +| underlineHover | .MuiLink-underlineHover | Styles applied to the root element if `underline="hover"`. +| underlineAlways | .MuiLink-underlineAlways | Styles applied to the root element if `underline="always"`. +| button | .MuiLink-button | Styles applied to the root element if `component="button"`. +| focusVisible | .Mui-focusVisible | Pseudo-class applied to the root element if the link is keyboard focused. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/list-item-avatar.md b/docs/pages/api/list-item-avatar.md index 722d433becaa89..2a8a3b63527684 100644 --- a/docs/pages/api/list-item-avatar.md +++ b/docs/pages/api/list-item-avatar.md @@ -24,8 +24,8 @@ A simple wrapper to apply `List` styles to an `Avatar`. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | element | | The content of the component – normally `Avatar`. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| children * | element | | The content of the component – normally `Avatar`. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | The `ref` is forwarded to the root element. @@ -38,8 +38,8 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiListItemAvatar-root | Styles applied to the root element. -| alignItemsFlexStart | .MuiListItemAvatar-alignItemsFlexStart | Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. +| root | .MuiListItemAvatar-root | Styles applied to the root element. +| alignItemsFlexStart | .MuiListItemAvatar-alignItemsFlexStart | Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/list-item-icon.md b/docs/pages/api/list-item-icon.md index 55df5a2a08adbb..283402c94c4751 100644 --- a/docs/pages/api/list-item-icon.md +++ b/docs/pages/api/list-item-icon.md @@ -24,8 +24,8 @@ A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | element | | The content of the component, normally `Icon`, `SvgIcon`, or a `@material-ui/icons` SVG icon element. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| children * | element | | The content of the component, normally `Icon`, `SvgIcon`, or a `@material-ui/icons` SVG icon element. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | The `ref` is forwarded to the root element. @@ -38,8 +38,8 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiListItemIcon-root | Styles applied to the root element. -| alignItemsFlexStart | .MuiListItemIcon-alignItemsFlexStart | Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. +| root | .MuiListItemIcon-root | Styles applied to the root element. +| alignItemsFlexStart | .MuiListItemIcon-alignItemsFlexStart | Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/list-item-secondary-action.md b/docs/pages/api/list-item-secondary-action.md index f1596cf4f8f63c..97576ed3dcc53e 100644 --- a/docs/pages/api/list-item-secondary-action.md +++ b/docs/pages/api/list-item-secondary-action.md @@ -24,8 +24,8 @@ Must be used as the last child of ListItem to function properly. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component, normally an `IconButton` or selection control. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| children | node | | The content of the component, normally an `IconButton` or selection control. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | The `ref` is forwarded to the root element. @@ -38,7 +38,7 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiListItemSecondaryAction-root | Styles applied to the root element. +| root | .MuiListItemSecondaryAction-root | Styles applied to the root element. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/list-item-text.md b/docs/pages/api/list-item-text.md index 6d68f957765ae9..a6588bad86ec3b 100644 --- a/docs/pages/api/list-item-text.md +++ b/docs/pages/api/list-item-text.md @@ -24,14 +24,14 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | Alias for the `primary` property. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| disableTypography | bool | false | If `true`, the children won't be wrapped by a Typography component. This can be useful to render an alternative Typography variant by wrapping the `children` (or `primary`) text, and optional `secondary` text with the Typography component. | -| inset | bool | false | If `true`, the children will be indented. This should be used if there is no left avatar or left icon. | -| primary | node | | The main content element. | -| primaryTypographyProps | object | | These props will be forwarded to the primary typography component (as long as disableTypography is not `true`). | -| secondary | node | | The secondary content element. | -| secondaryTypographyProps | object | | These props will be forwarded to the secondary typography component (as long as disableTypography is not `true`). | +| children | node | | Alias for the `primary` property. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| disableTypography | bool | false | If `true`, the children won't be wrapped by a Typography component. This can be useful to render an alternative Typography variant by wrapping the `children` (or `primary`) text, and optional `secondary` text with the Typography component. | +| inset | bool | false | If `true`, the children will be indented. This should be used if there is no left avatar or left icon. | +| primary | node | | The main content element. | +| primaryTypographyProps | object | | These props will be forwarded to the primary typography component (as long as disableTypography is not `true`). | +| secondary | node | | The secondary content element. | +| secondaryTypographyProps | object | | These props will be forwarded to the secondary typography component (as long as disableTypography is not `true`). | The `ref` is forwarded to the root element. @@ -44,12 +44,12 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiListItemText-root | Styles applied to the root element. -| multiline | .MuiListItemText-multiline | Styles applied to the `Typography` components if primary and secondary are set. -| dense | .MuiListItemText-dense | Styles applied to the `Typography` components if dense. -| inset | .MuiListItemText-inset | Styles applied to the root element if `inset={true}`. -| primary | .MuiListItemText-primary | Styles applied to the primary `Typography` component. -| secondary | .MuiListItemText-secondary | Styles applied to the secondary `Typography` component. +| root | .MuiListItemText-root | Styles applied to the root element. +| multiline | .MuiListItemText-multiline | Styles applied to the `Typography` components if primary and secondary are set. +| dense | .MuiListItemText-dense | Styles applied to the `Typography` components if dense. +| inset | .MuiListItemText-inset | Styles applied to the root element if `inset={true}`. +| primary | .MuiListItemText-primary | Styles applied to the primary `Typography` component. +| secondary | .MuiListItemText-secondary | Styles applied to the secondary `Typography` component. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/list-item.md b/docs/pages/api/list-item.md index ec79c41dd899e2..e669fa19a682a8 100644 --- a/docs/pages/api/list-item.md +++ b/docs/pages/api/list-item.md @@ -24,19 +24,19 @@ Uses an additional container component if `ListItemSecondaryAction` is the last | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| alignItems | 'flex-start'
| 'center' | 'center' | Defines the `align-items` style property. | -| autoFocus | bool | false | If `true`, the list item will be focused during the first mount. Focus will also be triggered if the value changes from false to true. | -| button | bool | false | If `true`, the list item will be a button (using `ButtonBase`). Props intended for `ButtonBase` can then be applied to `ListItem`. | -| children | node | | The content of the component. If a `ListItemSecondaryAction` is used it must be the last child. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. | -| ContainerComponent | elementType | 'li' | The container component used when a `ListItemSecondaryAction` is the last child. | -| ContainerProps | object | {} | Props applied to the container component if used. | -| dense | bool | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used. | -| disabled | bool | false | If `true`, the list item will be disabled. | -| disableGutters | bool | false | If `true`, the left and right padding is removed. | -| divider | bool | false | If `true`, a 1px light border is added to the bottom of the list item. | -| selected | bool | false | Use to apply selected styling. | +| alignItems | 'flex-start'
| 'center' | 'center' | Defines the `align-items` style property. | +| autoFocus | bool | false | If `true`, the list item will be focused during the first mount. Focus will also be triggered if the value changes from false to true. | +| button | bool | false | If `true`, the list item will be a button (using `ButtonBase`). Props intended for `ButtonBase` can then be applied to `ListItem`. | +| children | node | | The content of the component. If a `ListItemSecondaryAction` is used it must be the last child. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. | +| ContainerComponent | elementType | 'li' | The container component used when a `ListItemSecondaryAction` is the last child. | +| ContainerProps | object | {} | Props applied to the container component if used. | +| dense | bool | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used. | +| disabled | bool | false | If `true`, the list item will be disabled. | +| disableGutters | bool | false | If `true`, the left and right padding is removed. | +| divider | bool | false | If `true`, a 1px light border is added to the bottom of the list item. | +| selected | bool | false | Use to apply selected styling. | The `ref` is forwarded to the root element. @@ -49,17 +49,17 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiListItem-root | Styles applied to the (normally root) `component` element. May be wrapped by a `container`. -| container | .MuiListItem-container | Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. -| dense | .MuiListItem-dense | Styles applied to the `component` element if dense. -| alignItemsFlexStart | .MuiListItem-alignItemsFlexStart | Styles applied to the `component` element if `alignItems="flex-start"`. -| disabled | .Mui-disabled | Pseudo-class applied to the inner `component` element if `disabled={true}`. -| divider | .MuiListItem-divider | Styles applied to the inner `component` element if `divider={true}`. -| gutters | .MuiListItem-gutters | Styles applied to the inner `component` element if `disableGutters={false}`. -| button | .MuiListItem-button | Styles applied to the inner `component` element if `button={true}`. -| secondaryAction | .MuiListItem-secondaryAction | Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`. -| selected | .Mui-selected | Pseudo-class applied to the root element if `selected={true}`. +| root | .MuiListItem-root | Styles applied to the (normally root) `component` element. May be wrapped by a `container`. +| container | .MuiListItem-container | Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. +| focusVisible | .Mui-focusVisible | Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. +| dense | .MuiListItem-dense | Styles applied to the `component` element if dense. +| alignItemsFlexStart | .MuiListItem-alignItemsFlexStart | Styles applied to the `component` element if `alignItems="flex-start"`. +| disabled | .Mui-disabled | Pseudo-class applied to the inner `component` element if `disabled={true}`. +| divider | .MuiListItem-divider | Styles applied to the inner `component` element if `divider={true}`. +| gutters | .MuiListItem-gutters | Styles applied to the inner `component` element if `disableGutters={false}`. +| button | .MuiListItem-button | Styles applied to the inner `component` element if `button={true}`. +| secondaryAction | .MuiListItem-secondaryAction | Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`. +| selected | .Mui-selected | Pseudo-class applied to the root element if `selected={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/list-subheader.md b/docs/pages/api/list-subheader.md index 347cc6a18d4f25..3b9437cc931213 100644 --- a/docs/pages/api/list-subheader.md +++ b/docs/pages/api/list-subheader.md @@ -24,13 +24,13 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'default'
| 'primary'
| 'inherit' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'li' | The component used for the root node. Either a string to use a DOM element or a component. | -| disableGutters | bool | false | If `true`, the List Subheader will not have gutters. | -| disableSticky | bool | false | If `true`, the List Subheader will not stick to the top during scroll. | -| inset | bool | false | If `true`, the List Subheader will be indented. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'default'
| 'primary'
| 'inherit' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | +| component | elementType | 'li' | The component used for the root node. Either a string to use a DOM element or a component. | +| disableGutters | bool | false | If `true`, the List Subheader will not have gutters. | +| disableSticky | bool | false | If `true`, the List Subheader will not stick to the top during scroll. | +| inset | bool | false | If `true`, the List Subheader will be indented. | The `ref` is forwarded to the root element. @@ -43,12 +43,12 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiListSubheader-root | Styles applied to the root element. -| colorPrimary | .MuiListSubheader-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorInherit | .MuiListSubheader-colorInherit | Styles applied to the root element if `color="inherit"`. -| gutters | .MuiListSubheader-gutters | Styles applied to the inner `component` element if `disableGutters={false}`. -| inset | .MuiListSubheader-inset | Styles applied to the root element if `inset={true}`. -| sticky | .MuiListSubheader-sticky | Styles applied to the root element if `disableSticky={false}`. +| root | .MuiListSubheader-root | Styles applied to the root element. +| colorPrimary | .MuiListSubheader-colorPrimary | Styles applied to the root element if `color="primary"`. +| colorInherit | .MuiListSubheader-colorInherit | Styles applied to the root element if `color="inherit"`. +| gutters | .MuiListSubheader-gutters | Styles applied to the inner `component` element if `disableGutters={false}`. +| inset | .MuiListSubheader-inset | Styles applied to the root element if `inset={true}`. +| sticky | .MuiListSubheader-sticky | Styles applied to the root element if `disableSticky={false}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/list.md b/docs/pages/api/list.md index 32da12c3957358..d5ea7187c1db0e 100644 --- a/docs/pages/api/list.md +++ b/docs/pages/api/list.md @@ -24,12 +24,12 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'ul' | The component used for the root node. Either a string to use a DOM element or a component. | -| dense | bool | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used for the list and list items. The prop is available to descendant components as the `dense` context. | -| disablePadding | bool | false | If `true`, vertical padding will be removed from the list. | -| subheader | node | | The content of the subheader, normally `ListSubheader`. | +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'ul' | The component used for the root node. Either a string to use a DOM element or a component. | +| dense | bool | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used for the list and list items. The prop is available to descendant components as the `dense` context. | +| disablePadding | bool | false | If `true`, vertical padding will be removed from the list. | +| subheader | node | | The content of the subheader, normally `ListSubheader`. | The `ref` is forwarded to the root element. @@ -42,10 +42,10 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiList-root | Styles applied to the root element. -| padding | .MuiList-padding | Styles applied to the root element if `disablePadding={false}`. -| dense | .MuiList-dense | Styles applied to the root element if dense. -| subheader | .MuiList-subheader | Styles applied to the root element if a `subheader` is provided. +| root | .MuiList-root | Styles applied to the root element. +| padding | .MuiList-padding | Styles applied to the root element if `disablePadding={false}`. +| dense | .MuiList-dense | Styles applied to the root element if dense. +| subheader | .MuiList-subheader | Styles applied to the root element if a `subheader` is provided. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/menu-item.md b/docs/pages/api/menu-item.md index 201de510c27df9..e5311ef8a15918 100644 --- a/docs/pages/api/menu-item.md +++ b/docs/pages/api/menu-item.md @@ -24,11 +24,11 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | Menu item contents. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| component | elementType | 'li' | The component used for the root node. Either a string to use a DOM element or a component. | -| dense | bool | | If `true`, compact vertical padding designed for keyboard and mouse input will be used. | -| disableGutters | bool | false | If `true`, the left and right padding is removed. | +| children | node | | Menu item contents. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'li' | The component used for the root node. Either a string to use a DOM element or a component. | +| dense | bool | | If `true`, compact vertical padding designed for keyboard and mouse input will be used. | +| disableGutters | bool | false | If `true`, the left and right padding is removed. | The `ref` is forwarded to the root element. @@ -41,10 +41,10 @@ Any other props supplied will be provided to the root element ([ListItem](/api/l | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiMenuItem-root | Styles applied to the root element. -| gutters | .MuiMenuItem-gutters | Styles applied to the root element if `disableGutters={false}`. -| selected | .Mui-selected | Styles applied to the root element if `selected={true}`. -| dense | .MuiMenuItem-dense | Styles applied to the root element if dense. +| root | .MuiMenuItem-root | Styles applied to the root element. +| gutters | .MuiMenuItem-gutters | Styles applied to the root element if `disableGutters={false}`. +| selected | .Mui-selected | Styles applied to the root element if `selected={true}`. +| dense | .MuiMenuItem-dense | Styles applied to the root element if dense. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/menu-list.md b/docs/pages/api/menu-list.md index 1bb380fbc52d52..e6f1d430150767 100644 --- a/docs/pages/api/menu-list.md +++ b/docs/pages/api/menu-list.md @@ -27,11 +27,11 @@ the focus is placed inside the component it is fully keyboard accessible. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| autoFocus | bool | false | If `true`, will focus the `[role="menu"]` container and move into tab order | -| autoFocusItem | bool | false | If `true`, will focus the first menuitem if `variant="menu"` or selected item if `variant="selectedMenu"` | -| children | node | | MenuList contents, normally `MenuItem`s. | -| disableListWrap | bool | false | If `true`, the menu items will not wrap focus. | -| variant | 'menu'
| 'selectedMenu' | 'selectedMenu' | The variant to use. Use `menu` to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element. | +| autoFocus | bool | false | If `true`, will focus the `[role="menu"]` container and move into tab order | +| autoFocusItem | bool | false | If `true`, will focus the first menuitem if `variant="menu"` or selected item if `variant="selectedMenu"` | +| children | node | | MenuList contents, normally `MenuItem`s. | +| disableListWrap | bool | false | If `true`, the menu items will not wrap focus. | +| variant | 'menu'
| 'selectedMenu' | 'selectedMenu' | The variant to use. Use `menu` to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api/menu.md b/docs/pages/api/menu.md index ae487ccb0424cc..4759ebcc5d538e 100644 --- a/docs/pages/api/menu.md +++ b/docs/pages/api/menu.md @@ -24,23 +24,23 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| anchorEl | object
| func | | The DOM element used to set the position of the menu. | -| autoFocus | bool | true | If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled children are not focusable. If you set this prop to `false` focus will be placed on the parent modal container. This has severe accessibility implications and should only be considered if you manage focus otherwise. | -| children | node | | Menu contents, normally `MenuItem`s. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| disableAutoFocusItem | bool | false | When opening the menu will not focus the active item but the `[role="menu"]` unless `autoFocus` is also set to `false`. Not using the default means not following WAI-ARIA authoring practices. Please be considerate about possible accessibility implications. | -| MenuListProps | object | {} | Props applied to the [`MenuList`](/api/menu-list/) element. | -| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback.
*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"`. | -| onEnter | func | | Callback fired before the Menu enters. | -| onEntered | func | | Callback fired when the Menu has entered. | -| onEntering | func | | Callback fired when the Menu is entering. | -| onExit | func | | Callback fired before the Menu exits. | -| onExited | func | | Callback fired when the Menu has exited. | -| onExiting | func | | Callback fired when the Menu is exiting. | -| open * | bool | | If `true`, the menu is visible. | -| PopoverClasses | object | | `classes` prop applied to the [`Popover`](/api/popover/) element. | -| transitionDuration | number
| { enter?: number, exit?: number }
| 'auto' | 'auto' | The length of the transition in `ms`, or 'auto' | -| variant | 'menu'
| 'selectedMenu' | 'selectedMenu' | The variant to use. Use `menu` to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element. | +| anchorEl | object
| func | | The DOM element used to set the position of the menu. | +| autoFocus | bool | true | If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled children are not focusable. If you set this prop to `false` focus will be placed on the parent modal container. This has severe accessibility implications and should only be considered if you manage focus otherwise. | +| children | node | | Menu contents, normally `MenuItem`s. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| disableAutoFocusItem | bool | false | When opening the menu will not focus the active item but the `[role="menu"]` unless `autoFocus` is also set to `false`. Not using the default means not following WAI-ARIA authoring practices. Please be considerate about possible accessibility implications. | +| MenuListProps | object | {} | Props applied to the [`MenuList`](/api/menu-list/) element. | +| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback.
*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"`. | +| onEnter | func | | Callback fired before the Menu enters. | +| onEntered | func | | Callback fired when the Menu has entered. | +| onEntering | func | | Callback fired when the Menu is entering. | +| onExit | func | | Callback fired before the Menu exits. | +| onExited | func | | Callback fired when the Menu has exited. | +| onExiting | func | | Callback fired when the Menu is exiting. | +| open * | bool | | If `true`, the menu is visible. | +| PopoverClasses | object | | `classes` prop applied to the [`Popover`](/api/popover/) element. | +| transitionDuration | number
| { enter?: number, exit?: number }
| 'auto' | 'auto' | The length of the transition in `ms`, or 'auto' | +| variant | 'menu'
| 'selectedMenu' | 'selectedMenu' | The variant to use. Use `menu` to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element. | The `ref` is forwarded to the root element. @@ -53,8 +53,8 @@ Any other props supplied will be provided to the root element ([Popover](/api/po | Rule name | Global class | Description | |:-----|:-------------|:------------| -| paper | .MuiMenu-paper | Styles applied to the `Paper` component. -| list | .MuiMenu-list | Styles applied to the `List` component via `MenuList`. +| paper | .MuiMenu-paper | Styles applied to the `Paper` component. +| list | .MuiMenu-list | Styles applied to the `List` component via `MenuList`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/mobile-stepper.md b/docs/pages/api/mobile-stepper.md index b347967cc0ebcc..0aa53d4fc9846a 100644 --- a/docs/pages/api/mobile-stepper.md +++ b/docs/pages/api/mobile-stepper.md @@ -24,14 +24,14 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| activeStep | number | 0 | Set the active step (zero based index). Defines which dot is highlighted when the variant is 'dots'. | -| backButton | node | | A back button element. For instance, it can be a `Button` or an `IconButton`. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| LinearProgressProps | object | | Props applied to the `LinearProgress` element. | -| nextButton | node | | A next button element. For instance, it can be a `Button` or an `IconButton`. | -| position | 'bottom'
| 'top'
| 'static' | 'bottom' | Set the positioning type. | -| steps * | number | | The total steps. | -| variant | 'text'
| 'dots'
| 'progress' | 'dots' | The variant to use. | +| activeStep | number | 0 | Set the active step (zero based index). Defines which dot is highlighted when the variant is 'dots'. | +| backButton | node | | A back button element. For instance, it can be a `Button` or an `IconButton`. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| LinearProgressProps | object | | Props applied to the `LinearProgress` element. | +| nextButton | node | | A next button element. For instance, it can be a `Button` or an `IconButton`. | +| position | 'bottom'
| 'top'
| 'static' | 'bottom' | Set the positioning type. | +| steps * | number | | The total steps. | +| variant | 'text'
| 'dots'
| 'progress' | 'dots' | The variant to use. | The `ref` is forwarded to the root element. @@ -44,14 +44,14 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiMobileStepper-root | Styles applied to the root element. -| positionBottom | .MuiMobileStepper-positionBottom | Styles applied to the root element if `position="bottom"`. -| positionTop | .MuiMobileStepper-positionTop | Styles applied to the root element if `position="top"`. -| positionStatic | .MuiMobileStepper-positionStatic | Styles applied to the root element if `position="static"`. -| dots | .MuiMobileStepper-dots | Styles applied to the dots container if `variant="dots"`. -| dot | .MuiMobileStepper-dot | Styles applied to each dot if `variant="dots"`. -| dotActive | .MuiMobileStepper-dotActive | Styles applied to a dot if `variant="dots"` and this is the active step. -| progress | .MuiMobileStepper-progress | Styles applied to the Linear Progress component if `variant="progress"`. +| root | .MuiMobileStepper-root | Styles applied to the root element. +| positionBottom | .MuiMobileStepper-positionBottom | Styles applied to the root element if `position="bottom"`. +| positionTop | .MuiMobileStepper-positionTop | Styles applied to the root element if `position="top"`. +| positionStatic | .MuiMobileStepper-positionStatic | Styles applied to the root element if `position="static"`. +| dots | .MuiMobileStepper-dots | Styles applied to the dots container if `variant="dots"`. +| dot | .MuiMobileStepper-dot | Styles applied to each dot if `variant="dots"`. +| dotActive | .MuiMobileStepper-dotActive | Styles applied to a dot if `variant="dots"` and this is the active step. +| progress | .MuiMobileStepper-progress | Styles applied to the Linear Progress component if `variant="progress"`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api/modal.md b/docs/pages/api/modal.md index b561b80c912f8d..12ba3048d12400 100644 --- a/docs/pages/api/modal.md +++ b/docs/pages/api/modal.md @@ -34,25 +34,25 @@ This component shares many concepts with [react-overlays](https://react-bootstra | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| BackdropComponent | elementType | SimpleBackdrop | A backdrop component. This prop enables custom backdrop rendering. | -| BackdropProps | object | | Props applied to the [`Backdrop`](/api/backdrop/) element. | -| children * | element | | A single child content element.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | -| closeAfterTransition | bool | false | When set to true the Modal waits until a nested Transition is completed before closing. | -| container | object
| func | | A node, component instance, or function that returns either. The `container` will have the portal children appended to it. | -| disableAutoFocus | bool | false | If `true`, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the `disableAutoFocus` prop.
Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers. | -| disableBackdropClick | bool | false | If `true`, clicking the backdrop will not fire any callback. | -| disableEnforceFocus | bool | false | If `true`, the modal will not prevent focus from leaving the modal while open.
Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers. | -| disableEscapeKeyDown | bool | false | If `true`, hitting escape will not fire any callback. | -| disablePortal | bool | false | Disable the portal behavior. The children stay within it's parent DOM hierarchy. | -| disableRestoreFocus | bool | false | If `true`, the modal will not restore focus to previously focused element once modal is hidden. | -| disableScrollLock | bool | false | Disable the scroll lock behavior. | -| hideBackdrop | bool | false | If `true`, the backdrop is not rendered. | -| keepMounted | bool | false | Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Modal. | -| onBackdropClick | func | | Callback fired when the backdrop is clicked. | -| onClose | func | | Callback fired when the component requests to be closed. The `reason` parameter can optionally be used to control the response to `onClose`.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback.
*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"`. | -| onEscapeKeyDown | func | | Callback fired when the escape key is pressed, `disableEscapeKeyDown` is false and the modal is in focus. | -| onRendered | func | | Callback fired once the children has been mounted into the `container`. It signals that the `open={true}` prop took effect.
This prop will be deprecated and removed in v5, the ref can be used instead. | -| open * | bool | | If `true`, the modal is open. | +| BackdropComponent | elementType | SimpleBackdrop | A backdrop component. This prop enables custom backdrop rendering. | +| BackdropProps | object | | Props applied to the [`Backdrop`](/api/backdrop/) element. | +| children * | element | | A single child content element.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | +| closeAfterTransition | bool | false | When set to true the Modal waits until a nested Transition is completed before closing. | +| container | object
| func | | A node, component instance, or function that returns either. The `container` will have the portal children appended to it. | +| disableAutoFocus | bool | false | If `true`, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the `disableAutoFocus` prop.
Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers. | +| disableBackdropClick | bool | false | If `true`, clicking the backdrop will not fire any callback. | +| disableEnforceFocus | bool | false | If `true`, the modal will not prevent focus from leaving the modal while open.
Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers. | +| disableEscapeKeyDown | bool | false | If `true`, hitting escape will not fire any callback. | +| disablePortal | bool | false | Disable the portal behavior. The children stay within it's parent DOM hierarchy. | +| disableRestoreFocus | bool | false | If `true`, the modal will not restore focus to previously focused element once modal is hidden. | +| disableScrollLock | bool | false | Disable the scroll lock behavior. | +| hideBackdrop | bool | false | If `true`, the backdrop is not rendered. | +| keepMounted | bool | false | Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Modal. | +| onBackdropClick | func | | Callback fired when the backdrop is clicked. | +| onClose | func | | Callback fired when the component requests to be closed. The `reason` parameter can optionally be used to control the response to `onClose`.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback.
*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"`. | +| onEscapeKeyDown | func | | Callback fired when the escape key is pressed, `disableEscapeKeyDown` is false and the modal is in focus. | +| onRendered | func | | Callback fired once the children has been mounted into the `container`. It signals that the `open={true}` prop took effect.
This prop will be deprecated and removed in v5, the ref can be used instead. | +| open * | bool | | If `true`, the modal is open. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api/native-select.md b/docs/pages/api/native-select.md index 7f4404c5c51936..8244cfc5a7f028 100644 --- a/docs/pages/api/native-select.md +++ b/docs/pages/api/native-select.md @@ -24,14 +24,14 @@ An alternative to `