feat: TextField design system (#1074)

* add TextField and fix IconButton * delete old button
ephemeraHQ · Oct 28, 2024 · ca81dda · ca81dda
1 parent dd9036f
commit ca81dda
Show file tree

Hide file tree

Showing 14 changed files with 550 additions and 301 deletions.
diff --git a/design-system/Button/OldButton.tsx b/design-system/Button/OldButton.tsx
diff --git a/design-system/IconButton.tsx b/design-system/IconButton.tsx
diff --git a/design-system/IconButton/IconButton.styles.ts b/design-system/IconButton/IconButton.styles.ts
@@ -144,3 +144,53 @@ export const getIconStyle =
 
     return style;
   };
+
+export const getIconProps =
+  ({
+    variant,
+    size,
+    action,
+    pressed = false,
+    disabled = false,
+  }: IconButtonStyleProps) =>
+  (theme: Theme) =>
+    // TODO: fix once we fixed IconProps
+    // : Partial<IIconProps>
+    {
+      const { colors, spacing } = theme;
+
+      const props: any =
+        // :Partial<IIconProps>
+        {};
+
+      // Set icon size
+      const sizeMap = {
+        md: spacing.md,
+        lg: spacing.lg,
+      };
+
+      props.size = sizeMap[size];
+
+      if (disabled) {
+        props.color = colors.text.tertiary;
+        return props;
+      }
+
+      if (action === "primary") {
+        switch (variant) {
+          case "fill":
+            props.color = colors.text.inverted.primary;
+            break;
+
+          case "outline":
+          case "ghost":
+            props.color = colors.text.primary;
+            break;
+
+          default:
+            break;
+        }
+      }
+
+      return props;
+    };
diff --git a/design-system/IconButton/IconButton.tsx b/design-system/IconButton/IconButton.tsx
@@ -6,7 +6,11 @@ import { useAppTheme } from "../../theme/useAppTheme";
 import { Icon } from "../Icon/Icon";
 import { Pressable } from "../Pressable";
 import { IIconButtonProps } from "./IconButton.props";
-import { getIconButtonViewStyle, getIconStyle } from "./IconButton.styles";
+import {
+  getIconButtonViewStyle,
+  getIconProps,
+  getIconStyle,
+} from "./IconButton.styles";
 
 export function IconButton(props: IIconButtonProps) {
   const {
@@ -65,6 +69,21 @@ export function IconButton(props: IIconButtonProps) {
     [themed, variant, size, action, disabled]
   );
 
+  // For now until we fix Icon
+  const iconProps = useCallback(
+    ({ pressed }: PressableStateCallbackType) =>
+      themed(
+        getIconProps({
+          variant,
+          size,
+          action,
+          pressed,
+          disabled,
+        })
+      ),
+    [themed, variant, size, action, disabled]
+  );
+
   return (
     <Pressable
       style={viewStyle}
@@ -75,7 +94,13 @@ export function IconButton(props: IIconButtonProps) {
     >
       {({ pressed }) => {
         if (iconName) {
-          return <Icon picto={iconName} style={iconStyle({ pressed })} />;
+          return (
+            <Icon
+              picto={iconName}
+              style={iconStyle({ pressed })}
+              {...iconProps({ pressed })}
+            />
+          );
         }
 
         return icon;