[WB-1851.2] Form: Remove light prop on remaining form fields (#2437)

## Summary: Following up on #2430. This PR removes the `light` variant from the remaining form fields: - `LabeledTextField` - `TextField` - `TextArea` - `LabeledField` - `SearchField` This is based on the discussion with the design team where we decided to remove the light prop from Wonder Blocks due to its low usage and to prepare for the upcoming design changes. Issue: WB-1851 ## Test plan: Verify that the light prop is removed from the components mentioned in the summary. Author: jandrade Reviewers: beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ⏭️ dependabot, ✅ gerald Pull Request URL: #2437
Khan · Jan 21, 2025 · 8d26588 · 8d26588
1 parent 0de25cd
commit 8d26588
Show file tree

Hide file tree

Showing 22 changed files with 105 additions and 635 deletions.
diff --git a/.changeset/cold-rivers-travel.md b/.changeset/cold-rivers-travel.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-search-field": major
+---
+
+Remove `light` variant from SearchField as it is no longer needed/used.
diff --git a/.changeset/curly-poems-sin.md b/.changeset/curly-poems-sin.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": major
+---
+
+Remove `light` variant/prop from `LabeledField` as it is no longer needed/recommended.
diff --git a/.changeset/wet-pigs-end.md b/.changeset/wet-pigs-end.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-form": major
+---
+
+Remove `light` variant from LabeledTextField, TextField and TextArea"
diff --git a/__docs__/wonder-blocks-form/labeled-text-field.argtypes.ts b/__docs__/wonder-blocks-form/labeled-text-field.argtypes.ts
@@ -111,22 +111,6 @@ export default {
         },
     },
 
-    light: {
-        description:
-            "Change the field’s sub-components to fit a dark background.",
-        table: {
-            type: {
-                summary: "boolean",
-            },
-            defaultValue: {
-                summary: "false",
-            },
-        },
-        control: {
-            type: "boolean",
-        },
-    },
-
     placeholder: {
         description: "Provide hints or examples of what to enter.",
         table: {

diff --git a/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx b/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx
@@ -48,7 +48,6 @@ export const Default: StoryComponentType = {
         value: "",
         disabled: false,
         required: false,
-        light: false,
         placeholder: "Placeholder",
         readOnly: false,
         autoComplete: "off",
@@ -507,96 +506,6 @@ export const Error: StoryComponentType = {
     render: ErrorRender,
 };
 
-/**
- * The `light` prop is intended to be used on a dark background. When the
- * `light` prop is set to `true`:
- * - the underlying `TextField` will have a light border when focused
- * - a specific light styling is used for the error state, as seen in the
- * `ErrorLight` story
- * - the text in the component (label, required indicator, description, and
- * error message) are modified to work on the dark background
- */
-export const Light: StoryComponentType = (args: any) => {
-    const [value, setValue] = React.useState("");
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
-    return (
-        <LabeledTextField
-            {...args}
-            label="Name"
-            description="Please enter your name"
-            value={value}
-            onChange={setValue}
-            placeholder="Name"
-            light={true}
-            onKeyDown={handleKeyDown}
-            required={true}
-        />
-    );
-};
-
-Light.args = {
-    disabled: false,
-};
-
-Light.parameters = {
-    backgrounds: {
-        default: "darkBlue",
-    },
-};
-
-/**
- * If an input value fails validation and the `light` prop is true,
- * `TextField` will have light error styling.
- */
-export const ErrorLight: StoryComponentType = (args: any) => {
-    const [value, setValue] = React.useState("khan");
-
-    const validate = (value: string) => {
-        const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
-        if (!emailRegex.test(value)) {
-            return "Please enter a valid email";
-        }
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
-    return (
-        <LabeledTextField
-            {...args}
-            label="Email"
-            description="Please provide your personal email"
-            type="email"
-            value={value}
-            light={true}
-            onChange={setValue}
-            placeholder="Email"
-            validate={validate}
-            onKeyDown={handleKeyDown}
-            required={true}
-        />
-    );
-};
-
-ErrorLight.args = {
-    disabled: false,
-};
-
-ErrorLight.parameters = {
-    backgrounds: {
-        default: "darkBlue",
-    },
-};
-
 /**
  * If the disabled prop is set to `true`, LabeledTextField will have disabled styling
  * and will not be interactable.

diff --git a/__docs__/wonder-blocks-form/text-area-variants.stories.tsx b/__docs__/wonder-blocks-form/text-area-variants.stories.tsx
@@ -3,7 +3,7 @@ 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 {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {TextArea} from "@khanacademy/wonder-blocks-form";
 import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
@@ -43,18 +43,13 @@ const states = [
     },
 ];
 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.statesContainer}>
+            <LabelLarge>{props.label}</LabelLarge>
             <View style={[styles.scenarios]}>
                 {states.map((scenario) => {
                     return (
@@ -80,39 +75,19 @@ const States = (props: {
 
 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>
-            );
-        })}
+        <States label="Default" />
+        <States label="With Value" value="Text" />
+        <States label="With Value (long)" value={longText} />
+        <States
+            label="With Value (long, no word breaks)"
+            value={longTextWithNoWordBreak}
+        />
+        <States label="With Placeholder" placeholder="Placeholder text" />
+        <States label="With Placeholder (long)" placeholder={longText} />
+        <States
+            label="With Placeholder (long, no word breaks)"
+            placeholder={longTextWithNoWordBreak}
+        />
     </View>
 );
 
@@ -148,9 +123,6 @@ export const Active: StoryComponentType = {
 };
 
 const styles = StyleSheet.create({
-    darkDefault: {
-        backgroundColor: color.darkBlue,
-    },
     statesContainer: {
         padding: spacing.medium_16,
     },

diff --git a/__docs__/wonder-blocks-form/text-area.argtypes.ts b/__docs__/wonder-blocks-form/text-area.argtypes.ts
@@ -52,11 +52,6 @@ export default {
             category: "Visual style",
         },
     },
-    light: {
-        table: {
-            category: "Visual style",
-        },
-    },
     rootStyle: {
         table: {
             type: {

diff --git a/__docs__/wonder-blocks-form/text-area.stories.tsx b/__docs__/wonder-blocks-form/text-area.stories.tsx
@@ -641,24 +641,6 @@ export const ResizeType: StoryComponentType = {
     },
 };
 
-/**
- * A TextArea with `light` prop set to true and a dark background.
- */
-export const Light: StoryComponentType = {
-    args: {
-        light: true,
-        value: "Text",
-    },
-    parameters: {
-        backgrounds: {
-            default: "darkBlue",
-        },
-        chromatic: {
-            disableSnapshot: true, // Disabling because it's covered in variants stories
-        },
-    },
-};
-
 /**
  * Custom styling can be passed to the TextArea component using the `style`
  * prop.

diff --git a/__docs__/wonder-blocks-form/text-field-variants.stories.tsx b/__docs__/wonder-blocks-form/text-field-variants.stories.tsx
@@ -3,7 +3,7 @@ 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 {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
@@ -43,18 +43,13 @@ const states = [
     },
 ];
 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.statesContainer}>
+            <LabelLarge>{props.label}</LabelLarge>
             <View style={[styles.scenarios]}>
                 {states.map((scenario) => {
                     return (
@@ -80,39 +75,19 @@ const States = (props: {
 
 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>
-            );
-        })}
+        <States label="Default" />
+        <States label="With Value" value="Text" />
+        <States label="With Value (long)" value={longText} />
+        <States
+            label="With Value (long, no word breaks)"
+            value={longTextWithNoWordBreak}
+        />
+        <States label="With Placeholder" placeholder="Placeholder text" />
+        <States label="With Placeholder (long)" placeholder={longText} />
+        <States
+            label="With Placeholder (long, no word breaks)"
+            placeholder={longTextWithNoWordBreak}
+        />
     </View>
 );
 
@@ -148,9 +123,6 @@ export const Active: StoryComponentType = {
 };
 
 const styles = StyleSheet.create({
-    darkDefault: {
-        backgroundColor: color.darkBlue,
-    },
     statesContainer: {
         padding: spacing.medium_16,
     },

diff --git a/__docs__/wonder-blocks-form/text-field.argtypes.ts b/__docs__/wonder-blocks-form/text-field.argtypes.ts
@@ -86,22 +86,6 @@ export default {
         },
     },
 
-    light: {
-        description:
-            "Change the default focus ring color to fit a dark background.",
-        table: {
-            type: {
-                summary: "boolean",
-            },
-            defaultValue: {
-                summary: "false",
-            },
-        },
-        control: {
-            type: "boolean",
-        },
-    },
-
     required: {
         description:
             "Whether this field is required to to continue, or the error message to render if this field is left blank. Pass in a message instead of `true` if possible.",