From 4a9dfda02ebfb8dc1c23a2ce65005271edec9fb6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 22 Sep 2023 12:31:15 +0700 Subject: [PATCH 1/3] remove conditional CSS --- packages/mui-joy/src/Card/Card.tsx | 8 -- .../mui-joy/src/CardOverflow/CardOverflow.tsx | 79 +++++++++---------- 2 files changed, 37 insertions(+), 50 deletions(-) diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx index 48d3d77fbf904b..433f1fca76a931 100644 --- a/packages/mui-joy/src/Card/Card.tsx +++ b/packages/mui-joy/src/Card/Card.tsx @@ -167,14 +167,6 @@ const Card = React.forwardRef(function Card(inProps, ref) { extraProps.orientation = 'orientation' in child.props ? child.props.orientation : dividerOrientation; } - if (isMuiElement(child, ['CardOverflow'])) { - if (orientation === 'horizontal') { - extraProps['data-parent'] = 'Card-horizontal'; - } - if (orientation === 'vertical') { - extraProps['data-parent'] = 'Card-vertical'; - } - } if (index === 0) { extraProps['data-first-child'] = ''; } diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx index 17ed565de6d0dd..9262aec740ed8b 100644 --- a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx +++ b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx @@ -16,6 +16,7 @@ import { } from './CardOverflowProps'; import useSlot from '../utils/useSlot'; import buttonClasses from '../Button/buttonClasses'; +import cardClasses from '../Card/cardClasses'; const useUtilityClasses = (ownerState: CardOverflowOwnerState) => { const { variant, color } = ownerState; @@ -44,67 +45,61 @@ const CardOverflowRoot = styled('div', { const childRadius = 'calc(var(--CardOverflow-radius) - var(--variant-borderWidth, 0px))'; return { alignSelf: 'stretch', // prevent shrinking if parent's align-items is not initial - borderRadius: 'var(--CardOverflow-radius)', position: 'relative', display: 'flex', - ...(ownerState['data-parent'] === 'Card-horizontal' && { + margin: 'var(--_CardOverflow-margin)', + borderRadius: 'var(--_CardOverflow-radius)', + padding: 'var(--_CardOverflow-padding)', + [`.${cardClasses.horizontal} > &`]: { '--AspectRatio-margin': 'calc(-1 * var(--Card-padding)) 0px', - marginTop: 'var(--CardOverflow-offset)', - marginBottom: 'var(--CardOverflow-offset)', - padding: 'var(--Card-padding) 0px', - // use data-attribute instead of :first-child, :last-child to support zero config SSR (emotion) - ...(ownerState['data-first-child'] !== undefined && { + '--_CardOverflow-margin': 'var(--CardOverflow-offset) 0px', + '--_CardOverflow-padding': 'var(--Card-padding) 0px', + '&[data-first-child]': { '--AspectRatio-radius': `${childRadius} 0 0 ${childRadius}`, - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - marginLeft: 'var(--CardOverflow-offset)', - }), - ...(ownerState['data-last-child'] !== undefined && { + '--_CardOverflow-radius': 'var(--CardOverflow-radius) 0 0 var(--CardOverflow-radius)', + '--_CardOverflow-margin': + 'var(--CardOverflow-offset) 0px var(--CardOverflow-offset) var(--CardOverflow-offset)', + }, + '&[data-last-child]': { '--AspectRatio-radius': `0 ${childRadius} ${childRadius} 0`, - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - marginRight: 'var(--CardOverflow-offset)', - }), - ...(ownerState['data-first-child'] !== undefined && - ownerState['data-last-child'] !== undefined && { - '--AspectRatio-radius': childRadius, - }), + '--_CardOverflow-radius': '0 var(--CardOverflow-radius) var(--CardOverflow-radius) 0', + '--_CardOverflow-margin': + 'var(--CardOverflow-offset) var(--CardOverflow-offset) var(--CardOverflow-offset) 0px', + }, + '&[data-last-child][data-first-child]': { + '--AspectRatio-radius': childRadius, + }, [`& > .${buttonClasses.root}:only-child`]: { height: 'calc(100% + -2 * var(--CardOverflow-offset))', '--Button-margin': 'var(--CardOverflow-offset) 0', '--Button-radius': '0 var(--CardOverflow-radius) var(--CardOverflow-radius) 0', }, - }), - ...(ownerState['data-parent'] === 'Card-vertical' && { - '--AspectRatio-margin': '0px calc(-1 * var(--Card-padding))', + }, + [`.${cardClasses.vertical} > &`]: { flexDirection: 'column', // required to make AspectRatio works - marginLeft: 'var(--CardOverflow-offset)', - marginRight: 'var(--CardOverflow-offset)', - padding: '0px var(--Card-padding)', - // use data-attribute instead of :first-child, :last-child to support zero config SSR (emotion) - ...(ownerState['data-first-child'] !== undefined && { + '--AspectRatio-margin': '0 calc(-1 * var(--Card-padding))', + '--_CardOverflow-margin': '0 var(--CardOverflow-offset)', + '--_CardOverflow-padding': '0 var(--Card-padding)', + '&[data-first-child]': { '--AspectRatio-radius': `${childRadius} ${childRadius} 0 0`, - borderBottomLeftRadius: 0, - borderBottomRightRadius: 0, - marginTop: 'var(--CardOverflow-offset)', - }), - ...(ownerState['data-last-child'] !== undefined && { + '--_CardOverflow-radius': 'var(--CardOverflow-radius) var(--CardOverflow-radius) 0 0', + '--_CardOverflow-margin': 'var(--CardOverflow-offset) var(--CardOverflow-offset) 0', + }, + '&[data-last-child]': { '--AspectRatio-radius': `0 0 ${childRadius} ${childRadius}`, - borderTopLeftRadius: 0, - borderTopRightRadius: 0, - marginBottom: 'var(--CardOverflow-offset)', - }), - ...(ownerState['data-first-child'] !== undefined && - ownerState['data-last-child'] !== undefined && { - '--AspectRatio-radius': childRadius, - }), + '--_CardOverflow-radius': '0 0 var(--CardOverflow-radius) var(--CardOverflow-radius)', + '--_CardOverflow-margin': '0 var(--CardOverflow-offset) var(--CardOverflow-offset)', + }, + '&[data-last-child][data-first-child]': { + '--AspectRatio-radius': childRadius, + }, [`& > .${buttonClasses.root}:only-child`]: { zIndex: 1, // prevent button from being covered Link overlay. This can be improved in the future with :has() selector width: 'calc(100% + -2 * var(--CardOverflow-offset))', '--Button-margin': '0 var(--CardOverflow-offset)', '--Button-radius': '0 0 var(--CardOverflow-radius) var(--CardOverflow-radius)', }, - }), + }, ...theme.variants[ownerState.variant!]?.[ownerState.color!], }; }); From ac604f3a667cc8059f8e1a2448bbf429bfffedb4 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 22 Sep 2023 15:10:09 +0700 Subject: [PATCH 2/3] fix integration with ModalDialog --- packages/mui-joy/src/CardOverflow/CardOverflow.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx index 9262aec740ed8b..52a54580ae837f 100644 --- a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx +++ b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx @@ -17,6 +17,7 @@ import { import useSlot from '../utils/useSlot'; import buttonClasses from '../Button/buttonClasses'; import cardClasses from '../Card/cardClasses'; +import modalDialogClasses from '../ModalDialog/modalDialogClasses'; const useUtilityClasses = (ownerState: CardOverflowOwnerState) => { const { variant, color } = ownerState; @@ -75,7 +76,7 @@ const CardOverflowRoot = styled('div', { '--Button-radius': '0 var(--CardOverflow-radius) var(--CardOverflow-radius) 0', }, }, - [`.${cardClasses.vertical} > &`]: { + [`.${cardClasses.vertical} > &, .${modalDialogClasses.root} > &`]: { flexDirection: 'column', // required to make AspectRatio works '--AspectRatio-margin': '0 calc(-1 * var(--Card-padding))', '--_CardOverflow-margin': '0 var(--CardOverflow-offset)', From ab70229fdc92d85e3c203fa359ff85e91dd37f5c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 19 Oct 2023 10:21:57 +0700 Subject: [PATCH 3/3] does not need to be a direct child --- packages/mui-joy/src/CardOverflow/CardOverflow.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx index a049a3f3b35284..3483211eedb921 100644 --- a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx +++ b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx @@ -50,7 +50,7 @@ const CardOverflowRoot = styled('div', { margin: 'var(--_CardOverflow-margin)', borderRadius: 'var(--_CardOverflow-radius)', padding: 'var(--_CardOverflow-padding)', - [`.${cardClasses.horizontal} > &`]: { + [`.${cardClasses.horizontal} &`]: { '--AspectRatio-margin': 'calc(-1 * var(--Card-padding)) 0px', '--_CardOverflow-margin': 'var(--CardOverflow-offset) 0px', '--_CardOverflow-padding': 'var(--Card-padding) 0px', @@ -75,7 +75,7 @@ const CardOverflowRoot = styled('div', { '--Button-radius': '0 var(--CardOverflow-radius) var(--CardOverflow-radius) 0', }, }, - [`.${cardClasses.vertical} > &, .${modalDialogClasses.root} > &`]: { + [`.${cardClasses.vertical} &, .${modalDialogClasses.root} &`]: { flexDirection: 'column', // required to make AspectRatio works '--AspectRatio-margin': '0 calc(-1 * var(--Card-padding))', '--_CardOverflow-margin': '0 var(--CardOverflow-offset)',