Merge pull request #134 from osstotalsoft/feature/CardHeaderChanges

remove card header padding when only avatar
osstotalsoft · Oct 16, 2024 · b90d4db · b90d4db
2 parents b94f44f + 45c583a
commit b90d4db
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/components/surfaces/Card/Card.tsx b/src/components/surfaces/Card/Card.tsx
@@ -76,7 +76,11 @@ const Card: React.FC<CardProps> = ({
         />
       )}
       {mediaProps && <CardMedia {...sizes[size || 's']} {...standardMediaProps} />}
-      {disablePadding ? children : <CardContent hasHeader={hasHeader} children={children} {...contentProps} />}
+      {disablePadding ? (
+        children
+      ) : (
+        <CardContent hasHeader={hasHeader} hasIcon={hasIcon} children={children} {...contentProps} />
+      )}
       {footer && (
         <CardActions filled={filled} {...footerProps}>
           {footer}

diff --git a/src/components/surfaces/Card/CardHeader/CardHeaderStyles.ts b/src/components/surfaces/Card/CardHeader/CardHeaderStyles.ts
@@ -26,7 +26,8 @@ const CardHeader = styled(MuiCardHeader, {
     headerContentProps
   }: Partial<StyledProps>) => ({
     ['&.MuiCardHeader-root']: {
-      ...(filled && { backgroundColor: theme?.palette.grey[200], minHeight: '48px' })
+      ...(filled && { backgroundColor: theme?.palette.grey[200], minHeight: '48px' }),
+      ...(hasIcon ? { padding: 0 } : {})
     },
     ['& .MuiCardHeader-avatar']: {
       ...(hasIcon && {

diff --git a/src/components/surfaces/Card/CardStyles.ts b/src/components/surfaces/Card/CardStyles.ts
@@ -52,10 +52,10 @@ const Card = styled(BaseCard, {
 })
 
 export const CardContent = styled(BaseCardContent, {
-  shouldForwardProp: prop => !includes(prop, ['hasHeader'])
-})(({ hasHeader }: { hasHeader: boolean }) => {
+  shouldForwardProp: prop => !includes(prop, ['hasHeader', 'hasIcon'])
+})(({ hasHeader, hasIcon }: { hasHeader: boolean; hasIcon: boolean }) => {
   return {
-    padding: hasHeader ? '8px 24px 24px 24px' : '24px'
+    padding: !hasHeader || hasIcon ? '24px' : '8px 24px 24px 24px'
   }
 })