fix(Card): header alignment

lumada-design · Nov 13, 2023 · 14b85a5 · 14b85a5
1 parent 6beb486
commit 14b85a5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/packages/core/src/components/Card/Card.stories.tsx b/packages/core/src/components/Card/Card.stories.tsx
@@ -105,7 +105,11 @@ export const Main: StoryObj<HvCardProps> = {
         selectable={selectable}
         selected={selected}
       >
-        <HvCardHeader title="Asset Avatar L90" subheader="Compressor" />
+        <HvCardHeader
+          title="Asset Avatar L90"
+          subheader="Compressor"
+          icon={<Level2Average color={statusColor} />}
+        />
         <HvCardMedia
           component="img"
           alt="Compressor"

diff --git a/packages/core/src/components/Card/Header/Header.styles.tsx b/packages/core/src/components/Card/Header/Header.styles.tsx
@@ -3,10 +3,13 @@ import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "@core/utils/classes";
 
 export const { staticClasses, useClasses } = createClasses("HvCardHeader", {
-  root: { padding: `15px ${theme.space.sm}`, position: "relative" },
+  root: {
+    position: "relative",
+    padding: theme.spacing("12px", "xs", "sm", "sm"),
+  },
   titleShort: {
+    ...theme.typography.label,
     fontFamily: theme.fontFamily.body,
-    marginRight: "30px",
   },
   title: {
     ...theme.typography.label,
@@ -18,11 +21,7 @@ export const { staticClasses, useClasses } = createClasses("HvCardHeader", {
   },
   content: {},
   action: {
-    position: "absolute",
-    right: 20,
-    marginTop: 0,
-    marginRight: "0px",
+    margin: 0,
     paddingLeft: theme.space.xs,
-    top: "15px",
   },
 });
diff --git a/packages/core/src/components/Card/Header/Header.tsx b/packages/core/src/components/Card/Header/Header.tsx
@@ -49,6 +49,7 @@ export const HvCardHeader = (props: HvCardHeaderProps) => {
       className={cx(classes.root, className)}
       classes={{
         title: cx({
+          // TODO: review conditional in v6
           [classes.titleShort]: icon,
           [classes.title]: !icon,
         }),

diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
@@ -521,9 +521,15 @@ const ds3 = makeTheme((theme) => ({
     },
     HvCardHeader: {
       classes: {
+        root: {
+          padding: theme.spacing("15px", "sm"),
+        },
         title: {
           ...theme.typography.title3,
         },
+        titleShort: {
+          ...theme.typography.title3,
+        },
         subheader: {
           ...theme.typography.body,
         },