[material] Add missing classes for Slider InputLabel InputBase …

…`Radio` (mui#38401)
mnajdova · Sep 8, 2023 · 7acf90e · 7acf90e
1 parent 60b1b18
commit 7acf90e
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 5 deletions.
diff --git a/docs/pages/material-ui/api/radio.json b/docs/pages/material-ui/api/radio.json
@@ -44,7 +44,7 @@
   "name": "Radio",
   "imports": ["import Radio from '@mui/material/Radio';", "import { Radio } from '@mui/material';"],
   "styles": {
-    "classes": ["root", "checked", "disabled", "colorPrimary", "colorSecondary"],
+    "classes": ["root", "checked", "disabled", "colorPrimary", "colorSecondary", "sizeSmall"],
     "globalClasses": { "checked": "Mui-checked", "disabled": "Mui-disabled" },
     "name": "MuiRadio"
   },

diff --git a/docs/translations/api-docs/radio/radio.json b/docs/translations/api-docs/radio/radio.json
@@ -54,6 +54,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"secondary\"</code>"
+    },
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code>"
     }
   }
 }
diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
@@ -78,7 +78,7 @@ const useUtilityClasses = (ownerState) => {
       fullWidth && 'fullWidth',
       focused && 'focused',
       formControl && 'formControl',
-      size === 'small' && 'sizeSmall',
+      size && size !== 'medium' && `size${capitalize(size)}`,
       multiline && 'multiline',
       startAdornment && 'adornedStart',
       endAdornment && 'adornedEnd',

diff --git a/packages/mui-material/src/InputLabel/InputLabel.js b/packages/mui-material/src/InputLabel/InputLabel.js
@@ -7,6 +7,7 @@ import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
 import FormLabel, { formLabelClasses } from '../FormLabel';
 import useThemeProps from '../styles/useThemeProps';
+import capitalize from '../utils/capitalize';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import { getInputLabelUtilityClasses } from './inputLabelClasses';
 
@@ -18,7 +19,7 @@ const useUtilityClasses = (ownerState) => {
       formControl && 'formControl',
       !disableAnimation && 'animated',
       shrink && 'shrink',
-      size === 'small' && 'sizeSmall',
+      size && size !== 'normal' && `size${capitalize(size)}`,
       variant,
     ],
     asterisk: [required && 'asterisk'],

diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
@@ -15,10 +15,10 @@ import radioClasses, { getRadioUtilityClass } from './radioClasses';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, color } = ownerState;
+  const { classes, color, size } = ownerState;
 
   const slots = {
-    root: ['root', `color${capitalize(color)}`],
+    root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`],
   };
 
   return {

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

diff --git a/packages/mui-material/src/Radio/radioClasses.ts b/packages/mui-material/src/Radio/radioClasses.ts
@@ -12,6 +12,8 @@ export interface RadioClasses {
   colorPrimary: string;
   /** Styles applied to the root element if `color="secondary"`. */
   colorSecondary: string;
+  /** Styles applied to the root element if `size="small"`. */
+  sizeSmall: string;
 }
 
 export type RadioClassKey = keyof RadioClasses;
@@ -26,6 +28,7 @@ const radioClasses: RadioClasses = generateUtilityClasses('MuiRadio', [
   'disabled',
   'colorPrimary',
   'colorSecondary',
+  'sizeSmall',
 ]);
 
 export default radioClasses;