[core] Generic props for FormControl, FormLabel, List (#15292)

This PR adds v4 typings for FormControl, FormLabel, and List components. It also includes some small changes to clean up the TS demos for this components. Co-authored-by: Sebastian Silbermann <[email protected]>
mui · Apr 11, 2019 · 1d6425d · 1d6425d
1 parent d1d56fc
commit 1d6425d
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 74 deletions.
diff --git a/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.js
@@ -108,7 +108,7 @@ class RouterBreadcrumbs extends React.Component {
               <List component="nav">
                 <ListItemLink to="/inbox" open={this.state.open} onClick={this.handleClick} />
                 <Collapse in={this.state.open} timeout="auto" unmountOnExit>
-                  <List component={'div'} disablePadding>
+                  <List component="div" disablePadding>
                     <ListItemLink to="/inbox/important" className={classes.nested} />
                   </List>
                 </Collapse>

diff --git a/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.tsx b/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.tsx
@@ -126,7 +126,7 @@ class RouterBreadcrumbs extends React.Component<RouterBreadcrumbsProp, RouterBre
               <List component="nav">
                 <ListItemLink to="/inbox" open={this.state.open} onClick={this.handleClick} />
                 <Collapse in={this.state.open} timeout="auto" unmountOnExit>
-                  <List component={'div' as 'ul'} disablePadding>
+                  <List component="div" disablePadding>
                     <ListItemLink to="/inbox/important" className={classes.nested} />
                   </List>
                 </Collapse>

diff --git a/docs/src/pages/demos/selection-controls/CheckboxesGroup.js b/docs/src/pages/demos/selection-controls/CheckboxesGroup.js
@@ -33,8 +33,8 @@ function CheckboxesGroup() {
 
   return (
     <div className={classes.root}>
-      <FormControl component={'fieldset'} className={classes.formControl}>
-        <FormLabel component={'legend'}>Assign responsibility</FormLabel>
+      <FormControl component="fieldset" className={classes.formControl}>
+        <FormLabel component="legend">Assign responsibility</FormLabel>
         <FormGroup>
           <FormControlLabel
             control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
@@ -53,8 +53,8 @@ function CheckboxesGroup() {
         </FormGroup>
         <FormHelperText>Be careful</FormHelperText>
       </FormControl>
-      <FormControl required error={error} component={'fieldset'} className={classes.formControl}>
-        <FormLabel component={'legend'}>Pick two</FormLabel>
+      <FormControl required error={error} component="fieldset" className={classes.formControl}>
+        <FormLabel component="legend">Pick two</FormLabel>
         <FormGroup>
           <FormControlLabel
             control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}

diff --git a/docs/src/pages/demos/selection-controls/CheckboxesGroup.tsx b/docs/src/pages/demos/selection-controls/CheckboxesGroup.tsx
@@ -33,8 +33,8 @@ function CheckboxesGroup() {
 
   return (
     <div className={classes.root}>
-      <FormControl component={'fieldset' as 'div'} className={classes.formControl}>
-        <FormLabel component={'legend' as 'label'}>Assign responsibility</FormLabel>
+      <FormControl component="fieldset" className={classes.formControl}>
+        <FormLabel component="legend">Assign responsibility</FormLabel>
         <FormGroup>
           <FormControlLabel
             control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
@@ -53,13 +53,8 @@ function CheckboxesGroup() {
         </FormGroup>
         <FormHelperText>Be careful</FormHelperText>
       </FormControl>
-      <FormControl
-        required
-        error={error}
-        component={'fieldset' as 'div'}
-        className={classes.formControl}
-      >
-        <FormLabel component={'legend' as 'label'}>Pick two</FormLabel>
+      <FormControl required error={error} component="fieldset" className={classes.formControl}>
+        <FormLabel component="legend">Pick two</FormLabel>
         <FormGroup>
           <FormControlLabel
             control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}

diff --git a/docs/src/pages/demos/text-fields/ComposedTextField.tsx b/docs/src/pages/demos/text-fields/ComposedTextField.tsx
@@ -27,7 +27,7 @@ interface State {
 }
 
 class ComposedTextField extends React.Component<Props, State> {
-  label = React.createRef<HTMLElement>();
+  label = React.createRef<HTMLLabelElement>();
 
   state = {
     labelWidth: 0,

diff --git a/packages/material-ui/src/FormControl/FormControl.d.ts b/packages/material-ui/src/FormControl/FormControl.d.ts
@@ -1,21 +1,24 @@
 import * as React from 'react';
-import { StandardProps, PropTypes } from '..';
+import { PropTypes } from '..';
+import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent';
 
-export interface FormControlProps
-  extends StandardProps<React.HtmlHTMLAttributes<HTMLDivElement>, FormControlClassKey> {
-  component?: React.ElementType<React.HtmlHTMLAttributes<HTMLDivElement>>;
-  disabled?: boolean;
-  error?: boolean;
-  fullWidth?: boolean;
-  margin?: PropTypes.Margin;
-  onBlur?: React.EventHandler<any>;
-  onFocus?: React.EventHandler<any>;
-  required?: boolean;
-  variant?: 'standard' | 'outlined' | 'filled';
-}
+declare const FormControl: OverridableComponent<{
+  props: {
+    disabled?: boolean;
+    error?: boolean;
+    fullWidth?: boolean;
+    margin?: PropTypes.Margin;
+    onBlur?: React.EventHandler<any>;
+    onFocus?: React.EventHandler<any>;
+    required?: boolean;
+    variant?: 'standard' | 'outlined' | 'filled';
+  };
+  defaultComponent: 'div';
+  classKey: FormControlClassKey;
+}>;
 
 export type FormControlClassKey = 'root' | 'marginNormal' | 'marginDense' | 'fullWidth';
 
-declare const FormControl: React.ComponentType<FormControlProps>;
+export type FormControlProps = SimplifiedPropsOf<typeof FormControl>;
 
 export default FormControl;
diff --git a/packages/material-ui/src/FormControl/FormControl.spec.tsx b/packages/material-ui/src/FormControl/FormControl.spec.tsx
diff --git a/packages/material-ui/src/FormLabel/FormLabel.d.ts b/packages/material-ui/src/FormLabel/FormLabel.d.ts
@@ -1,21 +1,17 @@
 import * as React from 'react';
-import { StandardProps } from '..';
+import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent';
 
-export interface FormLabelProps extends StandardProps<FormLabelBaseProps, FormLabelClassKey> {
-  component?: React.ElementType<FormLabelBaseProps>;
-  disabled?: boolean;
-  error?: boolean;
-  filled?: boolean;
-  focused?: boolean;
-  /**
-   * Should only be used if ref forwarding `component` is used.
-   * This is imprecise if `<FormLabel component={SomeComponent} />` is used.
-   */
-  ref?: React.Ref<HTMLElement>;
-  required?: boolean;
-}
-
-export type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+declare const FormLabel: OverridableComponent<{
+  props: FormLabelBaseProps & {
+    disabled?: boolean;
+    error?: boolean;
+    filled?: boolean;
+    focused?: boolean;
+    required?: boolean;
+  };
+  defaultComponent: 'label';
+  classKey: FormLabelClassKey;
+}>;
 
 export type FormLabelClassKey =
   | 'root'
@@ -26,6 +22,8 @@ export type FormLabelClassKey =
   | 'required'
   | 'asterisk';
 
-declare const FormLabel: React.ComponentType<FormLabelProps>;
+export type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+
+export type FormLabelProps = SimplifiedPropsOf<typeof FormLabel>;
 
 export default FormLabel;
diff --git a/packages/material-ui/src/List/List.d.ts b/packages/material-ui/src/List/List.d.ts
@@ -1,16 +1,18 @@
 import * as React from 'react';
-import { StandardProps } from '..';
+import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent';
 
-export interface ListProps
-  extends StandardProps<React.HTMLAttributes<HTMLUListElement>, ListClassKey> {
-  component?: React.ElementType<React.HTMLAttributes<HTMLUListElement>>;
-  dense?: boolean;
-  disablePadding?: boolean;
-  subheader?: React.ReactElement;
-}
+declare const List: OverridableComponent<{
+  props: {
+    dense?: boolean;
+    disablePadding?: boolean;
+    subheader?: React.ReactElement;
+  };
+  defaultComponent: 'ul';
+  classKey: ListClassKey;
+}>;
 
 export type ListClassKey = 'root' | 'padding' | 'dense' | 'subheader';
 
-declare const List: React.ComponentType<ListProps>;
+export type ListProps = SimplifiedPropsOf<typeof List>;
 
 export default List;
diff --git a/packages/material-ui/src/List/List.spec.tsx b/packages/material-ui/src/List/List.spec.tsx
@@ -1,15 +1,14 @@
 import * as React from 'react';
 import List from '@material-ui/core/List';
 
-// use other components
+// custom host
 // https://github.com/mui-org/material-ui/issues/13746
 {
-  // HTMLDivElement is not assignable to HTMLUlElement #v4-typings
-  <List component="div" />; // $ExpectError
+  <List component="div" />;
   <List
-    component={'div' as 'ul'}
-    onChange={e => {
-      e.currentTarget; // $ExpectType EventTarget & HTMLUListElement
+    component="div"
+    onChange={(e: React.FormEvent<HTMLDivElement>) => {
+      e.currentTarget;
     }}
   />;
 }