[pickers] Enable the sx props on all components (mui#30749)

Author: boutahlilsoufiane

TYPESCRIPT_CONVENTION.md

@@ -4,14 +4,13 @@
 
 > **Public components** are considered all components exported from `@mui/material` or `@mui/lab`.
 >
-> **Internal components** are considered all components that are not exported from the packages, but only used in some public component. There is no need to have `sx` prop on these components
+> **Internal components** are considered all components that are not exported from the packages, but only used in some public component.
 
 ### `Props Interface`
 
 - 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
 
 <details>
   <summary>Public component</summary>
@@ -64,6 +63,7 @@ export interface BarClasses {
 
 export interface BarProps {
   classes?: Partial<BarClasses>;
+  sx?: SxProps<Theme>;
 }
 ```
 
@@ -127,7 +127,6 @@ const classes = generateUtilityClasses('PrivateBar', ['root', 'bar']);
 ### `StyledComponent`
 
 - naming using slot `{ComponentName}{Slot}`
-- use `skipSx` for internal component without specifying `name`, `slot` and `overridesResolver`
 - to extend interface of the styled component, pass argument to generic
 
 <details>
@@ -148,7 +147,7 @@ const FooRoot = styled(Typography, {
   <summary>internal component</summary>
 
 ```ts
-const BarRoot = styled(Typography, { skipSx: true })({
+const BarRoot = styled(Typography)({
   // styling
 });
 ```
@@ -158,7 +157,7 @@ const BarRoot = styled(Typography, { skipSx: true })({
   <summary>extends interface</summary>
 
 ```ts
-const BarRoot = styled(Typography, { skipSx: true })<{
+const BarRoot = styled(Typography)<{
   component?: React.ElementType;
   ownerState: BarProps;
 }>(({ theme, ownerState }) => ({
@@ -215,7 +214,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')(({ theme }) => ({
   [`&.${classes.selected}`]: {
     color: theme.palette.text.primary,
   },

packages/mui-lab/src/CalendarPicker/PickersCalendar.tsx

@@ -58,13 +58,13 @@ export interface PickersCalendarProps<TDate> extends ExportedCalendarProps<TDate
 
 const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
 
-const PickersCalendarDayHeader = styled('div', { skipSx: true })({
+const PickersCalendarDayHeader = styled('div')({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
 });
 
-const PickersCalendarWeekDayLabel = styled(Typography, { skipSx: true })(({ theme }) => ({
+const PickersCalendarWeekDayLabel = styled(Typography)(({ theme }) => ({
   width: 36,
   height: 40,
   margin: '0 2px',
@@ -75,20 +75,20 @@ const PickersCalendarWeekDayLabel = styled(Typography, { skipSx: true })(({ them
   color: theme.palette.text.secondary,
 }));
 
-const PickersCalendarLoadingContainer = styled('div', { skipSx: true })({
+const PickersCalendarLoadingContainer = styled('div')({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   minHeight: weeksContainerHeight,
 });
 
-const PickersCalendarSlideTransition = styled(SlideTransition, { skipSx: true })({
+const PickersCalendarSlideTransition = styled(SlideTransition)({
   minHeight: weeksContainerHeight,
 });
 
-const PickersCalendarWeekContainer = styled('div', { skipSx: true })({ overflow: 'hidden' });
+const PickersCalendarWeekContainer = styled('div')({ overflow: 'hidden' });
 
-const PickersCalendarWeek = styled('div', { skipSx: true })({
+const PickersCalendarWeek = styled('div')({
   margin: `${DAY_MARGIN}px 0`,
   display: 'flex',
   justifyContent: 'center',

packages/mui-lab/src/CalendarPicker/PickersCalendarHeader.tsx

@@ -61,7 +61,7 @@ export interface PickersCalendarHeaderProps<TDate>
   onViewChange?: (view: CalendarPickerView) => void;
 }
 
-const PickersCalendarHeaderRoot = styled('div', { skipSx: true })<{
+const PickersCalendarHeaderRoot = styled('div')<{
   ownerState: PickersCalendarHeaderProps<any>;
 }>({
   display: 'flex',
@@ -75,7 +75,7 @@ const PickersCalendarHeaderRoot = styled('div', { skipSx: true })<{
   minHeight: 30,
 });
 
-const PickersCalendarHeaderLabel = styled('div', { skipSx: true })<{
+const PickersCalendarHeaderLabel = styled('div')<{
   ownerState: PickersCalendarHeaderProps<any>;
 }>(({ theme }) => ({
   display: 'flex',
@@ -88,17 +88,17 @@ const PickersCalendarHeaderLabel = styled('div', { skipSx: true })<{
   fontWeight: theme.typography.fontWeightMedium,
 }));
 
-const PickersCalendarHeaderLabelItem = styled('div', { skipSx: true })<{
+const PickersCalendarHeaderLabelItem = styled('div')<{
   ownerState: PickersCalendarHeaderProps<any>;
 }>({
   marginRight: 6,
 });
 
-const PickersCalendarHeaderSwitchViewButton = styled(IconButton, { skipSx: true })({
+const PickersCalendarHeaderSwitchViewButton = styled(IconButton)({
   marginRight: 'auto',
 });
 
-const PickersCalendarHeaderSwitchView = styled(ArrowDropDownIcon, { skipSx: true })<{
+const PickersCalendarHeaderSwitchView = styled(ArrowDropDownIcon)<{
   ownerState: PickersCalendarHeaderProps<any>;
 }>(({ theme, ownerState }) => ({
   willChange: 'transform',

packages/mui-lab/src/CalendarPicker/PickersFadeTransitionGroup.tsx

@@ -16,9 +16,7 @@ const classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', ['ro
 
 const animationDuration = 500;
 
-const PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
-  skipSx: true,
-})({
+const PickersFadeTransitionGroupRoot = styled(TransitionGroup)({
   display: 'block',
   position: 'relative',
 });

packages/mui-lab/src/CalendarPicker/PickersSlideTransition.tsx

@@ -28,54 +28,52 @@ const classes = generateUtilityClasses('PrivatePickersSlideTransition', [
 
 export const slideAnimationDuration = 350;
 
-const PickersSlideTransitionRoot = styled(TransitionGroup, { skipSx: true })<TransitionGroupProps>(
-  ({ theme }) => {
-    const slideTransition = theme.transitions.create('transform', {
-      duration: slideAnimationDuration,
-      easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)',
-    });
-    return {
-      display: 'block',
-      position: 'relative',
-      overflowX: 'hidden',
-      '& > *': {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        left: 0,
-      },
-      [`& .${classes['slideEnter-left']}`]: {
-        willChange: 'transform',
-        transform: 'translate(100%)',
-        zIndex: 1,
-      },
-      [`& .${classes['slideEnter-right']}`]: {
-        willChange: 'transform',
-        transform: 'translate(-100%)',
-        zIndex: 1,
-      },
-      [`& .${classes.slideEnterActive}`]: {
-        transform: 'translate(0%)',
-        transition: slideTransition,
-      },
-      [`& .${classes.slideExit}`]: {
-        transform: 'translate(0%)',
-      },
-      [`& .${classes['slideExitActiveLeft-left']}`]: {
-        willChange: 'transform',
-        transform: 'translate(-100%)',
-        transition: slideTransition,
-        zIndex: 0,
-      },
-      [`& .${classes['slideExitActiveLeft-right']}`]: {
-        willChange: 'transform',
-        transform: 'translate(100%)',
-        transition: slideTransition,
-        zIndex: 0,
-      },
-    };
-  },
-);
+const PickersSlideTransitionRoot = styled(TransitionGroup)<TransitionGroupProps>(({ theme }) => {
+  const slideTransition = theme.transitions.create('transform', {
+    duration: slideAnimationDuration,
+    easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)',
+  });
+  return {
+    display: 'block',
+    position: 'relative',
+    overflowX: 'hidden',
+    '& > *': {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0,
+    },
+    [`& .${classes['slideEnter-left']}`]: {
+      willChange: 'transform',
+      transform: 'translate(100%)',
+      zIndex: 1,
+    },
+    [`& .${classes['slideEnter-right']}`]: {
+      willChange: 'transform',
+      transform: 'translate(-100%)',
+      zIndex: 1,
+    },
+    [`& .${classes.slideEnterActive}`]: {
+      transform: 'translate(0%)',
+      transition: slideTransition,
+    },
+    [`& .${classes.slideExit}`]: {
+      transform: 'translate(0%)',
+    },
+    [`& .${classes['slideExitActiveLeft-left']}`]: {
+      willChange: 'transform',
+      transform: 'translate(-100%)',
+      transition: slideTransition,
+      zIndex: 0,
+    },
+    [`& .${classes['slideExitActiveLeft-right']}`]: {
+      willChange: 'transform',
+      transform: 'translate(100%)',
+      transition: slideTransition,
+      zIndex: 0,
+    },
+  };
+});
 
 /**
  * @ignore - do not document.

packages/mui-lab/src/ClockPicker/Clock.tsx

@@ -33,14 +33,14 @@ export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
   value: number;
 }
 
-const ClockRoot = styled('div', { skipSx: true })(({ theme }) => ({
+const ClockRoot = styled('div')(({ theme }) => ({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   margin: theme.spacing(2),
 }));
 
-const ClockClock = styled('div', { skipSx: true })({
+const ClockClock = styled('div')({
   backgroundColor: 'rgba(0,0,0,.07)',
   borderRadius: '50%',
   height: 220,
@@ -50,7 +50,7 @@ const ClockClock = styled('div', { skipSx: true })({
   pointerEvents: 'none',
 });
 
-const ClockSquareMask = styled('div', { skipSx: true })({
+const ClockSquareMask = styled('div')({
   width: '100%',
   height: '100%',
   position: 'absolute',
@@ -68,7 +68,7 @@ const ClockSquareMask = styled('div', { skipSx: true })({
   },
 });
 
-const ClockPin = styled('div', { skipSx: true })(({ theme }) => ({
+const ClockPin = styled('div')(({ theme }) => ({
   width: 6,
   height: 6,
   borderRadius: '50%',
@@ -79,7 +79,7 @@ const ClockPin = styled('div', { skipSx: true })(({ theme }) => ({
   transform: 'translate(-50%, -50%)',
 }));
 
-const ClockAmButton = styled(IconButton, { skipSx: true })<{ ownerState: ClockProps<any> }>(
+const ClockAmButton = styled(IconButton)<{ ownerState: ClockProps<any> }>(
   ({ theme, ownerState }) => ({
     zIndex: 1,
     position: 'absolute',
@@ -95,7 +95,7 @@ const ClockAmButton = styled(IconButton, { skipSx: true })<{ ownerState: ClockPr
   }),
 );
 
-const ClockPmButton = styled(IconButton, { skipSx: true })<{ ownerState: ClockProps<any> }>(
+const ClockPmButton = styled(IconButton)<{ ownerState: ClockProps<any> }>(
   ({ theme, ownerState }) => ({
     zIndex: 1,
     position: 'absolute',

packages/mui-lab/src/ClockPicker/ClockNumber.tsx

@@ -19,7 +19,7 @@ export interface ClockNumberProps extends React.HTMLAttributes<HTMLSpanElement>
 
 export const classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);
 
-const ClockNumberRoot = styled('span', { skipSx: true })<{ ownerState: ClockNumberProps }>(
+const ClockNumberRoot = styled('span')<{ ownerState: ClockNumberProps }>(
   ({ theme, ownerState }) => ({
     height: CLOCK_HOUR_WIDTH,
     width: CLOCK_HOUR_WIDTH,

packages/mui-lab/src/ClockPicker/ClockPointer.tsx

@@ -9,7 +9,7 @@ export interface ClockPointerProps extends React.HTMLAttributes<HTMLDivElement>
   value: number;
 }
 
-const ClockPointerRoot = styled('div', { skipSx: true })<{
+const ClockPointerRoot = styled('div')<{
   ownerState: ClockPointerProps & ClockPointer['state'];
 }>(({ theme, ownerState }) => ({
   width: 2,
@@ -23,7 +23,7 @@ const ClockPointerRoot = styled('div', { skipSx: true })<{
   }),
 }));
 
-const ClockPointerThumb = styled('div', { skipSx: true })<{
+const ClockPointerThumb = styled('div')<{
   ownerState: ClockPointerProps & ClockPointer['state'];
 }>(({ theme, ownerState }) => ({
   width: 4,

packages/mui-lab/src/DatePicker/DatePickerToolbar.tsx

@@ -10,20 +10,18 @@ import { CalendarPickerView } from '../CalendarPicker';
 
 const classes = generateUtilityClasses('PrivateDatePickerToolbar', ['penIcon']);
 
-const DatePickerToolbarRoot = styled(PickersToolbar, { skipSx: true })<{ ownerState: any }>({
+const DatePickerToolbarRoot = styled(PickersToolbar)<{ ownerState: any }>({
   [`& .${classes.penIcon}`]: {
     position: 'relative',
     top: 4,
   },
 });
 
-const DatePickerToolbarTitle = styled(Typography, { skipSx: true })<{ ownerState: any }>(
-  ({ ownerState }) => ({
-    ...(ownerState.isLandscape && {
-      margin: 'auto 16px auto auto',
-    }),
+const DatePickerToolbarTitle = styled(Typography)<{ ownerState: any }>(({ ownerState }) => ({
+  ...(ownerState.isLandscape && {
+    margin: 'auto 16px auto auto',
   }),
-);
+}));
 
 /**
  * @ignore - internal component.

packages/mui-lab/src/DateRangePicker/DateRangePickerInput.tsx

@@ -12,7 +12,7 @@ import {
   MuiTextFieldProps,
 } from '../internal/pickers/PureDateInput';
 
-const DateRangePickerInputRoot = styled('div', { skipSx: true })(({ theme }) => ({
+const DateRangePickerInputRoot = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'baseline',
   [theme.breakpoints.down('xs')]: {

packages/mui-lab/src/DateRangePicker/DateRangePickerToolbar.tsx

@@ -23,14 +23,14 @@ interface DateRangePickerToolbarProps
   setCurrentlySelectingRangeEnd: (newSelectingEnd: 'start' | 'end') => void;
 }
 
-const DateRangePickerToolbarRoot = styled(PickersToolbar, { skipSx: true })({
+const DateRangePickerToolbarRoot = styled(PickersToolbar)({
   [`& .${classes.penIcon}`]: {
     position: 'relative',
     top: 4,
   },
 });
 
-const DateRangePickerToolbarContainer = styled('div', { skipSx: true })({
+const DateRangePickerToolbarContainer = styled('div')({
   display: 'flex',
 });