restore-few-classes

mui · May 9, 2024 · 5e28613 · 5e28613
1 parent 1fba791
commit 5e28613
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 7 deletions.
diff --git a/docs/pages/material-ui/api/filled-input.json b/docs/pages/material-ui/api/filled-input.json
@@ -69,6 +69,18 @@
     "import { FilledInput } from '@mui/material';"
   ],
   "classes": [
+    {
+      "key": "adornedEnd",
+      "className": "MuiFilledInput-adornedEnd",
+      "description": "Styles applied to the root element if `endAdornment` is provided.",
+      "isGlobal": false
+    },
+    {
+      "key": "adornedStart",
+      "className": "MuiFilledInput-adornedStart",
+      "description": "Styles applied to the root element if `startAdornment` is provided.",
+      "isGlobal": false
+    },
     {
       "key": "colorSecondary",
       "className": "MuiFilledInput-colorSecondary",
@@ -105,12 +117,24 @@
       "description": "Styles applied to the input element.",
       "isGlobal": false
     },
+    {
+      "key": "multiline",
+      "className": "MuiFilledInput-multiline",
+      "description": "Styles applied to the root element if `multiline={true}`.",
+      "isGlobal": false
+    },
     {
       "key": "root",
       "className": "MuiFilledInput-root",
       "description": "Styles applied to the root element.",
       "isGlobal": false
     },
+    {
+      "key": "sizeSmall",
+      "className": "MuiFilledInput-sizeSmall",
+      "description": "Styles applied to the root element if `size=\"small\"`.",
+      "isGlobal": false
+    },
     {
       "key": "underline",
       "className": "MuiFilledInput-underline",

diff --git a/docs/translations/api-docs/filled-input/filled-input.json b/docs/translations/api-docs/filled-input/filled-input.json
@@ -91,6 +91,16 @@
     }
   },
   "classDescriptions": {
+    "adornedEnd": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>endAdornment</code> is provided"
+    },
+    "adornedStart": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>startAdornment</code> is provided"
+    },
     "colorSecondary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -117,7 +127,17 @@
       "conditions": "<code>hiddenLabel={true}</code>"
     },
     "input": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the input element" },
+    "multiline": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>multiline={true}</code>"
+    },
     "root": { "description": "Styles applied to the root element." },
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
     "underline": {
       "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
       "nodeName": "the root element",

diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js
@@ -14,12 +14,22 @@ import {
   InputBaseRoot,
   InputBaseComponent as InputBaseInput,
 } from '../InputBase/InputBase';
+import { capitalize } from '../utils';
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, disableUnderline } = ownerState;
+  const { classes, disableUnderline, startAdornment, endAdornment, size, hiddenLabel, multiline } =
+    ownerState;
 
   const slots = {
-    root: ['root', !disableUnderline && 'underline'],
+    root: [
+      'root',
+      !disableUnderline && 'underline',
+      startAdornment && 'adornedStart',
+      endAdornment && 'adornedEnd',
+      size === 'small' && `size${capitalize(size)}`,
+      hiddenLabel && 'hiddenLabel',
+      multiline && 'multiline',
+    ],
     input: ['input'],
   };
 

diff --git a/packages/mui-material/src/FilledInput/FilledInput.test.js b/packages/mui-material/src/FilledInput/FilledInput.test.js
@@ -87,14 +87,22 @@ describe('<FilledInput />', () => {
       />,
     );
 
-    expect(document.querySelector('.MuiFilledInput-sizeSmall')).to.equal(null);
-    expect(document.querySelector('.MuiFilledInput-multiline')).to.equal(null);
-    expect(document.querySelector('.MuiFilledInput-adornedEnd')).to.equal(null);
-    expect(document.querySelector('.MuiFilledInput-adornedStart')).to.equal(null);
     expect(document.querySelector('.MuiFilledInput-inputSizeSmall')).to.equal(null);
     expect(document.querySelector('.MuiFilledInput-inputMultiline')).to.equal(null);
     expect(document.querySelector('.MuiFilledInput-inputAdornedStart')).to.equal(null);
     expect(document.querySelector('.MuiFilledInput-inputAdornedEnd')).to.equal(null);
     expect(document.querySelector('.MuiFilledInput-inputTypeSearch')).to.equal(null);
   });
+
+  it('should have following classes', () => {
+    const { container } = render(
+      <FilledInput hiddenLabel multiline size="small" startAdornment="start" endAdornment="end" />,
+    );
+    const root = container.firstChild;
+    expect(root).to.have.class(classes.hiddenLabel);
+    expect(root).to.have.class(classes.multiline);
+    expect(root).to.have.class(classes.sizeSmall);
+    expect(root).to.have.class(classes.adornedEnd);
+    expect(root).to.have.class(classes.adornedStart);
+  });
 });
diff --git a/packages/mui-material/src/FilledInput/filledInputClasses.ts b/packages/mui-material/src/FilledInput/filledInputClasses.ts
@@ -13,8 +13,16 @@ export interface FilledInputClasses {
   focused: string;
   /** State class applied to the root element if `disabled={true}`. */
   disabled: string;
+  /** Styles applied to the root element if `startAdornment` is provided. */
+  adornedStart: string;
+  /** Styles applied to the root element if `endAdornment` is provided. */
+  adornedEnd: string;
   /** State class applied to the root element if `error={true}`. */
   error: string;
+  /** Styles applied to the root element if `size="small"`. */
+  sizeSmall: string;
+  /** Styles applied to the root element if `multiline={true}`. */
+  multiline: string;
   /** Styles applied to the root element if `hiddenLabel={true}`. */
   hiddenLabel: string;
   /** Styles applied to the input element. */
@@ -29,7 +37,16 @@ export function getFilledInputUtilityClass(slot: string): string {
 
 const filledInputClasses: FilledInputClasses = {
   ...inputBaseClasses,
-  ...generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']),
+  ...generateUtilityClasses('MuiFilledInput', [
+    'root',
+    'underline',
+    'input',
+    'adornedStart',
+    'adornedEnd',
+    'sizeSmall',
+    'multiline',
+    'hiddenLabel',
+  ]),
 };
 
 export default filledInputClasses;