Migrate TextField to Panda CSS

Khan · Jun 3, 2024 · 3dd4944 · 3dd4944
1 parent 8aad664
commit 3dd4944
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 50 deletions.
diff --git a/.changeset/rare-actors-boil.md b/.changeset/rare-actors-boil.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-form": major
+---
+
+Migrate TextField to PandaCSS
diff --git a/__docs__/wonder-blocks-form/text-field.stories.tsx b/__docs__/wonder-blocks-form/text-field.stories.tsx
@@ -1,10 +1,10 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
+// import {StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
 
 import {View, Text as _Text} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import Button from "@khanacademy/wonder-blocks-button";
 import {LabelLarge, Body} from "@khanacademy/wonder-blocks-typography";
 
@@ -13,6 +13,7 @@ import packageConfig from "../../packages/wonder-blocks-form/package.json";
 
 import ComponentInfo from "../../.storybook/components/component-info";
 import TextFieldArgTypes from "./text-field.argtypes";
+import {SystemStyleObject} from "@/styled-system/types";
 
 export default {
     title: "Packages / Form / TextField",
@@ -785,7 +786,7 @@ export const WithAutofocus: StoryComponentType = () => {
                 autoFocus={true}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
-                style={{flexGrow: 1, marginLeft: spacing.small_12}}
+                style={{flexGrow: 1, marginLeft: "small_12"}}
             />
         </View>
     );
@@ -869,32 +870,32 @@ AutoComplete.parameters = {
     },
 };
 
-const styles = StyleSheet.create({
+const styles: Record<string, SystemStyleObject> = {
     errorMessage: {
-        color: color.red,
-        paddingLeft: spacing.xxxSmall_4,
+        color: "red",
+        paddingLeft: "xxxSmall_4",
     },
     errorMessageLight: {
-        color: color.white,
-        paddingLeft: spacing.xxxSmall_4,
+        color: "white",
+        paddingLeft: "xxxSmall_4",
     },
     darkBackground: {
-        backgroundColor: color.darkBlue,
-        padding: spacing.medium_16,
+        backgroundColor: "darkBlue",
+        padding: "medium_16",
     },
     customField: {
-        backgroundColor: color.darkBlue,
-        color: color.white,
+        backgroundColor: "darkBlue",
+        color: "white",
         border: "none",
         maxWidth: 250,
-        "::placeholder": {
-            color: color.white64,
+        "&::placeholder": {
+            color: "white64",
         },
     },
     button: {
         maxWidth: 150,
     },
     fieldWithButton: {
-        marginBottom: spacing.medium_16,
+        marginBottom: "medium_16",
     },
-});
+};
diff --git a/packages/wonder-blocks-form/src/components/text-field.tsx b/packages/wonder-blocks-form/src/components/text-field.tsx
@@ -1,11 +1,13 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
+// import {StyleSheet} from "aphrodite";
 
-import {mix, color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {addStyle} from "@khanacademy/wonder-blocks-core";
-import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
+// import {mix, color, spacing} from "@khanacademy/wonder-blocks-tokens";
+// import {addStyle} from "@khanacademy/wonder-blocks-core";
+// import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
 
 import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core";
+import {SystemStyleObject} from "@/styled-system/types";
+import {css} from "@/styled-system/css";
 import {OmitConstrained} from "../util/types";
 
 export type TextFieldType = "text" | "password" | "email" | "number" | "tel";
@@ -16,7 +18,7 @@ type WithForwardRef = {
 
 const defaultErrorMessage = "This field is required.";
 
-const StyledInput = addStyle("input");
+const StyledInput = "input";
 
 type CommonProps = AriaProps & {
     /**
@@ -271,9 +273,11 @@ class TextField extends React.Component<PropsWithForwardRef, State> {
 
         return (
             <StyledInput
-                style={[
+                className={css(
                     styles.input,
-                    typographyStyles.LabelMedium,
+                    // TODO(juan): Convert typography styles to
+                    // SystemStyleObject
+                    // typographyStyles.LabelMedium,
                     styles.default,
                     // Prioritizes disabled, then focused, then error (if any)
                     disabled
@@ -287,8 +291,8 @@ class TextField extends React.Component<PropsWithForwardRef, State> {
                     // Cast `this.state.error` into boolean since it's being
                     // used as a conditional
                     !!this.state.error && styles.error,
-                    style && style,
-                ]}
+                    style ? (style as SystemStyleObject) : undefined,
+                )}
                 id={id}
                 type={type}
                 placeholder={placeholder}
@@ -311,56 +315,56 @@ class TextField extends React.Component<PropsWithForwardRef, State> {
     }
 }
 
-const styles = StyleSheet.create({
+const styles: Record<string, SystemStyleObject> = {
     input: {
         width: "100%",
         height: 40,
         borderRadius: 4,
         boxSizing: "border-box",
-        paddingLeft: spacing.medium_16,
+        paddingLeft: "medium_16",
         margin: 0,
         outline: "none",
         boxShadow: "none",
     },
     default: {
-        background: color.white,
-        border: `1px solid ${color.offBlack16}`,
-        color: color.offBlack,
-        "::placeholder": {
-            color: color.offBlack64,
+        background: "white",
+        border: `1px solid {colors.offBlack16}`,
+        color: "offBlack",
+        "&::placeholder": {
+            color: "offBlack64",
         },
     },
     error: {
-        background: `${mix(color.fadedRed8, color.white)}`,
-        border: `1px solid ${color.red}`,
-        color: color.offBlack,
-        "::placeholder": {
-            color: color.offBlack64,
+        background: "fadedRed8",
+        border: `1px solid {colors.red}`,
+        color: "black",
+        "&::placeholder": {
+            color: "offBlack64",
         },
     },
     disabled: {
-        background: color.offWhite,
-        border: `1px solid ${color.offBlack16}`,
-        color: color.offBlack64,
-        "::placeholder": {
-            color: color.offBlack32,
+        background: "offWhite",
+        border: `1px solid {colors.offBlack16}`,
+        color: "offBlack64",
+        "&::placeholder": {
+            color: "offBlack32",
         },
     },
     focused: {
-        background: color.white,
-        border: `1px solid ${color.blue}`,
-        color: color.offBlack,
-        "::placeholder": {
-            color: color.offBlack64,
+        background: "white",
+        border: `1px solid {colors.blue}`,
+        color: "offBlack",
+        "&::placeholder": {
+            color: "offBlack64",
         },
     },
     defaultLight: {
-        boxShadow: `0px 0px 0px 1px ${color.blue}, 0px 0px 0px 2px ${color.white}`,
+        boxShadow: `0px 0px 0px 1px {colors.blue}, 0px 0px 0px 2px {colors.white}`,
     },
     errorLight: {
-        boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${color.white}`,
+        boxShadow: `0px 0px 0px 1px {colors.red}, 0px 0px 0px 2px {colors.white}`,
     },
-});
+};
 
 type ExportProps = OmitConstrained<
     JSX.LibraryManagedAttributes<

diff --git a/panda.config.ts b/panda.config.ts
@@ -61,4 +61,8 @@ export default defineConfig({
     },
 
     importMap: "@/styled-system",
+    strictTokens: false,
+    // optimizations
+    minify: true,
+    hash: true,
 });