[Checkbox][material] Add size classes (#38182)

mui · Aug 2, 2023 · a18f64a · a18f64a
1 parent 2deea34
commit a18f64a
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 9 deletions.
diff --git a/docs/pages/material-ui/api/checkbox.json b/docs/pages/material-ui/api/checkbox.json
@@ -45,7 +45,16 @@
   },
   "name": "Checkbox",
   "styles": {
-    "classes": ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary"],
+    "classes": [
+      "root",
+      "checked",
+      "disabled",
+      "indeterminate",
+      "colorPrimary",
+      "colorSecondary",
+      "sizeSmall",
+      "sizeMedium"
+    ],
     "globalClasses": { "checked": "Mui-checked", "disabled": "Mui-disabled" },
     "name": "MuiCheckbox"
   },

diff --git a/docs/translations/api-docs/checkbox/checkbox.json b/docs/translations/api-docs/checkbox/checkbox.json
@@ -44,7 +44,7 @@
     }
   },
   "classDescriptions": {
-    "root": { "description": "Styles applied to the root element." },
+    "root": { "description": "Class name applied to the root element." },
     "checked": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -61,14 +61,24 @@
       "conditions": "<code>indeterminate={true}</code>"
     },
     "colorPrimary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
     "colorSecondary": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"secondary\"</code>"
+    },
+    "sizeSmall": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
+    "sizeMedium": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code>"
     }
   }
 }
diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js
@@ -15,10 +15,15 @@ import styled, { rootShouldForwardProp } from '../styles/styled';
 import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, indeterminate, color } = ownerState;
+  const { classes, indeterminate, color, size } = ownerState;
 
   const slots = {
-    root: ['root', indeterminate && 'indeterminate', `color${capitalize(color)}`],
+    root: [
+      'root',
+      indeterminate && 'indeterminate',
+      `color${capitalize(color)}`,
+      `size${capitalize(size)}`,
+    ],
   };
 
   const composedClasses = composeClasses(slots, getCheckboxUtilityClass, classes);

diff --git a/packages/mui-material/src/Checkbox/Checkbox.test.js b/packages/mui-material/src/Checkbox/Checkbox.test.js
@@ -66,6 +66,32 @@ describe('<Checkbox />', () => {
     });
   });
 
+  describe('prop: size', () => {
+    it('add sizeSmall class to the root element when the size prop equals "small"', () => {
+      const { getByRole } = render(<Checkbox size="small" />);
+      const checkbox = getByRole('checkbox');
+      const root = checkbox.parentElement;
+
+      expect(root).to.have.class(classes.sizeSmall);
+    });
+
+    it('add sizeMedium class to the root element when the size prop equals "medium"', () => {
+      const { getByRole } = render(<Checkbox size="medium" />);
+      const checkbox = getByRole('checkbox');
+      const root = checkbox.parentElement;
+
+      expect(root).to.have.class(classes.sizeMedium);
+    });
+
+    it('add sizeMedium class to the root element when the size is not expplicitly provided', () => {
+      const { getByRole } = render(<Checkbox />);
+      const checkbox = getByRole('checkbox');
+      const root = checkbox.parentElement;
+
+      expect(root).to.have.class(classes.sizeMedium);
+    });
+  });
+
   describe('with FormControl', () => {
     describe('enabled', () => {
       it('should not have the disabled class', () => {

diff --git a/packages/mui-material/src/Checkbox/checkboxClasses.ts b/packages/mui-material/src/Checkbox/checkboxClasses.ts
@@ -2,18 +2,22 @@ import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/
 import generateUtilityClass from '../generateUtilityClass';
 
 export interface CheckboxClasses {
-  /** Styles applied to the root element. */
+  /** Class name applied to the root element. */
   root: string;
   /** State class applied to the root element if `checked={true}`. */
   checked: string;
   /** State class applied to the root element if `disabled={true}`. */
   disabled: string;
   /** State class applied to the root element if `indeterminate={true}`. */
   indeterminate: string;
-  /** Styles applied to the root element if `color="primary"`. */
+  /** State class applied to the root element if `color="primary"`. */
   colorPrimary: string;
-  /** Styles applied to the root element if `color="secondary"`. */
+  /** State class applied to the root element if `color="secondary"`. */
   colorSecondary: string;
+  /** State class applied to the root element if `size="small"`. */
+  sizeSmall: string;
+  /** State class applied to the root element if `size="medium"`. */
+  sizeMedium: string;
 }
 
 export type CheckboxClassKey = keyof CheckboxClasses;
@@ -29,6 +33,8 @@ const checkboxClasses: CheckboxClasses = generateUtilityClasses('MuiCheckbox', [
   'indeterminate',
   'colorPrimary',
   'colorSecondary',
+  'sizeSmall',
+  'sizeMedium',
 ]);
 
 export default checkboxClasses;