Merge remote-tracking branch 'upstream/next' into docs/demo-loader

mui · Jun 25, 2021 · 8ab8bec · 8ab8bec
2 parents c37b6ec + 583c802
commit 8ab8bec
Show file tree

Hide file tree

Showing 97 changed files with 887 additions and 954 deletions.
diff --git a/TYPESCRIPT_CONVENTION.md b/TYPESCRIPT_CONVENTION.md
@@ -8,7 +8,7 @@
 
 ### `Props Interface`
 
-- export interface `{ComponentName}classes` and add comment for generating api docs (for internal components, may or may not expose classes but don't need comment)
+- export interface `{ComponentName}classes` from `{component}Classes.ts` and add comment for generating api docs (for internal components, may or may not expose classes but don't need comment)
 - export interface `{ComponentName}Props`
 - always export props interface (use `interface` over `type`) from the component file
 - provide `sx` only for public component
@@ -17,7 +17,7 @@
  <summary>Public component</summary>
 
 ```ts
-// Foo.tsx
+// fooClasses.tsx
 
 export interface FooClasses {
  /** Styles applied to the root element. */
@@ -28,6 +28,15 @@ export interface FooClasses {
  disabled: string;
 }
 
+const fooClasses: FooClasses = generateUtilityClasses('MuiFoo', ['root', 'foo', 'disabled']);
+
+export default fooClasses;
+```
+
+```ts
+// Foo.tsx
+import { FooClasses } from './fooClasses';
+
 export interface FooProps {
  /**
  * Override or extend the styles applied to the component.
@@ -63,33 +72,33 @@ export interface BarProps {
 ### `ClassKey`
 
 - naming as `{ComponentName}ClassKey`
-- export if `classes` exists in props interface using `keyof`
+- export if `classes` exists in props interface using `keyof` from `{component}Classes.ts`
 
 ```ts
-// Foo.tsx
+// fooClasses.ts
+export interface FooClasses {
+ ...
+}
 
 export type FooClassKey = keyof FooClasses;
 // verify that FooClassKey is union of string literal
 ```
 
 ### `Classes generator & Utility`
 
-- export if `classes` exist in props interface from the component file
+- export if `classes` exists in props interface from the component file
 - use `{Component}Classes` as type to preventing typo and missing classes
 - use `Private` prefix for internal component
 
 <details>
  <summary>Public component</summary>
 
 ```ts
-// Foo.tsx
+// fooClasses.ts
 export function getFooUtilityClass(slot: string) {
  return generateUtilityClass('MuiFoo', slot);
 }
 
-// make sure it has ClassKey as arg in generic
-export const fooClasses: FooClasses = generateUtilityClasses('MuiFoo', ['root', 'foo', 'disabled']);
-
 const useUtilityClasses = (styleProps: FooProps & { extraProp: boolean }) => {
  // extraProp might be the key/value from react context that this component access
  const { foo, disabled, classes } = styleProps;
@@ -125,15 +134,11 @@ const classes = generateUtilityClasses('PrivateBar', ['root', 'bar']);
  <summary>public component</summary>
 
 ```ts
-const FooRoot = styled(
- Typography,
- {},
- {
- name: 'MuiFoo',
- slot: 'Root',
- overridesResolver: (props, styles) => styles.root,
- },
-)({
+const FooRoot = styled(Typography, {
+ name: 'MuiFoo',
+ slot: 'Root',
+ overridesResolver: (props, styles) => styles.root,
+})({
  // styling
 });
 ```
@@ -143,11 +148,7 @@ const FooRoot = styled(
  <summary>internal component</summary>
 
 ```ts
-const BarRoot = styled(
- Typography,
- {},
- { skipSx: true },
-)({
+const BarRoot = styled(Typography, { skipSx: true })({
  // styling
 });
 ```
@@ -157,15 +158,14 @@ const BarRoot = styled(
  <summary>extends interface</summary>
 
 ```ts
-const BarRoot = styled(
- Typography,
- {},
- { skipSx: true },
-)<{ component?: React.ElementType }>({
+const BarRoot = styled(Typography, { skipSx: true })<{
+ component?: React.ElementType;
+ styleProps: BarProps;
+}>(({ theme, styleProps }) => ({
  // styling
-});
-// passing `component` to BarRoot is safe
-// <BarRoot component="span" />
+}));
+// passing `component` to BarRoot is safe and we don't forget to pass styleProps
+// <BarRoot component="span" styleProps={styleProps} />
 ```
 
 </details>
@@ -215,11 +215,7 @@ const Foo = React.forwardRef<HTMLSpanElement, FooProps>(function Foo(inProps, re
 ```ts
 const classes = generateUtilityClasses('PrivateBar', ['selected']);
 
-const BarRoot = styled(
- 'div',
- {},
- { skipSx: true },
-)(({ theme }) => ({
+const BarRoot = styled('div', { skipSx: true })(({ theme }) => ({
  [`&.${classes.selected}`]: {
  color: theme.palette.text.primary,
  },

diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js
@@ -37,15 +37,15 @@ const LoadingButtonRoot = styled(Button, {
  name: 'MuiLoadingButton',
  slot: 'Root',
  overridesResolver: (props, styles) => {
- return {
- ...styles.root,
- ...(styles.startIconLoadingStart && {
+ return [
+ styles.root,
+ styles.startIconLoadingStart && {
  [`& .${loadingButtonClasses.startIconLoadingStart}`]: styles.startIconLoadingStart,
- }),
- ...(styles.endIconLoadingEnd && {
+ },
+ styles.endIconLoadingEnd && {
  [`& .${loadingButtonClasses.endIconLoadingEnd}`]: styles.endIconLoadingEnd,
- }),
- };
+ },
+ ];
  },
 })(({ styleProps, theme }) => ({
  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]:
@@ -70,10 +70,10 @@ const LoadingButtonLoadingIndicator = styled('div', {
  slot: 'LoadingIndicator',
  overridesResolver: (props, styles) => {
  const { styleProps } = props;
- return {
- ...styles.loadingIndicator,
- ...styles[`loadingIndicator${capitalize(styleProps.loadingPosition)}`],
- };
+ return [
+ styles.loadingIndicator,
+ styles[`loadingIndicator${capitalize(styleProps.loadingPosition)}`],
+ ];
  },
 })(({ theme, styleProps }) => ({
  position: 'absolute',

diff --git a/packages/material-ui-lab/src/PickersDay/PickersDay.tsx b/packages/material-ui-lab/src/PickersDay/PickersDay.tsx
@@ -186,17 +186,17 @@ const overridesResolver = (
  styles: Record<PickersDayClassKey, object>,
 ) => {
  const { styleProps } = props;
- return {
- ...styles.root,
- ...(!styleProps.disableMargin && styles.dayWithMargin),
- ...(!styleProps.disableHighlightToday && styleProps.today && styles.today),
- ...(!styleProps.outsideCurrentMonth &&
+ return [
+ styles.root,
+ !styleProps.disableMargin && styles.dayWithMargin,
+ !styleProps.disableHighlightToday && styleProps.today && styles.today,
+ !styleProps.outsideCurrentMonth &&
  styleProps.showDaysOutsideCurrentMonth &&
- styles.dayOutsideMonth),
- ...(styleProps.outsideCurrentMonth &&
+ styles.dayOutsideMonth,
+ styleProps.outsideCurrentMonth &&
  !styleProps.showDaysOutsideCurrentMonth &&
- styles.hiddenDaySpacingFiller),
- };
+ styles.hiddenDaySpacingFiller,
+ ];
 };
 
 const PickersDayRoot = styled(ButtonBase, {

diff --git a/packages/material-ui-lab/src/Timeline/Timeline.tsx b/packages/material-ui-lab/src/Timeline/Timeline.tsx
@@ -63,11 +63,11 @@ const TimelineRoot = styled('ul' as const, {
  slot: 'Root',
  overridesResolver: (props, styles) => {
  const { styleProps } = props;
- return {
- ...styles.root,
- ...(styleProps.position &&
- styles[`position${capitalize(styleProps.position)}` as TimelineClassKey]),
- };
+ return [
+ styles.root,
+ styleProps.position &&
+ styles[`position${capitalize(styleProps.position)}` as TimelineClassKey],
+ ];
  },
 })<{ styleProps: StyleProps }>({
  display: 'flex',

diff --git a/packages/material-ui-lab/src/TimelineContent/TimelineContent.js b/packages/material-ui-lab/src/TimelineContent/TimelineContent.js
@@ -23,10 +23,7 @@ const TimelineContentRoot = styled(Typography, {
  slot: 'Root',
  overridesResolver: (props, styles) => {
  const { styleProps } = props;
- return {
- ...styles.root,
- ...styles[`position${capitalize(styleProps.position)}`],
- };
+ return [styles.root, styles[`position${capitalize(styleProps.position)}`]];
  },
 })(({ styleProps }) => ({
  /* Styles applied to the root element. */

diff --git a/packages/material-ui-lab/src/TimelineDot/TimelineDot.js b/packages/material-ui-lab/src/TimelineDot/TimelineDot.js
@@ -22,13 +22,13 @@ const TimelineDotRoot = styled('span', {
  overridesResolver: (props, styles) => {
  const { styleProps } = props;
 
- return {
- ...styles.root,
- ...styles[
+ return [
+ styles.root,
+ styles[
  styleProps.color !== 'inherit' && `${styleProps.variant}${capitalize(styleProps.color)}`
  ],
- ...styles[styleProps.variant],
- };
+ styles[styleProps.variant],
+ ];
  },
 })(({ styleProps, theme }) => ({
  /* Styles applied to the root element. */

diff --git a/packages/material-ui-lab/src/TimelineItem/TimelineItem.js b/packages/material-ui-lab/src/TimelineItem/TimelineItem.js
@@ -29,10 +29,7 @@ const TimelineItemRoot = styled('li', {
  overridesResolver: (props, styles) => {
  const { styleProps } = props;
 
- return {
- ...styles.root,
- ...styles[`position${capitalize(styleProps.position)}`],
- };
+ return [styles.root, styles[`position${capitalize(styleProps.position)}`]];
  },
 })(({ styleProps }) => ({
  listStyle: 'none',

diff --git a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js
@@ -23,10 +23,7 @@ const TimelineOppositeContentRoot = styled(Typography, {
  slot: 'Root',
  overridesResolver: (props, styles) => {
  const { styleProps } = props;
- return {
- ...styles.root,
- ...styles[`position${capitalize(styleProps.position)}`],
- };
+ return [styles.root, styles[`position${capitalize(styleProps.position)}`]];
  },
 })(({ styleProps }) => ({
  /* Styles applied to the root element. */

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -44,15 +44,15 @@ const StyledTreeItemContent = styled(TreeItemContent, {
  name: 'MuiTreeItem',
  slot: 'Content',
  overridesResolver: (props, styles) => {
- return {
- ...styles.content,
- ...(styles.iconContainer && {
+ return [
+ styles.content,
+ styles.iconContainer && {
  [`& .${treeItemClasses.iconContainer}`]: styles.iconContainer,
- }),
- ...(styles.label && {
+ },
+ styles.label && {
  [`& .${treeItemClasses.label}`]: styles.label,
- }),
- };
+ },
+ ];
  },
 })(({ theme }) => ({
  padding: '0 8px',

diff --git a/packages/material-ui/src/Accordion/Accordion.js b/packages/material-ui/src/Accordion/Accordion.js
@@ -35,12 +35,12 @@ const AccordionRoot = styled(Paper, {
  overridesResolver: (props, styles) => {
  const { styleProps } = props;
 
- return {
- [`& .${accordionClasses.region}`]: styles.region,
- ...styles.root,
- ...(!styleProps.square && styles.rounded),
- ...(!styleProps.disableGutters && styles.gutters),
- };
+ return [
+ { [`& .${accordionClasses.region}`]: styles.region },
+ styles.root,
+ !styleProps.square && styles.rounded,
+ !styleProps.disableGutters && styles.gutters,
+ ];
  },
 })(
  ({ theme }) => {

diff --git a/packages/material-ui/src/AccordionActions/AccordionActions.js b/packages/material-ui/src/AccordionActions/AccordionActions.js
@@ -22,10 +22,7 @@ const AccordionActionsRoot = styled('div', {
  overridesResolver: (props, styles) => {
  const { styleProps } = props;
 
- return {
- ...styles.root,
- ...(!styleProps.disableSpacing && styles.spacing),
- };
+ return [styles.root, !styleProps.disableSpacing && styles.spacing];
  },
 })(({ styleProps }) => ({
  /* Styles applied to the root element. */

diff --git a/packages/material-ui/src/Alert/Alert.js b/packages/material-ui/src/Alert/Alert.js
@@ -34,11 +34,11 @@ const AlertRoot = styled(Paper, {
  overridesResolver: (props, styles) => {
  const { styleProps } = props;
 
- return {
- ...styles.root,
- ...styles[styleProps.variant],
- ...styles[`${styleProps.variant}${capitalize(styleProps.color || styleProps.severity)}`],
- };
+ return [
+ styles.root,
+ styles[styleProps.variant],
+ styles[`${styleProps.variant}${capitalize(styleProps.color || styleProps.severity)}`],
+ ];
  },
 })(({ theme, styleProps }) => {
  const getColor = theme.palette.mode === 'light' ? darken : lighten;

diff --git a/packages/material-ui/src/AppBar/AppBar.js b/packages/material-ui/src/AppBar/AppBar.js
@@ -24,11 +24,11 @@ const AppBarRoot = styled(Paper, {
  overridesResolver: (props, styles) => {
  const { styleProps } = props;
 
- return {
- ...styles.root,
- ...styles[`position${capitalize(styleProps.position)}`],
- ...styles[`color${capitalize(styleProps.color)}`],
- };
+ return [
+ styles.root,
+ styles[`position${capitalize(styleProps.position)}`],
+ styles[`color${capitalize(styleProps.color)}`],
+ ];
  },
 })(({ theme, styleProps }) => {
  const backgroundColorDefault =