[OutlinedInput] Improve customization

.circleci/config.yml

@@ -208,7 +208,7 @@ jobs:
           # From https://github.com/GoogleChrome/puppeteer/blob/811415bc8c47f7882375629b57b3fe186ad61ed4/docs/troubleshooting.md#chrome-headless-doesnt-launch
           command: |
             sudo apt-get update
-            sudo apt-get install -y gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
+            sudo apt-get install -y --force-yes gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
       - run:
           name: Tests real browsers
           command: yarn test:karma

docs/src/pages/demos/text-fields/CustomizedInputs.js

@@ -28,6 +28,12 @@ const styles = theme => ({
       borderBottomColor: purple[500],
     },
   },
+  cssOutlinedInput: {
+    '&$cssFocused $notchedOutline': {
+      borderColor: purple[500],
+    },
+  },
+  notchedOutline: {},
   bootstrapRoot: {
     'label + &': {
       marginTop: theme.spacing.unit * 3,
@@ -77,26 +83,51 @@ function CustomizedInputs(props) {
     <div className={classes.container}>
       <FormControl className={classes.margin}>
         <InputLabel
-          htmlFor="custom-css-input"
-          FormLabelClasses={{
+          htmlFor="custom-css-standard-input"
+          classes={{
             root: classes.cssLabel,
             focused: classes.cssFocused,
           }}
         >
           Custom CSS
         </InputLabel>
         <Input
-          id="custom-css-input"
+          id="custom-css-standard-input"
           classes={{
             underline: classes.cssUnderline,
           }}
         />
       </FormControl>
+      <TextField
+        className={classes.margin}
+        InputLabelProps={{
+          classes: {
+            root: classes.cssLabel,
+            focused: classes.cssFocused,
+          },
+        }}
+        InputProps={{
+          classes: {
+            root: classes.cssOutlinedInput,
+            focused: classes.cssFocused,
+            notchedOutline: classes.notchedOutline,
+          },
+        }}
+        label="Custom CSS"
+        variant="outlined"
+        id="custom-css-outlined-input"
+      />
       <MuiThemeProvider theme={theme}>
         <TextField
           className={classes.margin}
           label="MuiThemeProvider"
-          id="mui-theme-provider-input"
+          id="mui-theme-provider-standard-input"
+        />
+        <TextField
+          className={classes.margin}
+          label="MuiThemeProvider"
+          variant="outlined"
+          id="mui-theme-provider-outlined-input"
         />
       </MuiThemeProvider>
       <FormControl className={classes.margin}>

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

@@ -12,6 +12,14 @@ export const styles = theme => ({
   root: {
     transformOrigin: 'top left',
   },
+  /* Styles applied to the root element if `focused={true}`. */
+  focused: {},
+  /* Styles applied to the root element if `disabled={true}`. */
+  disabled: {},
+  /* Styles applied to the root element if `error={true}`. */
+  error: {},
+  /* Styles applied to the root element if `required={true}`. */
+  required: {},
   /* Styles applied to the root element if the component is a descendant of `FormControl`. */
   formControl: {
     position: 'absolute',
@@ -111,7 +119,18 @@ function InputLabel(props, context) {
   );
 
   return (
-    <FormLabel data-shrink={shrink} className={className} classes={FormLabelClasses} {...other}>
+    <FormLabel
+      data-shrink={shrink}
+      className={className}
+      classes={{
+        focused: classes.focused,
+        disabled: classes.disabled,
+        error: classes.error,
+        required: classes.required,
+        ...FormLabelClasses,
+      }}
+      {...other}
+    >
       {children}
     </FormLabel>
   );

packages/material-ui/src/OutlinedInput/NotchedOutline.js

@@ -12,10 +12,9 @@ export const styles = theme => {
     /* Styles applied to the root element. */
     root: {
       position: 'absolute',
-      width: '100%',
-      height: '100%',
-      boxSizing: 'border-box',
-      top: 0,
+      bottom: 0,
+      right: 0,
+      top: -5,
       left: 0,
       margin: 0,
       padding: 0,
@@ -34,6 +33,7 @@ export const styles = theme => {
     legend: {
       textAlign: 'left',
       padding: 0,
+      lineHeight: '10px',
       transition: theme.transitions.create('width', {
         duration: theme.transitions.duration.shorter,
         easing: theme.transitions.easing.easeOut,
@@ -45,19 +45,6 @@ export const styles = theme => {
         height: 2,
       },
     },
-    /* Styles applied to the root element if the control is focused. */
-    focused: {
-      borderColor: theme.palette.primary.main,
-      borderWidth: 2,
-    },
-    /* Styles applied to the root element if `error={true}`. */
-    error: {
-      borderColor: theme.palette.error.main,
-    },
-    /* Styles applied to the root element if `disabled={true}`. */
-    disabled: {
-      borderColor: theme.palette.action.disabled,
-    },
   };
 };
 
@@ -69,9 +56,6 @@ function NotchedOutline(props) {
     children,
     classes,
     className,
-    disabled,
-    error,
-    focused,
     labelWidth: labelWidthProp,
     notched,
     style,
@@ -89,15 +73,7 @@ function NotchedOutline(props) {
         [`padding${capitalize(align)}`]: 8 + (notched ? 0 : labelWidth / 2),
         ...style,
       }}
-      className={classNames(
-        classes.root,
-        {
-          [classes.focused]: focused,
-          [classes.error]: error,
-          [classes.disabled]: disabled,
-        },
-        className,
-      )}
+      className={classNames(classes.root, className)}
       {...other}
     >
       <legend
@@ -108,7 +84,11 @@ function NotchedOutline(props) {
           // by always having a legend rendered
           width: notched ? labelWidth : 0.01,
         }}
-      />
+      >
+        {/* Use the nominal use case of the legend, avoid rendering artefacts. */}
+        {/* eslint-disable-next-line react/no-danger */}
+        <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+      </legend>
     </fieldset>
   );
 }
@@ -123,18 +103,6 @@ NotchedOutline.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
-  /**
-   * If `true`, the outline should be displayed in a disabled state.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, the outline should be displayed in an error state.
-   */
-  error: PropTypes.bool,
-  /**
-   * If `true`, the outline should be displayed in a focused state.
-   */
-  focused: PropTypes.bool,
   /**
    * The width of the legend.
    */

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

@@ -15,6 +15,16 @@ export const styles = theme => {
       '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
         borderColor: theme.palette.text.primary,
       },
+      '&$focused $notchedOutline': {
+        borderColor: theme.palette.primary.main,
+        borderWidth: 2,
+      },
+      '&$error $notchedOutline': {
+        borderColor: theme.palette.error.main,
+      },
+      '&$disabled $notchedOutline': {
+        borderColor: theme.palette.action.disabled,
+      },
     },
     /* Styles applied to the root element if the component is focused. */
     focused: {},
@@ -69,9 +79,6 @@ function OutlinedInput(props) {
       renderPrefix={state => (
         <NotchedOutline
           className={classes.notchedOutline}
-          disabled={state.disabled}
-          error={state.error}
-          focused={state.focused}
           labelWidth={labelWidth}
           notched={
             typeof notched !== 'undefined'

pages/api/input-label.md

@@ -42,6 +42,10 @@ This property accepts the following keys:
 | Name | Description |
 |:-----|:------------|
 | <span class="prop-name">root</span> | Styles applied to the root element.
+| <span class="prop-name">focused</span> | Styles applied to the root element if `focused={true}`.
+| <span class="prop-name">disabled</span> | Styles applied to the root element if `disabled={true}`.
+| <span class="prop-name">error</span> | Styles applied to the root element if `error={true}`.
+| <span class="prop-name">required</span> | Styles applied to the root element if `required={true}`.
 | <span class="prop-name">formControl</span> | Styles applied to the root element if the component is a descendant of `FormControl`.
 | <span class="prop-name">marginDense</span> | Styles applied to the root element if `margin="dense"`.
 | <span class="prop-name">shrink</span> | Styles applied to the `input` element if `shrink={true}`.