[BottomNavigation] Migrate to emotion

docs/pages/api-docs/bottom-navigation-action.json

@@ -5,6 +5,7 @@
     "icon": { "type": { "name": "node" } },
     "label": { "type": { "name": "node" } },
     "showLabel": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } },
     "value": { "type": { "name": "any" } }
   },
   "name": "BottomNavigationAction",
@@ -18,6 +19,6 @@
   "filename": "/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js",
   "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" },
   "demos": "<ul><li><a href=\"/components/bottom-navigation/\">Bottom Navigation</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/bottom-navigation.json

@@ -5,6 +5,7 @@
     "component": { "type": { "name": "elementType" } },
     "onChange": { "type": { "name": "func" } },
     "showLabels": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } },
     "value": { "type": { "name": "any" } }
   },
   "name": "BottomNavigation",
@@ -14,6 +15,6 @@
   "filename": "/packages/material-ui/src/BottomNavigation/BottomNavigation.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/bottom-navigation/\">Bottom Navigation</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/bottom-navigation-action/bottom-navigation-action.json

@@ -6,6 +6,7 @@
     "icon": "The icon to display.",
     "label": "The label element.",
     "showLabel": "If <code>true</code>, the <code>BottomNavigationAction</code> will show its label. By default, only the selected <code>BottomNavigationAction</code> inside <code>BottomNavigation</code> will show its label.<br>The prop defaults to the value (<code>false</code>) inherited from the parent BottomNavigation component.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
     "value": "You can provide your own value. Otherwise, we fallback to the child position index."
   },
   "classDescriptions": {

docs/translations/api-docs/bottom-navigation/bottom-navigation.json

@@ -6,6 +6,7 @@
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "onChange": "Callback fired when the value changes.<br><br><strong>Signature:</strong><br><code>function(event: object, value: any) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>value:</em> We default to the index of the child.",
     "showLabels": "If <code>true</code>, all <code>BottomNavigationAction</code>s will show their labels. By default, only the selected <code>BottomNavigationAction</code> will show its label.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
     "value": "The value of the currently selected <code>BottomNavigationAction</code>."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }

framer/scripts/framerConfig.js

@@ -70,7 +70,7 @@ export const componentSettings = {
     template: 'badge.txt',
   },
   BottomNavigation: {
-    ignoredProps: ['children', 'onChange', 'ScrollButtonComponent', 'value'],
+    ignoredProps: ['children', 'onChange', 'ScrollButtonComponent', 'value', 'sx'],
     propValues: {
       icons: "['restore', 'favorite', 'location_on', 'folder']",
       labels: "['Recents', 'Favorites', 'Nearby', 'Saved']",

packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
+import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface BottomNavigationTypeMap<P = {}, D extends React.ElementType = 'div'> {
@@ -27,6 +29,10 @@ export interface BottomNavigationTypeMap<P = {}, D extends React.ElementType = '
      * @default false
      */
     showLabels?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
     /**
      * The value of the currently selected `BottomNavigationAction`.
      */

packages/material-ui/src/BottomNavigation/BottomNavigation.js

@@ -2,32 +2,67 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
+import { getBottomNavigationUtilityClass } from './bottomNavigationClasses';
 
-export const styles = (theme) => ({
-  /* Styles applied to the root element. */
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    height: 56,
-    backgroundColor: theme.palette.background.paper,
+const overridesResolver = (props, styles) => styles.root || {};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes } = styleProps;
+
+  const slots = {
+    root: ['root'],
+  };
+
+  return composeClasses(slots, getBottomNavigationUtilityClass, classes);
+};
+
+const BottomNavigationRoot = experimentalStyled(
+  'div',
+  {},
+  {
+    name: 'MuiBottomNavigation',
+    slot: 'Root',
+    overridesResolver,
   },
-});
+)(({ theme }) => ({
+  /* Styles applied to the root element. */
+  display: 'flex',
+  justifyContent: 'center',
+  height: 56,
+  backgroundColor: theme.palette.background.paper,
+}));
 
-const BottomNavigation = React.forwardRef(function BottomNavigation(props, ref) {
+const BottomNavigation = React.forwardRef(function BottomNavigation(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiBottomNavigation' });
   const {
     children,
-    classes,
     className,
-    component: Component = 'div',
+    component = 'div',
     onChange,
     showLabels = false,
     value,
     ...other
   } = props;
 
+  const styleProps = {
+    ...props,
+    component,
+    showLabels,
+  };
+
+  const classes = useUtilityClasses(styleProps);
+
   return (
-    <Component className={clsx(classes.root, className)} ref={ref} {...other}>
+    <BottomNavigationRoot
+      as={component}
+      className={clsx(classes.root, className)}
+      ref={ref}
+      styleProps={styleProps}
+      {...other}
+    >
       {React.Children.map(children, (child, childIndex) => {
         if (!React.isValidElement(child)) {
           return null;
@@ -53,7 +88,7 @@ const BottomNavigation = React.forwardRef(function BottomNavigation(props, ref)
           onChange,
         });
       })}
-    </Component>
+    </BottomNavigationRoot>
   );
 });
 
@@ -92,10 +127,14 @@ BottomNavigation.propTypes = {
    * @default false
    */
   showLabels: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
   /**
    * The value of the currently selected `BottomNavigationAction`.
    */
   value: PropTypes.any,
 };
 
-export default withStyles(styles, { name: 'MuiBottomNavigation' })(BottomNavigation);
+export default BottomNavigation;

packages/material-ui/src/BottomNavigation/BottomNavigation.test.js

@@ -1,44 +1,31 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import {
-  getClasses,
-  createMount,
-  describeConformance,
-  createClientRender,
-  fireEvent,
-} from 'test/utils';
+import { createMount, describeConformanceV5, createClientRender, fireEvent } from 'test/utils';
 import BottomNavigationAction from '../BottomNavigationAction';
 import Icon from '../Icon';
 import BottomNavigation from './BottomNavigation';
+import classes from './bottomNavigationClasses';
+import actionClasses from '../BottomNavigationAction/bottomNavigationActionClasses';
 
 describe('<BottomNavigation />', () => {
   const mount = createMount();
-  let classes;
-  let actionClasses;
   const render = createClientRender();
   const icon = <Icon>restore</Icon>;
   const getBottomNavigation = (container) => container.firstChild;
 
-  before(() => {
-    classes = getClasses(
-      <BottomNavigation showLabels value={0}>
-        <BottomNavigationAction icon={icon} />
-      </BottomNavigation>,
-    );
-    actionClasses = getClasses(<BottomNavigationAction icon={icon} />);
-  });
-
-  describeConformance(
+  describeConformanceV5(
     <BottomNavigation>
       <BottomNavigationAction label="One" />
     </BottomNavigation>,
     () => ({
       classes,
       inheritComponent: 'div',
       mount,
+      muiName: 'MuiBottomNavigation',
       refInstanceof: window.HTMLDivElement,
       testComponentPropWith: 'span',
+      skip: ['componentsProp', 'themeVariants'],
     }),
   );
 

packages/material-ui/src/BottomNavigation/bottomNavigationClasses.d.ts

@@ -0,0 +1,9 @@
+export interface BottomNavigationClasses {
+  root: string;
+}
+
+declare const bottomNavigationClasses: BottomNavigationClasses;
+
+export function getBottomNavigationUtilityClass(slot: string): string;
+
+export default bottomNavigationClasses;

packages/material-ui/src/BottomNavigation/bottomNavigationClasses.js

@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getBottomNavigationUtilityClass(slot) {
+  return generateUtilityClass('MuiBottomNavigation', slot);
+}
+
+const bottomNavigationClasses = generateUtilityClasses('MuiBottomNavigation', ['root']);
+
+export default bottomNavigationClasses;

packages/material-ui/src/BottomNavigation/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './BottomNavigation';
 export * from './BottomNavigation';
+
+export { default as bottomNavigationClasses } from './bottomNavigationClasses';
+export * from './bottomNavigationClasses';

packages/material-ui/src/BottomNavigation/index.js

@@ -1 +1,4 @@
 export { default } from './BottomNavigation';
+
+export { default as bottomNavigationClasses } from './bottomNavigationClasses';
+export * from './bottomNavigationClasses';

packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
+import { Theme } from '..';
 import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 
@@ -43,6 +45,10 @@ export type BottomNavigationActionTypeMap<
      * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
      */
     showLabel?: boolean;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
     /**
      * You can provide your own value. Otherwise, we fallback to the child position index.
      */