From 61595b5342ed47b56bcea5de9c130fa643f2f0a1 Mon Sep 17 00:00:00 2001 From: adeelibr Date: Sun, 12 Aug 2018 19:59:56 +0500 Subject: [PATCH 1/3] initial commit --- packages/material-ui-lab/src/Slider/Slider.js | 29 +++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js index 6371a2f38bdc3b..5a5b8e8650cc53 100644 --- a/packages/material-ui-lab/src/Slider/Slider.js +++ b/packages/material-ui-lab/src/Slider/Slider.js @@ -119,6 +119,15 @@ export const styles = theme => { height: 17, }, }, + thumbTransparent: { + backgroundColor: 'transparent', + }, + thumbIcon: { + position: 'relative', + top: -6, + height: 26, + width: 'auto', + }, /* Class applied to the root element to trigger JSS nested styles if `reverse={true}` . */ reverse: {}, /* Class applied to the track and thumb elements to trigger JSS nested styles if `disabled`. */ @@ -375,6 +384,7 @@ class Slider extends React.Component { const { currentState } = this.state; const { component: Component, + thumb: Thumb, classes, className: classNameProp, disabled, @@ -426,6 +436,16 @@ class Slider extends React.Component { const inlineTrackAfterStyles = { [trackProperty]: this.calculateTrackAfterStyles(percent) }; const inlineThumbStyles = { [thumbProperty]: `${percent}%` }; + const Thumbnail = () => { + if (React.isValidElement(Thumb)) { + return React.cloneElement(Thumb, { + ...Thumb.props, + className: classes.thumbIcon, + }); + } + return null; + }; + return (
+ > + {Thumbnail()} +
@@ -515,6 +539,7 @@ Slider.propTypes = { * @ignore */ theme: PropTypes.object.isRequired, + thumb: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]), /** * The value of the slider. */ From 432ed0b7a91988a50f42dc36c6234077020fa4ca Mon Sep 17 00:00:00 2001 From: adeelibr Date: Thu, 16 Aug 2018 23:14:51 +0500 Subject: [PATCH 2/3] Added Documentation, Added prop validation, improved the way on how to use classNames, class overirde issue resolved, changes Thumbnail assignment instead of call, added comments --- docs/src/pages/lab/slider/CustomIconSlider.js | 54 ++++++++++++ docs/src/pages/lab/slider/slider.md | 6 ++ packages/material-ui-lab/src/Slider/Slider.js | 37 ++++---- pages/api/app-bar.md | 19 ++--- pages/api/avatar.md | 9 +- pages/api/backdrop.md | 7 +- pages/api/badge.md | 13 ++- pages/api/bottom-navigation-action.md | 13 ++- pages/api/bottom-navigation.md | 5 +- pages/api/button-base.md | 15 ++-- pages/api/button.md | 55 ++++++------ pages/api/card-actions.md | 7 +- pages/api/card-content.md | 5 +- pages/api/card-header.md | 15 ++-- pages/api/card-media.md | 7 +- pages/api/card.md | 5 +- pages/api/checkbox.md | 15 ++-- pages/api/chip.md | 37 ++++---- pages/api/circular-progress.md | 21 ++--- pages/api/collapse.md | 11 +-- pages/api/dialog-actions.md | 7 +- pages/api/dialog-content-text.md | 5 +- pages/api/dialog-content.md | 5 +- pages/api/dialog-title.md | 5 +- pages/api/dialog.md | 25 +++--- pages/api/divider.md | 11 +-- pages/api/drawer.md | 25 +++--- pages/api/expansion-panel-actions.md | 7 +- pages/api/expansion-panel-details.md | 5 +- pages/api/expansion-panel-summary.md | 15 ++-- pages/api/expansion-panel.md | 9 +- pages/api/fade.md | 4 +- pages/api/form-control-label.md | 15 ++-- pages/api/form-control.md | 11 +-- pages/api/form-group.md | 7 +- pages/api/form-helper-text.md | 17 ++-- pages/api/form-label.md | 17 ++-- pages/api/grid-list-tile-bar.md | 25 +++--- pages/api/grid-list-tile.md | 11 +-- pages/api/grid-list.md | 5 +- pages/api/grid.md | 85 +++++++++---------- pages/api/icon-button.md | 15 ++-- pages/api/icon.md | 17 ++-- pages/api/input-adornment.md | 9 +- pages/api/input-label.md | 13 ++- pages/api/input.md | 31 +++---- pages/api/linear-progress.md | 37 ++++---- pages/api/list-item-avatar.md | 7 +- pages/api/list-item-icon.md | 5 +- pages/api/list-item-secondary-action.md | 5 +- pages/api/list-item-text.md | 15 ++-- pages/api/list-item.md | 23 +++-- pages/api/list-subheader.md | 14 ++- pages/api/list.md | 11 +-- pages/api/menu-item.md | 7 +- pages/api/menu.md | 5 +- pages/api/mobile-stepper.md | 19 ++--- pages/api/modal.md | 7 +- pages/api/native-select.md | 15 ++-- pages/api/paper.md | 57 ++++++------- pages/api/popover.md | 11 +-- pages/api/radio-group.md | 2 +- pages/api/radio.md | 15 ++-- pages/api/select.md | 15 ++-- pages/api/slide.md | 4 +- pages/api/snackbar-content.md | 9 +- pages/api/snackbar.md | 21 ++--- pages/api/step-button.md | 11 +-- pages/api/step-connector.md | 17 ++-- pages/api/step-content.md | 9 +- pages/api/step-icon.md | 13 ++- pages/api/step-label.md | 25 +++--- pages/api/step.md | 13 ++- pages/api/stepper.md | 11 +-- pages/api/svg-icon.md | 17 ++-- pages/api/switch.md | 23 +++-- pages/api/tab.md | 27 +++--- pages/api/table-body.md | 5 +- pages/api/table-cell.md | 19 ++--- pages/api/table-footer.md | 5 +- pages/api/table-head.md | 5 +- pages/api/table-pagination.md | 23 +++-- pages/api/table-row.md | 13 ++- pages/api/table-sort-label.md | 13 ++- pages/api/table.md | 5 +- pages/api/tabs.md | 23 +++-- pages/api/text-field.md | 40 ++++----- pages/api/toolbar.md | 11 +-- pages/api/tooltip.md | 17 ++-- pages/api/touch-ripple.md | 17 ++-- pages/api/typography.md | 55 ++++++------ pages/api/zoom.md | 6 +- pages/lab/api/slider.md | 30 +++---- pages/lab/api/speed-dial-action.md | 9 +- pages/lab/api/speed-dial-icon.md | 15 ++-- pages/lab/api/speed-dial.md | 21 ++--- pages/lab/api/toggle-button-group.md | 9 +- pages/lab/api/toggle-button.md | 11 +-- pages/lab/slider.js | 7 ++ 99 files changed, 696 insertions(+), 890 deletions(-) create mode 100644 docs/src/pages/lab/slider/CustomIconSlider.js diff --git a/docs/src/pages/lab/slider/CustomIconSlider.js b/docs/src/pages/lab/slider/CustomIconSlider.js new file mode 100644 index 00000000000000..913f6393fc173f --- /dev/null +++ b/docs/src/pages/lab/slider/CustomIconSlider.js @@ -0,0 +1,54 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; +import Slider from '@material-ui/lab/Slider'; +import DeleteIcon from '@material-ui/icons/Delete'; + +const styles = { + root: { + width: 300, + }, +}; + +class CustomIconSlider extends React.Component { + state = { + value: 50, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + render() { + const { classes } = this.props; + const { value } = this.state; + + return ( +
+ Slider Image + } + /> + Slider Simple + + Slider Icon + } + /> +
+ ); + } +} + +CustomIconSlider.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CustomIconSlider); diff --git a/docs/src/pages/lab/slider/slider.md b/docs/src/pages/lab/slider/slider.md index 7252aabf469c52..1171327d0d7e6d 100644 --- a/docs/src/pages/lab/slider/slider.md +++ b/docs/src/pages/lab/slider/slider.md @@ -38,3 +38,9 @@ Sliders reflect the current state of the settings they control. ## Reverse slider {{"demo": "pages/lab/slider/ReverseSlider.js"}} + +## Custom Icon slider + +If you want to have a custom thumb icon. + +{{"demo": "pages/lab/slider/CustomIconSlider.js"}} diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js index 5a5b8e8650cc53..b837b71ddf0429 100644 --- a/packages/material-ui-lab/src/Slider/Slider.js +++ b/packages/material-ui-lab/src/Slider/Slider.js @@ -119,6 +119,7 @@ export const styles = theme => { height: 17, }, }, + /* Class applied to the thumb element if custom thumb icon provided` . */ thumbTransparent: { backgroundColor: 'transparent', }, @@ -428,23 +429,27 @@ class Slider extends React.Component { [classes.vertical]: vertical, }); - const thumbClasses = classNames(classes.thumb, commonClasses); - const trackProperty = vertical ? 'height' : 'width'; const thumbProperty = vertical ? 'top' : 'left'; const inlineTrackBeforeStyles = { [trackProperty]: this.calculateTrackBeforeStyles(percent) }; const inlineTrackAfterStyles = { [trackProperty]: this.calculateTrackAfterStyles(percent) }; const inlineThumbStyles = { [thumbProperty]: `${percent}%` }; - const Thumbnail = () => { - if (React.isValidElement(Thumb)) { - return React.cloneElement(Thumb, { + /** Start Thumbnail Icon Logic Here */ + const withIcon = !!Thumb; + const Thumbnail = withIcon + ? React.cloneElement(Thumb, { ...Thumb.props, - className: classes.thumbIcon, - }); - } - return null; - }; + className: `${classes.thumbIcon} ${Thumb.props.className || ''}`, + }) + : null; + /** End Thumbnail Icon Logic Here */ + + const thumbClasses = classNames( + classes.thumb, + commonClasses, + `${withIcon ? classes.thumbTransparent : ''}`, + ); return (
- {Thumbnail()} + {Thumbnail}
@@ -539,7 +542,11 @@ Slider.propTypes = { * @ignore */ theme: PropTypes.object.isRequired, - thumb: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]), + /** + * The component used for the slider icon. + * This is optional, if provided should be a react element. + */ + thumb: PropTypes.element, /** * The value of the slider. */ diff --git a/pages/api/app-bar.md b/pages/api/app-bar.md index 1e37fe327b533b..13b07130eae6a2 100644 --- a/pages/api/app-bar.md +++ b/pages/api/app-bar.md @@ -27,17 +27,14 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| positionFixed | Styles applied to the root element if `position="fixed"`. -| positionAbsolute | Styles applied to the root element if `position="absolute"`. -| positionSticky | Styles applied to the root element if `position="sticky"`. -| positionStatic | Styles applied to the root element if `position="static"`. -| colorDefault | Styles applied to the root element if `color="default"`. -| colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | Styles applied to the root element if `color="secondary"`. +- `root` +- `positionFixed` +- `positionAbsolute` +- `positionSticky` +- `positionStatic` +- `colorDefault` +- `colorPrimary` +- `colorSecondary` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/AppBar/AppBar.js) diff --git a/pages/api/avatar.md b/pages/api/avatar.md index 04aa0b71e52ef7..e3b232facb5726 100644 --- a/pages/api/avatar.md +++ b/pages/api/avatar.md @@ -31,12 +31,9 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| colorDefault | Styles applied to the root element if `color="default"`. -| img | Styles applied to the img element if either `src` or `srcSet` is defined. +- `root` +- `colorDefault` +- `img` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Avatar/Avatar.js) diff --git a/pages/api/backdrop.md b/pages/api/backdrop.md index fa0bdaa03267f9..fccf5e93f6f9ad 100644 --- a/pages/api/backdrop.md +++ b/pages/api/backdrop.md @@ -27,11 +27,8 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| invisible | Styles applied to the root element if `invisible={true}`. +- `root` +- `invisible` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Backdrop/Backdrop.js) diff --git a/pages/api/badge.md b/pages/api/badge.md index 04b45c2acc0576..f90348487edc9e 100644 --- a/pages/api/badge.md +++ b/pages/api/badge.md @@ -28,14 +28,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| badge | Styles applied to the badge `span` element. -| colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | Styles applied to the root element if `color="secondary"`. -| colorError | Styles applied to the root element if `color="error"`. +- `root` +- `badge` +- `colorPrimary` +- `colorSecondary` +- `colorError` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Badge/Badge.js) diff --git a/pages/api/bottom-navigation-action.md b/pages/api/bottom-navigation-action.md index 95007a040136aa..3ae5f45c3e2057 100644 --- a/pages/api/bottom-navigation-action.md +++ b/pages/api/bottom-navigation-action.md @@ -29,14 +29,11 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| selected | Styles applied to the root element if selected. -| iconOnly | Styles applied to the root element if `showLabel={false}` and not selected. -| wrapper | Styles applied to the span element that wraps the icon and label. -| label | Styles applied to the label's span element. +- `root` +- `selected` +- `iconOnly` +- `wrapper` +- `label` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js) diff --git a/pages/api/bottom-navigation.md b/pages/api/bottom-navigation.md index bceff55620ef06..14194820d79c30 100644 --- a/pages/api/bottom-navigation.md +++ b/pages/api/bottom-navigation.md @@ -28,10 +28,7 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. +- `root` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/BottomNavigation/BottomNavigation.js) diff --git a/pages/api/button-base.md b/pages/api/button-base.md index 9cfd9e847dd1f6..b64f4aff4e0ec1 100644 --- a/pages/api/button-base.md +++ b/pages/api/button-base.md @@ -9,15 +9,15 @@ title: ButtonBase API

The API documentation of the ButtonBase React component.

-`ButtonBase` contains as few styles as possible. -It aims to be a simple building block for creating a button. +`ButtonBase` contains as few styles as possible. +It aims to be a simple building block for creating a button. It contains a load of style reset and some focus/ripple logic. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| action | func |   | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `focusVisible()` action.

**Signature:**
`function(actions: object) => void`
*actions:* This object contains all possible actions that can be triggered programmatically. | +| action | func |   | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `focusVisible()` action.

**Signature:**
`function(actions: object) => void`
*actions:* This object contains all possible actions that can be triggered programmatically. | | buttonRef | union: func |
 object
|   | Use that property to pass a ref callback to the native button component. | | 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. | @@ -39,12 +39,9 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| disabled | Styles applied to the root element if `disabled={true}`. -| focusVisible | Styles applied to the root element if keyboard focused. +- `root` +- `disabled` +- `focusVisible` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ButtonBase/ButtonBase.js) diff --git a/pages/api/button.md b/pages/api/button.md index 93f3015aaa071d..6c0c3d9c641779 100644 --- a/pages/api/button.md +++ b/pages/api/button.md @@ -35,35 +35,32 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| label | Styles applied to the span element that wraps the children. -| text | Styles applied to the root element if `variant="text"`. -| textPrimary | Styles applied to the root element if `variant="text"` and `color="primary"`. -| textSecondary | Styles applied to the root element if `variant="text"` and `color="secondary"`. -| flat | Styles applied to the root element for backwards compatibility with legacy variant naming. -| flatPrimary | Styles applied to the root element for backwards compatibility with legacy variant naming. -| flatSecondary | Styles applied to the root element for backwards compatibility with legacy variant naming. -| outlined | Styles applied to the root element if `variant="outlined"`. -| outlinedPrimary | Styles applied to the root element if `variant="outlined"` and `color="primary"`. -| outlinedSecondary | Styles applied to the root element if `variant="outlined"` and `color="secondary"`. -| contained | Styles applied to the root element if `variant="[contained \| fab]"`. -| containedPrimary | Styles applied to the root element if `variant="[contained \| fab]"` and `color="primary"`. -| containedSecondary | Styles applied to the root element if `variant="[contained \| fab]"` and `color="secondary"`. -| raised | Styles applied to the root element for backwards compatibility with legacy variant naming. -| raisedPrimary | Styles applied to the root element for backwards compatibility with legacy variant naming. -| raisedSecondary | Styles applied to the root element for backwards compatibility with legacy variant naming. -| fab | Styles applied to the root element if `variant="[fab \| extendedFab]"`. -| extendedFab | Styles applied to the root element if `variant="extendedFab"`. -| focusVisible | Styles applied to the ButtonBase root element if the button is keyboard focused. -| disabled | Styles applied to the root element if `disabled={true}`. -| colorInherit | Styles applied to the root element if `color="inherit"`. -| mini | Styles applied to the root element if `size="mini"` & `variant="[fab \| extendedFab]"`. -| sizeSmall | Styles applied to the root element if `size="small"`. -| sizeLarge | Styles applied to the root element if `size="large"`. -| fullWidth | Styles applied to the root element if `fullWidth={true}`. +- `root` +- `label` +- `text` +- `textPrimary` +- `textSecondary` +- `flat` +- `flatPrimary` +- `flatSecondary` +- `outlined` +- `outlinedPrimary` +- `outlinedSecondary` +- `contained` +- `containedPrimary` +- `containedSecondary` +- `raised` +- `raisedPrimary` +- `raisedSecondary` +- `fab` +- `extendedFab` +- `focusVisible` +- `disabled` +- `colorInherit` +- `mini` +- `sizeSmall` +- `sizeLarge` +- `fullWidth` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Button/Button.js) diff --git a/pages/api/card-actions.md b/pages/api/card-actions.md index bd88fdb8f3e3f3..55f67b7a657dee 100644 --- a/pages/api/card-actions.md +++ b/pages/api/card-actions.md @@ -26,11 +26,8 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| action | Styles applied to the children. +- `root` +- `action` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/CardActions/CardActions.js) diff --git a/pages/api/card-content.md b/pages/api/card-content.md index 5220935fd5ff6d..a199329e126f00 100644 --- a/pages/api/card-content.md +++ b/pages/api/card-content.md @@ -25,10 +25,7 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. +- `root` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/CardContent/CardContent.js) diff --git a/pages/api/card-header.md b/pages/api/card-header.md index 6764a0bf62e609..6dd066e27cf1ef 100644 --- a/pages/api/card-header.md +++ b/pages/api/card-header.md @@ -32,15 +32,12 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| avatar | Styles applied to the avatar element. -| action | Styles applied to the action element. -| content | Styles applied to the content wrapper element. -| title | Styles applied to the title Typography element. -| subheader | Styles applied to the subheader Typography element. +- `root` +- `avatar` +- `action` +- `content` +- `title` +- `subheader` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/CardHeader/CardHeader.js) diff --git a/pages/api/card-media.md b/pages/api/card-media.md index e3d1603c54b358..772311462abcaf 100644 --- a/pages/api/card-media.md +++ b/pages/api/card-media.md @@ -27,11 +27,8 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| media | Styles applied to the root element if `component="video, audio, picture, iframe, or img"`. +- `root` +- `media` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/CardMedia/CardMedia.js) diff --git a/pages/api/card.md b/pages/api/card.md index 35fc5d6eaa42d6..0eb38bcfb1edef 100644 --- a/pages/api/card.md +++ b/pages/api/card.md @@ -25,10 +25,7 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. +- `root` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Card/Card.js) diff --git a/pages/api/checkbox.md b/pages/api/checkbox.md index ed0fe4a3bce35d..29c0c1d72b54dc 100644 --- a/pages/api/checkbox.md +++ b/pages/api/checkbox.md @@ -27,7 +27,7 @@ title: Checkbox API | indeterminateIcon | node | <IndeterminateCheckBoxIcon /> | The icon to display when the component is indeterminate. | | inputProps | object |   | Properties applied to the `input` element. | | inputRef | union: func |
 object
|   | Use that property to pass a ref callback to the native input component. | -| onChange | func |   | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.
*checked:* The `checked` value of the switch | +| onChange | func |   | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.
*checked:* The `checked` value of the switch | | type | string |   | The input component property `type`. | | value | string |   | The value of the component. | @@ -38,14 +38,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| checked | Styles applied to the root element if `checked={true}`. -| disabled | Styles applied to the root element if `disabled={true}`. -| colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | Styles applied to the root element if `color="secondary"`. +- `root` +- `checked` +- `disabled` +- `colorPrimary` +- `colorSecondary` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Checkbox/Checkbox.js) diff --git a/pages/api/chip.md b/pages/api/chip.md index eb812552670737..da537d19f77bb8 100644 --- a/pages/api/chip.md +++ b/pages/api/chip.md @@ -32,26 +32,23 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | Styles applied to the root element if `color="secondary"`. -| clickable | Styles applied to the root element if `onClick` is defined or `clickable={true}`. -| clickableColorPrimary | -| clickableColorSecondary | -| deletable | Styles applied to the root element if `onDelete` is defined. -| deletableColorPrimary | Styles applied to the root element if `onDelete` and `color="primary"` is defined. -| deletableColorSecondary | Styles applied to the root element if `onDelete` and `color="secondary"` is defined. -| avatar | Styles applied to the `avatar` element. -| avatarColorPrimary | Styles applied to the `avatar` element if `checked={true}` and `color="primary"` -| avatarColorSecondary | Styles applied to the `avatar` element if `checked={true}` and `color="secondary"` -| avatarChildren | Styles applied to the `avatar` elements children. -| label | Styles applied to the label `span` element`. -| deleteIcon | Styles applied to the `deleteIcon` element. -| deleteIconColorPrimary | Styles applied to the deleteIcon element if `color="primary"`. -| deleteIconColorSecondary | Styles applied to the deleteIcon element if `color="secondary"`. +- `root` +- `colorPrimary` +- `colorSecondary` +- `clickable` +- `clickableColorPrimary` +- `clickableColorSecondary` +- `deletable` +- `deletableColorPrimary` +- `deletableColorSecondary` +- `avatar` +- `avatarColorPrimary` +- `avatarColorSecondary` +- `avatarChildren` +- `label` +- `deleteIcon` +- `deleteIconColorPrimary` +- `deleteIconColorSecondary` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Chip/Chip.js) diff --git a/pages/api/circular-progress.md b/pages/api/circular-progress.md index 52d7756c7dc1a3..66953849b07a45 100644 --- a/pages/api/circular-progress.md +++ b/pages/api/circular-progress.md @@ -33,18 +33,15 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| static | Styles applied to the root element if `variant="static"`. -| indeterminate | Styles applied to the root element if `variant="indeterminate"`. -| colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | Styles applied to the root element if `color="secondary"`. -| svg | Styles applied to the `svg` element. -| circle | Styles applied to the `circle` svg path. -| circleStatic | Styles applied to the `circle` svg path if `variant="static"`. -| circleIndeterminate | Styles applied to the `circle` svg path if `variant="indeterminate"`. +- `root` +- `static` +- `indeterminate` +- `colorPrimary` +- `colorSecondary` +- `svg` +- `circle` +- `circleStatic` +- `circleIndeterminate` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/CircularProgress/CircularProgress.js) diff --git a/pages/api/collapse.md b/pages/api/collapse.md index 2aa844e6770392..e8f7f6f1418f6c 100644 --- a/pages/api/collapse.md +++ b/pages/api/collapse.md @@ -31,13 +31,10 @@ Any other properties supplied will be spread to the root element ([Transition](h You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| container | Styles applied to the container element. -| entered | Styles applied to the container element when the transition has entered. -| wrapper | Styles applied to the outer wrapper element. -| wrapperInner | Styles applied to the outer wrapper element. +- `container` +- `entered` +- `wrapper` +- `wrapperInner` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Collapse/Collapse.js) diff --git a/pages/api/dialog-actions.md b/pages/api/dialog-actions.md index fd9f5440ca3ef4..0173f951a788a8 100644 --- a/pages/api/dialog-actions.md +++ b/pages/api/dialog-actions.md @@ -26,11 +26,8 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| action | Styles applied to the children. +- `root` +- `action` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/DialogActions/DialogActions.js) diff --git a/pages/api/dialog-content-text.md b/pages/api/dialog-content-text.md index 9dccbb24f45066..e4203aeeff2f48 100644 --- a/pages/api/dialog-content-text.md +++ b/pages/api/dialog-content-text.md @@ -25,10 +25,7 @@ Any other properties supplied will be spread to the root element ([Typography](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. +- `root` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/DialogContentText/DialogContentText.js) diff --git a/pages/api/dialog-content.md b/pages/api/dialog-content.md index cdcd3cb9cf80bc..a6e16db8b7f35d 100644 --- a/pages/api/dialog-content.md +++ b/pages/api/dialog-content.md @@ -25,10 +25,7 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. +- `root` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/DialogContent/DialogContent.js) diff --git a/pages/api/dialog-title.md b/pages/api/dialog-title.md index 5ea9d86891e46f..6e2a99194aa9c1 100644 --- a/pages/api/dialog-title.md +++ b/pages/api/dialog-title.md @@ -26,10 +26,7 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. +- `root` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/DialogTitle/DialogTitle.js) diff --git a/pages/api/dialog.md b/pages/api/dialog.md index d0fec39c72b3ff..5807ee3ce469fb 100644 --- a/pages/api/dialog.md +++ b/pages/api/dialog.md @@ -45,20 +45,17 @@ Any other properties supplied will be spread to the root element ([Modal](/api/m You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| scrollPaper | Styles applied to the root element if `scroll="paper"`. -| scrollBody | Styles applied to the root element if `scroll="bodyr"`. -| paper | Styles applied to the `Paper` component. -| paperScrollPaper | Styles applied to the `Paper` component if `scroll="paper"`. -| paperScrollBody | Styles applied to the `Paper` component if `scroll="body"`. -| paperWidthXs | Styles applied to the `Paper` component if `maxWidth="xs"`. -| paperWidthSm | Styles applied to the `Paper` component if `maxWidth="sm"`. -| paperWidthMd | Styles applied to the `Paper` component if `maxWidth="md"`. -| paperFullWidth | Styles applied to the `Paper` component if `fullWidth={true}`. -| paperFullScreen | Styles applied to the `Paper` component if `fullScreen={true}`. +- `root` +- `scrollPaper` +- `scrollBody` +- `paper` +- `paperScrollPaper` +- `paperScrollBody` +- `paperWidthXs` +- `paperWidthSm` +- `paperWidthMd` +- `paperFullWidth` +- `paperFullScreen` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Dialog/Dialog.js) diff --git a/pages/api/divider.md b/pages/api/divider.md index c51564e6838ccd..e009738f2308d6 100644 --- a/pages/api/divider.md +++ b/pages/api/divider.md @@ -28,13 +28,10 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| absolute | Styles applied to the root element if `absolute={true}`. -| inset | Styles applied to the root element if `inset={true}`. -| light | Styles applied to the root element if `light={true}`. +- `root` +- `absolute` +- `inset` +- `light` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Divider/Divider.js) diff --git a/pages/api/drawer.md b/pages/api/drawer.md index d7725cc2d523bf..4a29e8199acaac 100644 --- a/pages/api/drawer.md +++ b/pages/api/drawer.md @@ -35,20 +35,17 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| docked | Styles applied to the root element if `variant="permanent or persistent"`. -| paper | Styles applied to the `Paper` component. -| paperAnchorLeft | Styles applied to the `Paper` component if `anchor="left"`. -| paperAnchorRight | Styles applied to the `Paper` component if `anchor="right"`. -| paperAnchorTop | Styles applied to the `Paper` component if `anchor="top"`. -| paperAnchorBottom | Styles applied to the `Paper` component if `anchor="bottom"`. -| paperAnchorDockedLeft | Styles applied to the `Paper` component if `anchor="left"` & `variant` is not "temporary". -| paperAnchorDockedTop | Styles applied to the `Paper` component if `anchor="top"` & `variant` is not "temporary". -| paperAnchorDockedRight | Styles applied to the `Paper` component if `anchor="right"` & `variant` is not "temporary". -| paperAnchorDockedBottom | Styles applied to the `Paper` component if `anchor="bottom"` & `variant` is not "temporary". -| modal | Styles applied to the `Modal` component. +- `docked` +- `paper` +- `paperAnchorLeft` +- `paperAnchorRight` +- `paperAnchorTop` +- `paperAnchorBottom` +- `paperAnchorDockedLeft` +- `paperAnchorDockedTop` +- `paperAnchorDockedRight` +- `paperAnchorDockedBottom` +- `modal` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Drawer/Drawer.js) diff --git a/pages/api/expansion-panel-actions.md b/pages/api/expansion-panel-actions.md index d279a1b40b6b32..31b2e893ab2339 100644 --- a/pages/api/expansion-panel-actions.md +++ b/pages/api/expansion-panel-actions.md @@ -25,11 +25,8 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| action | Styles applied to the children. +- `root` +- `action` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js) diff --git a/pages/api/expansion-panel-details.md b/pages/api/expansion-panel-details.md index 8bbfba19966ede..430ee102729ccb 100644 --- a/pages/api/expansion-panel-details.md +++ b/pages/api/expansion-panel-details.md @@ -25,10 +25,7 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. +- `root` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js) diff --git a/pages/api/expansion-panel-summary.md b/pages/api/expansion-panel-summary.md index cc9e3ef888338b..9b03f73f6706ad 100644 --- a/pages/api/expansion-panel-summary.md +++ b/pages/api/expansion-panel-summary.md @@ -27,15 +27,12 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| expanded | Styles applied to the root element if `expanded={true}`. -| focused | Styles applied to the root and children wrapper elements when focused. -| disabled | Styles applied to the root element if `disabled={true}`. -| content | Styles applied to the children wrapper element. -| expandIcon | Styles applied to the `IconButton` component when `expandIcon` is supplied. +- `root` +- `expanded` +- `focused` +- `disabled` +- `content` +- `expandIcon` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js) diff --git a/pages/api/expansion-panel.md b/pages/api/expansion-panel.md index 0784386ee8697f..568c43857d0d49 100644 --- a/pages/api/expansion-panel.md +++ b/pages/api/expansion-panel.md @@ -30,12 +30,9 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| expanded | Styles applied to the root element if `expanded={true}`. -| disabled | Styles applied to the root element if `disabled={true}`. +- `root` +- `expanded` +- `disabled` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js) diff --git a/pages/api/fade.md b/pages/api/fade.md index 2c5a7f0b4005f1..74b912c2a25e18 100644 --- a/pages/api/fade.md +++ b/pages/api/fade.md @@ -9,7 +9,7 @@ title: Fade API

The API documentation of the Fade React component.

-The Fade transition is used by the [Modal](/utils/modal) component. +The Fade transition is used by the [Modal](/utils/modal) component. It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. ## Props @@ -18,7 +18,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro |:-----|:-----|:--------|:------------| | children | union: element |
 func
|   | A single child content element. | | in | bool |   | If `true`, the component will transition in. | -| timeout | union: 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. | +| timeout | union: 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. | Any other properties supplied will be spread to the root element ([Transition](https://reactcommunity.org/react-transition-group/#Transition)). diff --git a/pages/api/form-control-label.md b/pages/api/form-control-label.md index 908018a2de76ee..8c3017ac3a224e 100644 --- a/pages/api/form-control-label.md +++ b/pages/api/form-control-label.md @@ -9,7 +9,7 @@ title: FormControlLabel API

The API documentation of the FormControlLabel React component.

-Drop in replacement of the `Radio`, `Switch` and `Checkbox` component. +Drop in replacement of the `Radio`, `Switch` and `Checkbox` component. Use this component if you want to display an extra label. ## Props @@ -24,7 +24,7 @@ Use this component if you want to display an extra label. | label | node |   | The text to be used in an enclosing label element. | | labelPlacement | enum: 'end' |
 'start'
| 'end' | The position of the label. | | name | string |   | | -| onChange | func |   | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.
*checked:* The `checked` value of the switch | +| onChange | func |   | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.
*checked:* The `checked` value of the switch | | value | string |   | The value of the component. | Any other properties supplied will be spread to the root element (native element). @@ -34,13 +34,10 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| labelPlacementStart | Styles applied to the root element if `labelPlacement="start"`. -| disabled | Styles applied to the root element if `disabled={true}`. -| label | Styles applied to the label's Typography component. +- `root` +- `labelPlacementStart` +- `disabled` +- `label` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/FormControlLabel/FormControlLabel.js) diff --git a/pages/api/form-control.md b/pages/api/form-control.md index 7daf4635419511..c12822201d7e52 100644 --- a/pages/api/form-control.md +++ b/pages/api/form-control.md @@ -38,13 +38,10 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| marginNormal | Styles applied to the root element if `margin="normal"`. -| marginDense | Styles applied to the root element if `margin="dense"`. -| fullWidth | Styles applied to the root element if `fullWidth={true}`. +- `root` +- `marginNormal` +- `marginDense` +- `fullWidth` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/FormControl/FormControl.js) diff --git a/pages/api/form-group.md b/pages/api/form-group.md index ee51db87af182c..1b5493b1e8eb49 100644 --- a/pages/api/form-group.md +++ b/pages/api/form-group.md @@ -28,11 +28,8 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| row | Styles applied to the root element if `row={true}`. +- `root` +- `row` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/FormGroup/FormGroup.js) diff --git a/pages/api/form-helper-text.md b/pages/api/form-helper-text.md index a1b08fb701476c..912445ea7e16c0 100644 --- a/pages/api/form-helper-text.md +++ b/pages/api/form-helper-text.md @@ -32,16 +32,13 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| error | Styles applied to the root element if `error={true}`. -| disabled | Styles applied to the root element if `disabled={true}`. -| marginDense | Styles applied to the root element if `margin="dense"`. -| focused | Styles applied to the root element if `focused={true}`. -| filled | Styles applied to the root element if `filled={true}`. -| required | Styles applied to the root element if `required={true}`. +- `root` +- `error` +- `disabled` +- `marginDense` +- `focused` +- `filled` +- `required` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/FormHelperText/FormHelperText.js) diff --git a/pages/api/form-label.md b/pages/api/form-label.md index a3457205b3ac9d..589c0390bffa4e 100644 --- a/pages/api/form-label.md +++ b/pages/api/form-label.md @@ -31,16 +31,13 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| focused | Styles applied to the root element if `focused={true}`. -| disabled | Styles applied to the root element if `disabled={true}`. -| error | Styles applied to the root element if `error={true}`. -| filled | Styles applied to the root element if `filled={true}`. -| required | Styles applied to the root element if `required={true}`. -| asterisk | +- `root` +- `focused` +- `disabled` +- `error` +- `filled` +- `required` +- `asterisk` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/FormLabel/FormLabel.js) diff --git a/pages/api/grid-list-tile-bar.md b/pages/api/grid-list-tile-bar.md index 5941cec7871bed..68a197a00359a4 100644 --- a/pages/api/grid-list-tile-bar.md +++ b/pages/api/grid-list-tile-bar.md @@ -29,20 +29,17 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| titlePositionBottom | Styles applied to the root element if `titlePosition="bottom"`. -| titlePositionTop | Styles applied to the root element if `titlePosition="top"`. -| rootSubtitle | Styles applied to the root element if a `subtitle` is provided. -| titleWrap | Styles applied to the title and subtitle container element. -| titleWrapActionPosLeft | Styles applied to the container element if `actionPosition="left"`. -| titleWrapActionPosRight | Styles applied to the container element if `actionPosition="right"`. -| title | Styles applied to the title container element. -| subtitle | Styles applied to the subtitle container element. -| actionIcon | Styles applied to the actionIcon if supplied. -| actionIconActionPosLeft | Styles applied to the actionIcon if `actionPosition="left". +- `root` +- `titlePositionBottom` +- `titlePositionTop` +- `rootSubtitle` +- `titleWrap` +- `titleWrapActionPosLeft` +- `titleWrapActionPosRight` +- `title` +- `subtitle` +- `actionIcon` +- `actionIconActionPosLeft` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/GridListTileBar/GridListTileBar.js) diff --git a/pages/api/grid-list-tile.md b/pages/api/grid-list-tile.md index cb1f2a31f68fac..f1a63f723d40f0 100644 --- a/pages/api/grid-list-tile.md +++ b/pages/api/grid-list-tile.md @@ -28,13 +28,10 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| tile | Styles applied to the `div` element that wraps the children. -| imgFullHeight | Styles applied to an `ing` element child, if if needed to ensure it covers the tile. -| imgFullWidth | Styles applied to an `ing` element child, if if needed to ensure it covers the tile. +- `root` +- `tile` +- `imgFullHeight` +- `imgFullWidth` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/GridListTile/GridListTile.js) diff --git a/pages/api/grid-list.md b/pages/api/grid-list.md index 922f145a2e39e8..d08bd73c9bf14b 100644 --- a/pages/api/grid-list.md +++ b/pages/api/grid-list.md @@ -29,10 +29,7 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. +- `root` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/GridList/GridList.js) diff --git a/pages/api/grid.md b/pages/api/grid.md index 5592b6c6fbb693..4b64456bd39d1b 100644 --- a/pages/api/grid.md +++ b/pages/api/grid.md @@ -40,50 +40,47 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| container | Styles applied to the root element if `container={true}`. -| item | Styles applied to the root element if `item={true}`. -| zeroMinWidth | Styles applied to the root element if `zeroMinWidth={true}`. -| direction-xs-column | -| direction-xs-column-reverse | -| direction-xs-row-reverse | -| wrap-xs-nowrap | -| wrap-xs-wrap-reverse | -| align-items-xs-center | -| align-items-xs-flex-start | -| align-items-xs-flex-end | -| align-items-xs-baseline | -| align-content-xs-center | -| align-content-xs-flex-start | -| align-content-xs-flex-end | -| align-content-xs-space-between | -| align-content-xs-space-around | -| justify-xs-center | -| justify-xs-flex-end | -| justify-xs-space-between | -| justify-xs-space-around | -| justify-xs-space-evenly | -| spacing-xs-8 | -| spacing-xs-16 | -| spacing-xs-24 | -| spacing-xs-32 | -| spacing-xs-40 | -| grid-xs-auto | -| grid-xs-true | -| grid-xs-1 | -| grid-xs-2 | -| grid-xs-3 | -| grid-xs-4 | -| grid-xs-5 | -| grid-xs-6 | -| grid-xs-7 | -| grid-xs-8 | -| grid-xs-9 | -| grid-xs-10 | -| grid-xs-11 | -| grid-xs-12 | +- `container` +- `item` +- `zeroMinWidth` +- `direction-xs-column` +- `direction-xs-column-reverse` +- `direction-xs-row-reverse` +- `wrap-xs-nowrap` +- `wrap-xs-wrap-reverse` +- `align-items-xs-center` +- `align-items-xs-flex-start` +- `align-items-xs-flex-end` +- `align-items-xs-baseline` +- `align-content-xs-center` +- `align-content-xs-flex-start` +- `align-content-xs-flex-end` +- `align-content-xs-space-between` +- `align-content-xs-space-around` +- `justify-xs-center` +- `justify-xs-flex-end` +- `justify-xs-space-between` +- `justify-xs-space-around` +- `justify-xs-space-evenly` +- `spacing-xs-8` +- `spacing-xs-16` +- `spacing-xs-24` +- `spacing-xs-32` +- `spacing-xs-40` +- `grid-xs-auto` +- `grid-xs-true` +- `grid-xs-1` +- `grid-xs-2` +- `grid-xs-3` +- `grid-xs-4` +- `grid-xs-5` +- `grid-xs-6` +- `grid-xs-7` +- `grid-xs-8` +- `grid-xs-9` +- `grid-xs-10` +- `grid-xs-11` +- `grid-xs-12` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Grid/Grid.js) diff --git a/pages/api/icon-button.md b/pages/api/icon-button.md index 93667967b26f4e..8ce6f38e4c8908 100644 --- a/pages/api/icon-button.md +++ b/pages/api/icon-button.md @@ -29,15 +29,12 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| colorInherit | Styles applied to the root element if `color="inherit"`. -| colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | Styles applied to the root element if `color="secondary"`. -| disabled | Styles applied to the root element if `disabled={true}`. -| label | Styles applied to the children container element. +- `root` +- `colorInherit` +- `colorPrimary` +- `colorSecondary` +- `disabled` +- `label` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/IconButton/IconButton.js) diff --git a/pages/api/icon.md b/pages/api/icon.md index 15be9b18c37cde..71c6e9207b3791 100644 --- a/pages/api/icon.md +++ b/pages/api/icon.md @@ -27,16 +27,13 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | Styles applied to the root element if `color="secondary"`. -| colorAction | Styles applied to the root element if `color="action"`. -| colorError | Styles applied to the root element if `color="error"`. -| colorDisabled | Styles applied to the root element if `color="disabled"`. -| fontSizeInherit | +- `root` +- `colorPrimary` +- `colorSecondary` +- `colorAction` +- `colorError` +- `colorDisabled` +- `fontSizeInherit` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Icon/Icon.js) diff --git a/pages/api/input-adornment.md b/pages/api/input-adornment.md index 0e947f8db95c86..9639d890f7e503 100644 --- a/pages/api/input-adornment.md +++ b/pages/api/input-adornment.md @@ -28,12 +28,9 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| positionStart | Styles applied to the root element if `position="start"`. -| positionEnd | Styles applied to the root element if `position="end"`. +- `root` +- `positionStart` +- `positionEnd` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/InputAdornment/InputAdornment.js) diff --git a/pages/api/input-label.md b/pages/api/input-label.md index ce488e08b3cabc..33cd5922ca462f 100644 --- a/pages/api/input-label.md +++ b/pages/api/input-label.md @@ -33,14 +33,11 @@ Any other properties supplied will be spread to the root element ([FormLabel](/a You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| formControl | Styles applied to the root element if the component is a descendant of `FormControl`. -| marginDense | Styles applied to the root element if `margin="dense"`. -| shrink | Styles applied to the `input` element if `shrink={true}`. -| animated | Styles applied to the `input` element if `disableAnimation={false}`. +- `root` +- `formControl` +- `marginDense` +- `shrink` +- `animated` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/InputLabel/InputLabel.js) diff --git a/pages/api/input.md b/pages/api/input.md index b050e825147da2..a0c7d57ae67477 100644 --- a/pages/api/input.md +++ b/pages/api/input.md @@ -32,7 +32,7 @@ title: Input API | margin | enum: '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`. | +| 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`. | | 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 will be required. | @@ -49,22 +49,19 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| formControl | Styles applied to the root element if the component is a descendant of `FormControl`. -| focused | Styles applied to the root element if the component is focused. -| disabled | Styles applied to the root element if `disabled={true}`. -| underline | Styles applied to the root element if `disableUnderline={false}`. -| error | Styles applied to the root element if `error={true}`. -| multiline | Styles applied to the root element if `multiline={true}`. -| fullWidth | Styles applied to the root element if `fullWidth={true}`. -| input | Styles applied to the `input` element. -| inputMarginDense | Styles applied to the `input` element if `margin="dense"`. -| inputMultiline | Styles applied to the `input` element if `multiline={true}`. -| inputType | Styles applied to the `input` element if `type` is not "text"`. -| inputTypeSearch | Styles applied to the `input` element if `type="search"`. +- `root` +- `formControl` +- `focused` +- `disabled` +- `underline` +- `error` +- `multiline` +- `fullWidth` +- `input` +- `inputMarginDense` +- `inputMultiline` +- `inputType` +- `inputTypeSearch` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Input/Input.js) diff --git a/pages/api/linear-progress.md b/pages/api/linear-progress.md index 8fb40fcd279de6..e99fade774942c 100644 --- a/pages/api/linear-progress.md +++ b/pages/api/linear-progress.md @@ -32,26 +32,23 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| colorPrimary | Styles applied to the root & bar2 element if `color="primary"`; bar2 if `variant-"buffer"`. -| colorSecondary | Styles applied to the root & bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`. -| buffer | Styles applied to the root element if `variant="buffer"`. -| query | Styles applied to the root element if `variant="query"`. -| dashed | Styles applied to the additional bar element if `variant="buffer"`. -| dashedColorPrimary | Styles applied to the additional bar element if `variant="buffer"` & `color="primary"`. -| dashedColorSecondary | Styles applied to the additional bar element if `variant="buffer"` & `color="secondary"`. -| bar | Styles applied to the layered bar1 & bar2 elements. -| barColorPrimary | Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". -| barColorSecondary | Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". -| bar1Indeterminate | Styles applied to the bar1 element if `variant="indeterminate or query"`. -| bar1Determinate | Styles applied to the bar1 element if `variant="determinate"`. -| bar1Buffer | Styles applied to the bar1 element if `variant="buffer"`. -| bar2Indeterminate | Styles applied to the bar2 element if `variant="indeterminate or query"`. -| bar2Determinate | Styles applied to the bar2 element if `variant="determinate"`. -| bar2Buffer | Styles applied to the bar2 element if `variant="buffer"`. +- `root` +- `colorPrimary` +- `colorSecondary` +- `buffer` +- `query` +- `dashed` +- `dashedColorPrimary` +- `dashedColorSecondary` +- `bar` +- `barColorPrimary` +- `barColorSecondary` +- `bar1Indeterminate` +- `bar1Determinate` +- `bar1Buffer` +- `bar2Indeterminate` +- `bar2Determinate` +- `bar2Buffer` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/LinearProgress/LinearProgress.js) diff --git a/pages/api/list-item-avatar.md b/pages/api/list-item-avatar.md index 4fa213704fea3b..21414909003218 100644 --- a/pages/api/list-item-avatar.md +++ b/pages/api/list-item-avatar.md @@ -25,11 +25,8 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| icon | Styles applied to the children – typically the `Avatar` component. +- `root` +- `icon` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js) diff --git a/pages/api/list-item-icon.md b/pages/api/list-item-icon.md index 51bc850707c62d..a6bebbe1689edb 100644 --- a/pages/api/list-item-icon.md +++ b/pages/api/list-item-icon.md @@ -25,10 +25,7 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. +- `root` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListItemIcon/ListItemIcon.js) diff --git a/pages/api/list-item-secondary-action.md b/pages/api/list-item-secondary-action.md index 92308d87421590..12cdbb714144cd 100644 --- a/pages/api/list-item-secondary-action.md +++ b/pages/api/list-item-secondary-action.md @@ -25,10 +25,7 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. +- `root` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js) diff --git a/pages/api/list-item-text.md b/pages/api/list-item-text.md index 0bb6ca69967bde..95245ce272c0d0 100644 --- a/pages/api/list-item-text.md +++ b/pages/api/list-item-text.md @@ -31,15 +31,12 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| inset | Styles applied to the root element if `inset={true}`. -| dense | Styles applied to the root element if `context.dense` is `true`. -| primary | Styles applied to the primary `Typography` component. -| secondary | Styles applied to the secondary `Typography` component. -| textDense | Styles applied to the `Typography` components if `context.dense` is `true`. +- `root` +- `inset` +- `dense` +- `primary` +- `secondary` +- `textDense` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListItemText/ListItemText.js) diff --git a/pages/api/list-item.md b/pages/api/list-item.md index a5030c371aa2bd..de0e389641fb41 100644 --- a/pages/api/list-item.md +++ b/pages/api/list-item.md @@ -33,19 +33,16 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the (normally root) `component` element. May be wrapped by a `container`. -| container | Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. -| focusVisible | Styles applied to the `component`'s `focusVisibleClassName` property if `button={true}`. -| default | Legacy styles applied to the root element. Use `root` instead. -| dense | Styles applied to the `component` element if `dense={true}` or `children` includes `Avatar`. -| disabled | Styles applied to the inner `component` element if `disabled={true}`. -| divider | Styles applied to the inner `component` element if `divider={true}`. -| gutters | Styles applied to the inner `component` element if `disableGutters={false}`. -| button | Styles applied to the inner `component` element if `button={true}`. -| secondaryAction | Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`. +- `root` +- `container` +- `focusVisible` +- `default` +- `dense` +- `disabled` +- `divider` +- `gutters` +- `button` +- `secondaryAction` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListItem/ListItem.js) diff --git a/pages/api/list-subheader.md b/pages/api/list-subheader.md index 51fdbc2e5302bd..1516eeaef20cfd 100644 --- a/pages/api/list-subheader.md +++ b/pages/api/list-subheader.md @@ -30,15 +30,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| colorPrimary | Styles applied to the root element if `color="primary"`. -| colorInherit | Styles applied to the root element if `color="inherit"`. -| gutters | Styles applied to the inner `component` element if `disableGutters={false}`. -| inset | Styles applied to the root element if `inset={true}`. -| sticky | Styles applied to the root element if `disableSticky={false}`. +- `root` +- `colorPrimary` +- `colorInherit` +- `inset` +- `sticky` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListSubheader/ListSubheader.js) diff --git a/pages/api/list.md b/pages/api/list.md index 029d44acf79baa..c7416a1383d281 100644 --- a/pages/api/list.md +++ b/pages/api/list.md @@ -29,13 +29,10 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| padding | Styles applied to the root element if `disablePadding={false}`. -| dense | Styles applied to the root element if `dense={true}` & `disablePadding={false}`. -| subheader | Styles applied to the root element if a `subheader` is provided. +- `root` +- `padding` +- `dense` +- `subheader` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/List/List.js) diff --git a/pages/api/menu-item.md b/pages/api/menu-item.md index fd511824ed3fc9..77fbcf16221dae 100644 --- a/pages/api/menu-item.md +++ b/pages/api/menu-item.md @@ -27,11 +27,8 @@ Any other properties supplied will be spread to the root element ([ListItem](/ap You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| selected | Styles applied to the root element if `selected={true}`. +- `root` +- `selected` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/MenuItem/MenuItem.js) diff --git a/pages/api/menu.md b/pages/api/menu.md index 074b04259eacc5..5bf1727b4a95f6 100644 --- a/pages/api/menu.md +++ b/pages/api/menu.md @@ -38,10 +38,7 @@ Any other properties supplied will be spread to the root element ([Popover](/api You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| paper | Styles applied to the `Paper` component. +- `paper` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Menu/Menu.js) diff --git a/pages/api/mobile-stepper.md b/pages/api/mobile-stepper.md index 5d05b8837858d7..7e1d2be572a198 100644 --- a/pages/api/mobile-stepper.md +++ b/pages/api/mobile-stepper.md @@ -31,17 +31,14 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| positionBottom | Styles applied to the root element if `position="bottom"`. -| positionTop | Styles applied to the root element if `position="top"`. -| positionStatic | Styles applied to the root element if `position="static"`. -| dots | Styles applied to the dots container if `variant="dots"`. -| dot | Styles applied to each dot if `variant="dots"`. -| dotActive | Styles applied to a dot if `variant="dots"` and this is the active step. -| progress | Styles applied to the Linear Progress component if `variant="progress"`. +- `root` +- `positionBottom` +- `positionTop` +- `positionStatic` +- `dots` +- `dot` +- `dotActive` +- `progress` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/MobileStepper/MobileStepper.js) diff --git a/pages/api/modal.md b/pages/api/modal.md index c412ebbea14881..dd33ce557b28a7 100644 --- a/pages/api/modal.md +++ b/pages/api/modal.md @@ -42,11 +42,8 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - -| Name | Description | -|:-----|:------------| -| root | Styles applied to the root element. -| hidden | Styles applied to the root element if the `Modal` has exited. +- `root` +- `hidden` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Modal/Modal.js) diff --git a/pages/api/native-select.md b/pages/api/native-select.md index 34544c73d9ff66..42adb20e16c81f 100644 --- a/pages/api/native-select.md +++ b/pages/api/native-select.md @@ -20,7 +20,7 @@ An alternative to `` with a much smaller dependency graph. | IconComponent | union: string |
 func |
 object
| ArrowDropDownIcon | The icon that displays the arrow. | | input | element | <Input /> | An `Input` element; does not have to be a material-ui specific `Input`. | | inputProps | object |   | Attributes applied to the `select` element. | -| onChange | func |   | Callback function fired when a menu item is selected.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`. | +| onChange | func |   | Callback function fired when a menu item is selected.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`. | | value | union: string |
 number |
 bool
|   | The input value. | Any other properties supplied will be spread to the root element ([Input](/api/input)). @@ -30,11 +30,14 @@ Any other properties supplied will be spread to the root element ([Input](/api/i You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `select` -- `selectMenu` -- `disabled` -- `icon` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the `Input` component `root` class. +| select | Styles applied to the `Input` component `select` class. +| selectMenu | Styles applied to the `Input` component `selectMenu` class. +| disabled | Styles applied to the `Input` component `disabled` class. +| icon | Styles applied to the `Input` component `icon` class. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/NativeSelect/NativeSelect.js) diff --git a/pages/api/paper.md b/pages/api/paper.md index 29497f60edaf5a..b25d72e4a7625b 100644 --- a/pages/api/paper.md +++ b/pages/api/paper.md @@ -28,33 +28,36 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `rounded` -- `elevation0` -- `elevation1` -- `elevation2` -- `elevation3` -- `elevation4` -- `elevation5` -- `elevation6` -- `elevation7` -- `elevation8` -- `elevation9` -- `elevation10` -- `elevation11` -- `elevation12` -- `elevation13` -- `elevation14` -- `elevation15` -- `elevation16` -- `elevation17` -- `elevation18` -- `elevation19` -- `elevation20` -- `elevation21` -- `elevation22` -- `elevation23` -- `elevation24` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| rounded | Styles applied to the root element if `square={false}`. +| elevation0 | +| elevation1 | +| elevation2 | +| elevation3 | +| elevation4 | +| elevation5 | +| elevation6 | +| elevation7 | +| elevation8 | +| elevation9 | +| elevation10 | +| elevation11 | +| elevation12 | +| elevation13 | +| elevation14 | +| elevation15 | +| elevation16 | +| elevation17 | +| elevation18 | +| elevation19 | +| elevation20 | +| elevation21 | +| elevation22 | +| elevation23 | +| elevation24 | Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Paper/Paper.js) diff --git a/pages/api/popover.md b/pages/api/popover.md index c5789d7a972c57..73d19bb6dbd4a0 100644 --- a/pages/api/popover.md +++ b/pages/api/popover.md @@ -15,9 +15,9 @@ title: Popover API | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| action | func |   | This is callback property. It's called by the component on mount. This is useful when you want to trigger an action programmatically. It currently only supports updatePosition() action.

**Signature:**
`function(actions: object) => void`
*actions:* This object contains all posible actions that can be triggered programmatically. | +| action | func |   | This is callback property. It's called by the component on mount. This is useful when you want to trigger an action programmatically. It currently only supports updatePosition() action.

**Signature:**
`function(actions: object) => void`
*actions:* This object contains all posible actions that can be triggered programmatically. | | anchorEl | union: object |
 func
|   | This is the DOM element, or a function that returns the DOM element, that may be used to set the position of the popover. | -| anchorOrigin | { horizontal: union: number |
 enum: 'left' |
 'center' |
 'right'

, vertical: union: number |
 enum: 'top' |
 'center' |
 'bottom'

} | { vertical: 'top', horizontal: 'left', } | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.
Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. | +| anchorOrigin | { horizontal: union: number |
 enum: 'left' |
 'center' |
 'right'

, vertical: union: number |
 enum: 'top' |
 'center' |
 'bottom'

} | { vertical: 'top', horizontal: 'left',} | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.
Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. | | anchorPosition | { left: number, top: number } |   | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. | | anchorReference | enum: 'anchorEl' |
 'anchorPosition' |
 'none'
| 'anchorEl' | | | children | node |   | The content of the component. | @@ -36,7 +36,7 @@ title: Popover API | onExiting | func |   | Callback fired when the component is exiting. | | open * | bool |   | If `true`, the popover is visible. | | PaperProps | object |   | Properties applied to the [`Paper`](/api/paper) element. | -| transformOrigin | { horizontal: union: number |
 enum: 'left' |
 'center' |
 'right'

, vertical: union: number |
 enum: 'top' |
 'center' |
 'bottom'

} | { vertical: 'top', horizontal: 'left', } | This is the point on the popover which will attach to the anchor's origin.
Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. | +| transformOrigin | { horizontal: union: number |
 enum: 'left' |
 'center' |
 'right'

, vertical: union: number |
 enum: 'top' |
 'center' |
 'bottom'

} | { vertical: 'top', horizontal: 'left',} | This is the point on the popover which will attach to the anchor's origin.
Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. | | TransitionComponent | union: string |
 func |
 object
| Grow | Transition component. | | transitionDuration | union: number |
 { enter?: number, exit?: number } |
 enum: 'auto'

| 'auto' | Set to 'auto' to automatically calculate transition time based on height. | | TransitionProps | object |   | Properties applied to the `Transition` element. | @@ -48,7 +48,10 @@ Any other properties supplied will be spread to the root element ([Modal](/api/m You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `paper` + +| Name | Description | +|:-----|:------------| +| paper | Styles applied to the `Paper` component. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Popover/Popover.js) diff --git a/pages/api/radio-group.md b/pages/api/radio-group.md index 3196e5c2c324a8..8eea5be66c7e72 100644 --- a/pages/api/radio-group.md +++ b/pages/api/radio-group.md @@ -17,7 +17,7 @@ title: RadioGroup API |:-----|:-----|:--------|:------------| | children | node |   | The content of the component. | | name | string |   | The name used to reference the value of the control. | -| onChange | func |   | Callback fired when a radio button is selected.

**Signature:**
`function(event: object, value: string) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`.
*value:* The `value` of the selected radio button | +| onChange | func |   | Callback fired when a radio button is selected.

**Signature:**
`function(event: object, value: string) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`.
*value:* The `value` of the selected radio button | | value | string |   | Value of the selected radio button. | Any other properties supplied will be spread to the root element ([FormGroup](/api/form-group)). diff --git a/pages/api/radio.md b/pages/api/radio.md index 77849551ac631c..659498b0c8bdff 100644 --- a/pages/api/radio.md +++ b/pages/api/radio.md @@ -25,7 +25,7 @@ title: Radio API | id | string |   | The id of the `input` element. | | inputProps | object |   | Attributes applied to the `input` element. | | inputRef | union: func |
 object
|   | Use that property to pass a ref callback to the native input component. | -| onChange | func |   | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`.
*checked:* The `checked` value of the switch | +| onChange | func |   | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`.
*checked:* The `checked` value of the switch | | type | string |   | The input component property `type`. | | value | string |   | The value of the component. | @@ -36,11 +36,14 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `checked` -- `disabled` -- `colorPrimary` -- `colorSecondary` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| checked | Styles applied to the root element if `checked={true}`. +| disabled | Styles applied to the root element if `disabled={true}`. +| colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | Styles applied to the root element if `color="secondary"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Radio/Radio.js) diff --git a/pages/api/select.md b/pages/api/select.md index 000357a22d3f4f..d5053ee7af78ca 100644 --- a/pages/api/select.md +++ b/pages/api/select.md @@ -25,7 +25,7 @@ title: Select API | MenuProps | object |   | Properties applied to the [`Menu`](/api/menu) element. | | multiple | bool | false | If true, `value` must be an array and the menu will support multiple selections. You can only use it when the `native` property is `false` (default). | | native | bool | false | If `true`, the component will be using a native `select` element. | -| onChange | func |   | Callback function fired when a menu item is selected.

**Signature:**
`function(event: object, child?: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`.
*child:* The react element that was selected when `native` is `false` (default). | +| onChange | func |   | Callback function fired when a menu item is selected.

**Signature:**
`function(event: object, child?: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`.
*child:* The react element that was selected when `native` is `false` (default). | | onClose | func |   | Callback fired when the component requests to be closed. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | | onOpen | func |   | Callback fired when the component 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 `select` open state. You can only use it when the `native` property is `false` (default). | @@ -40,11 +40,14 @@ Any other properties supplied will be spread to the root element ([Input](/api/i You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `select` -- `selectMenu` -- `disabled` -- `icon` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the `Input` component `root` class. +| select | Styles applied to the `Input` component `select` class. +| selectMenu | Styles applied to the `Input` component `selectMenu` class. +| disabled | Styles applied to the `Input` component `disabled` class. +| icon | Styles applied to the `Input` component `icon` class. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Select/Select.js) diff --git a/pages/api/slide.md b/pages/api/slide.md index 3d87a151ac8ec2..e9cecb4aa7021f 100644 --- a/pages/api/slide.md +++ b/pages/api/slide.md @@ -9,7 +9,7 @@ title: Slide API

The API documentation of the Slide React component.

-The Slide transition is used by the [Snackbar](/demos/snackbars) component. +The Slide transition is used by the [Snackbar](/demos/snackbars) component. It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. ## Props @@ -19,7 +19,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro | children | union: element |
 func
|   | A single child content element. | | direction | enum: 'left' |
 'right' |
 'up' |
 'down'
| 'down' | Direction the child node will enter from. | | in | bool |   | If `true`, show the component; triggers the enter or exit animation. | -| timeout | union: 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. | +| timeout | union: 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. | Any other properties supplied will be spread to the root element ([Transition](https://reactcommunity.org/react-transition-group/#Transition)). diff --git a/pages/api/snackbar-content.md b/pages/api/snackbar-content.md index 9ef789c7e3f37e..d8f5fad6cdb149 100644 --- a/pages/api/snackbar-content.md +++ b/pages/api/snackbar-content.md @@ -26,9 +26,12 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `message` -- `action` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| message | Styles applied to the message wrapper element. +| action | Styles applied to the action wrapper element if `action` is provided. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/SnackbarContent/SnackbarContent.js) diff --git a/pages/api/snackbar.md b/pages/api/snackbar.md index 9a65d8747e7746..3c9c534da2680c 100644 --- a/pages/api/snackbar.md +++ b/pages/api/snackbar.md @@ -16,7 +16,7 @@ title: Snackbar API | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | action | node |   | The action to display. | -| anchorOrigin | { horizontal: enum: 'left' |
 'center' |
 'right'
, vertical: enum: 'top' |
 'center' |
 'bottom'
} | { vertical: 'bottom', horizontal: 'center', } | The anchor of the `Snackbar`. | +| anchorOrigin | { horizontal: enum: 'left' |
 'center' |
 'right'
, vertical: enum: 'top' |
 'center' |
 'bottom'
} | { vertical: 'bottom', horizontal: 'center',} | The anchor of the `Snackbar`. | | autoHideDuration | number |   | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. | | children | element |   | If you wish the take control over the children of the component you can use this property. When used, you replace the `SnackbarContent` component with the children. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | @@ -34,7 +34,7 @@ title: Snackbar API | open | bool |   | If true, `Snackbar` is open. | | resumeHideDuration | number |   | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` property isn't specified, it does nothing. If `autoHideDuration` property is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. | | TransitionComponent | union: string |
 func |
 object
| Slide | Transition component. | -| transitionDuration | union: 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. | +| transitionDuration | union: 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 |   | Properties applied to the `Transition` element. | Any other properties supplied will be spread to the root element (native element). @@ -44,13 +44,16 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `anchorOriginTopCenter` -- `anchorOriginBottomCenter` -- `anchorOriginTopRight` -- `anchorOriginBottomRight` -- `anchorOriginTopLeft` -- `anchorOriginBottomLeft` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| anchorOriginTopCenter | Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`. +| anchorOriginBottomCenter | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'center' }}`. +| anchorOriginTopRight | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }}`. +| anchorOriginBottomRight | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }}`. +| anchorOriginTopLeft | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }}`. +| anchorOriginBottomLeft | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Snackbar/Snackbar.js) diff --git a/pages/api/step-button.md b/pages/api/step-button.md index f26cb7387ec551..6de50cc189be5c 100644 --- a/pages/api/step-button.md +++ b/pages/api/step-button.md @@ -27,10 +27,13 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `horizontal` -- `vertical` -- `touchRipple` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| horizontal | Styles applied to the root element if `orientation="horizontal"`. +| vertical | Styles applied to the root element if `orientation="vertical"`. +| touchRipple | Styles applied to the `ButtonBase` touch-ripple. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/StepButton/StepButton.js) diff --git a/pages/api/step-connector.md b/pages/api/step-connector.md index dadae71e044c7e..63058214d6d1e0 100644 --- a/pages/api/step-connector.md +++ b/pages/api/step-connector.md @@ -24,13 +24,16 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `horizontal` -- `vertical` -- `alternativeLabel` -- `line` -- `lineHorizontal` -- `lineVertical` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| horizontal | Styles applied to the root element if `orientation="horizontal"`. +| vertical | Styles applied to the root element if `orientation="vertical"`. +| alternativeLabel | Styles applied to the root element if `alternativeLabel={true}`. +| line | Styles applied to the line element. +| lineHorizontal | Styles applied to the root element if `orientation="horizontal"`. +| lineVertical | Styles applied to the root element if `orientation="vertical"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/StepConnector/StepConnector.js) diff --git a/pages/api/step-content.md b/pages/api/step-content.md index 1e9051d1eafcdd..675014e855f67b 100644 --- a/pages/api/step-content.md +++ b/pages/api/step-content.md @@ -28,9 +28,12 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `last` -- `transition` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| last | Styles applied to the root element if `last={true}` (controlled by `Step`). +| transition | Styles applied to the Transition component. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/StepContent/StepContent.js) diff --git a/pages/api/step-icon.md b/pages/api/step-icon.md index 4f155b4f328cdc..742a7d69817837 100644 --- a/pages/api/step-icon.md +++ b/pages/api/step-icon.md @@ -28,11 +28,14 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `text` -- `active` -- `completed` -- `error` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| text | Styles applied to the SVG text element. +| active | Styles applied to the root element if `active={true}`. +| completed | Styles applied to the root element if `completed={true}`. +| error | Styles applied to the root element if `error={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/StepIcon/StepIcon.js) diff --git a/pages/api/step-label.md b/pages/api/step-label.md index 2499edba2715c8..0322a4c37ecb72 100644 --- a/pages/api/step-label.md +++ b/pages/api/step-label.md @@ -30,17 +30,20 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `horizontal` -- `vertical` -- `label` -- `active` -- `completed` -- `error` -- `disabled` -- `iconContainer` -- `alternativeLabel` -- `labelContainer` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| horizontal | Styles applied to the root element if `orientation="horiizontal". +| vertical | Styles applied to the root element if `orientation="vertical". +| label | Styles applied to the `Typography` component which wraps `children`. +| active | Styles applied to the `Typography` component if `active={true}`. +| completed | Styles applied to the `Typography` component if `completed={true}`. +| error | Styles applied to the root element and `Typography` component if `error={true}`. +| disabled | Styles applied to the root element and `Typography` component if `disabled={true}`. +| iconContainer | Styles applied to the `icon` container element. +| alternativeLabel | Styles applied to the root & icon container and `Typography` if `alternativeLabel={true}`. +| labelContainer | Styles applied to the container element which wraps `Typography` and `optional`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/StepLabel/StepLabel.js) diff --git a/pages/api/step.md b/pages/api/step.md index 0faf8d8d959ef8..a472f2c2606342 100644 --- a/pages/api/step.md +++ b/pages/api/step.md @@ -28,11 +28,14 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `horizontal` -- `vertical` -- `alternativeLabel` -- `completed` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| horizontal | Styles applied to the root element if `orientation="horizontal"`. +| vertical | Styles applied to the root element if `orientation="vertical"`. +| alternativeLabel | Styles applied to the root element if `alternativeLabel={true}`. +| completed | Styles applied to the root element if `completed={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Step/Step.js) diff --git a/pages/api/stepper.md b/pages/api/stepper.md index f3565a62a8ed50..5c18bef6b7f7dd 100644 --- a/pages/api/stepper.md +++ b/pages/api/stepper.md @@ -30,10 +30,13 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `horizontal` -- `vertical` -- `alternativeLabel` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| horizontal | Styles applied to the root element if `orientation="horizontal"`. +| vertical | Styles applied to the root element if `orientation="vertical"`. +| alternativeLabel | Styles applied to the root element if `alternativeLabel={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Stepper/Stepper.js) diff --git a/pages/api/svg-icon.md b/pages/api/svg-icon.md index be71520a11aa41..d40edf4f314ba6 100644 --- a/pages/api/svg-icon.md +++ b/pages/api/svg-icon.md @@ -31,13 +31,16 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `colorPrimary` -- `colorSecondary` -- `colorAction` -- `colorError` -- `colorDisabled` -- `fontSizeInherit` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | Styles applied to the root element if `color="secondary"`. +| colorAction | Styles applied to the root element if `color="saction"`. +| colorError | Styles applied to the root element if `color="error"`. +| colorDisabled | Styles applied to the root element if `color="disabled"`. +| fontSizeInherit | Styles applied to the root element if `fontSize="inherit"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/SvgIcon/SvgIcon.js) diff --git a/pages/api/switch.md b/pages/api/switch.md index 3fb88d94ce0424..9ec6512b5f51e3 100644 --- a/pages/api/switch.md +++ b/pages/api/switch.md @@ -25,7 +25,7 @@ title: Switch API | id | string |   | The id of the `input` element. | | inputProps | object |   | Attributes applied to the `input` element. | | inputRef | union: func |
 object
|   | Use that property to pass a ref callback to the native input component. | -| onChange | func |   | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.
*checked:* The `checked` value of the switch | +| onChange | func |   | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.
*checked:* The `checked` value of the switch | | type | string |   | The input component property `type`. | | value | string |   | The value of the component. | @@ -36,15 +36,18 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `icon` -- `iconChecked` -- `switchBase` -- `checked` -- `colorPrimary` -- `colorSecondary` -- `disabled` -- `bar` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| icon | Styles used to create the `icon` passed to the internal `SwitchBase` component `icon` prop. +| iconChecked | Styles applied the icon element component if `checked={true}`. +| switchBase | Styles applied to the internal `SwitchBase` component's `root` class. +| checked | Styles applied to the internal `SwitchBase` component's `checked` class. +| colorPrimary | Styles applied to the internal SwitchBase component's root element if `color="primary"`. +| colorSecondary | Styles applied to the internal SwitchBase component's root element if `color="secondary"`. +| disabled | Styles applied to the internal SwitchBase component's disabled class. +| bar | Styles applied to the bar element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Switch/Switch.js) diff --git a/pages/api/tab.md b/pages/api/tab.md index 39bbdbd07eb150..fe00d9b2d950aa 100644 --- a/pages/api/tab.md +++ b/pages/api/tab.md @@ -29,18 +29,21 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `labelIcon` -- `textColorInherit` -- `textColorPrimary` -- `textColorSecondary` -- `selected` -- `disabled` -- `fullWidth` -- `wrapper` -- `labelContainer` -- `label` -- `labelWrapped` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| labelIcon | Styles applied to the root element if both `icon` and `label` are provided. +| textColorInherit | Styles applied to the root element if `textColor="inherit"`. +| textColorPrimary | Styles applied to the root element if `textColor="primary"`. +| textColorSecondary | Styles applied to the root element if `textColor="secondary"`. +| selected | Styles applied to the root element if `selected={true}` (controlled by the Tabs component). +| disabled | Styles applied to the root element if `disabled={true}` (controlled by the Tabs component). +| fullWidth | Styles applied to the root element if `fullWidth={true}` (controlled by the Tabs component). +| wrapper | Styles applied to the `icon` and `label`'s wrapper element. +| labelContainer | Styles applied to the label container element if `label` is provided. +| label | Styles applied to the label wrapper element if `label` is provided. +| labelWrapped | Styles applied to the label wrapper element if `label` is provided and the text is wrapped. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Tab/Tab.js) diff --git a/pages/api/table-body.md b/pages/api/table-body.md index 8f0af382c00772..95792e084e258a 100644 --- a/pages/api/table-body.md +++ b/pages/api/table-body.md @@ -26,7 +26,10 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableBody/TableBody.js) diff --git a/pages/api/table-cell.md b/pages/api/table-cell.md index 60c645923d1934..e09f3409f036dc 100644 --- a/pages/api/table-cell.md +++ b/pages/api/table-cell.md @@ -31,14 +31,17 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `head` -- `body` -- `footer` -- `numeric` -- `paddingDense` -- `paddingCheckbox` -- `paddingNone` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| head | Styles applied to the root element if `variant="head"` or `context.table.head`. +| body | Styles applied to the root element if `variant="body"` or `context.table.body`. +| footer | Styles applied to the root element if `variant="footer"` or `context.table.footer`. +| numeric | Styles applied to the root element if `numeric={true}`. +| paddingDense | Styles applied to the root element if `padding="dense"`. +| paddingCheckbox | Styles applied to the root element if `padding="checkbox"`. +| paddingNone | Styles applied to the root element if `padding="none"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableCell/TableCell.js) diff --git a/pages/api/table-footer.md b/pages/api/table-footer.md index 7db6f0409f1e13..4508f96a9c83f9 100644 --- a/pages/api/table-footer.md +++ b/pages/api/table-footer.md @@ -26,7 +26,10 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableFooter/TableFooter.js) diff --git a/pages/api/table-head.md b/pages/api/table-head.md index e146fef396ae36..82bb4f2b6b530c 100644 --- a/pages/api/table-head.md +++ b/pages/api/table-head.md @@ -26,7 +26,10 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableHead/TableHead.js) diff --git a/pages/api/table-pagination.md b/pages/api/table-pagination.md index 6963950bc453df..2fad563ddfd13c 100644 --- a/pages/api/table-pagination.md +++ b/pages/api/table-pagination.md @@ -37,16 +37,19 @@ Any other properties supplied will be spread to the root element ([TableCell](/a You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `toolbar` -- `spacer` -- `caption` -- `selectRoot` -- `select` -- `selectIcon` -- `input` -- `menuItem` -- `actions` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| toolbar | Styles applied to the Toolbar component. +| spacer | Styles applied to the spacer element. +| caption | Styles applied to the caption Typography components if `variant="caption"`. +| selectRoot | Styles applied to the Select component `root` class. +| select | Styles applied to the Select component `select` class. +| selectIcon | Styles applied to the Select component `icon` class. +| input | Styles applied to the Input component. +| menuItem | Styles applied to the MenuItem component. +| actions | Styles applied to the internal `TablePaginationActions` component. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TablePagination/TablePagination.js) diff --git a/pages/api/table-row.md b/pages/api/table-row.md index 3612260ab1e5b0..a93c2a3ab006d5 100644 --- a/pages/api/table-row.md +++ b/pages/api/table-row.md @@ -29,11 +29,14 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `selected` -- `hover` -- `head` -- `footer` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| selected | Styles applied to the root element if `selected={true}`. +| hover | Styles applied to the root element if `hover={true}`. +| head | Styles applied to the root element if table variant = 'head'. +| footer | Styles applied to the root element if table variant = 'footer'. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableRow/TableRow.js) diff --git a/pages/api/table-sort-label.md b/pages/api/table-sort-label.md index c43dbcda9daa0d..c5dc4152e41885 100644 --- a/pages/api/table-sort-label.md +++ b/pages/api/table-sort-label.md @@ -27,11 +27,14 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `active` -- `icon` -- `iconDirectionDesc` -- `iconDirectionAsc` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| active | Styles applied to the root element if `active={true}`. +| icon | Styles applied to the icon component. +| iconDirectionDesc | Styles applied to the icon component if `direction="desc"`. +| iconDirectionAsc | Styles applied to the icon component if `direction="asc"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableSortLabel/TableSortLabel.js) diff --git a/pages/api/table.md b/pages/api/table.md index 11ae910ff3cc30..d5e0fda0685418 100644 --- a/pages/api/table.md +++ b/pages/api/table.md @@ -27,7 +27,10 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Table/Table.js) diff --git a/pages/api/tabs.md b/pages/api/tabs.md index 4574ed9e4eaea3..67ec740edda641 100644 --- a/pages/api/tabs.md +++ b/pages/api/tabs.md @@ -15,7 +15,7 @@ title: Tabs API | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| action | func |   | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `updateIndicator()` action.

**Signature:**
`function(actions: object) => void`
*actions:* This object contains all possible actions that can be triggered programmatically. | +| action | func |   | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `updateIndicator()` action.

**Signature:**
`function(actions: object) => void`
*actions:* This object contains all possible actions that can be triggered programmatically. | | centered | bool | false | If `true`, the tabs will be centered. This property is intended for large views. | | children | node |   | The content of the component. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | @@ -37,15 +37,18 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `flexContainer` -- `centered` -- `scroller` -- `fixed` -- `scrollable` -- `scrollButtons` -- `scrollButtonsAuto` -- `indicator` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| flexContainer | Styles applied to the flex container element. +| centered | Styles applied to the flex container element if `centered={true}` & `scrollable={false}`. +| scroller | Styles applied to the tablist element. +| fixed | Styles applied to the tablist element if `scrollable={false}`. +| scrollable | Styles applied to the tablist element if `scrollable={true}`. +| scrollButtons | Styles applied to the `ScrollButtonComponent` component. +| scrollButtonsAuto | Styles applied to the `ScrollButtonComponent` component if `sscrollButtons="auto"`. +| indicator | Styles applied to the `TabIndicator` component. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Tabs/Tabs.js) diff --git a/pages/api/text-field.md b/pages/api/text-field.md index 7d2b5166e7be14..f1c4aadd2ebd40 100644 --- a/pages/api/text-field.md +++ b/pages/api/text-field.md @@ -9,31 +9,31 @@ title: TextField API

The API documentation of the TextField React component.

-The `TextField` is a convenience wrapper for the most common cases (80%). -It cannot be all things to all people, otherwise the API would grow out of control. +The `TextField` is a convenience wrapper for the most common cases (80%). +It cannot be all things to all people, otherwise the API would grow out of control. -## Advanced Configuration +## Advanced Configuration -It's important to understand that the text field is a simple abstraction -on top of the following components: -- [FormControl](/api/form-control) -- [InputLabel](/api/input-label) -- [Input](/api/input) -- [FormHelperText](/api/form-helper-text) +It's important to understand that the text field is a simple abstraction +on top of the following components: +- [FormControl](/api/form-control) +- [InputLabel](/api/input-label) +- [Input](/api/input) +- [FormHelperText](/api/form-helper-text) -If you wish to alter the properties applied to the native input, you can do so as follows: +If you wish to alter the properties applied to the native input, you can do so as follows: -```jsx -const inputProps = { - step: 300, -}; +```jsx +const inputProps = { + step: 300, +}; -return ; -``` +return ; +``` -For advanced cases, please look at the source of TextField by clicking on the -"Edit this page" button above. Consider either: -- using the upper case props for passing values directly to the components +For advanced cases, please look at the source of TextField by clicking on the +"Edit this page" button above. Consider either: +- using the upper case props for passing values directly to the components - using the underlying components directly as shown in the demos ## Props @@ -57,7 +57,7 @@ For advanced cases, please look at the source of TextField by clicking on the | margin | enum: 'none' |
 'dense' |
 'normal'
|   | If `dense` or `normal`, will adjust vertical spacing of this and contained components. | | multiline | bool |   | If `true`, a textarea element will be rendered instead of an input. | | 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`. | +| 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`. | | placeholder | string |   | The short hint displayed in the input before the user enters a value. | | required | bool | false | If `true`, the label is displayed as required and the input will be required. | | rows | union: string |
 number
|   | Number of rows to display when multiline option is set to true. | diff --git a/pages/api/toolbar.md b/pages/api/toolbar.md index b635d7cd3b9426..8971c710807e6e 100644 --- a/pages/api/toolbar.md +++ b/pages/api/toolbar.md @@ -27,10 +27,13 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `gutters` -- `regular` -- `dense` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| gutters | Styles applied to the root element if `disableGutters={false}`. +| regular | Styles applied to the root element if `variant="regular"`. +| dense | Styles applied to the root element if `variant="dense"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Toolbar/Toolbar.js) diff --git a/pages/api/tooltip.md b/pages/api/tooltip.md index 047fbe4cb3f11c..01c8edcf133eec 100644 --- a/pages/api/tooltip.md +++ b/pages/api/tooltip.md @@ -41,13 +41,16 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `popper` -- `tooltip` -- `touch` -- `tooltipPlacementLeft` -- `tooltipPlacementRight` -- `tooltipPlacementTop` -- `tooltipPlacementBottom` + +| Name | Description | +|:-----|:------------| +| popper | Styles applied to the Popper component. +| tooltip | Styles applied to the tooltip (label wrapper) element. +| touch | Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. +| tooltipPlacementLeft | Styles applied to the tooltip (label wrapper) element if `placement` contains "left". +| tooltipPlacementRight | Styles applied to the tooltip (label wrapper) element if `placement` contains "right". +| tooltipPlacementTop | Styles applied to the tooltip (label wrapper) element if `placement` contains "top". +| tooltipPlacementBottom | Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Tooltip/Tooltip.js) diff --git a/pages/api/touch-ripple.md b/pages/api/touch-ripple.md index 4b3e5f23031ca0..1a8c27c76018c5 100644 --- a/pages/api/touch-ripple.md +++ b/pages/api/touch-ripple.md @@ -25,13 +25,16 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `ripple` -- `rippleVisible` -- `ripplePulsate` -- `child` -- `childLeaving` -- `childPulsate` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| ripple | Styles applied to the internal `Ripple` components `ripple` class. +| rippleVisible | Styles applied to the internal `Ripple` components `rippleVisible` class. +| ripplePulsate | Styles applied to the internal `Ripple` components `ripplePulsate` class. +| child | Styles applied to the internal `Ripple` components `child` class. +| childLeaving | Styles applied to the internal `Ripple` components `childLeaving` class. +| childPulsate | Styles applied to the internal `Ripple` components `childPulsate` class. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ButtonBase/TouchRipple.js) diff --git a/pages/api/typography.md b/pages/api/typography.md index e078f0a1367853..4f5682dcd8c08d 100644 --- a/pages/api/typography.md +++ b/pages/api/typography.md @@ -21,7 +21,7 @@ title: Typography API | color | enum: 'default', 'error', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary'
| 'default' | The color of the component. It supports those theme colors that make sense for this component. | | component | union: string |
 func |
 object
|   | 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. | | gutterBottom | bool | false | If `true`, the text will have a bottom margin. | -| headlineMapping | object | { display4: 'h1', display3: 'h1', display2: 'h1', display1: 'h1', headline: 'h1', title: 'h2', subheading: 'h3', body2: 'aside', body1: 'p', } | We are empirically mapping the variant property to a range of different DOM element types. For instance, h1 to h6. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` property. | +| headlineMapping | object | { display4: 'h1', display3: 'h1', display2: 'h1', display1: 'h1', headline: 'h1', title: 'h2', subheading: 'h3', body2: 'aside', body1: 'p',} | We are empirically mapping the variant property to a range of different DOM element types. For instance, h1 to h6. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` property. | | noWrap | bool | false | If `true`, the text will not wrap, but instead will truncate with an ellipsis. | | paragraph | bool | false | If `true`, the text will have a bottom margin. | | variant | enum: 'display4', 'display3', 'display2', 'display1', 'headline', 'title', 'subheading', 'body2', 'body1', 'caption', 'button'
| 'body1' | Applies the theme typography styles. | @@ -33,31 +33,34 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `display4` -- `display3` -- `display2` -- `display1` -- `headline` -- `title` -- `subheading` -- `body2` -- `body1` -- `caption` -- `button` -- `alignLeft` -- `alignCenter` -- `alignRight` -- `alignJustify` -- `noWrap` -- `gutterBottom` -- `paragraph` -- `colorInherit` -- `colorPrimary` -- `colorSecondary` -- `colorTextPrimary` -- `colorTextSecondary` -- `colorError` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| display4 | Styles applied to the root element if `variant="display4"`. +| display3 | Styles applied to the root element if `variant="display3"`. +| display2 | Styles applied to the root element if `variant="display2"`. +| display1 | Styles applied to the root element if `variant="display1"`. +| headline | Styles applied to the root element if `variant="headline"`. +| title | Styles applied to the root element if `variant="title"`. +| subheading | Styles applied to the root element if `variant="subheading"`. +| body2 | Styles applied to the root element if `variant="body2"`. +| body1 | Styles applied to the root element if `variant="body1"`. +| caption | Styles applied to the root element if `variant="caption"`. +| button | Styles applied to the root element if `variant="button"`. +| alignLeft | Styles applied to the root element if `align="left"`. +| alignCenter | Styles applied to the root element if `align="center"`. +| alignRight | Styles applied to the root element if `align="right"`. +| alignJustify | Styles applied to the root element if `align="justify"`. +| noWrap | Styles applied to the root element if `align="nowrap"`. +| gutterBottom | Styles applied to the root element if `gutterBottom={true}`. +| paragraph | Styles applied to the root element if `paragraph={true}`. +| colorInherit | Styles applied to the root element if `color="inherit"`. +| colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | Styles applied to the root element if `color="secondary"`. +| colorTextPrimary | Styles applied to the root element if `color="textPrimary"`. +| colorTextSecondary | Styles applied to the root element if `color="textSecondary"`. +| colorError | Styles applied to the root element if `color="error"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Typography/Typography.js) diff --git a/pages/api/zoom.md b/pages/api/zoom.md index e7b3ca139c3a94..fed5c131fa583d 100644 --- a/pages/api/zoom.md +++ b/pages/api/zoom.md @@ -9,8 +9,8 @@ title: Zoom API

The API documentation of the Zoom React component.

-The Zoom transition can be used for the floating variant of the -[Button](https://material-ui.com/demos/buttons/#floating-action-buttons) component. +The Zoom transition can be used for the floating variant of the +[Button](https://material-ui.com/demos/buttons/#floating-action-buttons) component. It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. ## Props @@ -19,7 +19,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro |:-----|:-----|:--------|:------------| | children | union: element |
 func
|   | A single child content element. | | in | bool |   | If `true`, the component will transition in. | -| timeout | union: 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. | +| timeout | union: 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. | Any other properties supplied will be spread to the root element ([Transition](https://reactcommunity.org/react-transition-group/#Transition)). diff --git a/pages/lab/api/slider.md b/pages/lab/api/slider.md index 4fd412825c93e7..f82b4d2e41d9a9 100644 --- a/pages/lab/api/slider.md +++ b/pages/lab/api/slider.md @@ -25,7 +25,6 @@ title: Slider API | onDragStart | func |   | Callback function that is fired when the slider has begun to move. | | reverse | bool |   | If `true`, the slider will be reversed. | | step | number |   | The granularity the slider can step through values. | -| thumb | element |   | The component used for the slider icon. This is optional, if provided should be a react element. | | value * | number |   | The value of the slider. | | vertical | bool |   | If `true`, the slider will be vertical. | @@ -36,20 +35,21 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `container` -- `track` -- `trackBefore` -- `trackAfter` -- `thumb` -- `thumbTransparent` -- `thumbIcon` -- `reverse` -- `disabled` -- `jumped` -- `focused` -- `activated` -- `vertical` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| container | Styles applied to the container element. +| track | Styles applied to the track elements. +| trackBefore | Styles applied to the track element before the thumb. +| trackAfter | Styles applied to the track element after the thumb. +| thumb | Styles applied to the thumb element. +| reverse | Class applied to the root element to trigger JSS nested styles if `reverse={true}` . +| disabled | Class applied to the track and thumb elements to trigger JSS nested styles if `disabled`. +| jumped | Class applied to the track and thumb elements to trigger JSS nested styles if `jumped`. +| focused | Class applied to the track and thumb elements to trigger JSS nested styles if `focused`. +| activated | Class applied to the track and thumb elements to trigger JSS nested styles if `activated`. +| vertical | Class applied to the root, track and container to trigger JSS nested styles if `vertical`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/Slider/Slider.js) diff --git a/pages/lab/api/speed-dial-action.md b/pages/lab/api/speed-dial-action.md index 99072cf6bf9bad..2cf25615803511 100644 --- a/pages/lab/api/speed-dial-action.md +++ b/pages/lab/api/speed-dial-action.md @@ -29,9 +29,12 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `button` -- `buttonClosed` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root (`Tooltip`) component. +| button | Styles applied to the `Button` component. +| buttonClosed | Styles applied to the `Button` component if `open={false}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js) diff --git a/pages/lab/api/speed-dial-icon.md b/pages/lab/api/speed-dial-icon.md index 96f15153784d5b..7212e48dc79bef 100644 --- a/pages/lab/api/speed-dial-icon.md +++ b/pages/lab/api/speed-dial-icon.md @@ -26,12 +26,15 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `icon` -- `iconOpen` -- `iconWithOpenIconOpen` -- `openIcon` -- `openIconOpen` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| icon | Styles applied to the icon component. +| iconOpen | Styles applied to the icon component if `open={true}`. +| iconWithOpenIconOpen | Styles applied to the icon when and `openIcon` is provided & if `open={true}`. +| openIcon | Styles applied to the `openIcon` if provided. +| openIconOpen | Styles applied to the `openIcon` if provided & if `open={true}` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js) diff --git a/pages/lab/api/speed-dial.md b/pages/lab/api/speed-dial.md index 4343c0b7dfb7db..fba7b88542d6e1 100644 --- a/pages/lab/api/speed-dial.md +++ b/pages/lab/api/speed-dial.md @@ -26,7 +26,7 @@ title: SpeedDial API | open * | bool |   | If `true`, the SpeedDial is open. | | openIcon | node |   | The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open. | | TransitionComponent | union: string |
 func
| Zoom | Transition component. | -| transitionDuration | union: 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. | +| transitionDuration | union: 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 |   | Properties applied to the `Transition` element. | Any other properties supplied will be spread to the root element (native element). @@ -36,14 +36,17 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `fab` -- `directionUp` -- `directionDown` -- `directionLeft` -- `directionRight` -- `actions` -- `actionsClosed` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| fab | Styles applied to the Button component. +| directionUp | Styles applied to the root and action container elements when direction="up" +| directionDown | Styles applied to the root and action container elements when direction="down" +| directionLeft | Styles applied to the root and action container elements when direction="left" +| directionRight | Styles applied to the root and action container elements when direction="right" +| actions | Styles applied to the actions (`children` wrapper) element. +| actionsClosed | Styles applied to the actions (`children` wrapper) element if `open={false}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/SpeedDial/SpeedDial.js) diff --git a/pages/lab/api/toggle-button-group.md b/pages/lab/api/toggle-button-group.md index 030b6c18e9aa9e..da35b4b38e5c30 100644 --- a/pages/lab/api/toggle-button-group.md +++ b/pages/lab/api/toggle-button-group.md @@ -18,7 +18,7 @@ title: ToggleButtonGroup API | children * | node |   | The content of the button. | | classes | object |   | Useful to extend the style applied to components. | | exclusive | bool | false | If `true`, only allow one of the child ToggleButton values to be selected. | -| onChange | func |   | Callback fired when the value changes.

**Signature:**
`function(event: object, value: object) => void`
*event:* The event source of the callback
*value:* of the selected buttons. When `exclusive` is true this is a single value; when false an array of selected values. | +| onChange | func |   | Callback fired when the value changes.

**Signature:**
`function(event: object, value: object) => void`
*event:* The event source of the callback
*value:* of the selected buttons. When `exclusive` is true this is a single value; when false an array of selected values. | | selected | union: bool |
 enum: 'auto'

| 'auto' | If `true`, render the group in a selected state. If `auto` (the default) render in a selected state if `value` is not empty. | | value | any | null | The currently selected value within the group or an array of selected values when `exclusive` is false. | @@ -29,8 +29,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `selected` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| selected | Styles applied to the root element if `selected={true}` or `selected="auto" and `value` set. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/ToggleButton/ToggleButtonGroup.js) diff --git a/pages/lab/api/toggle-button.md b/pages/lab/api/toggle-button.md index e2e613831e62d9..0408fb17dc6f70 100644 --- a/pages/lab/api/toggle-button.md +++ b/pages/lab/api/toggle-button.md @@ -30,10 +30,13 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `disabled` -- `selected` -- `label` + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| disabled | Styles applied to the root element if `disabled={true}`. +| selected | Styles applied to the root element if `selected={true}`. +| label | Styles applied to the `label` wrapper element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/ToggleButton/ToggleButton.js)