[Checkbox] Add size prop

mui · Dec 7, 2019 · 3ebeb50 · 3ebeb50
1 parent 6ca3b34
commit 3ebeb50
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 94 deletions.
diff --git a/docs/pages/api/checkbox.md b/docs/pages/api/checkbox.md
@@ -38,6 +38,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">inputRef</span> | <span class="prop-type">ref</span> | | Pass a ref to the `input` element. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> | | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). |
 | <span class="prop-name">required</span> | <span class="prop-type">bool</span> | | If `true`, the `input` element will be required. |
+| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> | <span class="prop-default">'medium'</span> | The size of the checkbox. `small` is equivalent to the dense checkbox styling. |
 | <span class="prop-name">type</span> | <span class="prop-type">string</span> | | The input component prop `type`. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> | | The value of the component. The DOM API casts this to a string. |
 

diff --git a/docs/src/pages/components/checkboxes/Checkboxes.js b/docs/src/pages/components/checkboxes/Checkboxes.js
@@ -2,72 +2,51 @@ import React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 
 export default function Checkboxes() {
- const [state, setState] = React.useState({
- checkedA: true,
- checkedB: true,
- checkedF: true,
- });
+ const [checked, setChecked] = React.useState(true);
 
- const handleChange = name => event => {
- setState({ ...state, [name]: event.target.checked });
+ const handleChange = event => {
+ setChecked(event.target.checked);
  };
 
  return (
  <div>
  <Checkbox
- checked={state.checkedA}
- onChange={handleChange('checkedA')}
- value="checkedA"
- inputProps={{
- 'aria-label': 'primary checkbox',
- }}
+ checked={checked}
+ onChange={handleChange}
+ value="primary"
+ inputProps={{ 'aria-label': 'primary checkbox' }}
  />
  <Checkbox
- checked={state.checkedB}
- onChange={handleChange('checkedB')}
- value="checkedB"
+ defaultChecked
+ value="secondary"
  color="primary"
- inputProps={{
- 'aria-label': 'secondary checkbox',
- }}
- />
- <Checkbox
- value="checkedC"
- inputProps={{
- 'aria-label': 'uncontrolled-checkbox',
- }}
- />
- <Checkbox
- disabled
- value="checkedD"
- inputProps={{
- 'aria-label': 'disabled checkbox',
- }}
+ inputProps={{ 'aria-label': 'secondary checkbox' }}
  />
+ <Checkbox value="uncontrolled" inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
+ <Checkbox disabled value="disabled" inputProps={{ 'aria-label': 'disabled checkbox' }} />
  <Checkbox
  disabled
  checked
- value="checkedE"
- inputProps={{
- 'aria-label': 'disabled checked checkbox',
- }}
+ value="disabled checked"
+ inputProps={{ 'aria-label': 'disabled checked checkbox' }}
  />
  <Checkbox
- checked={state.checkedF}
- onChange={handleChange('checkedF')}
- value="checkedF"
+ defaultChecked
+ value="indeterminate"
  indeterminate
- inputProps={{
- 'aria-label': 'indeterminate checkbox',
- }}
+ inputProps={{ 'aria-label': 'indeterminate checkbox' }}
  />
  <Checkbox
  defaultChecked
  color="default"
- value="checkedG"
- inputProps={{
- 'aria-label': 'checkbox with default color',
- }}
+ value="default"
+ inputProps={{ 'aria-label': 'checkbox with default color' }}
+ />
+ <Checkbox
+ defaultChecked
+ size="small"
+ value="small"
+ inputProps={{ 'aria-label': 'checkbox with small size' }}
  />
  </div>
  );

diff --git a/docs/src/pages/components/checkboxes/Checkboxes.tsx b/docs/src/pages/components/checkboxes/Checkboxes.tsx
@@ -2,72 +2,51 @@ import React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 
 export default function Checkboxes() {
- const [state, setState] = React.useState({
- checkedA: true,
- checkedB: true,
- checkedF: true,
- });
+ const [checked, setChecked] = React.useState(true);
 
- const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
- setState({ ...state, [name]: event.target.checked });
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ setChecked(event.target.checked);
  };
 
  return (
  <div>
  <Checkbox
- checked={state.checkedA}
- onChange={handleChange('checkedA')}
- value="checkedA"
- inputProps={{
- 'aria-label': 'primary checkbox',
- }}
+ checked={checked}
+ onChange={handleChange}
+ value="primary"
+ inputProps={{ 'aria-label': 'primary checkbox' }}
  />
  <Checkbox
- checked={state.checkedB}
- onChange={handleChange('checkedB')}
- value="checkedB"
+ defaultChecked
+ value="secondary"
  color="primary"
- inputProps={{
- 'aria-label': 'secondary checkbox',
- }}
- />
- <Checkbox
- value="checkedC"
- inputProps={{
- 'aria-label': 'uncontrolled-checkbox',
- }}
- />
- <Checkbox
- disabled
- value="checkedD"
- inputProps={{
- 'aria-label': 'disabled checkbox',
- }}
+ inputProps={{ 'aria-label': 'secondary checkbox' }}
  />
+ <Checkbox value="uncontrolled" inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
+ <Checkbox disabled value="disabled" inputProps={{ 'aria-label': 'disabled checkbox' }} />
  <Checkbox
  disabled
  checked
- value="checkedE"
- inputProps={{
- 'aria-label': 'disabled checked checkbox',
- }}
+ value="disabled checked"
+ inputProps={{ 'aria-label': 'disabled checked checkbox' }}
  />
  <Checkbox
- checked={state.checkedF}
- onChange={handleChange('checkedF')}
- value="checkedF"
+ defaultChecked
+ value="indeterminate"
  indeterminate
- inputProps={{
- 'aria-label': 'indeterminate checkbox',
- }}
+ inputProps={{ 'aria-label': 'indeterminate checkbox' }}
  />
  <Checkbox
  defaultChecked
  color="default"
- value="checkedG"
- inputProps={{
- 'aria-label': 'checkbox with default color',
- }}
+ value="default"
+ inputProps={{ 'aria-label': 'checkbox with default color' }}
+ />
+ <Checkbox
+ defaultChecked
+ size="small"
+ value="small"
+ inputProps={{ 'aria-label': 'checkbox with small size' }}
  />
  </div>
  );

diff --git a/packages/material-ui/src/Checkbox/Checkbox.d.ts b/packages/material-ui/src/Checkbox/Checkbox.d.ts
@@ -9,6 +9,7 @@ export interface CheckboxProps
  icon?: React.ReactNode;
  indeterminate?: boolean;
  indeterminateIcon?: React.ReactNode;
+ size?: 'small' | 'medium';
 }
 
 export type CheckboxClassKey =

diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js
@@ -69,13 +69,13 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
  indeterminate = false,
  indeterminateIcon = defaultIndeterminateIcon,
  inputProps,
+ size = 'medium',
  ...other
  } = props;
 
  return (
  <SwitchBase
  type="checkbox"
- checkedIcon={indeterminate ? indeterminateIcon : checkedIcon}
  classes={{
  root: clsx(classes.root, classes[`color${capitalize(color)}`], {
  [classes.indeterminate]: indeterminate,
@@ -88,7 +88,12 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
  'data-indeterminate': indeterminate,
  ...inputProps,
  }}
- icon={indeterminate ? indeterminateIcon : icon}
+ icon={React.cloneElement(indeterminate ? indeterminateIcon : icon, {
+ fontSize: size === 'small' ? 'small' : 'default',
+ })}
+ checkedIcon={React.cloneElement(indeterminate ? indeterminateIcon : checkedIcon, {
+ fontSize: size === 'small' ? 'small' : 'default',
+ })}
  ref={ref}
  disabled={disabled}
  {...other}
@@ -160,6 +165,11 @@ Checkbox.propTypes = {
  * If `true`, the `input` element will be required.
  */
  required: PropTypes.bool,
+ /**
+ * The size of the checkbox.
+ * `small` is equivalent to the dense checkbox styling.
+ */
+ size: PropTypes.oneOf(['small', 'medium']),
  /**
  * The input component prop `type`.
  */