From 432ed0b7a91988a50f42dc36c6234077020fa4ca Mon Sep 17 00:00:00 2001 From: adeelibr Date: Thu, 16 Aug 2018 23:14:51 +0500 Subject: [PATCH] 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 `