Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] Merge options in experimentalStyled #26396

Merged
merged 7 commits into from
May 20, 2021
Merged

[core] Merge options in experimentalStyled #26396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fc8b9c7
init
mnajdova May 20, 2021
2368dee
migration guide
mnajdova May 20, 2021
186994b
Merge branch 'next' into feat/experimentalStyled-merge-options
mnajdova May 20, 2021
7423188
fixes
mnajdova May 20, 2021
bc86db4
proptypes
mnajdova May 20, 2021
b23b2a1
yarn prettier
mnajdova May 20, 2021
d8c5940
revert migration guide
mnajdova May 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions docs/src/modules/branding/BrandingPersona.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,10 @@ interface PersonaRootProps {
styleProps: { size: 'large' | 'small' };
}

const PersonaRoot: OverridableComponent<BoxTypeMap<PersonaRootProps>> = styled(
Box,
{},
{ name: 'Persona', slot: 'Root' },
)<PersonaRootProps>(({ styleProps, theme }) => ({
const PersonaRoot: OverridableComponent<BoxTypeMap<PersonaRootProps>> = styled(Box, {
name: 'Persona',
slot: 'Root',
})<PersonaRootProps>(({ styleProps, theme }) => ({
display: 'flex',
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
Expand Down
32 changes: 6 additions & 26 deletions packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,21 +59,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', { skipSx: true })({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
});

const PickersCalendarWeekDayLabel = styled(
Typography,
{},
{ skipSx: true },
)(({ theme }) => ({
const PickersCalendarWeekDayLabel = styled(Typography, { skipSx: true })(({ theme }) => ({
width: 36,
height: 40,
margin: '0 2px',
Expand All @@ -84,32 +76,20 @@ const PickersCalendarWeekDayLabel = styled(
color: theme.palette.text.secondary,
}));

const PickersCalendarLoadingContainer = styled(
'div',
{},
{ skipSx: true },
)({
const PickersCalendarLoadingContainer = styled('div', { skipSx: true })({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: weeksContainerHeight,
});

const PickersCalendarSlideTransition = styled(
SlideTransition,
{},
{ skipSx: true },
)({
const PickersCalendarSlideTransition = styled(SlideTransition, { skipSx: true })({
minHeight: weeksContainerHeight,
});

const PickersCalendarWeekContainer = styled('div', {}, { skipSx: true })({ overflow: 'hidden' });
const PickersCalendarWeekContainer = styled('div', { skipSx: true })({ overflow: 'hidden' });

const PickersCalendarWeek = styled(
'div',
{},
{ skipSx: true },
)({
const PickersCalendarWeek = styled('div', { skipSx: true })({
margin: `${DAY_MARGIN}px 0`,
display: 'flex',
justifyContent: 'center',
Expand Down
10 changes: 3 additions & 7 deletions packages/material-ui-lab/src/CalendarPicker/PickersFadeTransitionGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,9 @@ const classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', [

const animationDuration = 500;

const PickersFadeTransitionGroupRoot = styled(
TransitionGroup,
{},
{
skipSx: true,
},
)<TransitionGroupProps>(({ theme }) => ({
const PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
skipSx: true,
})<TransitionGroupProps>(({ theme }) => ({
display: 'block',
position: 'relative',
[`& .${classes.fadeEnter}`]: {
Expand Down
98 changes: 48 additions & 50 deletions packages/material-ui-lab/src/CalendarPicker/PickersSlideTransition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,56 +28,54 @@ 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, { 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,
},
};
},
);

/**
* @ignore - do not document.
Expand Down
42 changes: 15 additions & 27 deletions packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,41 +59,29 @@ const useUtilityClasses = (styleProps: CalendarPickerSkeletonProps) => {
return composeClasses(slots, getCalendarPickerSkeletonUtilityClass, classes);
};

const CalendarPickerSkeletonRoot = styled(
'div',
{},
{
name: 'MuiCalendarPickerSkeleton',
slot: 'Root',
overridesResolver: (props, styles) => styles.root,
},
)({
const CalendarPickerSkeletonRoot = styled('div', {
name: 'MuiCalendarPickerSkeleton',
slot: 'Root',
overridesResolver: (props, styles) => styles.root,
})({
alignSelf: 'start',
});

const CalendarPickerSkeletonWeek = styled(
'div',
{},
{
name: 'MuiCalendarPickerSkeleton',
slot: 'Week',
overridesResolver: (props, styles) => styles.week,
},
)({
const CalendarPickerSkeletonWeek = styled('div', {
name: 'MuiCalendarPickerSkeleton',
slot: 'Week',
overridesResolver: (props, styles) => styles.week,
})({
margin: `${DAY_MARGIN}px 0`,
display: 'flex',
justifyContent: 'center',
});

const CalendarPickerSkeletonDay = styled(
Skeleton,
{},
{
name: 'MuiCalendarPickerSkeleton',
slot: 'Day',
overridesResolver: (props, styles) => styles.daySkeleton,
},
)(({ styleProps = {} }) => ({
const CalendarPickerSkeletonDay = styled(Skeleton, {
name: 'MuiCalendarPickerSkeleton',
slot: 'Day',
overridesResolver: (props, styles) => styles.daySkeleton,
})(({ styleProps = {} }) => ({
margin: `0 ${DAY_MARGIN}px`,
...(styleProps.day === 0 && {
visibility: 'hidden',
Expand Down
36 changes: 6 additions & 30 deletions packages/material-ui-lab/src/ClockPicker/Clock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,14 @@ export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
value: number;
}

const ClockRoot = styled(
'div',
{},
{ skipSx: true },
)(({ theme }) => ({
const ClockRoot = styled('div', { skipSx: true })(({ theme }) => ({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
margin: theme.spacing(2),
}));

const ClockClock = styled(
'div',
{},
{ skipSx: true },
)({
const ClockClock = styled('div', { skipSx: true })({
backgroundColor: 'rgba(0,0,0,.07)',
borderRadius: '50%',
height: 220,
Expand All @@ -52,11 +44,7 @@ const ClockClock = styled(
pointerEvents: 'none',
});

const ClockSquareMask = styled(
'div',
{},
{ skipSx: true },
)({
const ClockSquareMask = styled('div', { skipSx: true })({
width: '100%',
height: '100%',
position: 'absolute',
Expand All @@ -74,11 +62,7 @@ const ClockSquareMask = styled(
},
});

const ClockPin = styled(
'div',
{},
{ skipSx: true },
)(({ theme }) => ({
const ClockPin = styled('div', { skipSx: true })(({ theme }) => ({
width: 6,
height: 6,
borderRadius: '50%',
Expand All @@ -89,11 +73,7 @@ const ClockPin = styled(
transform: 'translate(-50%, -50%)',
}));

const ClockAmButton = styled(
IconButton,
{},
{ skipSx: true },
)(({ theme, styleProps = {} }) => ({
const ClockAmButton = styled(IconButton, { skipSx: true })(({ theme, styleProps = {} }) => ({
zIndex: 1,
position: 'absolute',
bottom: 8,
Expand All @@ -107,11 +87,7 @@ const ClockAmButton = styled(
}),
}));

const ClockPmButton = styled(
IconButton,
{},
{ skipSx: true },
)(({ theme, styleProps = {} }) => ({
const ClockPmButton = styled(IconButton, { skipSx: true })(({ theme, styleProps = {} }) => ({
zIndex: 1,
position: 'absolute',
bottom: 8,
Expand Down
6 changes: 1 addition & 5 deletions packages/material-ui-lab/src/ClockPicker/ClockNumber.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,7 @@ export interface ClockNumberProps extends React.HTMLAttributes<HTMLSpanElement>

export const classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);

const ClockNumberRoot = styled(
'span',
{},
{ skipSx: true },
)(({ theme, styleProps = {} }) => ({
const ClockNumberRoot = styled('span', { skipSx: true })(({ theme, styleProps = {} }) => ({
height: CLOCK_HOUR_WIDTH,
width: CLOCK_HOUR_WIDTH,
position: 'absolute',
Expand Down
Loading