[TextField] Migrate FilledInput to emotion

docs/pages/api-docs/filled-input.json

@@ -25,6 +25,7 @@
     "required": { "type": { "name": "bool" } },
     "rows": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
     "startAdornment": { "type": { "name": "node" } },
+    "sx": { "type": { "name": "object" } },
     "type": { "type": { "name": "string" }, "default": "'text'" },
     "value": { "type": { "name": "any" } }
   },
@@ -57,6 +58,6 @@
   "filename": "/packages/material-ui/src/FilledInput/FilledInput.js",
   "inheritance": { "component": "InputBase", "pathname": "/api/input-base/" },
   "demos": "<ul><li><a href=\"/components/text-fields/\">Text Fields</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/input-base.json

@@ -4,6 +4,11 @@
     "autoFocus": { "type": { "name": "bool" } },
     "classes": { "type": { "name": "object" } },
     "color": { "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" } },
+    "components": {
+      "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" },
+      "default": "{}"
+    },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
     "endAdornment": { "type": { "name": "node" } },

docs/translations/api-docs/filled-input/filled-input.json

@@ -26,6 +26,7 @@
     "required": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
     "rows": "Number of rows to display when multiline option is set to true.",
     "startAdornment": "Start <code>InputAdornment</code> for this component.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
     "type": "Type of the <code>input</code> element. It should be <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types\">a valid HTML5 input type</a>.",
     "value": "The value of the <code>input</code> element, required for a controlled component."
   },

docs/translations/api-docs/input-base/input-base.json

@@ -5,6 +5,8 @@
     "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "color": "The color of the component. It supports those theme colors that make sense for this component. The prop defaults to the value (<code>&#39;primary&#39;</code>) inherited from the parent FormControl component.",
+    "components": "The components used for each slot inside the InputBase. Either a string to use a HTML element or a component.",
+    "componentsProps": "The props used for each slot inside the Input.",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
     "endAdornment": "End <code>InputAdornment</code> for this component.",

packages/material-ui/src/FilledInput/FilledInput.d.ts

@@ -1,4 +1,5 @@
-import { InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { InternalStandardProps as StandardProps, Theme } from '..';
 import { InputBaseProps } from '../InputBase';
 
 export interface FilledInputProps extends StandardProps<InputBaseProps> {
@@ -45,6 +46,10 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
    * If `true`, the input will not have an underline.
    */
   disableUnderline?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export type FilledInputClassKey = keyof NonNullable<FilledInputProps['classes']>;

packages/material-ui/src/FilledInput/FilledInput.js

@@ -1,48 +1,67 @@
 import * as React from 'react';
+import { deepmerge, refType } from '@material-ui/utils';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { refType } from '@material-ui/utils';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
 import InputBase from '../InputBase';
-import withStyles from '../styles/withStyles';
+import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
+import { getFilledInputUtilityClass } from './filledInputClasses';
+import {
+  overridesResolver as inputBaseOverridesResolver,
+  InputBaseRoot,
+  InputBaseComponent as InputBaseInput,
+} from '../InputBase/InputBase';
 
-export const styles = (theme) => {
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+  return deepmerge(inputBaseOverridesResolver(props, styles), {
+    ...(!styleProps.disableUnderline && styles.undeline),
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes, disableUnderline } = styleProps;
+
+  const slots = {
+    root: ['root', !disableUnderline && 'underline'],
+    input: ['input'],
+  };
+
+  return composeClasses(slots, getFilledInputUtilityClass, classes);
+};
+
+const FilledInputRoot = experimentalStyled(
+  InputBaseRoot,
+  { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' },
+  { name: 'MuiFilledInput', slot: 'Root', overridesResolver },
+)(({ theme, styleProps }) => {
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)';
-
   return {
     /* Styles applied to the root element. */
-    root: {
-      position: 'relative',
-      backgroundColor,
-      borderTopLeftRadius: theme.shape.borderRadius,
-      borderTopRightRadius: theme.shape.borderRadius,
-      transition: theme.transitions.create('background-color', {
-        duration: theme.transitions.duration.shorter,
-        easing: theme.transitions.easing.easeOut,
-      }),
-      '&:hover': {
-        backgroundColor: light ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)',
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor,
-        },
-      },
-      '&$focused': {
-        backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)',
-      },
-      '&$disabled': {
-        backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
+    position: 'relative',
+    backgroundColor,
+    borderTopLeftRadius: theme.shape.borderRadius,
+    borderTopRightRadius: theme.shape.borderRadius,
+    transition: theme.transitions.create('background-color', {
+      duration: theme.transitions.duration.shorter,
+      easing: theme.transitions.easing.easeOut,
+    }),
+    '&:hover': {
+      backgroundColor: light ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)',
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor,
       },
     },
-    /* Styles applied to the root element if color secondary. */
-    colorSecondary: {
-      '&$underline:after': {
-        borderBottomColor: theme.palette.secondary.main,
-      },
+    '&.Mui-focused': {
+      backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)',
+    },
+    '&.Mui-disabled': {
+      backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
     },
-    /* Styles applied to the root element unless `disableUnderline={true}`. */
-    underline: {
+    ...(!styleProps.disableUnderline && {
       '&:after': {
         borderBottom: `2px solid ${theme.palette.primary.main}`,
         left: 0,
@@ -57,11 +76,14 @@ export const styles = (theme) => {
           easing: theme.transitions.easing.easeOut,
         }),
         pointerEvents: 'none', // Transparent to the hover style.
+        ...(styleProps.color === 'secondary' && {
+          borderBottomColor: theme.palette.secondary.main,
+        }),
       },
-      '&$focused:after': {
+      '&.Mui-focused:after': {
         transform: 'scaleX(1)',
       },
-      '&$error:after': {
+      '&.Mui-error:after': {
         borderBottomColor: theme.palette.error.main,
         transform: 'scaleX(1)', // error is always underlined in red
       },
@@ -78,109 +100,106 @@ export const styles = (theme) => {
         }),
         pointerEvents: 'none', // Transparent to the hover style.
       },
-      '&:hover:not($disabled):before': {
+      '&:hover:not(.Mui-disabled):before': {
         borderBottom: `1px solid ${theme.palette.text.primary}`,
       },
-      '&$disabled:before': {
+      '&.Mui-disabled:before': {
         borderBottomStyle: 'dotted',
       },
-    },
-    /* Pseudo-class applied to the root element if the component is focused. */
-    focused: {},
-    /* Pseudo-class applied to the root element if `disabled={true}`. */
-    disabled: {},
-    /* Styles applied to the root element if `startAdornment` is provided. */
-    adornedStart: {
+    }),
+    ...(styleProps.startAdornment && {
       paddingLeft: 12,
-    },
-    /* Styles applied to the root element if `endAdornment` is provided. */
-    adornedEnd: {
+    }),
+    ...(styleProps.endAdornment && {
       paddingRight: 12,
-    },
-    /* Pseudo-class applied to the root element if `error={true}`. */
-    error: {},
-    /* Styles applied to the input element if `size="small"`. */
-    sizeSmall: {},
-    /* Styles applied to the root element if `multiline={true}`. */
-    multiline: {
+    }),
+    ...(styleProps.multiline && {
       padding: '25px 12px 8px',
-      '&$sizeSmall': {
+      ...(styleProps.size === 'small' && {
         paddingTop: 21,
         paddingBottom: 4,
-      },
-      '&$hiddenLabel': {
+      }),
+      ...(styleProps.hiddenLabel && {
         paddingTop: 16,
         paddingBottom: 17,
-      },
-    },
-    /* Styles applied to the root element if `hiddenLabel={true}`. */
-    hiddenLabel: {},
-    /* Styles applied to the input element. */
-    input: {
-      padding: '25px 12px 8px',
-      '&:-webkit-autofill': {
-        WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
-        WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-        caretColor: theme.palette.mode === 'light' ? null : '#fff',
-        borderTopLeftRadius: 'inherit',
-        borderTopRightRadius: 'inherit',
-      },
-    },
-    /* Styles applied to the input element if `size="small"`. */
-    inputSizeSmall: {
-      paddingTop: 21,
-      paddingBottom: 4,
-    },
-    /* Styles applied to the `input` if in `<FormControl hiddenLabel />`. */
-    inputHiddenLabel: {
-      paddingTop: 16,
-      paddingBottom: 17,
-      '&$inputSizeSmall': {
-        paddingTop: 8,
-        paddingBottom: 9,
-      },
-    },
-    /* Styles applied to the input element if `multiline={true}`. */
-    inputMultiline: {
-      padding: 0,
-    },
-    /* Styles applied to the input element if `startAdornment` is provided. */
-    inputAdornedStart: {
-      paddingLeft: 0,
-    },
-    /* Styles applied to the input element if `endAdornment` is provided. */
-    inputAdornedEnd: {
-      paddingRight: 0,
-    },
+      }),
+    }),
   };
-};
+});
+
+const FilledInputInput = experimentalStyled(
+  InputBaseInput,
+  { shouldForwardProp: (prop) => shouldForwardProp(prop) || prop === 'classes' },
+  { name: 'MuiFilledInput', slot: 'Input' },
+)(({ theme, styleProps }) => ({
+  padding: '25px 12px 8px',
+  '&:-webkit-autofill': {
+    WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
+    WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
+    caretColor: theme.palette.mode === 'light' ? null : '#fff',
+    borderTopLeftRadius: 'inherit',
+    borderTopRightRadius: 'inherit',
+  },
+  ...(styleProps.size === 'small' && {
+    paddingTop: 21,
+    paddingBottom: 4,
+  }),
+  ...(styleProps.hiddenLabel && {
+    paddingTop: 16,
+    paddingBottom: 17,
+  }),
+  /* Styles applied to the input element if `multiline={true}`. */
+  ...(styleProps.multiline && {
+    padding: 0,
+  }),
+  /* Styles applied to the input element if `startAdornment` is provided. */
+  ...(styleProps.startAdornment && {
+    paddingLeft: 0,
+  }),
+  /* Styles applied to the input element if `endAdornment` is provided. */
+  ...(styleProps.endAdornment && {
+    paddingRight: 0,
+  }),
+  ...(styleProps.hiddenLabel &&
+    styleProps.size === 'small' && {
+      paddingTop: 8,
+      paddingBottom: 9,
+    }),
+}));
+
+const FilledInput = React.forwardRef(function FilledInput(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiFilledInput' });
 
-const FilledInput = React.forwardRef(function FilledInput(props, ref) {
   const {
     disableUnderline,
-    classes,
     fullWidth = false,
     inputComponent = 'input',
     multiline = false,
     type = 'text',
     ...other
   } = props;
 
+  const styleProps = {
+    ...other,
+    fullWidth,
+    inputComponent,
+    multiline,
+    type,
+  };
+
+  const classes = useUtilityClasses(props);
+
   return (
     <InputBase
-      classes={{
-        ...classes,
-        root: clsx(classes.root, {
-          [classes.underline]: !disableUnderline,
-        }),
-        underline: null,
-      }}
+      components={{ Root: FilledInputRoot, Input: FilledInputInput }}
+      componentsProps={{ root: { styleProps }, input: { styleProps } }}
       fullWidth={fullWidth}
       inputComponent={inputComponent}
       multiline={multiline}
       ref={ref}
       type={type}
       {...other}
+      classes={classes}
     />
   );
 });
@@ -307,6 +326,10 @@ FilledInput.propTypes = {
    * Start `InputAdornment` for this component.
    */
   startAdornment: PropTypes.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
    * @default 'text'
@@ -320,4 +343,4 @@ FilledInput.propTypes = {
 
 FilledInput.muiName = 'Input';
 
-export default withStyles(styles, { name: 'MuiFilledInput' })(FilledInput);
+export default FilledInput;