fix(GlobalActions): styles alignment

lumada-design · Sep 5, 2023 · f3e6b52 · f3e6b52
1 parent cd57bf5
commit f3e6b52
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/packages/core/src/components/GlobalActions/GlobalActions.styles.tsx b/packages/core/src/components/GlobalActions/GlobalActions.styles.tsx
@@ -29,8 +29,7 @@ export const { staticClasses, useClasses } = createClasses("HvGlobalActions", {
     backdropFilter: "blur(1px)",
   },
   wrapper: {
-    height: 52,
-    paddingRight: theme.space.xs,
+    padding: theme.space.sm,
     display: "flex",
     justifyContent: "flex-start",
     alignItems: "center",
@@ -43,7 +42,6 @@ export const { staticClasses, useClasses } = createClasses("HvGlobalActions", {
     left: 0,
     background: theme.colors.atmo1,
     width: "100%",
-    padding: theme.space.xs,
     marginTop: theme.space.xs,
   },
   globalSectionArea: {
@@ -60,10 +58,7 @@ export const { staticClasses, useClasses } = createClasses("HvGlobalActions", {
   actions: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "flex-end",
     marginLeft: "auto",
-    "& > *:not(:first-child) ": {
-      marginLeft: theme.space.xs,
-    },
+    gap: theme.space.xs,
   },
 });
diff --git a/packages/core/src/components/GlobalActions/GlobalActions.tsx b/packages/core/src/components/GlobalActions/GlobalActions.tsx
@@ -35,7 +35,7 @@ export interface HvGlobalActionsProps
   classes?: HvGlobalActionsClasses;
 }
 
-const getBreakpointStyles = (isUpMd, isSmDown) =>
+const getBreakpointStyles = (isUpMd: boolean, isSmDown: boolean) =>
   isUpMd
     ? {
         width: `calc(100% - 2 * ${theme.spacing(4)})`,
@@ -77,12 +77,6 @@ export const HvGlobalActions = (props: HvGlobalActionsProps) => {
 
   const headingLevelToApply = headingLevel || (variant === "global" ? 1 : 2);
 
-  const backButtonRenderer = () => {
-    if (backButton) {
-      return <div className={classes.backButton}>{backButton}</div>;
-    }
-  };
-
   const position =
     positionProp || (variant === "global" ? "sticky" : "relative");
 
@@ -106,7 +100,9 @@ export const HvGlobalActions = (props: HvGlobalActionsProps) => {
           [classes.globalSectionArea]: variant === "section",
         })}
       >
-        {variant === "global" && backButtonRenderer()}
+        {variant === "global" && backButton && (
+          <div className={classes.backButton}>{backButton}</div>
+        )}
         {!isString(title) ? (
           title
         ) : (

diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import { colors } from "../tokens/colors";
 import { makeTheme } from "../makeTheme";
 import { HvTheme } from "../types";
@@ -227,7 +228,15 @@ const ds3 = makeTheme((theme: HvTheme) => ({
       textDecoration: "underline",
     },
   },
-  components: {},
+  components: {
+    HvGlobalActions: {
+      classes: {
+        wrapper: {
+          padding: theme.space.xs,
+        },
+      } satisfies Record<string, CSSProperties>,
+    },
+  },
   actionBar: {
     borderTop: `3px solid ${theme.colors.atmo2}`,
   },