From 1d6425d7f62dae7d5d32113a88bd154d18de31aa Mon Sep 17 00:00:00 2001 From: Seth Perry Date: Thu, 11 Apr 2019 04:00:34 -0600 Subject: [PATCH] [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 --- .../demos/breadcrumbs/RouterBreadcrumbs.js | 2 +- .../demos/breadcrumbs/RouterBreadcrumbs.tsx | 2 +- .../selection-controls/CheckboxesGroup.js | 8 ++--- .../selection-controls/CheckboxesGroup.tsx | 13 +++----- .../demos/text-fields/ComposedTextField.tsx | 2 +- .../src/FormControl/FormControl.d.ts | 31 ++++++++++-------- .../src/FormControl/FormControl.spec.tsx | 12 ------- .../material-ui/src/FormLabel/FormLabel.d.ts | 32 +++++++++---------- packages/material-ui/src/List/List.d.ts | 20 ++++++------ packages/material-ui/src/List/List.spec.tsx | 11 +++---- 10 files changed, 59 insertions(+), 74 deletions(-) delete mode 100644 packages/material-ui/src/FormControl/FormControl.spec.tsx diff --git a/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.js index 34e6ba893dd1e5..e0742a2d264af0 100644 --- 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 { - + diff --git a/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.tsx b/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.tsx index 8e3ab7b3aa0082..38d05e2d521c8c 100644 --- 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 - + diff --git a/docs/src/pages/demos/selection-controls/CheckboxesGroup.js b/docs/src/pages/demos/selection-controls/CheckboxesGroup.js index 007964418845be..4f08f702fafd1b 100644 --- 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 (
- - Assign responsibility + + Assign responsibility } @@ -53,8 +53,8 @@ function CheckboxesGroup() { Be careful - - Pick two + + Pick two } diff --git a/docs/src/pages/demos/selection-controls/CheckboxesGroup.tsx b/docs/src/pages/demos/selection-controls/CheckboxesGroup.tsx index e375f53fc2d1e9..e0f3d3742dae14 100644 --- 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 (
- - Assign responsibility + + Assign responsibility } @@ -53,13 +53,8 @@ function CheckboxesGroup() { Be careful - - Pick two + + Pick two } diff --git a/docs/src/pages/demos/text-fields/ComposedTextField.tsx b/docs/src/pages/demos/text-fields/ComposedTextField.tsx index 8c96ffe158a60b..d43df98bbb86eb 100644 --- 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 { - label = React.createRef(); + label = React.createRef(); state = { labelWidth: 0, diff --git a/packages/material-ui/src/FormControl/FormControl.d.ts b/packages/material-ui/src/FormControl/FormControl.d.ts index 4acd0500e63d67..0fd4c32b28c516 100644 --- 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, FormControlClassKey> { - component?: React.ElementType>; - disabled?: boolean; - error?: boolean; - fullWidth?: boolean; - margin?: PropTypes.Margin; - onBlur?: React.EventHandler; - onFocus?: React.EventHandler; - required?: boolean; - variant?: 'standard' | 'outlined' | 'filled'; -} +declare const FormControl: OverridableComponent<{ + props: { + disabled?: boolean; + error?: boolean; + fullWidth?: boolean; + margin?: PropTypes.Margin; + onBlur?: React.EventHandler; + onFocus?: React.EventHandler; + required?: boolean; + variant?: 'standard' | 'outlined' | 'filled'; + }; + defaultComponent: 'div'; + classKey: FormControlClassKey; +}>; export type FormControlClassKey = 'root' | 'marginNormal' | 'marginDense' | 'fullWidth'; -declare const FormControl: React.ComponentType; +export type FormControlProps = SimplifiedPropsOf; export default FormControl; diff --git a/packages/material-ui/src/FormControl/FormControl.spec.tsx b/packages/material-ui/src/FormControl/FormControl.spec.tsx deleted file mode 100644 index cedf3b314ed5e1..00000000000000 --- a/packages/material-ui/src/FormControl/FormControl.spec.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import FormControl from '@material-ui/core/FormControl'; - -// custom intrinsic -// https://github.com/mui-org/material-ui/issues/13744 -{ - // we only accept DivAttributes since we don't have generic props - // however once v4 typings are available this should be accepted #v4-typings - ; // $ExpectError - // Defeat device - ; -} diff --git a/packages/material-ui/src/FormLabel/FormLabel.d.ts b/packages/material-ui/src/FormLabel/FormLabel.d.ts index d56017979695db..af1108139062a9 100644 --- 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 { - component?: React.ElementType; - disabled?: boolean; - error?: boolean; - filled?: boolean; - focused?: boolean; - /** - * Should only be used if ref forwarding `component` is used. - * This is imprecise if `` is used. - */ - ref?: React.Ref; - required?: boolean; -} - -export type FormLabelBaseProps = React.LabelHTMLAttributes; +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; +export type FormLabelBaseProps = React.LabelHTMLAttributes; + +export type FormLabelProps = SimplifiedPropsOf; export default FormLabel; diff --git a/packages/material-ui/src/List/List.d.ts b/packages/material-ui/src/List/List.d.ts index 4a45add9f0975a..ac5e46b59a4e98 100644 --- 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, ListClassKey> { - component?: React.ElementType>; - 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; +export type ListProps = SimplifiedPropsOf; export default List; diff --git a/packages/material-ui/src/List/List.spec.tsx b/packages/material-ui/src/List/List.spec.tsx index d6136cacb4bc74..abf22ea7f756c1 100644 --- 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 - ; // $ExpectError + ; { - e.currentTarget; // $ExpectType EventTarget & HTMLUListElement + component="div" + onChange={(e: React.FormEvent) => { + e.currentTarget; }} />; }