[Badge] Add error as a palette option (#10004)

pages/api/badge.md

@@ -15,7 +15,7 @@ filename: /src/Badge/Badge.js
 | <span style="color: #31a148">badgeContent *</span> | node |  | The content rendered within the badge. |
 | <span style="color: #31a148">children *</span> | node |  | The badge will be added relative to this node. |
 | classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | 'default' | The color of the component. It's using the theme palette when that makes sense. |
+| color | enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'error'<br> | 'default' | The color of the component. It's using the theme palette when that makes sense. |
 | component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'span' | The component used for the root node. Either a string to use a DOM element or a component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
@@ -28,6 +28,7 @@ This property accepts the following keys:
 - `badge`
 - `colorPrimary`
 - `colorSecondary`
+- `colorError`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/v1-beta/src/Badge/Badge.js)

src/Badge/Badge.d.ts

@@ -5,7 +5,7 @@ export interface BadgeProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, BadgeClassKey> {
   badgeContent: React.ReactNode;
   children: React.ReactNode;
-  color?: PropTypes.Color;
+  color?: PropTypes.Color | 'error';
   component?: React.ReactType<BadgeProps>;
 }
 

src/Badge/Badge.js

@@ -41,6 +41,10 @@ export const styles = theme => ({
     backgroundColor: theme.palette.secondary.main,
     color: theme.palette.secondary.contrastText,
   },
+  colorError: {
+    backgroundColor: theme.palette.error.main,
+    color: theme.palette.error.contrastText,
+  },
 });
 
 function Badge(props) {
@@ -86,7 +90,7 @@ Badge.propTypes = {
   /**
    * The color of the component. It's using the theme palette when that makes sense.
    */
-  color: PropTypes.oneOf(['default', 'primary', 'secondary']),
+  color: PropTypes.oneOf(['default', 'primary', 'secondary', 'error']),
   /**
    * The component used for the root node.
    * Either a string to use a DOM element or a component.

src/Badge/Badge.spec.js

@@ -92,6 +92,22 @@ describe('<Badge />', () => {
     );
   });
 
+  it('have error class', () => {
+    const wrapper = shallow(
+      <Badge badgeContent={10} color="error">
+        <span />
+      </Badge>,
+    );
+
+    assert.strictEqual(
+      wrapper
+        .find('span')
+        .at(2)
+        .hasClass(classes.colorError),
+      true,
+    );
+  });
+
   it('renders children and overwrite root styles', () => {
     const style = { backgroundColor: 'red' };
     const wrapper = shallow(