[WB-1851.1] Dropdown: Remove light prop on dropdowns (#2430)

## Summary: Removes the `light` prop from wonder-blocks-dropdown. This includes removing that in `SingleSelect` and `MultiSelect`. 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: https://khanacademy.atlassian.net/browse/WB-1851 ## Test plan: Verify that the `light` prop is removed from `SingleSelect` and `MultiSelect`. Author: jandrade Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (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), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ gerald, ⏭️ dependabot Pull Request URL: #2430
Khan · Jan 21, 2025 · d8d41dc · d8d41dc
1 parent d8c91db
commit d8d41dc
Show file tree

Hide file tree

Showing 15 changed files with 123 additions and 420 deletions.
diff --git a/.changeset/tricky-yaks-mate.md b/.changeset/tricky-yaks-mate.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-dropdown": major
+---
+
+Removes the `light` prop from wonder-blocks-dropdown. This includes removing that in `SingleSelect` and `MultiSelect`.
diff --git a/__docs__/wonder-blocks-dropdown/base-select.argtypes.ts b/__docs__/wonder-blocks-dropdown/base-select.argtypes.ts
@@ -86,15 +86,6 @@ const argTypes: ArgTypes = {
         },
     },
 
-    light: {
-        description: `Whether to display the "light" version of this component
-            instead, for use when the component is used on a dark background.`,
-        table: {
-            category: "States",
-            defaultValue: {summary: "false"},
-        },
-    },
-
     opened: {
         control: "boolean",
         description:

diff --git a/__docs__/wonder-blocks-dropdown/combobox.argtypes.ts b/__docs__/wonder-blocks-dropdown/combobox.argtypes.ts
@@ -33,11 +33,6 @@ const argTypes: ArgTypes = {
             category: "Visual style",
         },
     },
-    light: {
-        table: {
-            category: "Visual style",
-        },
-    },
 
     /**
      * Events

diff --git a/__docs__/wonder-blocks-dropdown/combobox.stories.tsx b/__docs__/wonder-blocks-dropdown/combobox.stories.tsx
@@ -64,7 +64,6 @@ const defaultArgs = {
     placeholder: "Select an item",
     testId: "",
     autoComplete: "none",
-    light: false,
     loading: false,
 };
 

diff --git a/__docs__/wonder-blocks-dropdown/multi-select-variants.stories.tsx b/__docs__/wonder-blocks-dropdown/multi-select-variants.stories.tsx
@@ -3,22 +3,19 @@ import {StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
 
 import {View} from "@khanacademy/wonder-blocks-core";
-import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {HeadingLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
+import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
 import {MultiSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
 
 /**
  * The following stories are used to generate the pseudo states for the
  * multi select component. This is only used for visual testing in Chromatic.
  */
 export default {
     title: "Packages / Dropdown / MultiSelect / All Variants",
-    parameters: {
-        docs: {
-            autodocs: false,
-        },
-    },
+    render: () => <AllVariants />,
+    tags: ["!autodocs"],
 } as Meta;
 
 type StoryComponentType = StoryObj<typeof MultiSelect>;
@@ -33,121 +30,64 @@ const selectItems = [
     <OptionItem label="item 3" value="3" />,
 ];
 
-const KindVariants = ({light}: {light: boolean}) => {
-    return (
-        <ThemeSwitcherContext.Consumer>
-            {(theme) => (
-                <>
-                    <View
-                        style={[
-                            styles.gridRow,
-                            light &&
-                                (theme === "khanmigo"
-                                    ? styles.darkKhanmigo
-                                    : styles.darkDefault),
-                        ]}
-                    >
-                        <LabelMedium style={light && {color: color.white}}>
-                            Default
-                        </LabelMedium>
-                        <MultiSelect {...defaultProps} light={light}>
+const AllVariants = ({themeName = "Default"}: {themeName?: string}) => (
+    <View style={{marginBottom: spacing.large_24}}>
+        <HeadingLarge>{themeName} theme</HeadingLarge>
+        <View style={styles.grid}>
+            <View style={[styles.gridRow]}>
+                <LabeledField
+                    label="Default"
+                    field={
+                        <MultiSelect {...defaultProps}>
                             {selectItems}
                         </MultiSelect>
-                    </View>
-                    <View
-                        style={[
-                            styles.gridRow,
-                            light &&
-                                (theme === "khanmigo"
-                                    ? styles.darkKhanmigo
-                                    : styles.darkDefault),
-                        ]}
-                    >
-                        <LabelMedium style={light && {color: color.white}}>
-                            Disabled
-                        </LabelMedium>
-                        <MultiSelect
-                            {...defaultProps}
-                            light={light}
-                            disabled={true}
-                        >
+                    }
+                />
+            </View>
+            <View style={[styles.gridRow]}>
+                <LabeledField
+                    label="Disabled"
+                    field={
+                        <MultiSelect {...defaultProps} disabled={true}>
                             {selectItems}
                         </MultiSelect>
-                    </View>
-                    <View
-                        style={[
-                            styles.gridRow,
-                            light &&
-                                (theme === "khanmigo"
-                                    ? styles.darkKhanmigo
-                                    : styles.darkDefault),
-                        ]}
-                    >
-                        <LabelMedium style={light && {color: color.white}}>
-                            Error
-                        </LabelMedium>
-                        <MultiSelect
-                            {...defaultProps}
-                            light={light}
-                            error={true}
-                        >
+                    }
+                />
+            </View>
+            <View style={[styles.gridRow]}>
+                <LabeledField
+                    label="Error"
+                    field={
+                        <MultiSelect {...defaultProps} error={true}>
                             {selectItems}
                         </MultiSelect>
-                    </View>
-                </>
-            )}
-        </ThemeSwitcherContext.Consumer>
-    );
-};
-
-const VariantsByTheme = ({themeName = "Default"}: {themeName?: string}) => (
-    <View style={{marginBottom: spacing.large_24}}>
-        <HeadingLarge>{themeName} theme</HeadingLarge>
-        <View style={styles.grid}>
-            <KindVariants light={false} />
-            <KindVariants light={true} />
+                    }
+                />
+            </View>
         </View>
     </View>
 );
 
-const AllVariants = () => (
-    <>
-        <VariantsByTheme />
-    </>
-);
-
-export const Default: StoryComponentType = {
-    render: AllVariants,
-};
+export const Default: StoryComponentType = {};
 
 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}},
 };
 
 export const Active: StoryComponentType = {
-    render: AllVariants,
     parameters: {pseudo: {active: true}},
 };
 
 const styles = StyleSheet.create({
-    darkDefault: {
-        backgroundColor: color.darkBlue,
-    },
-    darkKhanmigo: {
-        backgroundColor: color.eggplant,
-    },
     grid: {
         display: "grid",
         gridTemplateColumns: "repeat(3, 250px)",

diff --git a/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx b/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
@@ -59,7 +59,6 @@ export default {
         error: false,
         opened: false,
         disabled: false,
-        light: false,
         shortcuts: false,
         implicitAllEnabled: false,
         id: "",