[AppBar] Migrate to emotion

docs/pages/api-docs/app-bar.json

@@ -15,7 +15,8 @@
         "description": "'absolute'<br>&#124;&nbsp;'fixed'<br>&#124;&nbsp;'relative'<br>&#124;&nbsp;'static'<br>&#124;&nbsp;'sticky'"
       },
       "default": "'fixed'"
-    }
+    },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "AppBar",
   "styles": {
@@ -40,5 +41,5 @@
   "filename": "/packages/material-ui/src/AppBar/AppBar.js",
   "inheritance": { "component": "Paper", "pathname": "/api/paper/" },
   "demos": "<ul><li><a href=\"/components/app-bar/\">App Bar</a></li></ul>",
-  "styledComponent": false
+  "styledComponent": true
 }

docs/translations/api-docs/app-bar/app-bar.json

@@ -4,7 +4,8 @@
     "children": "The content of the component.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "color": "The color of the component. It supports those theme colors that make sense for this component.",
-    "position": "The positioning type. The behavior of the different options is described <a href=\"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning\">in the MDN web docs</a>. Note: <code>sticky</code> is not universally supported and will fall back to <code>static</code> when unavailable."
+    "position": "The positioning type. The behavior of the different options is described <a href=\"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning\">in the MDN web docs</a>. Note: <code>sticky</code> is not universally supported and will fall back to <code>static</code> when unavailable.",
+    "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."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },

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

@@ -1,4 +1,5 @@
-import { PropTypes, InternalStandardProps as StandardProps } from '..';
+import { SxProps } from '@material-ui/system';
+import { PropTypes, InternalStandardProps as StandardProps, Theme } from '..';
 import { PaperProps } from '../Paper';
 
 export interface AppBarProps extends StandardProps<PaperProps> {
@@ -41,6 +42,10 @@ export interface AppBarProps extends StandardProps<PaperProps> {
    * @default 'fixed'
    */
   position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export type AppBarClassKey = keyof NonNullable<AppBarProps['classes']>;

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

@@ -1,25 +1,54 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import withStyles from '../styles/withStyles';
+import { deepmerge } from '@material-ui/utils';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import experimentalStyled from '../styles/experimentalStyled';
+import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
 import Paper from '../Paper';
+import { getAppBarUtilityClass } from './appBarClasses';
 
-export const styles = (theme) => {
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return deepmerge(styles.root || {}, {
+    ...styles[`position${capitalize(styleProps.position)}`],
+    ...styles[`color${capitalize(styleProps.color)}`],
+  });
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { color, position, classes } = styleProps;
+
+  const slots = {
+    root: ['root', `color${capitalize(color)}`, `position${capitalize(position)}`],
+  };
+
+  return composeClasses(slots, getAppBarUtilityClass, classes);
+};
+
+const AppBarRoot = experimentalStyled(
+  Paper,
+  {},
+  {
+    name: 'MuiAppBar',
+    slot: 'Root',
+    overridesResolver,
+  },
+)(({ theme, styleProps }) => {
   const backgroundColorDefault =
     theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
 
   return {
     /* Styles applied to the root element. */
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%',
-      boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar.
-      flexShrink: 0,
-    },
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar.
+    flexShrink: 0,
     /* Styles applied to the root element if `position="fixed"`. */
-    positionFixed: {
+    ...(styleProps.position === 'fixed' && {
       position: 'fixed',
       zIndex: theme.zIndex.appBar,
       top: 0,
@@ -29,71 +58,81 @@ export const styles = (theme) => {
         // Prevent the app bar to be visible on each printed page.
         position: 'absolute',
       },
-    },
+    }),
     /* Styles applied to the root element if `position="absolute"`. */
-    positionAbsolute: {
+    ...(styleProps.position === 'absolute' && {
       position: 'absolute',
       zIndex: theme.zIndex.appBar,
       top: 0,
       left: 'auto',
       right: 0,
-    },
+    }),
     /* Styles applied to the root element if `position="sticky"`. */
-    positionSticky: {
+    ...(styleProps.position === 'sticky' && {
       // ⚠️ sticky is not supported by IE11.
       position: 'sticky',
       zIndex: theme.zIndex.appBar,
       top: 0,
       left: 'auto',
       right: 0,
-    },
+    }),
     /* Styles applied to the root element if `position="static"`. */
-    positionStatic: {
+    ...(styleProps.position === 'static' && {
       position: 'static',
-    },
+    }),
     /* Styles applied to the root element if `position="relative"`. */
-    positionRelative: {
+    ...(styleProps.position === 'relative' && {
       position: 'relative',
-    },
+    }),
     /* Styles applied to the root element if `color="default"`. */
-    colorDefault: {
+    ...(styleProps.color === 'default' && {
       backgroundColor: backgroundColorDefault,
       color: theme.palette.getContrastText(backgroundColorDefault),
-    },
-    /* Styles applied to the root element if `color="primary"`. */
-    colorPrimary: {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText,
-    },
-    /* Styles applied to the root element if `color="secondary"`. */
-    colorSecondary: {
-      backgroundColor: theme.palette.secondary.main,
-      color: theme.palette.secondary.contrastText,
-    },
+    }),
+    /* Styles applied to the root element if colors comes from palette. */
+    ...(styleProps.color &&
+      styleProps.color !== 'default' &&
+      styleProps.color !== 'inherit' &&
+      styleProps.color !== 'transparent' && {
+        backgroundColor: theme.palette[styleProps.color].main,
+        color: theme.palette[styleProps.color].contrastText,
+      }),
     /* Styles applied to the root element if `color="inherit"`. */
-    colorInherit: {
+    ...(styleProps.color === 'inherit' && {
       color: 'inherit',
-    },
+    }),
     /* Styles applied to the root element if `color="transparent"`. */
-    colorTransparent: {
+    ...(styleProps.color === 'transparent' && {
       backgroundColor: 'transparent',
       color: 'inherit',
-    },
+    }),
   };
-};
+});
+
+const AppBar = React.forwardRef(function AppBar(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiAppBar',
+  });
+
+  const { className, color = 'primary', position = 'fixed', ...other } = props;
 
-const AppBar = React.forwardRef(function AppBar(props, ref) {
-  const { classes, className, color = 'primary', position = 'fixed', ...other } = props;
+  const styleProps = {
+    ...other,
+    color,
+    position,
+  };
+
+  const classes = useUtilityClasses(styleProps);
 
   return (
-    <Paper
+    <AppBarRoot
       square
       component="header"
+      styleProps={styleProps}
       elevation={4}
       className={clsx(
         classes.root,
-        classes[`position${capitalize(position)}`],
-        classes[`color${capitalize(color)}`],
         {
           'mui-fixed': position === 'fixed', // Useful for the Dialog
         },
@@ -134,6 +173,10 @@ AppBar.propTypes = {
    * @default 'fixed'
    */
   position: PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky']),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiAppBar' })(AppBar);
+export default AppBar;

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

@@ -1,23 +1,23 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
+import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
 import AppBar from './AppBar';
+import classes from './appBarClasses';
 import Paper from '../Paper';
 
 describe('<AppBar />', () => {
   const mount = createMount();
-  let classes;
   const render = createClientRender();
-  before(() => {
-    classes = getClasses(<AppBar>Hello World</AppBar>);
-  });
 
-  describeConformance(<AppBar>Conformance?</AppBar>, () => ({
+  describeConformanceV5(<AppBar>Conformance?</AppBar>, () => ({
     classes,
     inheritComponent: Paper,
     mount,
+    muiName: 'MuiAppBar',
     refInstanceof: window.HTMLElement,
-    skip: ['componentProp'],
+    testVariantProps: { position: 'relative' },
+    testStateOverrides: { prop: 'color', value: 'secondary', styleKey: 'colorSecondary' },
+    skip: ['componentsProp'],
   }));
 
   it('should render with the root class and primary', () => {

packages/material-ui/src/AppBar/appBarClasses.d.ts

@@ -0,0 +1,19 @@
+export interface AppBarClasses {
+  root: string;
+  positionFixed: string;
+  positionAbsolute: string;
+  positionSticky: string;
+  positionStatic: string;
+  positionRelative: string;
+  colorDefault: string;
+  colorPrimary: string;
+  colorSecondary: string;
+  colorInherit: string;
+  colorTransparent: string;
+}
+
+declare const appBarClasses: AppBarClasses;
+
+export function getAppBarUtilityClass(slot: string): string;
+
+export default appBarClasses;

packages/material-ui/src/AppBar/appBarClasses.js

@@ -0,0 +1,21 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getAppBarUtilityClass(slot) {
+  return generateUtilityClass('MuiAppBar', slot);
+}
+
+const appBarClasses = generateUtilityClasses('MuiAppBar', [
+  'root',
+  'positionFixed',
+  'positionAbsolute',
+  'positionSticky',
+  'positionStatic',
+  'positionRelative',
+  'colorDefault',
+  'colorPrimary',
+  'colorSecondary',
+  'colorInherit',
+  'colorTransparent',
+]);
+
+export default appBarClasses;

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

@@ -1,2 +1,4 @@
 export { default } from './AppBar';
 export * from './AppBar';
+export { default as appBarClasses } from './appBarClasses';
+export * from './appBarClasses';

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

@@ -1 +1,3 @@
 export { default } from './AppBar';
+export { default as appBarClasses } from './appBarClasses';
+export * from './appBarClasses';