From 5291b77cf60207e84578ac4893ba7052e2313d4a Mon Sep 17 00:00:00 2001
From: Adrian Chirca <achirca@totalsoft.ro>
Date: Wed, 8 Jan 2025 23:30:47 +0200
Subject: [PATCH 1/3] Remove the padding of the card header when it contains
 only an icon The padding of the card header is different when the card has an
 icon set #153

---
 src/components/surfaces/Card/Card.tsx                       | 1 +
 src/components/surfaces/Card/CardHeader/CardHeader.tsx      | 4 ++++
 src/components/surfaces/Card/CardHeader/CardHeaderStyles.ts | 6 ++++--
 src/components/surfaces/Card/types.ts                       | 4 ++++
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/surfaces/Card/Card.tsx b/src/components/surfaces/Card/Card.tsx
index 87ec909c..8a307811 100644
--- a/src/components/surfaces/Card/Card.tsx
+++ b/src/components/surfaces/Card/Card.tsx
@@ -68,6 +68,7 @@ const Card: React.FC<CardProps> = ({
     <MuiCard color={color} hasIcon={hasIcon} variant={variant} {...props}>
       {hasHeader && (
         <CardHeader
+          hasHeader={hasHeader}
           hasIcon={hasIcon}
           iconColor={hasIcon ? (iconColor as CardColor) : undefined}
           avatarProps={avatarProps}
diff --git a/src/components/surfaces/Card/CardHeader/CardHeader.tsx b/src/components/surfaces/Card/CardHeader/CardHeader.tsx
index c70cd95d..91d52540 100644
--- a/src/components/surfaces/Card/CardHeader/CardHeader.tsx
+++ b/src/components/surfaces/Card/CardHeader/CardHeader.tsx
@@ -43,6 +43,10 @@ CardHeader.propTypes = {
    * Card title
    */
   title: PropTypes.node,
+  /**
+   * Indicates if the parent Card component contains an header element or not
+   */
+  hasHeader: PropTypes.bool,
   /**
    * Indicates if the parent Card component contains an icon element or not
    */
diff --git a/src/components/surfaces/Card/CardHeader/CardHeaderStyles.ts b/src/components/surfaces/Card/CardHeader/CardHeaderStyles.ts
index cba52599..58c6b3bd 100644
--- a/src/components/surfaces/Card/CardHeader/CardHeaderStyles.ts
+++ b/src/components/surfaces/Card/CardHeader/CardHeaderStyles.ts
@@ -7,6 +7,7 @@ import { CardColor } from '../types'
 type StyledProps = {
   theme: Theme
   filled: boolean
+  hasHeader: boolean
   hasIcon: boolean
   iconColor: CardColor
   avatarProps: any
@@ -15,11 +16,12 @@ type StyledProps = {
 
 const CardHeader = styled(MuiCardHeader, {
   shouldForwardProp: prop =>
-    !includes(prop, ['variant', 'hasIcon', 'iconColor', 'filled', 'avatarProps', 'headerContentProps'])
+    !includes(prop, ['variant', 'hasHeader', 'hasIcon', 'iconColor', 'filled', 'avatarProps', 'headerContentProps'])
 })(
   ({
     theme,
     filled,
+    hasHeader,
     hasIcon,
     iconColor = 'secondary' as CardColor & keyof Palette,
     avatarProps,
@@ -27,7 +29,7 @@ const CardHeader = styled(MuiCardHeader, {
   }: Partial<StyledProps>) => ({
     ['&.MuiCardHeader-root']: {
       ...(filled && { backgroundColor: theme?.palette.grey[200], minHeight: '48px' }),
-      ...(hasIcon ? { padding: 0 } : {})
+      ...(!hasHeader && hasIcon ? { padding: 0 } : {})
     },
     ['& .MuiCardHeader-avatar']: {
       ...(hasIcon && {
diff --git a/src/components/surfaces/Card/types.ts b/src/components/surfaces/Card/types.ts
index 57f2bf77..9becaa73 100644
--- a/src/components/surfaces/Card/types.ts
+++ b/src/components/surfaces/Card/types.ts
@@ -53,6 +53,10 @@ export interface CardHeaderProps extends Omit<MuiCardHeaderProps, 'action'> {
    * If 'true', the card header will be filled with a grayish color
    */
   filled?: boolean
+  /**
+   * Indicates if the parent Card component contains an header element or not
+   */
+  hasHeader?: boolean
   /**
    * Indicates if the parent Card component contains an icon element or not
    */

From eac0356d58fa608cc4c19d92770eb68bc3608dbf Mon Sep 17 00:00:00 2001
From: Adrian Chirca <achirca@totalsoft.ro>
Date: Thu, 9 Jan 2025 15:52:47 +0200
Subject: [PATCH 2/3] omit avatar prop when setting hasHeader value

---
 src/components/surfaces/Card/Card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/surfaces/Card/Card.tsx b/src/components/surfaces/Card/Card.tsx
index 8a307811..3e35eb43 100644
--- a/src/components/surfaces/Card/Card.tsx
+++ b/src/components/surfaces/Card/Card.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import MuiCard, { CardContent, iconStyle as baseIconStyle } from './CardStyles'
 import CardMedia from '@mui/material/CardMedia'
-import { any, isNil } from 'ramda'
+import { any, isNil, omit } from 'ramda'
 import { CardProps, CardColor } from './types'
 import CardHeader from './CardHeader'
 import CardActions from './CardActions'
@@ -60,7 +60,7 @@ const Card: React.FC<CardProps> = ({
     filled,
     ...headerProps
   }
-  const hasHeader = any(x => !isNil(x), Object.values(cardHeaderProps))
+  const hasHeader = any(x => !isNil(x), Object.values(omit(['avatar'], cardHeaderProps)))
 
   const { size, ...standardMediaProps } = mediaProps || {}
 

From 2fa2a77bf7f600c836edbfdae425b66e49622e38 Mon Sep 17 00:00:00 2001
From: Adrian Chirca <achirca@totalsoft.ro>
Date: Thu, 9 Jan 2025 16:05:40 +0200
Subject: [PATCH 3/3] remove setting padding to 0 on card header

---
 src/components/surfaces/Card/Card.tsx                      | 5 ++---
 src/components/surfaces/Card/CardHeader/CardHeader.tsx     | 4 ----
 .../surfaces/Card/CardHeader/CardHeaderStyles.ts           | 7 ++-----
 src/components/surfaces/Card/types.ts                      | 4 ----
 4 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/src/components/surfaces/Card/Card.tsx b/src/components/surfaces/Card/Card.tsx
index 3e35eb43..87ec909c 100644
--- a/src/components/surfaces/Card/Card.tsx
+++ b/src/components/surfaces/Card/Card.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import MuiCard, { CardContent, iconStyle as baseIconStyle } from './CardStyles'
 import CardMedia from '@mui/material/CardMedia'
-import { any, isNil, omit } from 'ramda'
+import { any, isNil } from 'ramda'
 import { CardProps, CardColor } from './types'
 import CardHeader from './CardHeader'
 import CardActions from './CardActions'
@@ -60,7 +60,7 @@ const Card: React.FC<CardProps> = ({
     filled,
     ...headerProps
   }
-  const hasHeader = any(x => !isNil(x), Object.values(omit(['avatar'], cardHeaderProps)))
+  const hasHeader = any(x => !isNil(x), Object.values(cardHeaderProps))
 
   const { size, ...standardMediaProps } = mediaProps || {}
 
@@ -68,7 +68,6 @@ const Card: React.FC<CardProps> = ({
     <MuiCard color={color} hasIcon={hasIcon} variant={variant} {...props}>
       {hasHeader && (
         <CardHeader
-          hasHeader={hasHeader}
           hasIcon={hasIcon}
           iconColor={hasIcon ? (iconColor as CardColor) : undefined}
           avatarProps={avatarProps}
diff --git a/src/components/surfaces/Card/CardHeader/CardHeader.tsx b/src/components/surfaces/Card/CardHeader/CardHeader.tsx
index 91d52540..c70cd95d 100644
--- a/src/components/surfaces/Card/CardHeader/CardHeader.tsx
+++ b/src/components/surfaces/Card/CardHeader/CardHeader.tsx
@@ -43,10 +43,6 @@ CardHeader.propTypes = {
    * Card title
    */
   title: PropTypes.node,
-  /**
-   * Indicates if the parent Card component contains an header element or not
-   */
-  hasHeader: PropTypes.bool,
   /**
    * Indicates if the parent Card component contains an icon element or not
    */
diff --git a/src/components/surfaces/Card/CardHeader/CardHeaderStyles.ts b/src/components/surfaces/Card/CardHeader/CardHeaderStyles.ts
index 58c6b3bd..4f1b44e0 100644
--- a/src/components/surfaces/Card/CardHeader/CardHeaderStyles.ts
+++ b/src/components/surfaces/Card/CardHeader/CardHeaderStyles.ts
@@ -7,7 +7,6 @@ import { CardColor } from '../types'
 type StyledProps = {
   theme: Theme
   filled: boolean
-  hasHeader: boolean
   hasIcon: boolean
   iconColor: CardColor
   avatarProps: any
@@ -16,20 +15,18 @@ type StyledProps = {
 
 const CardHeader = styled(MuiCardHeader, {
   shouldForwardProp: prop =>
-    !includes(prop, ['variant', 'hasHeader', 'hasIcon', 'iconColor', 'filled', 'avatarProps', 'headerContentProps'])
+    !includes(prop, ['variant', 'hasIcon', 'iconColor', 'filled', 'avatarProps', 'headerContentProps'])
 })(
   ({
     theme,
     filled,
-    hasHeader,
     hasIcon,
     iconColor = 'secondary' as CardColor & keyof Palette,
     avatarProps,
     headerContentProps
   }: Partial<StyledProps>) => ({
     ['&.MuiCardHeader-root']: {
-      ...(filled && { backgroundColor: theme?.palette.grey[200], minHeight: '48px' }),
-      ...(!hasHeader && hasIcon ? { padding: 0 } : {})
+      ...(filled && { backgroundColor: theme?.palette.grey[200], minHeight: '48px' })
     },
     ['& .MuiCardHeader-avatar']: {
       ...(hasIcon && {
diff --git a/src/components/surfaces/Card/types.ts b/src/components/surfaces/Card/types.ts
index 9becaa73..57f2bf77 100644
--- a/src/components/surfaces/Card/types.ts
+++ b/src/components/surfaces/Card/types.ts
@@ -53,10 +53,6 @@ export interface CardHeaderProps extends Omit<MuiCardHeaderProps, 'action'> {
    * If 'true', the card header will be filled with a grayish color
    */
   filled?: boolean
-  /**
-   * Indicates if the parent Card component contains an header element or not
-   */
-  hasHeader?: boolean
   /**
    * Indicates if the parent Card component contains an icon element or not
    */