[Badge] Create unstyled component & move to emotion

docs/pages/api-docs/badge-unstyled.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/badge-unstyled';
+const requireRaw = require.context('!raw-loader!./', false, /\/badge-unstyled\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/badge-unstyled.md

@@ -0,0 +1,71 @@
+---
+filename: /packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# BadgeUnstyled API
+
+<p class="description">The API documentation of the BadgeUnstyled React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
+// or
+import { BadgeUnstyled } from '@material-ui/unstyled';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{ horizontal: 'left'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'top' }</span> | <span class="prop-default">{  vertical: 'top',  horizontal: 'right',}</span> | The anchor of the badge. |
+| <span class="prop-name">badgeContent</span> | <span class="prop-type">node</span> |  | The content rendered within the badge. |
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The badge will be added relative to this node. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">color</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">components</span> | <span class="prop-type">{ Badge?: elementType, Root?: elementType }</span> | <span class="prop-default">{}</span> | The components used for each slot inside the Badge. Either a string to use a HTML element or a component. |
+| <span class="prop-name">componentsProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | The props used for each slot inside the Badge. |
+| <span class="prop-name">invisible</span> | <span class="prop-type">bool</span> |  | If `true`, the badge is invisible. |
+| <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">99</span> | Max count to show. |
+| <span class="prop-name">overlap</span> | <span class="prop-type">'circular'<br>&#124;&nbsp;'rectangular'</span> | <span class="prop-default">'rectangular'</span> | Wrapped shape the badge should overlap. |
+| <span class="prop-name">showZero</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Controls whether the badge is hidden when `badgeContent` is zero. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'dot'<br>&#124;&nbsp;'standard'<br>&#124;&nbsp;string</span> | <span class="prop-default">'standard'</span> | The variant to use. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiBadge-root</span> | Styles applied to the root element.
+| <span class="prop-name">badge</span> | <span class="prop-name">.MuiBadge-badge</span> | Styles applied to the badge `span` element.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiBadge-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiBadge-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">colorError</span> | <span class="prop-name">.MuiBadge-colorError</span> | Styles applied to the root element if `color="error"`.
+| <span class="prop-name">dot</span> | <span class="prop-name">.MuiBadge-dot</span> | Styles applied to the root element if `variant="dot"`.
+| <span class="prop-name">standard</span> | <span class="prop-name">.MuiBadge-standard</span> | Styles applied to the root element if `variant="standard"`.
+| <span class="prop-name">anchorOriginTopRightRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`.
+| <span class="prop-name">anchorOriginBottomRightRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`.
+| <span class="prop-name">anchorOriginTopLeftRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`.
+| <span class="prop-name">anchorOriginBottomLeftRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`.
+| <span class="prop-name">anchorOriginTopRightCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`.
+| <span class="prop-name">anchorOriginBottomRightCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`.
+| <span class="prop-name">anchorOriginTopLeftCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`.
+| <span class="prop-name">anchorOriginBottomLeftCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`.
+| <span class="prop-name">invisible</span> | <span class="prop-name">.MuiBadge-invisible</span> | Pseudo-class to the badge `span` element if `invisible={true}`.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a [global class name](/guides/interoperability/#global-css).
+- With a rule name as part of the component's [`styleOverrides` property](/customization/components/#global-theme-override) in a custom theme.
+

docs/pages/api-docs/badge.md

@@ -33,11 +33,13 @@ The `MuiBadge` name can be used for providing [default props](/customization/glo
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The badge will be added relative to this node. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
-| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
+| <span class="prop-name">components</span> | <span class="prop-type">{ Badge?: elementType, Root?: elementType }</span> | <span class="prop-default">{}</span> | The components used for each slot inside the Badge. Either a string to use a HTML element or a component. |
+| <span class="prop-name">componentsProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | The props used for each slot inside the Badge. |
 | <span class="prop-name">invisible</span> | <span class="prop-type">bool</span> |  | If `true`, the badge is invisible. |
 | <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">99</span> | Max count to show. |
 | <span class="prop-name">overlap</span> | <span class="prop-type">'circular'<br>&#124;&nbsp;'rectangular'</span> | <span class="prop-default">'rectangular'</span> | Wrapped shape the badge should overlap. |
 | <span class="prop-name">showZero</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Controls whether the badge is hidden when `badgeContent` is zero. |
+| <span class="prop-name">sx</span> | <span class="prop-type">object</span> |  | The system prop that allows defining system overrides as well as additional CSS styles. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'dot'<br>&#124;&nbsp;'standard'<br>&#124;&nbsp;string</span> | <span class="prop-default">'standard'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.
@@ -67,11 +69,8 @@ Any other props supplied will be provided to the root element (native element).
 
 You can override the style of the component thanks to one of these customization points:
 
-- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
-- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
-- With a theme and an [`overrides` property](/customization/globals/#css).
-
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Badge/Badge.js) for more detail.
+- With a [global class name](/guides/interoperability/#global-css).
+- With a rule name as part of the component's [`styleOverrides` property](/customization/components/#global-theme-override) in a custom theme.
 
 ## Demos
 

docs/src/pages/components/badges/BadgeAlignment.js

@@ -5,28 +5,11 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormLabel from '@material-ui/core/FormLabel';
 import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import MailIcon from '@material-ui/icons/Mail';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-  },
-  formControl: {
-    margin: theme.spacing(3),
-  },
-  row: {
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  margin: {
-    margin: theme.spacing(2),
-  },
-}));
-
 export default function BadgeAlignment() {
-  const classes = useStyles();
   const [horizontal, setHorizontal] = React.useState('right');
   const [vertical, setVertical] = React.useState('top');
 
@@ -48,9 +31,17 @@ export default function BadgeAlignment() {
 `;
 
   return (
-    <div className={classes.root}>
-      <div className={classes.row}>
-        <FormControl component="fieldset" className={classes.formControl}>
+    <Box sx={{ width: '100%' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          '& fieldset': {
+            margin: 3,
+          },
+        }}
+      >
+        <FormControl component="fieldset">
           <FormLabel component="legend">Vertical</FormLabel>
           <RadioGroup
             name="vertical"
@@ -61,7 +52,7 @@ export default function BadgeAlignment() {
             <FormControlLabel value="bottom" control={<Radio />} label="Bottom" />
           </RadioGroup>
         </FormControl>
-        <FormControl component="fieldset" className={classes.formControl}>
+        <FormControl component="fieldset">
           <FormLabel component="legend">Horizontal</FormLabel>
           <RadioGroup
             name="horizontal"
@@ -72,8 +63,16 @@ export default function BadgeAlignment() {
             <FormControlLabel value="left" control={<Radio />} label="Left" />
           </RadioGroup>
         </FormControl>
-      </div>
-      <div className={classes.row}>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          '& > *': {
+            margin: 2,
+          },
+        }}
+      >
         <Badge
           color="secondary"
           variant="dot"
@@ -82,7 +81,6 @@ export default function BadgeAlignment() {
             horizontal,
             vertical,
           }}
-          className={classes.margin}
         >
           <MailIcon />
         </Badge>
@@ -93,7 +91,6 @@ export default function BadgeAlignment() {
             horizontal,
             vertical,
           }}
-          className={classes.margin}
         >
           <MailIcon />
         </Badge>
@@ -104,7 +101,6 @@ export default function BadgeAlignment() {
             horizontal,
             vertical,
           }}
-          className={classes.margin}
         >
           <MailIcon />
         </Badge>
@@ -115,7 +111,6 @@ export default function BadgeAlignment() {
             horizontal,
             vertical,
           }}
-          className={classes.margin}
         >
           <MailIcon />
         </Badge>
@@ -127,12 +122,11 @@ export default function BadgeAlignment() {
             horizontal,
             vertical,
           }}
-          className={classes.margin}
         >
           <MailIcon />
         </Badge>
-      </div>
+      </Box>
       <HighlightedCode code={jsx} language="jsx" />
-    </div>
+    </Box>
   );
 }

docs/src/pages/components/badges/BadgeMax.js

@@ -1,29 +1,25 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(2),
-    },
-  },
-}));
-
 const defaultProps = {
   color: 'secondary',
   children: <MailIcon />,
 };
 
 export default function BadgeMax() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > *': {
+          margin: 2,
+        },
+      }}
+    >
       <Badge badgeContent={99} {...defaultProps} />
       <Badge badgeContent={100} {...defaultProps} />
       <Badge badgeContent={1000} max={999} {...defaultProps} />
-    </div>
+    </Box>
   );
 }

docs/src/pages/components/badges/BadgeMax.tsx

@@ -1,31 +1,25 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > *': {
-        margin: theme.spacing(2),
-      },
-    },
-  }),
-);
-
 const defaultProps = {
   color: 'secondary' as 'secondary',
   children: <MailIcon />,
 };
 
 export default function BadgeMax() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > *': {
+          margin: 2,
+        },
+      }}
+    >
       <Badge badgeContent={99} {...defaultProps} />
       <Badge badgeContent={100} {...defaultProps} />
       <Badge badgeContent={1000} max={999} {...defaultProps} />
-    </div>
+    </Box>
   );
 }

docs/src/pages/components/badges/BadgeOverlap.js

@@ -1,32 +1,22 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Badge from '@material-ui/core/Badge';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-  shape: {
-    backgroundColor: theme.palette.primary.main,
-    width: 40,
-    height: 40,
-  },
-  shapeCircle: {
-    borderRadius: '50%',
-  },
-}));
+const shapeStyles = { bgcolor: 'primary.main', width: 40, height: 40 };
+const shapeCircleStyles = { borderRadius: '50%' };
 
 export default function BadgeOverlap() {
-  const classes = useStyles();
-
-  const rectangle = <div className={classes.shape} />;
-  const circle = <div className={clsx(classes.shape, classes.shapeCircle)} />;
+  const rectangle = <Box sx={shapeStyles} />;
+  const circle = <Box sx={{ ...shapeStyles, ...shapeCircleStyles }} />;
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > *': {
+          margin: 1,
+        },
+      }}
+    >
       <Badge color="secondary" badgeContent=" ">
         {rectangle}
       </Badge>
@@ -39,6 +29,6 @@ export default function BadgeOverlap() {
       <Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
         {circle}
       </Badge>
-    </div>
+    </Box>
   );
 }