[TextField] Allow custom colors in FormLabel (#27337)

mui · Jul 21, 2021 · dd1d07b · dd1d07b
1 parent 9134611
commit dd1d07b
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 7 deletions.
diff --git a/docs/pages/api-docs/form-label.json b/docs/pages/api-docs/form-label.json
@@ -4,8 +4,8 @@
     "classes": { "type": { "name": "object" } },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'"
+        "name": "union",
+        "description": "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       }
     },
     "component": { "type": { "name": "elementType" } },

diff --git a/docs/pages/api-docs/input-label.json b/docs/pages/api-docs/input-label.json
@@ -4,8 +4,8 @@
     "classes": { "type": { "name": "object" } },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'"
+        "name": "union",
+        "description": "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       }
     },
     "disableAnimation": { "type": { "name": "bool" } },

diff --git a/packages/material-ui/src/FormLabel/FormLabel.d.ts b/packages/material-ui/src/FormLabel/FormLabel.d.ts
@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { SxProps } from '@material-ui/system';
+import { OverridableStringUnion } from '@material-ui/types';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { FormLabelClasses } from './formLabelClasses';
 
+export interface FormLabelPropsColorOverrides {}
+
 export interface FormLabelTypeMap<P = {}, D extends React.ElementType = 'label'> {
   props: P &
     FormLabelBaseProps & {
@@ -18,7 +21,10 @@ export interface FormLabelTypeMap<P = {}, D extends React.ElementType = 'label'>
       /**
        * The color of the component. It supports those theme colors that make sense for this component.
        */
-      color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+      color?: OverridableStringUnion<
+        'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+        FormLabelPropsColorOverrides
+      >;
       /**
        * If `true`, the label should be displayed in a disabled state.
        */

diff --git a/packages/material-ui/src/FormLabel/FormLabel.js b/packages/material-ui/src/FormLabel/FormLabel.js
@@ -137,7 +137,10 @@ FormLabel.propTypes /* remove-proptypes */ = {
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
-  color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+    PropTypes.string,
+  ]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js
@@ -164,7 +164,10 @@ InputLabel.propTypes /* remove-proptypes */ = {
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
-  color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+    PropTypes.string,
+  ]),
   /**
    * If `true`, the transition animation is disabled.
    * @default false