From dd1d07b7d3c14273bb131dc45953ad0d360af820 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 21 Jul 2021 19:31:15 +0200
Subject: [PATCH] [TextField] Allow custom colors in FormLabel (#27337)

---
 docs/pages/api-docs/form-label.json               | 4 ++--
 docs/pages/api-docs/input-label.json              | 4 ++--
 packages/material-ui/src/FormLabel/FormLabel.d.ts | 8 +++++++-
 packages/material-ui/src/FormLabel/FormLabel.js   | 5 ++++-
 packages/material-ui/src/InputLabel/InputLabel.js | 5 ++++-
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/docs/pages/api-docs/form-label.json b/docs/pages/api-docs/form-label.json
index bf9bf3f7d4f319..0b9b77a604ee7e 100644
--- 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
index 14abacf402c5f7..fd1cec047a7273 100644
--- 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
index bf35b8482c92fe..b4bc1d358cff45 100644
--- 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
index eb9005ece2e4b8..e88c66656ae775 100644
--- 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
index 68f55aa4221234..e62514e565bc61 100644
--- 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