[IconButton] Add missing color classes (#33820)

mui · Nov 28, 2022 · 73889d0 · 73889d0
1 parent 91ad7e8
commit 73889d0
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 0 deletions.
diff --git a/docs/pages/material-ui/api/icon-button.json b/docs/pages/material-ui/api/icon-button.json
@@ -42,6 +42,10 @@
       "colorInherit",
       "colorPrimary",
       "colorSecondary",
+      "colorError",
+      "colorInfo",
+      "colorSuccess",
+      "colorWarning",
       "disabled",
       "sizeSmall",
       "sizeMedium",

diff --git a/docs/translations/api-docs/icon-button/icon-button.json b/docs/translations/api-docs/icon-button/icon-button.json
@@ -38,6 +38,26 @@
       "nodeName": "the root element",
       "conditions": "<code>color=\"secondary\"</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>"
+    },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

diff --git a/packages/mui-material/src/IconButton/IconButton.test.js b/packages/mui-material/src/IconButton/IconButton.test.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { createRenderer, describeConformance } from 'test/utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import IconButton, { iconButtonClasses as classes } from '@mui/material/IconButton';
+import { unstable_capitalize as capitalize } from '@mui/utils';
 import Icon from '@mui/material/Icon';
 import ButtonBase from '@mui/material/ButtonBase';
 
@@ -91,6 +92,16 @@ describe('<IconButton />', () => {
     });
   });
 
+  describe('prop: color', () => {
+    ['primary', 'secondary', 'error', 'info', 'success', 'warning'].forEach((color) => {
+      it(`should render the ${color} class`, () => {
+        const { getByRole } = render(<IconButton color={color}>Hello World</IconButton>);
+        const button = getByRole('button');
+        expect(button).to.have.class(classes[`color${capitalize(color)}`]);
+      });
+    });
+  });
+
   it('should raise a warning about onClick in children because of Firefox', () => {
     expect(() => {
       PropTypes.checkPropTypes(

diff --git a/packages/mui-material/src/IconButton/iconButtonClasses.ts b/packages/mui-material/src/IconButton/iconButtonClasses.ts
@@ -14,6 +14,14 @@ export interface IconButtonClasses {
   colorPrimary: string;
   /** Styles applied to the root element if `color="secondary"`. */
   colorSecondary: 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;
   /** State class applied to the root element if `disabled={true}`. */
   disabled: string;
   /** Styles applied to the root element if `size="small"`. */
@@ -36,6 +44,10 @@ const iconButtonClasses: IconButtonClasses = generateUtilityClasses('MuiIconButt
   'colorInherit',
   'colorPrimary',
   'colorSecondary',
+  'colorError',
+  'colorInfo',
+  'colorSuccess',
+  'colorWarning',
   'edgeStart',
   'edgeEnd',
   'sizeSmall',