[TextField] Remove legacy notched version

d3mp · Jan 24, 2021 · 62b9f5b · 62b9f5b
1 parent b1ff430
commit 62b9f5b
Show file tree

Hide file tree

Showing 17 changed files with 20 additions and 107 deletions.
diff --git a/docs/pages/api-docs/outlined-input.json b/docs/pages/api-docs/outlined-input.json
@@ -14,7 +14,6 @@
     "inputProps": { "type": { "name": "object" }, "default": "{}" },
     "inputRef": { "type": { "name": "custom", "description": "ref" } },
     "label": { "type": { "name": "node" } },
-    "labelWidth": { "type": { "name": "number" }, "default": "0" },
     "margin": { "type": { "name": "enum", "description": "'dense'<br>&#124;&nbsp;'none'" } },
     "maxRows": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
     "minRows": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },

diff --git a/docs/pages/api-docs/select.json b/docs/pages/api-docs/select.json
@@ -11,7 +11,6 @@
     "inputProps": { "type": { "name": "object" } },
     "label": { "type": { "name": "node" } },
     "labelId": { "type": { "name": "string" } },
-    "labelWidth": { "type": { "name": "number" }, "default": "0" },
     "MenuProps": { "type": { "name": "object" } },
     "multiple": { "type": { "name": "bool" } },
     "native": { "type": { "name": "bool" } },

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

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

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -1155,6 +1155,13 @@ As the core components use emotion as a styled engine, the props used by emotion
   +<Input size="small" />
   ```
 
+- Remove the `labelWidth` prop, use the `label` prop instead. The new prop allows to rely on CSS only to render the notch in the outline.
+
+  ```diff
+  -<OutlinedInput labelWidth={310}>
+  +<OutlinedInput label="My label">
+  ```
+
 ### TextareaAutosize
 
 - Remove the `rows` prop, use the `minRows` prop instead.

diff --git a/docs/translations/api-docs/outlined-input/outlined-input.json b/docs/translations/api-docs/outlined-input/outlined-input.json
@@ -14,8 +14,7 @@
     "inputComponent": "The component used for the <code>input</code> element. Either a string to use a HTML element or a component.",
     "inputProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\">Attributes</a> applied to the <code>input</code> element.",
     "inputRef": "Pass a ref to the <code>input</code> element.",
-    "label": "The label of the <code>input</code>. It is only used for layout. The actual labelling is handled by <code>InputLabel</code>. If specified <code>labelWidth</code> is ignored.",
-    "labelWidth": "The width of the label. Is ignored if <code>label</code> is provided. Prefer <code>label</code> if the <code>input</code> label appears with a strike through.",
+    "label": "The label of the <code>input</code>. It is only used for layout. The actual labelling is handled by <code>InputLabel</code>.",
     "margin": "If <code>dense</code>, will adjust vertical spacing. This is normally obtained via context from FormControl. The prop defaults to the value (<code>&#39;none&#39;</code>) inherited from the parent FormControl component.",
     "maxRows": "Maximum number of rows to display when multiline option is set to true.",
     "minRows": "Minimum number of rows to display when multiline option is set to true.",

diff --git a/docs/translations/api-docs/select/select.json b/docs/translations/api-docs/select/select.json
@@ -12,7 +12,6 @@
     "inputProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\">Attributes</a> applied to the <code>input</code> element. When <code>native</code> is <code>true</code>, the attributes are applied on the <code>select</code> element.",
     "label": "See <a href=\"/api/outlined-input/#props\">OutlinedInput#label</a>",
     "labelId": "The ID of an element that acts as an additional label. The Select will be labelled by the additional label and the selected value.",
-    "labelWidth": "See <a href=\"/api/outlined-input/#props\">OutlinedInput#label</a>",
     "MenuProps": "Props applied to the <a href=\"/api/menu/\"><code>Menu</code></a> element.",
     "multiple": "If <code>true</code>, <code>value</code> must be an array and the menu will support multiple selections.",
     "native": "If <code>true</code>, the component uses a native <code>select</code> element.",

diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js
@@ -83,9 +83,8 @@ const FormHelperText = React.forwardRef(function FormHelperText(props, ref) {
       {...other}
     >
       {children === ' ' ? (
-        // notranslate needed while Google Translate will not fix zero-width space issue
         // eslint-disable-next-line react/no-danger
-        <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+        <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
       ) : (
         children
       )}

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

diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
@@ -2,8 +2,6 @@ import * as React from 'react';
 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) => {
   return {
@@ -23,16 +21,6 @@ export const styles = (theme) => {
       borderWidth: 1,
       overflow: 'hidden',
     },
-    /* Styles applied to the legend element when `labelWidth` is provided. */
-    legend: {
-      padding: 0,
-      lineHeight: '11px', // sync with `height` in `legend` styles
-      transition: theme.transitions.create('width', {
-        duration: 150,
-        easing: theme.transitions.easing.easeOut,
-      }),
-    },
-    /* Styles applied to the legend element. */
     legendLabelled: {
       display: 'block',
       width: 'auto',
@@ -72,66 +60,27 @@ const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
     classes,
     className,
     label,
-    labelWidth: labelWidthProp,
     notched,
     style,
     ...other
   } = props;
-  const theme = useTheme();
-  const align = theme.direction === 'rtl' ? 'right' : 'left';
-
-  if (label !== undefined) {
-    return (
-      <fieldset
-        aria-hidden
-        className={clsx(classes.root, className)}
-        ref={ref}
-        style={style}
-        {...other}
-      >
-        <legend
-          className={clsx(classes.legendLabelled, {
-            [classes.legendNotched]: notched,
-          })}
-        >
-          {/* Use the nominal use case of the legend, avoid rendering artefacts. */}
-          {label ? (
-            <span>{label}</span>
-          ) : (
-            // notranslate needed while Google Translate will not fix zero-width space issue
-            // eslint-disable-next-line react/no-danger
-            <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
-          )}
-        </legend>
-      </fieldset>
-    );
-  }
-
-  const labelWidth = labelWidthProp > 0 ? labelWidthProp * 0.75 + 8 : 0.01;
 
   return (
     <fieldset
       aria-hidden
-      style={{
-        [`padding${capitalize(align)}`]: 8,
-        ...style,
-      }}
       className={clsx(classes.root, className)}
       ref={ref}
+      style={style}
       {...other}
     >
       <legend
-        className={classes.legend}
-        style={{
-          // IE11: fieldset with legend does not render
-          // a border radius. This maintains consistency
-          // by always having a legend rendered
-          width: notched ? labelWidth : 0.01,
-        }}
+        className={clsx(classes.legendLabelled, {
+          [classes.legendNotched]: notched,
+        })}
       >
         {/* Use the nominal use case of the legend, avoid rendering artefacts. */}
         {/* eslint-disable-next-line react/no-danger */}
-        <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+        {label ? <span>{label}</span> : <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />}
       </legend>
     </fieldset>
   );
@@ -155,10 +104,6 @@ NotchedOutline.propTypes = {
    * The label.
    */
   label: PropTypes.node,
-  /**
-   * The width of the label.
-   */
-  labelWidth: PropTypes.number.isRequired,
   /**
    * If `true`, the outline is notched to accommodate the label.
    */

diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js
@@ -9,7 +9,6 @@ describe('<NotchedOutline />', () => {
 
   let classes;
   const defaultProps = {
-    labelWidth: 36,
     notched: true,
   };
 

diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts b/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts
@@ -40,15 +40,9 @@ export interface OutlinedInputProps extends StandardProps<InputBaseProps> {
   };
   /**
    * The label of the `input`. It is only used for layout. The actual labelling
-   * is handled by `InputLabel`. If specified `labelWidth` is ignored.
+   * is handled by `InputLabel`.
    */
   label?: React.ReactNode;
-  /**
-   * The width of the label. Is ignored if `label` is provided. Prefer `label`
-   * if the `input` label appears with a strike through.
-   * @default 0
-   */
-  labelWidth?: number;
   /**
    * If `true`, the outline is notched to accommodate the label.
    */

diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
@@ -109,7 +109,6 @@ const OutlinedInput = React.forwardRef(function OutlinedInput(props, ref) {
     fullWidth = false,
     inputComponent = 'input',
     label,
-    labelWidth = 0,
     multiline = false,
     notched,
     type = 'text',
@@ -122,7 +121,6 @@ const OutlinedInput = React.forwardRef(function OutlinedInput(props, ref) {
         <NotchedOutline
           className={classes.notchedOutline}
           label={label}
-          labelWidth={labelWidth}
           notched={
             typeof notched !== 'undefined'
               ? notched
@@ -213,15 +211,9 @@ OutlinedInput.propTypes = {
   inputRef: refType,
   /**
    * The label of the `input`. It is only used for layout. The actual labelling
-   * is handled by `InputLabel`. If specified `labelWidth` is ignored.
+   * is handled by `InputLabel`.
    */
   label: PropTypes.node,
-  /**
-   * The width of the label. Is ignored if `label` is provided. Prefer `label`
-   * if the `input` label appears with a strike through.
-   * @default 0
-   */
-  labelWidth: PropTypes.number,
   /**
    * If `dense`, will adjust vertical spacing. This is normally obtained via context from
    * FormControl.

diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js
@@ -13,7 +13,7 @@ describe('<OutlinedInput />', () => {
     classes = getClasses(<OutlinedInput />);
   });
 
-  describeConformance(<OutlinedInput labelWidth={0} />, () => ({
+  describeConformance(<OutlinedInput />, () => ({
     classes,
     inheritComponent: InputBase,
     mount,
@@ -23,7 +23,7 @@ describe('<OutlinedInput />', () => {
 
   it('should render a NotchedOutline', () => {
     const { container } = render(
-      <OutlinedInput classes={{ notchedOutline: 'notched-outlined' }} labelWidth={0} />,
+      <OutlinedInput classes={{ notchedOutline: 'notched-outlined' }} />,
     );
 
     expect(container.querySelector('.notched-outlined')).not.to.equal(null);

diff --git a/packages/material-ui/src/Select/Select.d.ts b/packages/material-ui/src/Select/Select.d.ts
@@ -89,11 +89,6 @@ export interface SelectProps<T = unknown>
    * be labelled by the additional label and the selected value.
    */
   labelId?: string;
-  /**
-   * See [OutlinedInput#label](/api/outlined-input/#props)
-   * @default 0
-   */
-  labelWidth?: number;
   /**
    * Props applied to the [`Menu`](/api/menu/) element.
    */

diff --git a/packages/material-ui/src/Select/Select.js b/packages/material-ui/src/Select/Select.js
@@ -26,7 +26,6 @@ const Select = React.forwardRef(function Select(props, ref) {
     inputProps,
     label,
     labelId,
-    labelWidth = 0,
     MenuProps,
     multiple = false,
     native = false,
@@ -54,7 +53,7 @@ const Select = React.forwardRef(function Select(props, ref) {
     input ||
     {
       standard: <Input />,
-      outlined: <OutlinedInput label={label} labelWidth={labelWidth} />,
+      outlined: <OutlinedInput label={label} />,
       filled: <FilledInput />,
     }[variant];
 
@@ -160,11 +159,6 @@ Select.propTypes = {
    * be labelled by the additional label and the selected value.
    */
   labelId: PropTypes.string,
-  /**
-   * See [OutlinedInput#label](/api/outlined-input/#props)
-   * @default 0
-   */
-  labelWidth: PropTypes.number,
   /**
    * Props applied to the [`Menu`](/api/menu/) element.
    */

diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
@@ -390,9 +390,8 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
       >
         {/* So the vertical align positioning algorithm kicks in. */}
         {isEmpty(display) ? (
-          // notranslate needed while Google Translate will not fix zero-width space issue
           // eslint-disable-next-line react/no-danger
-          <span className="notranslate" dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+          <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
         ) : (
           display
         )}