[Chip] Add chip classes (mui#33801)

alexfauquette · Oct 14, 2022 · 5f84edc · 5f84edc
1 parent aae28a1
commit 5f84edc
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 11 deletions.
diff --git a/docs/pages/material-ui/api/chip.json b/docs/pages/material-ui/api/chip.json
@@ -44,8 +44,12 @@
       "root",
       "sizeSmall",
       "sizeMedium",
+      "colorError",
+      "colorInfo",
       "colorPrimary",
       "colorSecondary",
+      "colorSuccess",
+      "colorWarning",
       "disabled",
       "clickable",
       "clickableColorPrimary",

diff --git a/docs/translations/api-docs/chip/chip.json b/docs/translations/api-docs/chip/chip.json
@@ -28,6 +28,16 @@
       "nodeName": "the root element",
       "conditions": "<code>size=\"medium\"</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>"
+    },
     "colorPrimary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -38,6 +48,16 @@
       "nodeName": "the root element",
       "conditions": "<code>color=\"secondary\"</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/Chip/Chip.test.js b/packages/mui-material/src/Chip/Chip.test.js
@@ -58,18 +58,14 @@ describe('<Chip />', () => {
       expect(chip).not.to.have.class(classes.deletableColorSecondary);
     });
 
-    it('should render with the root and the primary class', () => {
-      const { container } = render(<Chip color="primary" />);
+    it('should render with the color class name based on the color prop', () => {
+      const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
-      const chip = container.querySelector(`.${classes.root}`);
-      expect(chip).to.have.class(classes.colorPrimary);
-    });
-
-    it('should render with the root and the secondary class', () => {
-      const { container } = render(<Chip color="secondary" />);
-
-      const chip = container.querySelector(`.${classes.root}`);
-      expect(chip).to.have.class(classes.colorSecondary);
+      ['primary', 'secondary', 'info', 'error', 'warning', 'success'].forEach((color) => {
+        const { container } = render(<Chip color={color} />);
+        const chip = container.querySelector(`.${classes.root}`);
+        expect(chip).to.have.class(classes[`color${capitalize(color)}`]);
+      });
     });
   });
 

diff --git a/packages/mui-material/src/Chip/chipClasses.ts b/packages/mui-material/src/Chip/chipClasses.ts
@@ -7,10 +7,18 @@ export interface ChipClasses {
   sizeSmall: string;
   /** Styles applied to the root element if `size="medium"`. */
   sizeMedium: 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="primary"`. */
   colorPrimary: string;
   /** Styles applied to the root element if `color="secondary"`. */
   colorSecondary: 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 `onClick` is defined or `clickable={true}`. */
@@ -95,8 +103,12 @@ const chipClasses: ChipClasses = generateUtilityClasses('MuiChip', [
   'root',
   'sizeSmall',
   'sizeMedium',
+  'colorError',
+  'colorInfo',
   'colorPrimary',
   'colorSecondary',
+  'colorSuccess',
+  'colorWarning',
   'disabled',
   'clickable',
   'clickableColorPrimary',