[material-ui][AppBar] Support all default palette colors in TypeScript (

#39389)
mui · Oct 11, 2023 · e417dcf · e417dcf
1 parent abe61bf
commit e417dcf
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 4 deletions.
diff --git a/docs/pages/material-ui/api/app-bar.json b/docs/pages/material-ui/api/app-bar.json
@@ -5,7 +5,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'default'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'transparent'<br>&#124;&nbsp;string"
+        "description": "'default'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'transparent'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'primary'"
     },
@@ -42,7 +42,11 @@
       "colorPrimary",
       "colorSecondary",
       "colorInherit",
-      "colorTransparent"
+      "colorTransparent",
+      "colorError",
+      "colorInfo",
+      "colorSuccess",
+      "colorWarning"
     ],
     "globalClasses": {},
     "name": "MuiAppBar"

diff --git a/docs/translations/api-docs/app-bar/app-bar.json b/docs/translations/api-docs/app-bar/app-bar.json
@@ -67,6 +67,26 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"transparent\"</code>"
+    },
+    "colorError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"error\"</code>"
+    },
+    "colorInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
     }
   }
 }
diff --git a/packages/mui-material/src/AppBar/AppBar.d.ts b/packages/mui-material/src/AppBar/AppBar.d.ts
@@ -19,7 +19,10 @@ export interface AppBarOwnProps {
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color?: OverridableStringUnion<PropTypes.Color | 'transparent', AppBarPropsColorOverrides>;
+  color?: OverridableStringUnion<
+    PropTypes.Color | 'transparent' | 'error' | 'info' | 'success' | 'warning',
+    AppBarPropsColorOverrides
+  >;
   /**
    * If true, the `color` prop is applied in dark mode.
    * @default false

diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js
@@ -199,7 +199,17 @@ AppBar.propTypes /* remove-proptypes */ = {
    * @default 'primary'
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']),
+    PropTypes.oneOf([
+      'default',
+      'inherit',
+      'primary',
+      'secondary',
+      'transparent',
+      'error',
+      'info',
+      'success',
+      'warning',
+    ]),
     PropTypes.string,
   ]),
   /**

diff --git a/packages/mui-material/src/AppBar/AppBar.spec.tsx b/packages/mui-material/src/AppBar/AppBar.spec.tsx
@@ -26,3 +26,14 @@ function AppBarTest() {
     </div>
   );
 }
+
+// `color`
+<AppBar color="inherit" />;
+<AppBar color="primary" />;
+<AppBar color="secondary" />;
+<AppBar color="default" />;
+<AppBar color="transparent" />;
+<AppBar color="error" />;
+<AppBar color="success" />;
+<AppBar color="info" />;
+<AppBar color="warning" />;
diff --git a/packages/mui-material/src/AppBar/appBarClasses.ts b/packages/mui-material/src/AppBar/appBarClasses.ts
@@ -24,6 +24,14 @@ export interface AppBarClasses {
   colorInherit: string;
   /** Styles applied to the root element if `color="transparent"`. */
   colorTransparent: string;
+  /** Styles applied to the root element if `color="error"`. */
+  colorError: string;
+  /** Styles applied to the root element if `color="info"`. */
+  colorInfo: string;
+  /** Styles applied to the root element if `color="success"`. */
+  colorSuccess: string;
+  /** Styles applied to the root element if `color="warning"`. */
+  colorWarning: string;
 }
 
 export type AppBarClassKey = keyof AppBarClasses;
@@ -44,6 +52,10 @@ const appBarClasses: AppBarClasses = generateUtilityClasses('MuiAppBar', [
   'colorSecondary',
   'colorInherit',
   'colorTransparent',
+  'colorError',
+  'colorInfo',
+  'colorSuccess',
+  'colorWarning',
 ]);
 
 export default appBarClasses;