fix icon button styling

ephemeraHQ · Oct 23, 2024 · 729086a · 729086a
1 parent c1319ea
commit 729086a
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 6 deletions.
diff --git a/design-system/IconButton/IconButton.example.tsx b/design-system/IconButton/IconButton.example.tsx
@@ -0,0 +1,47 @@
+import { memo } from "react";
+
+import { useAppTheme } from "../../theme/useAppTheme";
+import { HStack } from "../HStack";
+import { VStack } from "../VStack";
+import { IconButton } from "./IconButton";
+
+export const IconButtonExample = memo(function IconButtonExample() {
+  const { theme } = useAppTheme();
+
+  return (
+    <VStack
+      style={{
+        rowGap: theme.spacing.md,
+        paddingTop: theme.spacing["4xl"],
+      }}
+    >
+      <VStack style={{ rowGap: theme.spacing.md }}>
+        {/* Fill Variant */}
+        <HStack style={{ columnGap: theme.spacing.sm }}>
+          <IconButton variant="fill" iconName="star" />
+          <IconButton variant="fill" iconName="star" disabled />
+          <IconButton
+            variant="fill"
+            iconName="star"
+            action="primary"
+            size="lg"
+          />
+        </HStack>
+
+        {/* Outline Variant */}
+        <HStack style={{ columnGap: theme.spacing.sm }}>
+          <IconButton variant="outline" iconName="star" />
+          <IconButton variant="outline" iconName="star" disabled />
+          <IconButton variant="outline" iconName="star" size="lg" />
+        </HStack>
+
+        {/* Ghost Variant */}
+        <HStack style={{ columnGap: theme.spacing.sm }}>
+          <IconButton variant="ghost" iconName="star" />
+          <IconButton variant="ghost" iconName="star" disabled />
+          <IconButton variant="ghost" iconName="star" size="lg" />
+        </HStack>
+      </VStack>
+    </VStack>
+  );
+});
diff --git a/design-system/IconButton/IconButton.styles.ts b/design-system/IconButton/IconButton.styles.ts
@@ -37,13 +37,13 @@ export const getIconButtonViewStyle =
     // Set size
     const sizeStyles = {
       md: {
-        width: spacing.xl,
-        height: spacing.xl,
-      },
-      lg: {
         width: spacing.xxl,
         height: spacing.xxl,
       },
+      lg: {
+        width: spacing["3xl"],
+        height: spacing["3xl"],
+      },
     };
     Object.assign(style, sizeStyles[size]);
 
@@ -65,9 +65,10 @@ export const getIconButtonViewStyle =
           style.backgroundColor = "transparent";
           if (pressed) {
             style.backgroundColor = colors.fill.minimal;
+            style.borderColor = colors.fill.minimal;
           }
           if (disabled) {
-            style.borderColor = colors.border.secondary;
+            style.borderColor = colors.border.subtle;
             style.backgroundColor = "transparent";
           }
           break;
@@ -171,7 +172,7 @@ export const getIconProps =
 
       props.size = sizeMap[size];
 
-      if (disabled) {
+      if (disabled && variant !== "fill") {
         props.color = colors.text.tertiary;
         return props;
       }