From 2c1b0b01bf97319e02b896f6d90ea55c36a27653 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 6 Sep 2019 09:49:06 +0200 Subject: [PATCH] [misc] Batch small changes (#17316) --- docs/pages/api/checkbox.md | 2 +- docs/pages/api/filled-input.md | 2 +- docs/pages/api/form-control-label.md | 2 +- docs/pages/api/input-base.md | 2 +- docs/pages/api/input.md | 2 +- docs/pages/api/outlined-input.md | 2 +- docs/pages/api/popover.md | 2 +- docs/pages/api/popper.md | 2 +- docs/pages/api/radio.md | 2 +- docs/pages/api/root-ref.md | 2 +- docs/pages/api/slider.md | 5 ++ docs/pages/api/switch.md | 2 +- docs/pages/api/tabs.md | 2 +- docs/pages/api/text-field.md | 2 +- .../components/autocomplete/autocomplete.md | 9 ++ .../checkboxes/CustomizedCheckbox.js | 74 ++++++++++++++++ .../checkboxes/CustomizedCheckbox.tsx | 74 ++++++++++++++++ .../pages/components/checkboxes/checkboxes.md | 7 ++ .../radio-buttons/CustomizedRadios.js | 84 +++++++++++++++++++ .../radio-buttons/CustomizedRadios.tsx | 84 +++++++++++++++++++ .../radio-buttons/RadioButtonsGroup.js | 24 +----- .../radio-buttons/RadioButtonsGroup.tsx | 24 +----- .../components/radio-buttons/radio-buttons.md | 7 ++ docs/src/pages/components/rating/rating.md | 2 - .../components/slider/CustomizedSlider.js | 3 +- .../components/slider/CustomizedSlider.tsx | 3 +- docs/src/pages/components/tables/tables.md | 4 +- docs/src/pages/customization/color/color.md | 4 +- .../related-projects/related-projects.md | 52 +++++++++--- docs/src/pages/getting-started/faq/faq.md | 29 +++++++ .../material-ui/src/ButtonBase/ButtonBase.js | 2 +- packages/material-ui/src/Checkbox/Checkbox.js | 2 +- .../ClickAwayListener/ClickAwayListener.js | 18 ++-- .../src/FilledInput/FilledInput.js | 2 +- .../src/FormControlLabel/FormControlLabel.js | 2 +- packages/material-ui/src/Input/Input.js | 2 +- .../material-ui/src/InputBase/InputBase.js | 2 +- packages/material-ui/src/Menu/Menu.js | 2 +- .../src/OutlinedInput/OutlinedInput.js | 2 +- packages/material-ui/src/Popover/Popover.js | 6 +- packages/material-ui/src/Popper/Popper.js | 6 +- packages/material-ui/src/Radio/Radio.js | 2 +- .../material-ui/src/Radio/RadioButtonIcon.js | 8 +- packages/material-ui/src/RootRef/RootRef.js | 7 +- packages/material-ui/src/Slider/Slider.d.ts | 5 ++ packages/material-ui/src/Slider/Slider.js | 35 +++++++- packages/material-ui/src/Switch/Switch.js | 2 +- packages/material-ui/src/Tabs/Tabs.js | 3 +- .../material-ui/src/TextField/TextField.js | 2 +- .../material-ui/src/internal/SwitchBase.js | 4 +- .../src/internal/SwitchBase.test.js | 4 +- 51 files changed, 514 insertions(+), 119 deletions(-) create mode 100644 docs/src/pages/components/checkboxes/CustomizedCheckbox.js create mode 100644 docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx create mode 100644 docs/src/pages/components/radio-buttons/CustomizedRadios.js create mode 100644 docs/src/pages/components/radio-buttons/CustomizedRadios.tsx diff --git a/docs/pages/api/checkbox.md b/docs/pages/api/checkbox.md index c6381341e07ea6..527cceef836c2e 100644 --- a/docs/pages/api/checkbox.md +++ b/docs/pages/api/checkbox.md @@ -35,7 +35,7 @@ You can learn more about the difference by [reading our guide](/guides/minimizin | indeterminate | bool | false | If `true`, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a `data-indeterminate` attribute on the input. | | indeterminateIcon | node | <IndeterminateCheckBoxIcon /> | The icon to display when the component is indeterminate. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | This prop can be used to pass a ref to the `input` element. | +| inputRef | ref | | Pass a ref to the `input` element. | | onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). | | required | bool | | If `true`, the `input` element will be required. | | type | string | | The input component prop `type`. | diff --git a/docs/pages/api/filled-input.md b/docs/pages/api/filled-input.md index 9ef8851dfe8000..342899090ceaef 100644 --- a/docs/pages/api/filled-input.md +++ b/docs/pages/api/filled-input.md @@ -37,7 +37,7 @@ You can learn more about the difference by [reading our guide](/guides/minimizin | id | string | | The id of the `input` element. | | inputComponent | elementType | 'input' | The component used for the native input. Either a string to use a DOM element or a component. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | This prop can be used to pass a ref to the `input` element. | +| inputRef | ref | | Pass a ref to the `input` element. | | margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | | multiline | bool | false | If `true`, a textarea element will be rendered. | | name | string | | Name attribute of the `input` element. | diff --git a/docs/pages/api/form-control-label.md b/docs/pages/api/form-control-label.md index aa5975ca6e91e8..72101a33f3921b 100644 --- a/docs/pages/api/form-control-label.md +++ b/docs/pages/api/form-control-label.md @@ -29,7 +29,7 @@ Use this component if you want to display an extra label. | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | control | element | | A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. | | disabled | bool | | If `true`, the control will be disabled. | -| inputRef | ref | | This prop can be used to pass a ref to the `input` element. | +| inputRef | ref | | Pass a ref to the `input` element. | | label | node | | The text to be used in an enclosing label element. | | labelPlacement | 'end'
| 'start'
| 'top'
| 'bottom' | 'end' | The position of the label. | | name | string | | | diff --git a/docs/pages/api/input-base.md b/docs/pages/api/input-base.md index 919e1d3c26584d..dad801e3aae523 100644 --- a/docs/pages/api/input-base.md +++ b/docs/pages/api/input-base.md @@ -38,7 +38,7 @@ It contains a load of style reset and some state logic. | id | string | | The id of the `input` element. | | inputComponent | elementType | 'input' | The component used for the `input` element. Either a string to use a DOM element or a component. | | inputProps | object | {} | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | This prop can be used to pass a ref to the `input` element. | +| inputRef | ref | | Pass a ref to the `input` element. | | margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | | multiline | bool | false | If `true`, a textarea element will be rendered. | | name | string | | Name attribute of the `input` element. | diff --git a/docs/pages/api/input.md b/docs/pages/api/input.md index 7aab9545213a5b..5b9decac065d11 100644 --- a/docs/pages/api/input.md +++ b/docs/pages/api/input.md @@ -37,7 +37,7 @@ You can learn more about the difference by [reading our guide](/guides/minimizin | id | string | | The id of the `input` element. | | inputComponent | elementType | 'input' | The component used for the native input. Either a string to use a DOM element or a component. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | This prop can be used to pass a ref to the `input` element. | +| inputRef | ref | | Pass a ref to the `input` element. | | margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | | multiline | bool | false | If `true`, a textarea element will be rendered. | | name | string | | Name attribute of the `input` element. | diff --git a/docs/pages/api/outlined-input.md b/docs/pages/api/outlined-input.md index 29b170c6e80c7c..f0f7d5d8363d2a 100644 --- a/docs/pages/api/outlined-input.md +++ b/docs/pages/api/outlined-input.md @@ -36,7 +36,7 @@ You can learn more about the difference by [reading our guide](/guides/minimizin | id | string | | The id of the `input` element. | | inputComponent | elementType | 'input' | The component used for the native input. Either a string to use a DOM element or a component. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | This prop can be used to pass a ref to the `input` element. | +| inputRef | ref | | Pass a ref to the `input` element. | | labelWidth | number | 0 | The width of the label. | | margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | | multiline | bool | false | If `true`, a textarea element will be rendered. | diff --git a/docs/pages/api/popover.md b/docs/pages/api/popover.md index 5ac5f748ac1959..68adf91bc4680e 100644 --- a/docs/pages/api/popover.md +++ b/docs/pages/api/popover.md @@ -24,7 +24,7 @@ You can learn more about the difference by [reading our guide](/guides/minimizin | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| action | ref | | This is callback prop. It's called by the component on mount. This is useful when you want to trigger an action programmatically. It currently only supports updatePosition() action. | +| action | ref | | A ref for imperative actions. It currently only supports updatePosition() action. | | anchorEl | object
| func | | This is the DOM element, or a function that returns the DOM element, that may be used to set the position of the popover. | | anchorOrigin | { horizontal: number
| 'left'
| 'center'
| 'right', vertical: number
| 'top'
| 'center'
| 'bottom' } | { vertical: 'top', horizontal: 'left',} | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.
Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. | | anchorPosition | { left: number, top: number } | | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. | diff --git a/docs/pages/api/popper.md b/docs/pages/api/popper.md index 4793bbfe49211d..a29046fb9557bf 100644 --- a/docs/pages/api/popper.md +++ b/docs/pages/api/popper.md @@ -33,7 +33,7 @@ Poppers rely on the 3rd party library [Popper.js](https://github.com/FezVrasta/p | open * | bool | | If `true`, the popper is visible. | | placement | 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top' | 'bottom' | Popper placement. | | popperOptions | object | {} | Options provided to the [`popper.js`](https://github.com/FezVrasta/popper.js) instance. | -| popperRef | func
| object | | Callback fired when a new popper instance is used. | +| popperRef | ref | | A ref that points to the used popper instance. | | transition | bool | false | Help supporting a react-transition-group/Transition component. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api/radio.md b/docs/pages/api/radio.md index 2ae8e3ad5796b0..ae33e3408988cb 100644 --- a/docs/pages/api/radio.md +++ b/docs/pages/api/radio.md @@ -33,7 +33,7 @@ You can learn more about the difference by [reading our guide](/guides/minimizin | icon | node | | The icon to display when the component is unchecked. | | id | string | | The id of the `input` element. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | This prop can be used to pass a ref to the `input` element. | +| inputRef | ref | | Pass a ref to the `input` element. | | name | string | | Name attribute of the `input` element. | | onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). You can pull out the new checked state by accessing `event.target.checked` (boolean). | | required | bool | | If `true`, the `input` element will be required. | diff --git a/docs/pages/api/root-ref.md b/docs/pages/api/root-ref.md index aa2051e64b6797..c2e139dbcfd882 100644 --- a/docs/pages/api/root-ref.md +++ b/docs/pages/api/root-ref.md @@ -54,7 +54,7 @@ function MyComponent() { | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children * | element | | The wrapped element. | -| rootRef * | func
| object | | Provide a way to access the DOM node of the wrapped element. You can provide a callback ref or a `React.createRef()` ref. | +| rootRef * | refType.isRequired | | A ref that points to the first DOM node of the wrapped element. | The component cannot hold a ref. diff --git a/docs/pages/api/slider.md b/docs/pages/api/slider.md index a293dfcf816311..65e273f62e1a0d 100644 --- a/docs/pages/api/slider.md +++ b/docs/pages/api/slider.md @@ -28,6 +28,7 @@ You can learn more about the difference by [reading our guide](/guides/minimizin | aria-labelledby | string | | The id of the element containing a label for the slider. | | aria-valuetext | string | | A string value that provides a user-friendly name for the current value of the slider. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| color | 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | | component | elementType | 'span' | The component used for the root node. Either a string to use a DOM element or a component. | | defaultValue | number
| Array | | The default element value. Use when the component is not controlled. | | disabled | bool | false | If `true`, the slider will be disabled. | @@ -59,12 +60,16 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| | root | MuiSlider-root | Styles applied to the root element. +| colorPrimary | MuiSlider-colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | MuiSlider-colorSecondary | Styles applied to the root element if `color="secondary"`. | marked | MuiSlider-marked | Styles applied to the root element if `marks` is provided with at least one label. | vertical | MuiSlider-vertical | Pseudo-class applied to the root element if `orientation="vertical"`. | disabled | Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. | rail | MuiSlider-rail | Styles applied to the rail element. | track | MuiSlider-track | Styles applied to the track element. | thumb | MuiSlider-thumb | Styles applied to the thumb element. +| thumbColorPrimary | MuiSlider-thumbColorPrimary | Styles applied to the thumb element if `color="primary"`. +| thumbColorSecondary | MuiSlider-thumbColorSecondary | Styles applied to the thumb element if `color="secondary"`. | active | MuiSlider-active | Pseudo-class applied to the thumb element if it's active. | focusVisible | Mui-focusVisible | Pseudo-class applied to the thumb element if keyboard focused. | valueLabel | MuiSlider-valueLabel | Styles applied to the thumb label element. diff --git a/docs/pages/api/switch.md b/docs/pages/api/switch.md index c654ee8006df80..9284216fd4d1ac 100644 --- a/docs/pages/api/switch.md +++ b/docs/pages/api/switch.md @@ -34,7 +34,7 @@ You can learn more about the difference by [reading our guide](/guides/minimizin | icon | node | | The icon to display when the component is unchecked. | | id | string | | The id of the `input` element. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | This prop can be used to pass a ref to the `input` element. | +| inputRef | ref | | Pass a ref to the `input` element. | | onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). | | required | bool | | If `true`, the `input` element will be required. | | size | 'small'
| 'medium' | 'medium' | The size of the switch. `small` is equivalent to the dense switch styling. | diff --git a/docs/pages/api/tabs.md b/docs/pages/api/tabs.md index 28a45947081040..6649c78dcd1b62 100644 --- a/docs/pages/api/tabs.md +++ b/docs/pages/api/tabs.md @@ -24,7 +24,7 @@ You can learn more about the difference by [reading our guide](/guides/minimizin | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| action | func | | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `updateIndicator()` action.

**Signature:**
`function(actions: object) => void`
*actions:* This object contains all possible actions that can be triggered programmatically. | +| action | ref | | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `updateIndicator()` action. | | centered | bool | false | If `true`, the tabs will be centered. This property is intended for large views. | | children | node | | The content of the component. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | diff --git a/docs/pages/api/text-field.md b/docs/pages/api/text-field.md index 237430bd1c88e9..424207e4b4dc9a 100644 --- a/docs/pages/api/text-field.md +++ b/docs/pages/api/text-field.md @@ -66,7 +66,7 @@ For advanced cases, please look at the source of TextField by clicking on the | InputLabelProps | object | | Props applied to the [`InputLabel`](/api/input-label/) element. | | InputProps | object | | Props applied to the Input element. It will be a [`FilledInput`](/api/filled-input/), [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/) component depending on the `variant` prop value. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | -| inputRef | ref | | This prop can be used to pass a ref to the `input` element. | +| inputRef | ref | | Pass a ref to the `input` element. | | label | node | | The label content. | | margin | 'none'
| 'dense'
| 'normal' | | If `dense` or `normal`, will adjust vertical spacing of this and contained components. | | multiline | bool | | If `true`, a textarea element will be rendered instead of an input. | diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md index 7c70e46e9d1b60..ebd953b0f9844e 100644 --- a/docs/src/pages/components/autocomplete/autocomplete.md +++ b/docs/src/pages/components/autocomplete/autocomplete.md @@ -39,3 +39,12 @@ In the following example, we demonstrate how to use [react-autosuggest](https:// It's also using [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. {{"demo": "pages/components/autocomplete/IntegrationAutosuggest.js"}} + +## Complementary projects + +For more advanced use cases you might be able to take advantage of: + +- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): The chip input is used to allow selecting multiple text values. +- [mui-downshift](https://github.com/techniq/mui-downshift): A thin layer over paypal's downshift to use Material-UI visual components. +- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): A fuzzy-search component for React and Material-UI. +- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extend react-select with Material-UI. diff --git a/docs/src/pages/components/checkboxes/CustomizedCheckbox.js b/docs/src/pages/components/checkboxes/CustomizedCheckbox.js new file mode 100644 index 00000000000000..d0121e0b7b5d73 --- /dev/null +++ b/docs/src/pages/components/checkboxes/CustomizedCheckbox.js @@ -0,0 +1,74 @@ +import React from 'react'; +import clsx from 'clsx'; +import { makeStyles } from '@material-ui/core/styles'; +import Checkbox from '@material-ui/core/Checkbox'; + +const useStyles = makeStyles({ + root: { + '&:hover': { + backgroundColor: 'transparent', + }, + }, + icon: { + borderRadius: 3, + width: 16, + height: 16, + boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', + backgroundColor: '#f5f8fa', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', + '$root.Mui-focusVisible &': { + outline: '2px auto rgba(19,124,189,.6)', + outlineOffset: 2, + }, + 'input:hover ~ &': { + backgroundColor: '#ebf1f5', + }, + 'input:disabled ~ &': { + boxShadow: 'none', + background: 'rgba(206,217,224,.5)', + }, + }, + checkedIcon: { + backgroundColor: '#137cbd', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', + '&:before': { + display: 'block', + width: 16, + height: 16, + backgroundImage: + "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + + " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + + "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")", + content: '""', + }, + 'input:hover ~ &': { + backgroundColor: '#106ba3', + }, + }, +}); + +// Inspired by blueprintjs +function StyledCheckbox(props) { + const classes = useStyles(); + + return ( + } + icon={} + {...props} + /> + ); +} + +export default function CustomizedCheckbox() { + return ( +
+ + + +
+ ); +} diff --git a/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx b/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx new file mode 100644 index 00000000000000..7ba6cf2b113fc0 --- /dev/null +++ b/docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import clsx from 'clsx'; +import { makeStyles } from '@material-ui/core/styles'; +import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox'; + +const useStyles = makeStyles({ + root: { + '&:hover': { + backgroundColor: 'transparent', + }, + }, + icon: { + borderRadius: 3, + width: 16, + height: 16, + boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', + backgroundColor: '#f5f8fa', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', + '$root.Mui-focusVisible &': { + outline: '2px auto rgba(19,124,189,.6)', + outlineOffset: 2, + }, + 'input:hover ~ &': { + backgroundColor: '#ebf1f5', + }, + 'input:disabled ~ &': { + boxShadow: 'none', + background: 'rgba(206,217,224,.5)', + }, + }, + checkedIcon: { + backgroundColor: '#137cbd', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', + '&:before': { + display: 'block', + width: 16, + height: 16, + backgroundImage: + "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + + " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + + "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")", + content: '""', + }, + 'input:hover ~ &': { + backgroundColor: '#106ba3', + }, + }, +}); + +// Inspired by blueprintjs +function StyledCheckbox(props: CheckboxProps) { + const classes = useStyles(); + + return ( + } + icon={} + {...props} + /> + ); +} + +export default function CustomizedCheckbox() { + return ( +
+ + + +
+ ); +} diff --git a/docs/src/pages/components/checkboxes/checkboxes.md b/docs/src/pages/components/checkboxes/checkboxes.md index 664e5ceeaf7ac1..db5464a00589fb 100644 --- a/docs/src/pages/components/checkboxes/checkboxes.md +++ b/docs/src/pages/components/checkboxes/checkboxes.md @@ -31,6 +31,13 @@ You can change the placement of the label: {{"demo": "pages/components/checkboxes/FormControlLabelPosition.js"}} +## Customized checkbox + +Here is an example of customizing the component. You can learn more about this in the +[overrides documentation page](/customization/components/). + +{{"demo": "pages/components/checkboxes/CustomizedCheckbox.js"}} + ## Accessibility All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the `