push a bit further

mui · Nov 23, 2019 · 2fbbbc6 · 2fbbbc6
1 parent 805e4d3
commit 2fbbbc6
Show file tree

Hide file tree

Showing 15 changed files with 83 additions and 152 deletions.
diff --git a/docs/src/pages/components/selects/NativeSelects.js b/docs/src/pages/components/selects/NativeSelects.js
@@ -23,12 +23,6 @@ export default function NativeSelects() {
     name: 'hai',
   });
 
-  const inputLabel = React.useRef(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current.offsetWidth);
-  }, []);
-
   const handleChange = name => event => {
     setState({
       ...state,
@@ -200,14 +194,12 @@ export default function NativeSelects() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
-          Age
-        </InputLabel>
+        <InputLabel htmlFor="outlined-age-native-simple">Age</InputLabel>
         <Select
           native
           value={state.age}
           onChange={handleChange('age')}
-          labelWidth={labelWidth}
+          label="Age"
           inputProps={{
             name: 'age',
             id: 'outlined-age-native-simple',

diff --git a/docs/src/pages/components/selects/NativeSelects.tsx b/docs/src/pages/components/selects/NativeSelects.tsx
@@ -25,12 +25,6 @@ export default function NativeSelects() {
     name: 'hai',
   });
 
-  const inputLabel = React.useRef<HTMLLabelElement>(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current!.offsetWidth);
-  }, []);
-
   const handleChange = (name: keyof typeof state) => (
     event: React.ChangeEvent<{ value: unknown }>,
   ) => {
@@ -204,14 +198,14 @@ export default function NativeSelects() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
+        <InputLabel htmlFor="outlined-age-native-simple">
           Age
         </InputLabel>
         <Select
           native
           value={state.age}
           onChange={handleChange('age')}
-          labelWidth={labelWidth}
+          label="Age"
           inputProps={{
             name: 'age',
             id: 'outlined-age-native-simple',

diff --git a/docs/src/pages/components/selects/SimpleSelect.js b/docs/src/pages/components/selects/SimpleSelect.js
@@ -20,12 +20,6 @@ export default function SimpleSelect() {
   const classes = useStyles();
   const [age, setAge] = React.useState('');
 
-  const inputLabel = React.useRef(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current.offsetWidth);
-  }, []);
-
   const handleChange = event => {
     setAge(event.target.value);
   };
@@ -195,15 +189,13 @@ export default function SimpleSelect() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
-          Age
-        </InputLabel>
+        <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
         <Select
           labelId="demo-simple-select-outlined-label"
           id="demo-simple-select-outlined"
           value={age}
           onChange={handleChange}
-          labelWidth={labelWidth}
+          label="Age"
         >
           <MenuItem value="">
             <em>None</em>

diff --git a/docs/src/pages/components/selects/SimpleSelect.tsx b/docs/src/pages/components/selects/SimpleSelect.tsx
@@ -22,12 +22,6 @@ export default function SimpleSelect() {
   const classes = useStyles();
   const [age, setAge] = React.useState('');
 
-  const inputLabel = React.useRef<HTMLLabelElement>(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current!.offsetWidth);
-  }, []);
-
   const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
     setAge(event.target.value as string);
   };
@@ -197,15 +191,15 @@ export default function SimpleSelect() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
+        <InputLabel id="demo-simple-select-outlined-label">
           Age
         </InputLabel>
         <Select
           labelId="demo-simple-select-outlined-label"
           id="demo-simple-select-outlined"
           value={age}
           onChange={handleChange}
-          labelWidth={labelWidth}
+          label="Age"
         >
           <MenuItem value="">
             <em>None</em>

diff --git a/docs/src/pages/components/text-fields/ComposedTextField.js b/docs/src/pages/components/text-fields/ComposedTextField.js
@@ -18,15 +18,9 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function ComposedTextField() {
-  const [labelWidth, setLabelWidth] = React.useState(0);
   const [name, setName] = React.useState('Composed TextField');
-  const labelRef = React.useRef(null);
   const classes = useStyles();
 
-  React.useEffect(() => {
-    setLabelWidth(labelRef.current.offsetWidth);
-  }, []);
-
   const handleChange = event => {
     setName(event.target.value);
   };
@@ -63,15 +57,8 @@ export default function ComposedTextField() {
         <FormHelperText id="component-error-text">Error</FormHelperText>
       </FormControl>
       <FormControl className={classes.formControl} variant="outlined">
-        <InputLabel ref={labelRef} htmlFor="component-outlined">
-          Name
-        </InputLabel>
-        <OutlinedInput
-          id="component-outlined"
-          value={name}
-          onChange={handleChange}
-          labelWidth={labelWidth}
-        />
+        <InputLabel htmlFor="component-outlined">Name</InputLabel>
+        <OutlinedInput id="component-outlined" value={name} onChange={handleChange} label="Name" />
       </FormControl>
       <FormControl className={classes.formControl} variant="filled">
         <InputLabel htmlFor="component-filled">Name</InputLabel>

diff --git a/docs/src/pages/components/text-fields/ComposedTextField.tsx b/docs/src/pages/components/text-fields/ComposedTextField.tsx
@@ -20,15 +20,9 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 export default function ComposedTextField() {
-  const [labelWidth, setLabelWidth] = React.useState(0);
   const [name, setName] = React.useState('Composed TextField');
-  const labelRef = React.useRef<HTMLLabelElement>(null);
   const classes = useStyles();
 
-  React.useEffect(() => {
-    setLabelWidth(labelRef.current!.offsetWidth);
-  }, []);
-
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setName(event.target.value);
   };
@@ -65,14 +59,14 @@ export default function ComposedTextField() {
         <FormHelperText id="component-error-text">Error</FormHelperText>
       </FormControl>
       <FormControl className={classes.formControl} variant="outlined">
-        <InputLabel ref={labelRef} htmlFor="component-outlined">
+        <InputLabel htmlFor="component-outlined">
           Name
         </InputLabel>
         <OutlinedInput
           id="component-outlined"
           value={name}
           onChange={handleChange}
-          labelWidth={labelWidth}
+          label="Name"
         />
       </FormControl>
       <FormControl className={classes.formControl} variant="filled">

diff --git a/docs/src/pages/components/text-fields/InputAdornments.js b/docs/src/pages/components/text-fields/InputAdornments.js
@@ -178,7 +178,6 @@ export default function InputAdornments() {
             inputProps={{
               'aria-label': 'weight',
             }}
-            labelWidth={0}
           />
           <FormHelperText id="outlined-weight-helper-text">Weight</FormHelperText>
         </FormControl>
@@ -200,7 +199,7 @@ export default function InputAdornments() {
                 </IconButton>
               </InputAdornment>
             }
-            labelWidth={70}
+            label="Password"
           />
         </FormControl>
         <FormControl fullWidth className={classes.margin} variant="outlined">
@@ -210,7 +209,7 @@ export default function InputAdornments() {
             value={values.amount}
             onChange={handleChange('amount')}
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
-            labelWidth={60}
+            labelWidth="Amount"
           />
         </FormControl>
       </div>

diff --git a/docs/src/pages/components/text-fields/InputAdornments.tsx b/docs/src/pages/components/text-fields/InputAdornments.tsx
@@ -188,7 +188,6 @@ export default function InputAdornments() {
             inputProps={{
               'aria-label': 'weight',
             }}
-            labelWidth={0}
           />
           <FormHelperText id="outlined-weight-helper-text">Weight</FormHelperText>
         </FormControl>
@@ -210,7 +209,7 @@ export default function InputAdornments() {
                 </IconButton>
               </InputAdornment>
             }
-            labelWidth={70}
+            label="Password"
           />
         </FormControl>
         <FormControl fullWidth className={classes.margin} variant="outlined">
@@ -220,7 +219,7 @@ export default function InputAdornments() {
             value={values.amount}
             onChange={handleChange('amount')}
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
-            labelWidth={60}
+            labelWidth="Amount"
           />
         </FormControl>
       </div>

diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.d.ts b/packages/material-ui/src/OutlinedInput/NotchedOutline.d.ts
@@ -6,7 +6,7 @@ export interface NotchedOutlineProps
   disabled?: boolean;
   error?: boolean;
   focused?: boolean;
-  labelWidth: number;
+  label?: React.ReactNode;
   notched: boolean;
 }
 

diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
@@ -3,50 +3,53 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import useTheme from '../styles/useTheme';
-import capitalize from '../utils/capitalize';
 
-export const styles = theme => {
-  const align = theme.direction === 'rtl' ? 'right' : 'left';
-
-  return {
-    /* Styles applied to the root element. */
-    root: {
-      position: 'absolute',
-      bottom: 0,
-      right: 0,
-      top: -5,
-      left: 0,
-      margin: 0,
-      padding: 0,
-      pointerEvents: 'none',
-      borderRadius: 'inherit',
-      borderStyle: 'solid',
-      borderWidth: 1,
-      // Match the Input Label
-      transition: theme.transitions.create([`padding-${align}`, 'border-color', 'border-width'], {
-        duration: theme.transitions.duration.shorter,
-        easing: theme.transitions.easing.easeOut,
-      }),
-    },
-    /* Styles applied to the legend element. */
-    legend: {
-      textAlign: 'left',
-      padding: 0,
-      lineHeight: '11px',
-      fontSize: '0.75rem',
-      maxWidth: 0,
-      transition: theme.transitions.create('max-width', {
-        duration: theme.transitions.duration.shorter,
-        easing: theme.transitions.easing.easeOut,
-      }),
-      visibility: 'hidden',
-      '& span': {
-        paddingLeft: 4,
-        paddingRight: 6,
-      },
+export const styles = theme => ({
+  /* Styles applied to the root element. */
+  root: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    top: -5,
+    left: 0,
+    margin: 0,
+    padding: 0,
+    paddingLeft: 8,
+    pointerEvents: 'none',
+    borderRadius: 'inherit',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    // Match the Input Label
+    transition: theme.transitions.create(['border-color', 'border-width'], {
+      duration: theme.transitions.duration.shorter,
+      easing: theme.transitions.easing.easeOut,
+    }),
+  },
+  /* Styles applied to the legend element. */
+  legend: {
+    textAlign: 'left',
+    padding: 0,
+    lineHeight: '11px',
+    fontSize: '0.75rem',
+    visibility: 'hidden',
+    maxWidth: 0,
+    transition: theme.transitions.create('max-width', {
+      duration: 50,
+      delay: 0,
+    }),
+    '& span': {
+      paddingLeft: 4,
+      paddingRight: 6,
     },
-  };
-};
+  },
+  legendNotched: {
+    maxWidth: 1000,
+    transition: theme.transitions.create('max-width', {
+      duration: 100,
+      delay: 60,
+    }),
+  },
+});
 
 /**
  * @ignore - internal component.
@@ -56,31 +59,22 @@ const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
     children,
     classes,
     className,
-    label = '\u200B',
-    labelWidth: labelWidthProp,
+    label,
     notched,
     style,
     ...other
   } = props;
-  const theme = useTheme();
-  const align = theme.direction === 'rtl' ? 'right' : 'left';
-  const labelWidth = labelWidthProp > 0 ? labelWidthProp * 0.75 + 8 : 0;
 
   return (
-    <fieldset
-      aria-hidden
-      style={{
-        [`padding${capitalize(align)}`]: 8,
-        ...style,
-      }}
-      className={clsx(classes.root, className)}
-      ref={ref}
-      {...other}
-    >
-      <legend className={classes.legend} style={{ maxWidth: notched ? '150px' : '0px' }}>
+    <fieldset aria-hidden className={clsx(classes.root, className)} ref={ref} {...other}>
+      <legend
+        className={clsx(classes.legend, {
+          [classes.legendNotched]: notched,
+        })}
+      >
         {/* Use the nominal use case of the legend, avoid rendering artefacts. */}
         {/* eslint-disable-next-line react/no-danger */}
-        <span>{label}</span>
+        {label ? <span>{label}</span> : <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />}
       </legend>
     </fieldset>
   );
@@ -101,9 +95,9 @@ NotchedOutline.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * The width of the label.
+   * The label.
    */
-  labelWidth: PropTypes.number.isRequired,
+  label: PropTypes.node,
   /**
    * If `true`, the outline is notched to accommodate the label.
    */