diff --git a/pages/api/app-bar.md b/pages/api/app-bar.md index 3b26c6fa3aa174..8705721faf58db 100644 --- a/pages/api/app-bar.md +++ b/pages/api/app-bar.md @@ -7,7 +7,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content of the component. | +| children | Node | | The content of the component. | | classes | Object | | Useful to extend the style applied to components. | | color | union: 'inherit'
 'primary'
 'accent'
 'default'
| 'primary' | The color of the component. It's using the theme palette when that makes sense. | | position | union: 'static'
 'fixed'
 'absolute'
| 'fixed' | The positioning type. | diff --git a/pages/api/avatar.md b/pages/api/avatar.md index 4a0edc44d9e2ae..528429bc2e35fb 100644 --- a/pages/api/avatar.md +++ b/pages/api/avatar.md @@ -10,7 +10,7 @@ | alt | string | | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. | | children | Element | | Used to render icon or text elements inside the Avatar. `src` and `alt` props will not be used and no `img` will be rendered by default.
This can be an element, or just a string. | | classes | Object | | Useful to extend the style applied to components. | -| component | union: string
 Function
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| component | union: string
 ComponentType<*>
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | imgProps | Object | | Properties applied to the `img` element when the component is used to display an image. | | sizes | string | | The `sizes` attribute for the `img` element. | | src | string | | The `src` attribute for the `img` element. | diff --git a/pages/api/bottom-navigation-button.md b/pages/api/bottom-navigation-button.md index e83ebb60900aeb..ac0068272385c0 100644 --- a/pages/api/bottom-navigation-button.md +++ b/pages/api/bottom-navigation-button.md @@ -7,10 +7,10 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| classes | object | | Useful to extend the style applied to components. | -| icon | node | | The icon element. If a string is provided, it will be used as a font ligature. | -| label | node | | The label element. | -| showLabel | bool | | If `true`, the BottomNavigationButton will show its label. | +| classes | Object | | Useful to extend the style applied to components. | +| icon | Element | | The icon element. If a string is provided, it will be used as a font ligature. | +| label | Element | | The label element. | +| showLabel | boolean | | If `true`, the BottomNavigationButton will show its label. | | value | any | | You can provide your own value. Otherwise, we fallback to the child position index. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/button-base.md b/pages/api/button-base.md index d1d426fc781f80..aadbd09b810f76 100644 --- a/pages/api/button-base.md +++ b/pages/api/button-base.md @@ -8,14 +8,14 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | centerRipple | boolean | false | If `true`, the ripples will be centered. They won't start at the cursor interaction position. | -| children | Element | | The content of the component. | +| children | Node | | The content of the component. | | classes | Object | {} | Useful to extend the style applied to components. | -| component | union: string
 Function
| | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. | +| component | union: string
 ComponentType<*>
| | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. | | disableRipple | boolean | false | If `true`, the ripple effect will be disabled. | | disabled | boolean | | If `true`, the base button will be disabled. | | focusRipple | boolean | false | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. | | keyboardFocusedClassName | string | | The CSS class applied while the component is keyboard focused. | -| onKeyboardFocus | Function | | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | +| onKeyboardFocus | signature | | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/button.md b/pages/api/button.md index 8ba3dc0c9ccb5b..4c3ab23e4b6266 100644 --- a/pages/api/button.md +++ b/pages/api/button.md @@ -7,10 +7,10 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | Element | | The content of the button. | +| children * | Node | | The content of the button. | | classes | Object | | Useful to extend the style applied to components. | | color | union: 'default', 'inherit', 'primary', 'accent', 'contrast'
| 'default' | The color of the component. It's using the theme palette when that makes sense. | -| component | union: string
 Function
| | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. | +| component | union: string
 ComponentType<*>
| | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. | | dense | boolean | false | Uses a smaller minWidth, ideal for things like card actions. | | disableFocusRipple | boolean | false | If `true`, the keyboard focus ripple will be disabled. `disableRipple` must also be true. | | disableRipple | boolean | false | If `true`, the ripple effect will be disabled. | diff --git a/pages/api/card-actions.md b/pages/api/card-actions.md index 548b8e3a4bf32f..0f12ced2221e1c 100644 --- a/pages/api/card-actions.md +++ b/pages/api/card-actions.md @@ -7,7 +7,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content of the component. | +| children | Node | | The content of the component. | | classes | Object | | Useful to extend the style applied to components. | | disableActionSpacing | boolean | false | If `true`, the card actions do not have additional margin. | diff --git a/pages/api/card-header.md b/pages/api/card-header.md index 5d992d5b9ac4f4..4563fae37a9ffc 100644 --- a/pages/api/card-header.md +++ b/pages/api/card-header.md @@ -7,10 +7,10 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| avatar | Element | | The Avatar for the Card Header. | +| avatar | Node | | The Avatar for the Card Header. | | classes | Object | | Useful to extend the style applied to components. | -| subheader | Element | | The content of the component. | -| title | Element | | The content of the Card Title. | +| subheader | Node | | The content of the component. | +| title | Node | | The content of the Card Title. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/checkbox.md b/pages/api/checkbox.md index 1f154f4d7bc890..21fd8689eb24a2 100644 --- a/pages/api/checkbox.md +++ b/pages/api/checkbox.md @@ -9,14 +9,14 @@ |:-----|:-----|:--------|:------------| | checked | union: boolean
 string
| | If `true`, the component is checked. | | checkedClassName | string | | The CSS class name of the root element when checked. | -| checkedIcon | Element | | The icon to display when the component is checked. If a string is provided, it will be used as a font ligature. | +| checkedIcon | Node | | The icon to display when the component is checked. If a string is provided, it will be used as a font ligature. | | classes | Object | | Useful to extend the style applied to components. | | disableRipple | boolean | | If `true`, the ripple effect will be disabled. | | disabled | boolean | | If `true`, the switch will be disabled. | | disabledClassName | string | | The CSS class name of the root element when disabled. | -| icon | Element | | The icon to display when the component is unchecked. If a string is provided, it will be used as a font ligature. | +| icon | Node | | The icon to display when the component is unchecked. If a string is provided, it will be used as a font ligature. | | indeterminate | boolean | false | If `true`, the component appears indeterminate. | -| indeterminateIcon | union: string
 Element<*>
| | The icon to display when the component is indeterminate. If a string is provided, it will be used as a font ligature. | +| indeterminateIcon | Node | | The icon to display when the component is indeterminate. If a string is provided, it will be used as a font ligature. | | inputProps | Object | | Properties applied to the `input` element. | | inputRef | Function | | Use that property to pass a ref callback to the native input component. | | name | string | | | diff --git a/pages/api/chip.md b/pages/api/chip.md index 47a7e14a96dafa..da663d66bdbd14 100644 --- a/pages/api/chip.md +++ b/pages/api/chip.md @@ -7,10 +7,10 @@ Chips represent complex entities in small blocks, such as a contact. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| avatar | node | | Avatar element. | -| classes | object | | Useful to extend the style applied to components. | -| label | node | | The content of the label. | -| onRequestDelete | function | | Callback function fired when the delete icon is clicked. If set, the delete icon will be shown.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | +| avatar | Element | | Avatar element. | +| classes | Object | | Useful to extend the style applied to components. | +| label | Element | | The content of the label. | +| onRequestDelete | signature | | Callback function fired when the delete icon is clicked. If set, the delete icon will be shown. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/collapse.md b/pages/api/collapse.md index fff5948e8934b5..20a36b03db0e27 100644 --- a/pages/api/collapse.md +++ b/pages/api/collapse.md @@ -7,7 +7,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content node to be collapsed. | +| children | Node | | The content node to be collapsed. | | classes | Object | {} | Useful to extend the style applied to components. | | in | boolean | false | If `true`, the component will transition in. | | onEnter | TransitionCallback | | Callback fired before the component is entering. | diff --git a/pages/api/dialog.md b/pages/api/dialog.md index 0b3f1103728a3a..9394dbecaf4f69 100644 --- a/pages/api/dialog.md +++ b/pages/api/dialog.md @@ -7,7 +7,7 @@ Dialogs are overlaid modal paper based components with a backdrop. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | Dialog children, usually the included sub-components. | +| children | Node | | Dialog children, usually the included sub-components. | | classes | Object | | Useful to extend the style applied to components. | | enterTransitionDuration | number | duration.enteringScreen | Duration of the animation when the element is entering. | | fullScreen | boolean | false | If `true`, it will be full-screen | @@ -25,7 +25,7 @@ Dialogs are overlaid modal paper based components with a backdrop. | onExiting | TransitionCallback | | Callback fired when the dialog is exiting. | | onRequestClose | Function | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | | open | boolean | false | If `true`, the Dialog is open. | -| transition | union: Function
 Element<*>
| Fade | Transition component. | +| transition | Node | Fade | Transition component. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/drawer.md b/pages/api/drawer.md index 0534518e7947c3..f8fe8ed98902e8 100644 --- a/pages/api/drawer.md +++ b/pages/api/drawer.md @@ -7,16 +7,17 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| ModalProps | Object | | Properties applied to the `Modal` element. | | SlideProps | Object | | Properties applied to the `Slide` element. | -| anchor | union: 'left'
 'top'
 'right'
 'bottom'
| 'left' | Side which will the drawer will appear from. | -| children | Element | | The contents of the drawer. | +| anchor | union: 'left'
 'top'
 'right'
 'bottom'
| 'left' | Side from which the drawer will appear. | +| children * | Node | | The contents of the drawer. | | classes | Object | {} | Useful to extend the style applied to components. | -| docked | boolean | false | If `true`, the drawer will dock itself and will no longer slide in with an overlay. | | elevation | number | 16 | The elevation of the drawer. | | enterTransitionDuration | number | duration.enteringScreen | Customizes duration of enter animation (ms) | | leaveTransitionDuration | number | duration.leavingScreen | Customizes duration of leave animation (ms) | | onRequestClose | Function | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | | open | boolean | false | If `true`, the drawer is open. | +| type * | union: 'permanent'
 'persistent'
 'temporary'
| 'temporary' | The type of drawer. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/fade.md b/pages/api/fade.md index eec59fd1bae011..3b95ecbd1c8733 100644 --- a/pages/api/fade.md +++ b/pages/api/fade.md @@ -7,7 +7,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | | +| children | Element | | A single child content element. | | enterTransitionDuration | number | duration.enteringScreen | Duration of the animation when the element is entering. | | in | boolean | false | If `true`, the component will transition in. | | leaveTransitionDuration | number | duration.leavingScreen | Duration of the animation when the element is exiting. | diff --git a/pages/api/form-control-label.md b/pages/api/form-control-label.md index 8a2a388de1fea2..c6cdf97c172cbe 100644 --- a/pages/api/form-control-label.md +++ b/pages/api/form-control-label.md @@ -12,7 +12,7 @@ | control * | Element | | A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. | | disabled | boolean | false | If `true`, the control will be disabled. | | inputRef | Function | | Use that property to pass a ref callback to the native input component. | -| label * | node | | The text to be used in an enclosing label element. | +| label * | Node | | The text to be used in an enclosing label element. | | name | string | | | | onChange | Function | | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback
*checked:* The `checked` value of the switch | | value | string | | The value of the component. | diff --git a/pages/api/form-control.md b/pages/api/form-control.md index 2ffd4e64280542..1d80548bccbbf5 100644 --- a/pages/api/form-control.md +++ b/pages/api/form-control.md @@ -7,9 +7,9 @@ Provides context such as dirty/focused/error/required for form inputs. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The contents of the form control. | +| children | $ReadOnlyArray | | The contents of the form control. | | classes | Object | {} | Useful to extend the style applied to components. | -| component | union: string
 Function
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| component | union: string
 ComponentType<*>
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | disabled | boolean | false | If `true`, the label, input and helper text should be displayed in a disabled state. | | error | boolean | false | If `true`, the label should be displayed in an error state. | | fullWidth | boolean | false | If `true`, the label will take up the full width of its container. | diff --git a/pages/api/form-group.md b/pages/api/form-group.md index 0e476a9a746c85..56352ca560c5a2 100644 --- a/pages/api/form-group.md +++ b/pages/api/form-group.md @@ -8,7 +8,7 @@ It provides compact row layout and FormLabel awareness. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content of the component. | +| children | Node | | The content of the component. | | classes | Object | | Useful to extend the style applied to components. | | row | boolean | false | Display group of elements in a compact row. | diff --git a/pages/api/form-helper-text.md b/pages/api/form-helper-text.md index c74c27ce55e820..fcaebc6b800f28 100644 --- a/pages/api/form-helper-text.md +++ b/pages/api/form-helper-text.md @@ -7,7 +7,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content of the component. | +| children | Node | | The content of the component. | | classes | Object | | Useful to extend the style applied to components. | | disabled | boolean | | If `true`, the helper text should be displayed in a disabled state. | | error | boolean | | If `true`, helper text should be displayed in an error state. | diff --git a/pages/api/form-label.md b/pages/api/form-label.md index 588b97e81a8064..bda0f7300296c0 100644 --- a/pages/api/form-label.md +++ b/pages/api/form-label.md @@ -7,9 +7,9 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content of the component. | +| children | Node | | The content of the component. | | classes | Object | | Useful to extend the style applied to components. | -| component | union: string
 Function
| 'label' | The component used for the root node. Either a string to use a DOM element or a component. | +| component | union: string
 ComponentType<*>
| 'label' | The component used for the root node. Either a string to use a DOM element or a component. | | disabled | boolean | | If `true`, the label should be displayed in a disabled state. | | error | boolean | | If `true`, the label should be displayed in an error state. | | focused | boolean | | If `true`, the input of this label is focused (used by `FormGroup` components). | diff --git a/pages/api/grid-list-tile.md b/pages/api/grid-list-tile.md index 1562240a9c77eb..7c4788d6f036db 100644 --- a/pages/api/grid-list-tile.md +++ b/pages/api/grid-list-tile.md @@ -7,10 +7,10 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). | -| classes | object | | Useful to extend the style applied to components. | +| children | $ReadOnlyArray | | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). | +| classes | Object | | Useful to extend the style applied to components. | | cols | number | 1 | Width of the tile in number of grid cells. | -| component | union: string
 func
| 'li' | The component used for the root node. Either a string to use a DOM element or a component. | +| component | union: string
 ComponentType<*>
| 'li' | The component used for the root node. Either a string to use a DOM element or a component. | | rows | number | 1 | Height of the tile in number of grid cells. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/grid.md b/pages/api/grid.md index d14ac4f51dbfc2..785d13619df504 100644 --- a/pages/api/grid.md +++ b/pages/api/grid.md @@ -8,9 +8,9 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | align | union: 'flex-start', 'center', 'flex-end', 'stretch', 'baseline'
| 'stretch' | Defines the `align-items` style property. It's applied for all screen sizes. | -| children | Element | | The content of the component. | +| children | Node | | The content of the component. | | classes | Object | | Useful to extend the style applied to components. | -| component | union: string
 Function
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| component | union: string
 ComponentType<*>
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | container | boolean | false | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. | | direction | union: 'row'
 'row-reverse'
 'column'
 'column-reverse'
| 'row' | Defines the `flex-direction` style property. It is applied for all screen sizes. | | hidden | [HiddenProps](/layout/hidden) | undefined | If provided, will wrap with [Hidden](/api/hidden) component and given properties. | diff --git a/pages/api/grow.md b/pages/api/grow.md index 5393babec6ae5d..fbd32c07e4e9b9 100644 --- a/pages/api/grow.md +++ b/pages/api/grow.md @@ -7,7 +7,7 @@ Grow transition used by popovers such as Menu. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content of the component. | +| children | Element | | A single child content element. | | onEnter | TransitionCallback | | Callback fired before the component is entering | | onEntered | TransitionCallback | | Callback fired when the component has entered | | onEntering | TransitionCallback | | Callback fired when the component is entering | diff --git a/pages/api/hidden.md b/pages/api/hidden.md index 7f64183e20409f..f439ef996650a1 100644 --- a/pages/api/hidden.md +++ b/pages/api/hidden.md @@ -7,7 +7,7 @@ Responsively hides children based on the selected implementation. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content of the component. | +| children | Node | | The content of the component. | | implementation | union: 'js'
 'css'
| 'js' | Specify which implementation to use. 'js' is the default, 'css' works better for server side rendering. | | lgDown | boolean | false | If true, screens this size and down will be hidden. | | lgUp | boolean | false | If true, screens this size and up will be hidden. | diff --git a/pages/api/icon.md b/pages/api/icon.md index 2266c37e629966..eda1113d2b4996 100644 --- a/pages/api/icon.md +++ b/pages/api/icon.md @@ -7,7 +7,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The name of the icon font ligature. | +| children | Node | | The name of the icon font ligature. | | classes | Object | | Useful to extend the style applied to components. | | color | union: 'inherit', 'accent', 'action', 'contrast', 'disabled', 'error', 'primary'
| 'inherit' | The color of the component. It's using the theme palette when that makes sense. | diff --git a/pages/api/input-label.md b/pages/api/input-label.md index 1b84bb67d851e1..26035c1c8a1f04 100644 --- a/pages/api/input-label.md +++ b/pages/api/input-label.md @@ -7,12 +7,13 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The contents of the `InputLabel`. | +| children | Node | | The contents of the `InputLabel`. | | classes | Object | | Useful to extend the style applied to components. | | disableAnimation | boolean | false | If `true`, the transition animation is disabled. | | disabled | boolean | false | If `true`, apply disabled class. | | error | boolean | | If `true`, the label will be displayed in an error state. | | focused | boolean | | If `true`, the input of this label is focused. | +| margin | literal | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | | required | boolean | | if `true`, the label will indicate that the input is required. | | shrink | boolean | | If `true`, the label is shrunk. | @@ -24,6 +25,7 @@ You can overrides all the class names injected by Material-UI thanks to the `cla This property accepts the following keys: - `root` - `formControl` +- `labelDense` - `shrink` - `animated` - `disabled` diff --git a/pages/api/input.md b/pages/api/input.md index c81622f29c5b53..ca4e29d2ff7669 100644 --- a/pages/api/input.md +++ b/pages/api/input.md @@ -11,7 +11,7 @@ | autoFocus | boolean | | If `true`, the input will be focused during the first mount. | | className | string | | The CSS class name of the wrapper element. | | classes | Object | | Useful to extend the style applied to components. | -| component | union: string
 Function
| | The component used for the root node. Either a string to use a DOM element or a component. It's an `input` by default. | +| component | union: string
 ComponentType<*>
| | The component used for the root node. Either a string to use a DOM element or a component. It's an `input` by default. | | defaultValue | union: string
 number
| | The default input value, useful when not controlling the component. | | disableUnderline | boolean | false | If `true`, the input will not have an underline. | | disabled | boolean | | TODO | diff --git a/pages/api/list-item-secondary-action.md b/pages/api/list-item-secondary-action.md index adfefcd15b1607..965e308d2436a0 100644 --- a/pages/api/list-item-secondary-action.md +++ b/pages/api/list-item-secondary-action.md @@ -7,7 +7,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content of the component, normally an `IconButton` or selection control. | +| children | Node | | The content of the component, normally an `IconButton` or selection control. | | classes | Object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/list-item.md b/pages/api/list-item.md index 508b58a993f5eb..9945117d41e368 100644 --- a/pages/api/list-item.md +++ b/pages/api/list-item.md @@ -8,9 +8,9 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | button | boolean | false | If `true`, the ListItem will be a button. | -| children | Element | | The content of the component. | +| children | Node | | The content of the component. | | classes | Object | {} | Useful to extend the style applied to components. | -| component | union: string
 Function
| 'li' | The component used for the root node. Either a string to use a DOM element or a component. | +| component | union: string
 ComponentType<*>
| 'li' | The component used for the root node. Either a string to use a DOM element or a component. | | dense | boolean | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used. | | disableGutters | boolean | false | If `true`, the left and right padding is removed. | | divider | boolean | false | If `true`, a 1px light border is added to the bottom of the list item. | diff --git a/pages/api/list.md b/pages/api/list.md index 45d1648bfbe5dd..693e52839adfa7 100644 --- a/pages/api/list.md +++ b/pages/api/list.md @@ -7,13 +7,13 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content of the component. | +| children | Node | | The content of the component. | | classes | Object | {} | Useful to extend the style applied to components. | -| component | union: string
 Function
| 'ul' | The component used for the root node. Either a string to use a DOM element or a component. | +| component | union: string
 ComponentType<*>
| 'ul' | The component used for the root node. Either a string to use a DOM element or a component. | | dense | boolean | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used for the list and list items. The property is available to descendant components as the `dense` context. | | disablePadding | boolean | false | If `true`, vertical padding will be removed from the list. | | rootRef | Function | | Use that property to pass a ref callback to the root component. | -| subheader | Element | | The content of the component, normally `ListItem`. | +| subheader | Node | | The content of the component, normally `ListItem`. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/menu-item.md b/pages/api/menu-item.md index e51c2317d55871..ccd97280cfd79f 100644 --- a/pages/api/menu-item.md +++ b/pages/api/menu-item.md @@ -7,9 +7,9 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | Menu item contents. | +| children | Node | | Menu item contents. | | classes | Object | | Useful to extend the style applied to components. | -| component | union: string
 Function
| | The component used for the root node. Either a string to use a DOM element or a component. | +| component | union: string
 ComponentType<*>
| | The component used for the root node. Either a string to use a DOM element or a component. | | selected | boolean | false | Use to apply selected styling. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/menu-list.md b/pages/api/menu-list.md index c3c0579ca8a8fe..a96c0a394a31b1 100644 --- a/pages/api/menu-list.md +++ b/pages/api/menu-list.md @@ -7,7 +7,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | MenuList contents, normally `MenuItem`s. | +| children | $ReadOnlyArray | | MenuList contents, normally `MenuItem`s. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/menu.md b/pages/api/menu.md index 9339acd07c926a..e818f4a43cda26 100644 --- a/pages/api/menu.md +++ b/pages/api/menu.md @@ -9,7 +9,7 @@ |:-----|:-----|:--------|:------------| | MenuListProps | Object | | Properties applied to the `MenuList` element. | | anchorEl | Object | | The DOM element used to set the position of the menu. | -| children | Element | | Menu contents, normally `MenuItem`s. | +| children | Node | | Menu contents, normally `MenuItem`s. | | classes | Object | {} | Useful to extend the style applied to components. | | onEnter | TransitionCallback | | Callback fired before the Menu enters. | | onEntered | TransitionCallback | | Callback fired when the Menu has entered. | @@ -36,6 +36,10 @@ If using the `overrides` key of the theme as documented [here](/customization/themes#customizing-all-instances-of-a-component-type), you need to use the following style sheet name: `MuiMenu`. +## Inheritance + +The properties of the [<Popover />](/api/popover) component are also available. + ## Demos - [Menus](/demos/menus) diff --git a/pages/api/paper.md b/pages/api/paper.md index 512bd03d9f16d1..a00037350650be 100644 --- a/pages/api/paper.md +++ b/pages/api/paper.md @@ -8,7 +8,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | classes | Object | | Useful to extend the style applied to components. | -| component | union: string
 Function
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| component | union: string
 ComponentType<*>
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | elevation | number | 2 | Shadow depth, corresponds to `dp` in the spec. It's accepting values between 0 and 24 inclusive. | | square | boolean | false | If `true`, rounded corners are disabled. | diff --git a/pages/api/popover.js b/pages/api/popover.js new file mode 100644 index 00000000000000..8b348eb43d28c8 --- /dev/null +++ b/pages/api/popover.js @@ -0,0 +1,12 @@ +// @flow + +import React from 'react'; +import withRoot from 'docs/src/modules/components/withRoot'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import markdown from './popover.md'; + +function Page() { + return ; +} + +export default withRoot(Page); diff --git a/pages/api/popover.md b/pages/api/popover.md new file mode 100644 index 00000000000000..3de69c12817bfb --- /dev/null +++ b/pages/api/popover.md @@ -0,0 +1,45 @@ + + +# Popover + + + +## Props +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| anchorEl | Object | | This is the DOM element that will be used to set the position of the popover. | +| anchorOrigin * | signature | { vertical: 'top', horizontal: 'left',} | This is the point on the anchor where the popover's `anchorEl` will attach to.
Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. | +| children * | Node | | The content of the component. | +| classes | Object | {} | Useful to extend the style applied to components. | +| elevation | number | 8 | The elevation of the popover. | +| enteredClassName | string | | The CSS class name applied while the component is entering | +| enteringClassName | string | | The CSS class name applied while the component is entering | +| exitedClassName | string | | The CSS class name applied when the component is exited | +| exitingClassName | string | | The CSS class name applied while the component is exiting | +| modal | boolean | true | If `true`, the Popover will be rendered as a modal with scroll locking, focus trapping and a clickaway layer beneath | +| onEnter | TransitionCallback | | Callback fired before the component is entering | +| onEntered | TransitionCallback | | Callback fired when the component has entered | +| onEntering | TransitionCallback | | Callback fired when the component is entering | +| onExit | TransitionCallback | | Callback fired before the component is exiting | +| onExited | TransitionCallback | | Callback fired when the component has exited | +| onExiting | TransitionCallback | | Callback fired when the component is exiting | +| onRequestClose | Function | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | +| open | boolean | false | If `true`, the popover is visible. | +| transformOrigin * | signature | { 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)]. | +| transitionDuration | union: number
 'auto'
| 'auto' | Set to 'auto' to automatically calculate transition time based on height | + +Any other properties supplied will be spread to the root element. + +## CSS API + +You can overrides all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: +- `paper` + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) +section for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiPopover`. + diff --git a/pages/api/radio-group.md b/pages/api/radio-group.md index b80d70d16445ba..a89f8d5ef38c41 100644 --- a/pages/api/radio-group.md +++ b/pages/api/radio-group.md @@ -7,11 +7,11 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content of the component. | +| children | $ReadOnlyArray | | The content of the component. | | classes | Object | | Useful to extend the style applied to components. | | name | string | | The name used to reference the value of the control. | | onChange | Function | | Callback fired when a radio button is selected.

**Signature:**
`function(event: object, value: string) => void`
*event:* The event source of the callback
*value:* The `value` of the selected radio button | -| value * | string | | 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. @@ -28,6 +28,10 @@ If using the `overrides` key of the theme as documented [here](/customization/themes#customizing-all-instances-of-a-component-type), you need to use the following style sheet name: `MuiRadioGroup`. +## Inheritance + +The properties of the [<FormGroup />](/api/form-group) component are also available. + ## Demos - [Selection Controls](/demos/selection-controls) diff --git a/pages/api/radio.md b/pages/api/radio.md index c81a74499e0c18..881c5329fb9f2a 100644 --- a/pages/api/radio.md +++ b/pages/api/radio.md @@ -9,12 +9,12 @@ |:-----|:-----|:--------|:------------| | checked | union: boolean
 string
| | If `true`, the component is checked. | | checkedClassName | string | | The CSS class name of the root element when checked. | -| checkedIcon | Element | | The icon to display when the component is checked. If a string is provided, it will be used as a font ligature. | +| checkedIcon | Node | | The icon to display when the component is checked. If a string is provided, it will be used as a font ligature. | | classes | Object | | Useful to extend the style applied to components. | | disableRipple | boolean | | If `true`, the ripple effect will be disabled. | | disabled | boolean | | If `true`, the switch will be disabled. | | disabledClassName | string | | The CSS class name of the root element when disabled. | -| icon | Element | | The icon to display when the component is unchecked. If a string is provided, it will be used as a font ligature. | +| icon | Node | | The icon to display when the component is unchecked. If a string is provided, it will be used as a font ligature. | | inputProps | Object | | Properties applied to the `input` element. | | inputRef | Function | | Use that property to pass a ref callback to the native input component. | | name | string | | | diff --git a/pages/api/slide.md b/pages/api/slide.md index cec4d0b0ec2757..0c45f709fa9b9b 100644 --- a/pages/api/slide.md +++ b/pages/api/slide.md @@ -7,6 +7,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| children | Element | | A single child content element. | | direction | union: 'left'
 'right'
 'up'
 'down'
| 'down' | Direction the child element will enter from. | | enterTransitionDuration | number | duration.enteringScreen | Duration of the animation when the element is entering. | | in | boolean | | If `true`, show the component; triggers the enter or exit animation. | diff --git a/pages/api/snackbar-content.md b/pages/api/snackbar-content.md index 1e48f088b401b5..11afdf1be8d7b0 100644 --- a/pages/api/snackbar-content.md +++ b/pages/api/snackbar-content.md @@ -7,9 +7,9 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| action | Element | | The action to display. | +| action | Node | | The action to display. | | classes | Object | | Useful to extend the style applied to components. | -| message * | Element | | The message to display. | +| message * | Node | | The message to display. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/snackbar.md b/pages/api/snackbar.md index 48786e5e43c978..cb146cda5e02fe 100644 --- a/pages/api/snackbar.md +++ b/pages/api/snackbar.md @@ -8,7 +8,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | SnackbarContentProps | Object | | Properties applied to the `SnackbarContent` element. | -| action | Element | | The action to display. | +| action | Node | | The action to display. | | anchorOrigin | signature | { vertical: 'bottom', horizontal: 'center' } | The anchor of the `Snackbar`. | | autoHideDuration | number | null | The number of milliseconds to wait before automatically dismissing. 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 that property. When using it, no `SnackbarContent` component will be rendered. | @@ -16,7 +16,7 @@ | enterTransitionDuration | number | duration.enteringScreen | Customizes duration of enter animation (ms) | | key | any | | When displaying multiple consecutive Snackbars from a parent rendering a single , add the key property to ensure independent treatment of each message. e.g. , otherwise, the message may update-in-place and features such as autoHideDuration may be canceled. | | leaveTransitionDuration | number | duration.leavingScreen | Customizes duration of leave animation (ms) | -| message | Element | | The message to display. | +| message | Node | | The message to display. | | onEnter | TransitionCallback | | Callback fired before the transition is entering. | | onEntered | TransitionCallback | | Callback fired when the transition has entered. | | onEntering | TransitionCallback | | Callback fired when the transition is entering. | @@ -25,7 +25,7 @@ | onExiting | TransitionCallback | | Callback fired when the transition is exiting. | | onRequestClose | signature | | Callback fired when the component requests to be closed.
Typically `onRequestClose` is used to set state in the parent component, which is used to control the `Snackbar` `open` prop.
The `reason` parameter can optionally be used to control the response to `onRequestClose`, for example ignoring `clickaway`.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback
*reason:* Can be:`"timeout"` (`autoHideDuration` expired) or: `"clickaway"` | | open * | boolean | | If true, `Snackbar` is open. | -| transition | union: Function
 Element<*>
| | Object with Transition component, props & create Fn. | +| transition | Element | | Object with Transition component, props & create Fn. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/switch.md b/pages/api/switch.md index 4793e5b9478c4d..b2300ad767d291 100644 --- a/pages/api/switch.md +++ b/pages/api/switch.md @@ -9,12 +9,12 @@ |:-----|:-----|:--------|:------------| | checked | union: boolean
 string
| | If `true`, the component is checked. | | checkedClassName | string | | The CSS class name of the root element when checked. | -| checkedIcon | Element | | The icon to display when the component is checked. If a string is provided, it will be used as a font ligature. | +| checkedIcon | Node | | The icon to display when the component is checked. If a string is provided, it will be used as a font ligature. | | classes | Object | | Useful to extend the style applied to components. | | disableRipple | boolean | | If `true`, the ripple effect will be disabled. | | disabled | boolean | | If `true`, the switch will be disabled. | | disabledClassName | string | | The CSS class name of the root element when disabled. | -| icon | Element | | The icon to display when the component is unchecked. If a string is provided, it will be used as a font ligature. | +| icon | Node | | The icon to display when the component is unchecked. If a string is provided, it will be used as a font ligature. | | inputProps | Object | | Properties applied to the `input` element. | | inputRef | Function | | Use that property to pass a ref callback to the native input component. | | name | string | | | diff --git a/pages/api/tab.md b/pages/api/tab.md index 0f1cc5094e41d6..449239d2b4a679 100644 --- a/pages/api/tab.md +++ b/pages/api/tab.md @@ -7,10 +7,10 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| classes | object | | Useful to extend the style applied to components. | -| disabled | bool | false | If `true`, the tab will be disabled. | -| icon | node | | The icon element. If a string is provided, it will be used as a font ligature. | -| label | node | | The label element. | +| classes | Object | | Useful to extend the style applied to components. | +| disabled | boolean | false | If `true`, the tab will be disabled. | +| icon | Element | | The icon element. If a string is provided, it will be used as a font ligature. | +| label | Element | | The label element. | | value | any | | You can provide your own value. Otherwise, we fallback to the child position index. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/table-body.md b/pages/api/table-body.md index 8bdaa1f1329878..63a1e19544f66d 100644 --- a/pages/api/table-body.md +++ b/pages/api/table-body.md @@ -7,9 +7,9 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content of the component, normally `TableRow`. | +| children | Node | | The content of the component, normally `TableRow`. | | classes | Object | {} | Useful to extend the style applied to components. | -| component | union: string
 Function
| 'tbody' | The component used for the root node. Either a string to use a DOM element or a component. | +| component | union: string
 ComponentType<*>
| 'tbody' | The component used for the root node. Either a string to use a DOM element or a component. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/table-head.md b/pages/api/table-head.md index ba4c76a8f29359..a96888377ef725 100644 --- a/pages/api/table-head.md +++ b/pages/api/table-head.md @@ -7,9 +7,9 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content of the component, normally `TableRow`. | +| children | Node | | The content of the component, normally `TableRow`. | | classes | Object | {} | Useful to extend the style applied to components. | -| component | union: string
 Function
| 'thead' | The component used for the root node. Either a string to use a DOM element or a component. | +| component | union: string
 ComponentType<*>
| 'thead' | The component used for the root node. Either a string to use a DOM element or a component. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/table.md b/pages/api/table.md index 401b878f9d11d6..b02456446b71f9 100644 --- a/pages/api/table.md +++ b/pages/api/table.md @@ -7,9 +7,9 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | Element | | The content of the table, normally `TableHeader` and `TableBody`. | +| children | Node | | The content of the table, normally `TableHeader` and `TableBody`. | | classes | Object | {} | Useful to extend the style applied to components. | -| component | union: string
 Function
| 'table' | The component used for the root node. Either a string to use a DOM element or a component. | +| component | union: string
 ComponentType<*>
| 'table' | The component used for the root node. Either a string to use a DOM element or a component. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/tabs.md b/pages/api/tabs.md index a003467c6bfbab..01b1c244f936ef 100644 --- a/pages/api/tabs.md +++ b/pages/api/tabs.md @@ -8,16 +8,16 @@ Notice that this Component is incompatible with server side rendering. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | buttonClassName | string | | The CSS class name of the scroll button elements. | -| 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 | | Useful to extend the style applied to components. | -| fullWidth | bool | false | If `true`, the tabs will grow to use all the available space. This property is intended for small views. | +| centered | boolean | false | If `true`, the tabs will be centered. This property is intended for large views. | +| children | $ReadOnlyArray | | The content of the component. | +| classes | Object | | Useful to extend the style applied to components. | +| fullWidth | boolean | false | If `true`, the tabs will grow to use all the available space. This property is intended for small views. | | indicatorClassName | string | | The CSS class name of the indicator element. | -| indicatorColor | union: [object Object],[object Object]
 string
| 'accent' | Determines the color of the indicator. | -| onChange * | function | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: number) => void`
*event:* The event source of the callback
*value:* We default to the index of the child | -| scrollButtons | enum: 'auto'
 'on'
 'off'
| 'auto' | Determine behavior of scroll buttons when tabs are set to scroll `auto` will only present them on medium and larger viewports `on` will always present them `off` will never present them | -| scrollable | bool | false | True invokes scrolling properties and allow for horizontally scrolling (or swiping) the tab bar. | -| textColor | union: [object Object],[object Object],[object Object]
 string
| 'inherit' | Determines the color of the `Tab`. | +| indicatorColor | union: 'accent'
 'primary'
 string
| 'accent' | Determines the color of the indicator. | +| onChange * | Function | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: number) => void`
*event:* The event source of the callback
*value:* We default to the index of the child | +| scrollButtons | union: 'auto'
 'on'
 'off'
| 'auto' | Determine behavior of scroll buttons when tabs are set to scroll `auto` will only present them on medium and larger viewports `on` will always present them `off` will never present them | +| scrollable | boolean | false | True invokes scrolling properties and allow for horizontally scrolling (or swiping) the tab bar. | +| textColor | union: 'accent'
 'primary'
 'inherit'
| 'inherit' | Determines the color of the `Tab`. | | value * | any | | The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this property to `false`. | Any other properties supplied will be spread to the root element. diff --git a/pages/api/text-field.md b/pages/api/text-field.md index 9a09822bbb693d..aabc634326b0bb 100644 --- a/pages/api/text-field.md +++ b/pages/api/text-field.md @@ -17,13 +17,13 @@ | disabled | boolean | | If `true`, the input will be disabled. | | error | boolean | | If `true`, the label will be displayed in an error state. | | fullWidth | boolean | | If `true`, the input will take up the full width of its container. | -| helperText | union: string
 Element<*>
| | The helper text content. | +| helperText | Node | | The helper text content. | | helperTextClassName | string | | The CSS class name of the helper text element. | | id | string | | The id of the `input` element. | | inputClassName | string | | The CSS class name of the `input` element. | | inputProps | Object | | Properties applied to the `input` element. | | inputRef | Function | | Use that property to pass a ref callback to the native input component. | -| label | union: string
 Element<*>
| | The label content. | +| label | Node | | The label content. | | labelClassName | string | | The CSS class name of the label element. | | margin | union: 'none'
 'dense'
 'normal'
| | If `dense` | `normal`, will adjust vertical spacing of this and contained components. | | multiline | boolean | | If `true`, a textarea element will be rendered instead of an input. | diff --git a/pages/api/typography.md b/pages/api/typography.md index 197020d59a7a94..d4ffdfa2451879 100644 --- a/pages/api/typography.md +++ b/pages/api/typography.md @@ -8,10 +8,10 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | align | union: 'inherit', 'left', 'center', 'right', 'justify'
| 'inherit' | | -| children | Element | | | +| children | Node | | | | classes | Object | | Useful to extend the style applied to components. | | color | union: 'inherit'
 'secondary'
 'accent'
 'default'
| 'default' | The color of the component. It's using the theme palette when that makes sense. | -| component | union: string
 Function
| | The component used for the root node. Either a string to use a DOM element or a component. By default we map the type to a good default headline component. | +| component | union: string
 ComponentType<*>
| | The component used for the root node. Either a string to use a DOM element or a component. By default we map the type to a good default headline component. | | gutterBottom | boolean | false | If `true`, the text will have a bottom margin. | | headlineMapping | signature | { display4: 'h1', display3: 'h1', display2: 'h1', display1: 'h1', headline: 'h1', title: 'h2', subheading: 'h3', body2: 'aside', body1: 'p',} | We are empirically mapping the type property to a range of different DOM element type. 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 | boolean | false | If `true`, the text will not wrap, but instead will truncate with an ellipsis. | diff --git a/src/Menu/Menu.js b/src/Menu/Menu.js index f043214be55317..ea8f94b85c81ab 100644 --- a/src/Menu/Menu.js +++ b/src/Menu/Menu.js @@ -1,4 +1,5 @@ // @flow +// @inheritedComponent Popover import React from 'react'; import type { Node } from 'react'; diff --git a/src/styles/withStyles.js b/src/styles/withStyles.js index 6baec35845c721..58fb62c027c0cf 100644 --- a/src/styles/withStyles.js +++ b/src/styles/withStyles.js @@ -111,7 +111,7 @@ function withStyles(stylesOrCreator: Object, options?: Options = {}) { ...(listenToTheme ? themeListener.contextTypes : {}), }; // Exposed for tests purposes - static options: ?Options = options; + static options: ?Options; // Exposed for test purposes. static Naked = BaseComponent; @@ -302,6 +302,9 @@ function withStyles(stylesOrCreator: Object, options?: Options = {}) { hoistNonReactStatics(Style, BaseComponent); + // Higher specificity + Style.options = options; + if (process.env.NODE_ENV !== 'production') { Style.displayName = wrapDisplayName(BaseComponent, 'withStyles'); }