[InputLabel] Remove FormLabelClasses in favor of asterisk class (#14504)

* [InputLabel] Asteriks class for TextField * reverted docs * [InputLabel] docs reverted * green build * [InputLabel] Add asterisk class key * Updated asterisk docs
mui · Feb 14, 2019 · 438c3a4 · 438c3a4
1 parent 05875b2
commit 438c3a4
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 16 deletions.
diff --git a/packages/material-ui/src/FormLabel/FormLabel.js b/packages/material-ui/src/FormLabel/FormLabel.js
@@ -34,6 +34,7 @@ export const styles = theme => ({
   filled: {},
   /* Styles applied to the root element if `required={true}`. */
   required: {},
+  /* Styles applied to the asterisk element. */
   asterisk: {
     '&$error': {
       color: theme.palette.error.main,

diff --git a/packages/material-ui/src/InputLabel/InputLabel.d.ts b/packages/material-ui/src/InputLabel/InputLabel.d.ts
@@ -6,7 +6,6 @@ export interface InputLabelProps extends StandardProps<FormLabelProps, InputLabe
   disableAnimation?: boolean;
   disabled?: boolean;
   error?: boolean;
-  FormLabelClasses?: FormLabelProps['classes'];
   focused?: boolean;
   required?: boolean;
   shrink?: boolean;
@@ -19,6 +18,7 @@ export type InputLabelClassKey =
   | 'disabled'
   | 'error'
   | 'required'
+  | 'asterisk'
   | 'formControl'
   | 'marginDense'
   | 'shrink'

diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js
@@ -21,6 +21,8 @@ export const styles = theme => ({
   error: {},
   /* Styles applied to the root element if `required={true}`. */
   required: {},
+  /* Styles applied to the asterisk element. */
+  asterisk: {},
   /* Styles applied to the root element if the component is a descendant of `FormControl`. */
   formControl: {
     position: 'absolute',
@@ -86,7 +88,6 @@ function InputLabel(props) {
     classes,
     className,
     disableAnimation,
-    FormLabelClasses,
     margin,
     muiFormControl,
     shrink: shrinkProp,
@@ -125,7 +126,7 @@ function InputLabel(props) {
         disabled: classes.disabled,
         error: classes.error,
         required: classes.required,
-        ...FormLabelClasses,
+        asterisk: classes.asterisk,
       }}
       {...other}
     >
@@ -141,7 +142,7 @@ InputLabel.propTypes = {
   children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
-   * See [CSS API](#css-api) below for more details.
+   * See [CSS API](#css) below for more details.
    */
   classes: PropTypes.object.isRequired,
   /**
@@ -164,10 +165,6 @@ InputLabel.propTypes = {
    * If `true`, the input of this label is focused.
    */
   focused: PropTypes.bool,
-  /**
-   * `classes` property applied to the [`FormLabel`](/api/form-label/) element.
-   */
-  FormLabelClasses: PropTypes.object,
   /**
    * If `dense`, will adjust vertical spacing. This is normally obtained via context from
    * FormControl.

diff --git a/packages/material-ui/src/InputLabel/InputLabel.test.js b/packages/material-ui/src/InputLabel/InputLabel.test.js
@@ -35,10 +35,10 @@ describe('<InputLabel />', () => {
     assert.strictEqual(wrapper.hasClass(classes.animated), false);
   });
 
-  describe('prop: FormLabelClasses', () => {
-    it('should be able to change the FormLabel style', () => {
-      const wrapper = mount(<InputLabel FormLabelClasses={{ root: 'bar' }}>Foo</InputLabel>);
-      assert.include(wrapper.find('FormLabel').props().classes.root, 'bar');
+  describe('prop: classes', () => {
+    it('should be able to change the InputLabel style', () => {
+      const wrapper = mount(<InputLabel classes={{ root: 'bar' }}>Foo</InputLabel>);
+      assert.include(wrapper.find('InputLabel').props().classes.root, 'bar');
     });
   });
 

diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx
@@ -1048,7 +1048,7 @@ const PopoverTest = () => <Popover open ModalClasses={{ root: 'foo', hidden: 'ba
 
 const InputLabelTest = () => (
   <InputLabel
-    FormLabelClasses={{
+    classes={{
       root: 'foo',
       asterisk: 'foo',
       disabled: 'foo',

diff --git a/pages/api/form-label.md b/pages/api/form-label.md
@@ -43,7 +43,7 @@ This property accepts the following keys:
 | <span class="prop-name">error</span> | Styles applied to the root element if `error={true}`.
 | <span class="prop-name">filled</span> | Styles applied to the root element if `filled={true}`.
 | <span class="prop-name">required</span> | Styles applied to the root element if `required={true}`.
-| <span class="prop-name">asterisk</span> | 
+| <span class="prop-name">asterisk</span> | Styles applied to the asterisk element.
 
 Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/FormLabel/FormLabel.js)

diff --git a/pages/api/input-label.md b/pages/api/input-label.md
@@ -19,12 +19,11 @@ import InputLabel from '@material-ui/core/InputLabel';
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |   | The contents of the `InputLabel`. |
-| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">disableAnimation</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the transition animation is disabled. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |   | If `true`, apply disabled class. |
 | <span class="prop-name">error</span> | <span class="prop-type">bool</span> |   | If `true`, the label will be displayed in an error state. |
 | <span class="prop-name">focused</span> | <span class="prop-type">bool</span> |   | If `true`, the input of this label is focused. |
-| <span class="prop-name">FormLabelClasses</span> | <span class="prop-type">object</span> |   | `classes` property applied to the [`FormLabel`](/api/form-label/) element. |
 | <span class="prop-name">margin</span> | <span class="prop-type">enum:&nbsp;'dense'<br></span> |   | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. |
 | <span class="prop-name">required</span> | <span class="prop-type">bool</span> |   | if `true`, the label will indicate that the input is required. |
 | <span class="prop-name">shrink</span> | <span class="prop-type">bool</span> |   | If `true`, the label is shrunk. |
@@ -45,6 +44,7 @@ This property accepts the following keys:
 | <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">asterisk</span> | Styles applied to the asterisk element.
 | <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}`.