Adapt component CardSelect to new design (#1312)

* Adapt component CardSelect to new design * Add changeset * Fix bold for ghost and move active of ghost state out of ghost-utils * Fix bold label case only for ghost variant * Remove code preventing translation of arrow for changing of weight
nsbno · Nov 25, 2024 · 7c1ab44 · 7c1ab44
1 parent 95bed64
commit 7c1ab44
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 12 deletions.
diff --git a/.changeset/lemon-scissors-return.md b/.changeset/lemon-scissors-return.md
@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": minor
+---
+
+CardSelect: adjust css values and component logic to adapt to new design
diff --git a/packages/spor-react/src/input/CardSelect.tsx b/packages/spor-react/src/input/CardSelect.tsx
@@ -122,7 +122,6 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
         <chakra.button
           type="button"
           ref={triggerRef}
-          fontWeight="bold"
           sx={styles.trigger}
           aria-label={label}
           {...buttonProps}
@@ -148,14 +147,17 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
             offset={size === "sm" ? 6 : 12}
             crossOffset={crossOffset}
             placement={placement}
+            containerPadding={0}
           >
             <StaticCard
               colorScheme="white"
-              size="lg"
+              size="md"
+              fontSize={"xs"}
               border={"sm"}
-              borderColor={"grey"}
+              borderColor={"silver"}
               sx={styles.card}
               {...overlayProps}
+              maxWidth={(triggerRef.current?.clientWidth ?? 1) * 2}
             >
               <Dialog aria-label={label}>{children}</Dialog>
             </StaticCard>

diff --git a/packages/spor-react/src/theme/components/card-select.ts b/packages/spor-react/src/theme/components/card-select.ts
@@ -5,6 +5,7 @@ import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { floatingBackground, floatingBorder } from "../utils/floating-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
 import { ghostBackground, ghostText } from "../utils/ghost-utils";
+import { fontWeights } from "../foundations";
 
 const parts = anatomy("card-select").parts("trigger", "card");
 
@@ -22,8 +23,8 @@ const config = helpers.defineMultiStyleConfig({
     },
     card: {
       borderRadius: "sm",
-      boxShadow: "md",
-      padding: 3,
+      boxShadow: "xs",
+      padding: 2,
       ...baseText("default", props),
       backgroundColor: mode(
         "white",
@@ -56,7 +57,8 @@ const config = helpers.defineMultiStyleConfig({
           ...ghostBackground("active", props),
         },
         _expanded: {
-          ...ghostBackground("selected", props),
+          ...ghostBackground("active", props),
+          fontWeight: fontWeights.bold,
         },
       },
     }),
@@ -88,16 +90,16 @@ const config = helpers.defineMultiStyleConfig({
         paddingY: 1,
         minHeight: "1.25rem",
         fontSize: "xs",
-        borderRadius: "sm",
+        borderRadius: "lg",
       },
     },
     md: {
       trigger: {
         paddingX: 2,
         paddingY: 1.5,
         minHeight: "2.625rem",
-        fontSize: "sm",
-        borderRadius: "sm",
+        fontSize: "xs",
+        borderRadius: "lg",
       },
     },
     lg: {
@@ -106,7 +108,7 @@ const config = helpers.defineMultiStyleConfig({
         paddingY: 2,
         minHeight: "3.375rem",
         fontSize: "sm",
-        borderRadius: "sm",
+        borderRadius: "lg",
       },
     },
   },

diff --git a/packages/spor-react/src/theme/utils/ghost-utils.ts b/packages/spor-react/src/theme/utils/ghost-utils.ts
@@ -1,5 +1,6 @@
 import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
 import { State, Subset } from "./types";
+import { fontWeights } from "../foundations";
 
 type GhostBackgroundState = Subset<
   State,
@@ -30,8 +31,8 @@ export function ghostBackground(
     case "selected": {
       return {
         backgroundColor: mode(
-          "ghost.surface.selected.light",
-          "ghost.surface.selected.dark",
+          "ghost.surface.hover.light",
+          "ghost.surface.hover.dark",
         )(props),
       };
     }