[CardOverflow][joy-ui] Remove conditional CSS to support Next.js App …

…dir (#39101)
mui · Oct 20, 2023 · 1657fbd · 1657fbd
1 parent 4ea27e4
commit 1657fbd
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 50 deletions.
diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx
@@ -171,14 +171,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
@@ -15,6 +15,8 @@ import {
 } from './CardOverflowProps';
 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;
@@ -43,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} &, .${modalDialogClasses.root} &`]: {
       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!],
   };
 });