Skip to content

Commit

Permalink
fix to backdrop.js and test
Browse files Browse the repository at this point in the history
  • Loading branch information
Harry Whorlow committed Feb 16, 2024
1 parent 23a06da commit b59e68b
Show file tree
Hide file tree
Showing 7 changed files with 370 additions and 376 deletions.
235 changes: 118 additions & 117 deletions packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,129 +35,130 @@ const useUtilityClasses = (ownerState: ButtonGroupOwnerState) => {
return composeClasses(slots, getButtonGroupUtilityClass, {});
};

export const StyledButtonGroup = styled('div')<{ ownerState: ButtonGroupOwnerState }>(({
theme,
ownerState,
}) => {
const { borderRadius: radius } = resolveSxValue({ theme, ownerState }, ['borderRadius']);
const firstChildRadius =
ownerState.orientation === 'vertical'
? 'var(--ButtonGroup-radius) var(--ButtonGroup-radius) var(--unstable_childRadius) var(--unstable_childRadius)'
: 'var(--ButtonGroup-radius) var(--unstable_childRadius) var(--unstable_childRadius) var(--ButtonGroup-radius)';
const lastChildRadius =
ownerState.orientation === 'vertical'
? 'var(--unstable_childRadius) var(--unstable_childRadius) var(--ButtonGroup-radius) var(--ButtonGroup-radius)'
: 'var(--unstable_childRadius) var(--ButtonGroup-radius) var(--ButtonGroup-radius) var(--unstable_childRadius)';
const margin =
ownerState.orientation === 'vertical'
? 'calc(var(--ButtonGroup-separatorSize) * -1) 0 0 0'
: '0 0 0 calc(var(--ButtonGroup-separatorSize) * -1)';
const styles = {};
traverseBreakpoints<string | number | null>(
theme.breakpoints,
ownerState.spacing,
(appendStyle, value) => {
if (value !== null) {
appendStyle(styles, {
// the buttons should be connected if the value is more than 0
'--ButtonGroup-connected': value.toString().match(/^0(?!\.)/) ? '1' : '0',
gap: typeof value === 'string' ? value : theme.spacing?.(value),
});
}
},
);
const outlinedStyle = theme.variants.outlined?.[ownerState.color!];
const outlinedDisabledStyle = theme.variants.outlinedDisabled?.[ownerState.color!];
const outlinedHoverStyle = theme.variants.outlinedHover?.[ownerState.color!];

return [
{
'--ButtonGroup-separatorSize':
ownerState.variant === 'outlined' ? '1px' : 'calc(var(--ButtonGroup-connected) * 1px)',
'--ButtonGroup-separatorColor': outlinedStyle?.borderColor,
'--ButtonGroup-radius': theme.vars.radius.sm,
'--Divider-inset': '0.5rem',
'--unstable_childRadius':
'calc((1 - var(--ButtonGroup-connected)) * var(--ButtonGroup-radius) - var(--variant-borderWidth, 0px))', // for internal usage
...styles,
display: 'flex',
borderRadius: 'var(--ButtonGroup-radius)',
flexDirection: ownerState.orientation === 'vertical' ? 'column' : 'row',
// first Button or IconButton
[`& > [data-first-child]`]: {
'--Button-radius': firstChildRadius,
'--IconButton-radius': firstChildRadius,
...(ownerState.orientation === 'horizontal' && {
borderRight: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
}),
...(ownerState.orientation === 'vertical' && {
borderBottom: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
}),
},
// middle Buttons or IconButtons
[`& > :not([data-first-child]):not([data-last-child]):not(:only-child)`]: {
'--Button-radius': 'var(--unstable_childRadius)',
'--IconButton-radius': 'var(--unstable_childRadius)',
borderRadius: 'var(--unstable_childRadius)',
...(ownerState.orientation === 'horizontal' && {
borderLeft: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
borderRight: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
}),
...(ownerState.orientation === 'vertical' && {
borderTop: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
borderBottom: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
}),
},
// last Button or IconButton
[`& > [data-last-child]`]: {
'--Button-radius': lastChildRadius,
'--IconButton-radius': lastChildRadius,
...(ownerState.orientation === 'horizontal' && {
borderLeft: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
}),
...(ownerState.orientation === 'vertical' && {
borderTop: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
}),
},
// single Button or IconButton
[`& > :only-child`]: {
'--Button-radius': 'var(--ButtonGroup-radius)',
'--IconButton-radius': 'var(--ButtonGroup-radius)',
},
[`& > :not([data-first-child]):not(:only-child)`]: {
'--Button-margin': margin,
'--IconButton-margin': margin,
export const StyledButtonGroup = styled('div')<{ ownerState: ButtonGroupOwnerState }>(
({ theme, ownerState }) => {
const { borderRadius: radius } = resolveSxValue({ theme, ownerState }, ['borderRadius']);
const firstChildRadius =
ownerState.orientation === 'vertical'
? 'var(--ButtonGroup-radius) var(--ButtonGroup-radius) var(--unstable_childRadius) var(--unstable_childRadius)'
: 'var(--ButtonGroup-radius) var(--unstable_childRadius) var(--unstable_childRadius) var(--ButtonGroup-radius)';
const lastChildRadius =
ownerState.orientation === 'vertical'
? 'var(--unstable_childRadius) var(--unstable_childRadius) var(--ButtonGroup-radius) var(--ButtonGroup-radius)'
: 'var(--unstable_childRadius) var(--ButtonGroup-radius) var(--ButtonGroup-radius) var(--unstable_childRadius)';
const margin =
ownerState.orientation === 'vertical'
? 'calc(var(--ButtonGroup-separatorSize) * -1) 0 0 0'
: '0 0 0 calc(var(--ButtonGroup-separatorSize) * -1)';
const styles = {};
traverseBreakpoints<string | number | null>(
theme.breakpoints,
ownerState.spacing,
(appendStyle, value) => {
if (value !== null) {
appendStyle(styles, {
// the buttons should be connected if the value is more than 0
'--ButtonGroup-connected': value.toString().match(/^0(?!\.)/) ? '1' : '0',
gap: typeof value === 'string' ? value : theme.spacing?.(value),
});
}
},
[`& .${buttonClasses.root}, & .${iconButtonClasses.root}`]: {
'&:not(:disabled)': {
zIndex: 1, // to make borders appear above disabled buttons.
);
const outlinedStyle = theme.variants.outlined?.[ownerState.color!];
const outlinedDisabledStyle = theme.variants.outlinedDisabled?.[ownerState.color!];
const outlinedHoverStyle = theme.variants.outlinedHover?.[ownerState.color!];

return [
{
'--ButtonGroup-separatorSize':
ownerState.variant === 'outlined' ? '1px' : 'calc(var(--ButtonGroup-connected) * 1px)',
'--ButtonGroup-separatorColor': outlinedStyle?.borderColor,
'--ButtonGroup-radius': theme.vars.radius.sm,
'--Divider-inset': '0.5rem',
'--unstable_childRadius':
'calc((1 - var(--ButtonGroup-connected)) * var(--ButtonGroup-radius) - var(--variant-borderWidth, 0px))', // for internal usage
...styles,
display: 'flex',
borderRadius: 'var(--ButtonGroup-radius)',
flexDirection: ownerState.orientation === 'vertical' ? 'column' : 'row',
// first Button or IconButton
[`& > [data-first-child]`]: {
'--Button-radius': firstChildRadius,
'--IconButton-radius': firstChildRadius,
...(ownerState.orientation === 'horizontal' && {
borderRight: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
}),
...(ownerState.orientation === 'vertical' && {
borderBottom:
'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
}),
},
'&:disabled': {
'--ButtonGroup-separatorColor': outlinedDisabledStyle?.borderColor,
// middle Buttons or IconButtons
[`& > :not([data-first-child]):not([data-last-child]):not(:only-child)`]: {
'--Button-radius': 'var(--unstable_childRadius)',
'--IconButton-radius': 'var(--unstable_childRadius)',
borderRadius: 'var(--unstable_childRadius)',
...(ownerState.orientation === 'horizontal' && {
borderLeft: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
borderRight: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
}),
...(ownerState.orientation === 'vertical' && {
borderTop: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
borderBottom:
'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
}),
},
...(ownerState.variant === 'outlined' && {
'&:hover': {
'--ButtonGroup-separatorColor': outlinedHoverStyle?.borderColor,
},
}),
[`&:hover, ${theme.focus.selector}`]: {
zIndex: 2, // to make borders appear above sibling.
// last Button or IconButton
[`& > [data-last-child]`]: {
'--Button-radius': lastChildRadius,
'--IconButton-radius': lastChildRadius,
...(ownerState.orientation === 'horizontal' && {
borderLeft: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
}),
...(ownerState.orientation === 'vertical' && {
borderTop: 'var(--ButtonGroup-separatorSize) solid var(--ButtonGroup-separatorColor)',
}),
},
},
...(ownerState.buttonFlex && {
[`& > *:not(.${iconButtonClasses.root})`]: {
flex: ownerState.buttonFlex,
// single Button or IconButton
[`& > :only-child`]: {
'--Button-radius': 'var(--ButtonGroup-radius)',
'--IconButton-radius': 'var(--ButtonGroup-radius)',
},
[`& > :not(button) > .${buttonClasses.root}`]: {
width: '100%', // for button to fill its wrapper.
[`& > :not([data-first-child]):not(:only-child)`]: {
'--Button-margin': margin,
'--IconButton-margin': margin,
},
}),
} as const,
radius !== undefined && {
'--ButtonGroup-radius': radius,
},
];
});
[`& .${buttonClasses.root}, & .${iconButtonClasses.root}`]: {
'&:not(:disabled)': {
zIndex: 1, // to make borders appear above disabled buttons.
},
'&:disabled': {
'--ButtonGroup-separatorColor': outlinedDisabledStyle?.borderColor,
},
...(ownerState.variant === 'outlined' && {
'&:hover': {
'--ButtonGroup-separatorColor': outlinedHoverStyle?.borderColor,
},
}),
[`&:hover, ${theme.focus.selector}`]: {
zIndex: 2, // to make borders appear above sibling.
},
},
...(ownerState.buttonFlex && {
[`& > *:not(.${iconButtonClasses.root})`]: {
flex: ownerState.buttonFlex,
},
[`& > :not(button) > .${buttonClasses.root}`]: {
width: '100%', // for button to fill its wrapper.
},
}),
} as const,
radius !== undefined && {
'--ButtonGroup-radius': radius,
},
];
},
);

const ButtonGroupRoot = styled(StyledButtonGroup, {
name: 'JoyButtonGroup',
Expand Down
135 changes: 67 additions & 68 deletions packages/mui-joy/src/Card/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,74 +32,73 @@ const useUtilityClasses = (ownerState: CardOwnerState) => {
return composeClasses(slots, getCardUtilityClass, {});
};

export const StyledCardRoot = styled('div')<{ ownerState: CardOwnerState }>(({
theme,
ownerState,
}) => {
const { p, padding, borderRadius } = resolveSxValue({ theme, ownerState }, [
'p',
'padding',
'borderRadius',
]);
return [
{
'--Icon-color':
ownerState.color !== 'neutral' || ownerState.variant === 'solid'
? 'currentColor'
: theme.vars.palette.text.icon,
// a context variable for any child component
'--Card-childRadius':
'max((var(--Card-radius) - var(--variant-borderWidth, 0px)) - var(--Card-padding), min(var(--Card-padding) / 2, (var(--Card-radius) - var(--variant-borderWidth, 0px)) / 2))',
// AspectRatio integration
'--AspectRatio-radius': 'var(--Card-childRadius)',
// Link integration
'--unstable_actionMargin': 'calc(-1 * var(--variant-borderWidth, 0px))',
// Link, Radio, Checkbox integration
'--unstable_actionRadius': 'var(--Card-radius)',
// CardCover integration
'--CardCover-radius': 'calc(var(--Card-radius) - var(--variant-borderWidth, 0px))',
// CardOverflow integration
'--CardOverflow-offset': `calc(-1 * var(--Card-padding))`,
'--CardOverflow-radius': 'calc(var(--Card-radius) - var(--variant-borderWidth, 0px))',
// Divider integration
'--Divider-inset': 'calc(-1 * var(--Card-padding))',
...(ownerState.size === 'sm' && {
'--Card-radius': theme.vars.radius.sm,
'--Card-padding': '0.625rem',
gap: '0.5rem',
}),
...(ownerState.size === 'md' && {
'--Card-radius': theme.vars.radius.md,
'--Card-padding': '1rem',
gap: '0.75rem 1rem',
}),
...(ownerState.size === 'lg' && {
'--Card-radius': theme.vars.radius.lg,
'--Card-padding': '1.5rem',
gap: '1rem 1.5rem',
}),
padding: 'var(--Card-padding)',
borderRadius: 'var(--Card-radius)',
backgroundColor: theme.vars.palette.background.surface,
position: 'relative',
display: 'flex',
flexDirection: ownerState.orientation === 'horizontal' ? 'row' : 'column',
...theme.typography[`body-${ownerState.size!}`],
...(ownerState.variant === 'solid' &&
ownerState.color &&
ownerState.invertedColors &&
applySolidInversion(ownerState.color)(theme)),
...(ownerState.variant === 'soft' &&
ownerState.color &&
ownerState.invertedColors &&
applySoftInversion(ownerState.color)(theme)),
...theme.variants[ownerState.variant!]?.[ownerState.color!],
} as const,
p !== undefined && { '--Card-padding': p },
padding !== undefined && { '--Card-padding': padding },
borderRadius !== undefined && { '--Card-radius': borderRadius },
];
});
export const StyledCardRoot = styled('div')<{ ownerState: CardOwnerState }>(
({ theme, ownerState }) => {
const { p, padding, borderRadius } = resolveSxValue({ theme, ownerState }, [
'p',
'padding',
'borderRadius',
]);
return [
{
'--Icon-color':
ownerState.color !== 'neutral' || ownerState.variant === 'solid'
? 'currentColor'
: theme.vars.palette.text.icon,
// a context variable for any child component
'--Card-childRadius':
'max((var(--Card-radius) - var(--variant-borderWidth, 0px)) - var(--Card-padding), min(var(--Card-padding) / 2, (var(--Card-radius) - var(--variant-borderWidth, 0px)) / 2))',
// AspectRatio integration
'--AspectRatio-radius': 'var(--Card-childRadius)',
// Link integration
'--unstable_actionMargin': 'calc(-1 * var(--variant-borderWidth, 0px))',
// Link, Radio, Checkbox integration
'--unstable_actionRadius': 'var(--Card-radius)',
// CardCover integration
'--CardCover-radius': 'calc(var(--Card-radius) - var(--variant-borderWidth, 0px))',
// CardOverflow integration
'--CardOverflow-offset': `calc(-1 * var(--Card-padding))`,
'--CardOverflow-radius': 'calc(var(--Card-radius) - var(--variant-borderWidth, 0px))',
// Divider integration
'--Divider-inset': 'calc(-1 * var(--Card-padding))',
...(ownerState.size === 'sm' && {
'--Card-radius': theme.vars.radius.sm,
'--Card-padding': '0.625rem',
gap: '0.5rem',
}),
...(ownerState.size === 'md' && {
'--Card-radius': theme.vars.radius.md,
'--Card-padding': '1rem',
gap: '0.75rem 1rem',
}),
...(ownerState.size === 'lg' && {
'--Card-radius': theme.vars.radius.lg,
'--Card-padding': '1.5rem',
gap: '1rem 1.5rem',
}),
padding: 'var(--Card-padding)',
borderRadius: 'var(--Card-radius)',
backgroundColor: theme.vars.palette.background.surface,
position: 'relative',
display: 'flex',
flexDirection: ownerState.orientation === 'horizontal' ? 'row' : 'column',
...theme.typography[`body-${ownerState.size!}`],
...(ownerState.variant === 'solid' &&
ownerState.color &&
ownerState.invertedColors &&
applySolidInversion(ownerState.color)(theme)),
...(ownerState.variant === 'soft' &&
ownerState.color &&
ownerState.invertedColors &&
applySoftInversion(ownerState.color)(theme)),
...theme.variants[ownerState.variant!]?.[ownerState.color!],
} as const,
p !== undefined && { '--Card-padding': p },
padding !== undefined && { '--Card-padding': padding },
borderRadius !== undefined && { '--Card-radius': borderRadius },
];
},
);

const CardRoot = styled(StyledCardRoot, {
name: 'JoyCard',
Expand Down
Loading

0 comments on commit b59e68b

Please sign in to comment.