Revert "Revert TextField state styling (#2309)"

This reverts commit 9ec147a.

__docs__/wonder-blocks-form/text-field-variants.stories.tsx

@@ -0,0 +1,168 @@
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+import type {Meta, StoryObj} from "@storybook/react";
+
+import {View} from "@khanacademy/wonder-blocks-core";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {TextField} from "@khanacademy/wonder-blocks-form";
+
+/**
+ * The following stories are used to generate the pseudo states for the
+ * TextField component. This is only used for visual testing in Chromatic.
+ *
+ * Note: Error state is not shown on initial render if the TextField value is empty.
+ */
+export default {
+    title: "Packages / Form / TextField / All Variants",
+    parameters: {
+        docs: {
+            autodocs: false,
+        },
+    },
+} as Meta;
+
+type StoryComponentType = StoryObj<typeof TextField>;
+
+const longText =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.";
+const longTextWithNoWordBreak =
+    "Loremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua";
+
+const states = [
+    {
+        label: "Default",
+        props: {},
+    },
+    {
+        label: "Disabled",
+        props: {disabled: true},
+    },
+    {
+        label: "Error",
+        props: {validate: () => "Error"},
+    },
+];
+const States = (props: {
+    light: boolean;
+    label: string;
+    value?: string;
+    placeholder?: string;
+}) => {
+    return (
+        <View
+            style={[props.light && styles.darkDefault, styles.statesContainer]}
+        >
+            <LabelLarge style={props.light && {color: color.white}}>
+                {props.label}
+            </LabelLarge>
+            <View style={[styles.scenarios]}>
+                {states.map((scenario) => {
+                    return (
+                        <View style={styles.scenario} key={scenario.label}>
+                            <LabelMedium
+                                style={props.light && {color: color.white}}
+                            >
+                                {scenario.label}
+                            </LabelMedium>
+                            <TextField
+                                value=""
+                                onChange={() => {}}
+                                {...props}
+                                {...scenario.props}
+                            />
+                        </View>
+                    );
+                })}
+            </View>
+        </View>
+    );
+};
+
+const AllVariants = () => (
+    <View>
+        {[false, true].map((light) => {
+            return (
+                <React.Fragment key={`light-${light}`}>
+                    <States light={light} label="Default" />
+                    <States light={light} label="With Value" value="Text" />
+                    <States
+                        light={light}
+                        label="With Value (long)"
+                        value={longText}
+                    />
+                    <States
+                        light={light}
+                        label="With Value (long, no word breaks)"
+                        value={longTextWithNoWordBreak}
+                    />
+                    <States
+                        light={light}
+                        label="With Placeholder"
+                        placeholder="Placeholder text"
+                    />
+                    <States
+                        light={light}
+                        label="With Placeholder (long)"
+                        placeholder={longText}
+                    />
+                    <States
+                        light={light}
+                        label="With Placeholder (long, no word breaks)"
+                        placeholder={longTextWithNoWordBreak}
+                    />
+                </React.Fragment>
+            );
+        })}
+    </View>
+);
+
+export const Default: StoryComponentType = {
+    render: AllVariants,
+};
+
+/**
+ * There are currently no hover styles.
+ */
+export const Hover: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {hover: true}},
+};
+
+export const Focus: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {focusVisible: true}},
+};
+
+export const HoverFocus: StoryComponentType = {
+    name: "Hover + Focus",
+    render: AllVariants,
+    parameters: {pseudo: {hover: true, focusVisible: true}},
+};
+
+/**
+ * There are currently no active styles.
+ */
+export const Active: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {active: true}},
+};
+
+const styles = StyleSheet.create({
+    darkDefault: {
+        backgroundColor: color.darkBlue,
+    },
+    statesContainer: {
+        padding: spacing.medium_16,
+    },
+    scenarios: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.xxxLarge_64,
+        flexWrap: "wrap",
+    },
+    scenario: {
+        gap: spacing.small_12,
+    },
+});

packages/wonder-blocks-form/src/components/__tests__/labeled-text-field.test.tsx

@@ -3,7 +3,6 @@ import {render, screen, fireEvent} from "@testing-library/react";
 import {userEvent} from "@testing-library/user-event";
 
 import {StyleSheet} from "aphrodite";
-import {color} from "@khanacademy/wonder-blocks-tokens";
 import LabeledTextField from "../labeled-text-field";
 
 describe("LabeledTextField", () => {
@@ -382,28 +381,6 @@ describe("LabeledTextField", () => {
         expect(input).toBeInTheDocument();
     });
 
-    it("light prop is passed to textfield", async () => {
-        // Arrange
-
-        // Act
-        render(
-            <LabeledTextField
-                label="Label"
-                value=""
-                onChange={() => {}}
-                light={true}
-            />,
-        );
-
-        const textField = await screen.findByRole("textbox");
-        textField.focus();
-
-        // Assert
-        expect(textField).toHaveStyle({
-            boxShadow: `0px 0px 0px 1px ${color.blue}, 0px 0px 0px 2px ${color.white}`,
-        });
-    });
-
     it("style prop is passed to fieldheading", async () => {
         // Arrange
         const styles = StyleSheet.create({

packages/wonder-blocks-form/src/components/text-area.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {CSSProperties, Falsy, StyleSheet} from "aphrodite";
+import {StyleSheet} from "aphrodite";
 
 import {
     AriaProps,
@@ -256,7 +256,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
             }
         });
 
-        const getStyles = (): (CSSProperties | Falsy)[] => {
+        const getStyles = (): StyleType => {
             // Base styles are the styles that apply regardless of light mode
             const baseStyles = [
                 styles.textarea,
@@ -284,7 +284,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
                     data-testid={testId}
                     ref={ref}
                     className={className}
-                    style={[...getStyles(), style]}
+                    style={[getStyles(), style]}
                     value={value}
                     onChange={handleChange}
                     placeholder={placeholder}