[WB-1814.10] Refactor wonder-blocks-dropdown to use semantic colors (#2474)

## Summary:

Last PR that migrates the remaining components to use semantic colors.

- Added `All Variants` stories to `ActionItem` and `OptionItem`.
- Refactored `ActionItem` and `OptionItem` to use semantic colors.
- Also refactored `ActionMenu`, `SingleSelect`, `MultiSelect` and `Combobox` to
use semantic colors.
- Simplified the styles in `ActionMenuOpenerCore` to use a single static
StyleSheet instance (instead of generating another one in runtime).

### Implementation plan:

1. #2439
2. #2440
3. #2441
4. #2446
5. #2449
6. #2464
7. #2468
8. #2470
9. #2472
10. Dropdown (current PR)

Issue: WB-1814

## Test plan:

Verify that all the dropdown stories are still working as expected.

Author: jandrade

Reviewers: jandrade, beaesguerra

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build and test 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), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️  dependabot, ✅ gerald

Pull Request URL: #2474

Author: jandrade

.changeset/seven-mangos-drive.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-dropdown": patch
+---
+
+Migrate Dropdown components to semanticColor. Simplify ActionMenuOpenerCore styles

.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import wonderBlocksTheme from "./wonder-blocks-theme";
 import {Decorator} from "@storybook/react";
-import {color} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import Link from "@khanacademy/wonder-blocks-link";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
 import {RenderStateRoot} from "../packages/wonder-blocks-core/src";
@@ -50,19 +50,19 @@ const parameters = {
         values: [
             {
                 name: "light",
-                value: color.white,
+                value: semanticColor.surface.primary,
             },
             {
                 name: "darkBlue",
-                value: color.darkBlue,
+                value: semanticColor.surface.inverse,
             },
             {
                 name: "khanmigo",
-                value: color.eggplant,
+                value: semanticColor.khanmigo.primary,
             },
             {
                 name: "offWhite",
-                value: color.offWhite,
+                value: semanticColor.surface.secondary,
             },
         ],
     },

__docs__/wonder-blocks-dropdown/action-item-variants.stories.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import type {Meta, StoryObj} from "@storybook/react";
+
+import {AllVariants} from "../components/all-variants";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
+import {ActionItem} from "@khanacademy/wonder-blocks-dropdown";
+import {View} from "@khanacademy/wonder-blocks-core";
+
+const rows = [
+    {name: "Unchecked", props: {checked: false}},
+    {name: "Checked", props: {checked: true}},
+    {name: "Indeterminate", props: {checked: null}},
+];
+
+const columns = [
+    {
+        name: "Default",
+        props: {},
+    },
+    {
+        name: "Disabled",
+        props: {disabled: true},
+    },
+    {
+        name: "Custom label",
+        props: {
+            label: "Action Item",
+            onClick: () => {},
+            leftAccessory: (
+                <PhosphorIcon icon={IconMappings.calendar} size="medium" />
+            ),
+            rightAccessory: (
+                <PhosphorIcon icon={IconMappings.caretRight} size="medium" />
+            ),
+        },
+    },
+];
+
+type Story = StoryObj<typeof ActionItem>;
+
+/**
+ * The following stories are used to generate the pseudo states for the
+ * ActionItem component. This is only used for visual testing in Chromatic.
+ */
+const meta = {
+    title: "Packages / Dropdown / ActionItem / ActionItem - All Variants",
+    component: ActionItem,
+    render: (args) => (
+        <AllVariants rows={rows} columns={columns}>
+            {(props) => <ActionItem {...args} {...props} />}
+        </AllVariants>
+    ),
+    args: {
+        label: "Action Item",
+        onClick: () => {},
+        disabled: false,
+        testId: "",
+        lang: "",
+        role: "menuitem",
+        style: {},
+        horizontalRule: "none",
+        leftAccessory: null,
+        rightAccessory: null,
+    },
+    decorators: [
+        (Story): React.ReactElement<React.ComponentProps<typeof View>> => (
+            <View style={{width: 800}}>
+                <Story />
+            </View>
+        ),
+    ],
+    parameters: {
+        backgrounds: {
+            default: "offWhite",
+        },
+    },
+    tags: ["!autodocs"],
+} satisfies Meta<typeof ActionItem>;
+
+export default meta;
+
+export const Default: Story = {};
+
+export const Hover: Story = {
+    parameters: {pseudo: {hover: true}},
+};
+
+export const Focus: Story = {
+    parameters: {pseudo: {focusVisible: true}},
+};
+
+export const HoverFocus: Story = {
+    name: "Hover + Focus",
+    parameters: {pseudo: {hover: true, focusVisible: true}},
+};
+
+export const Active: Story = {
+    parameters: {pseudo: {active: true, focusVisible: true}},
+};

__docs__/wonder-blocks-dropdown/action-item.stories.tsx

@@ -4,7 +4,7 @@ import {StyleSheet} from "aphrodite";
 import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import {ActionItem} from "@khanacademy/wonder-blocks-dropdown";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
@@ -26,12 +26,12 @@ const defaultArgs = {
 
 const styles = StyleSheet.create({
     example: {
-        background: color.offWhite,
+        background: semanticColor.surface.secondary,
         padding: spacing.medium_16,
         width: 300,
     },
     items: {
-        background: color.white,
+        background: semanticColor.surface.primary,
     },
 });
 
@@ -69,6 +69,10 @@ export default {
                 version={packageConfig.version}
             />
         ),
+        // These stories are being tested in action-item-variants.stories.tsx
+        chromatic: {
+            disableSnapshot: true,
+        },
     },
 } as Meta<typeof ActionItem>;
 
@@ -154,4 +158,10 @@ export const HorizontalRule = {
             <ActionItem {...args} />
         </View>
     ),
+    parameters: {
+        chromatic: {
+            // Enabling to test how the horizontal rule looks.
+            disableSnapshot: false,
+        },
+    },
 };

__docs__/wonder-blocks-dropdown/action-menu.stories.tsx

@@ -10,7 +10,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import Pill from "@khanacademy/wonder-blocks-pill";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {
     ActionItem,
@@ -122,7 +122,7 @@ export default {
 
 const styles = StyleSheet.create({
     example: {
-        background: color.offWhite,
+        background: semanticColor.surface.secondary,
         padding: spacing.medium_16,
     },
     exampleExtended: {
@@ -144,22 +144,22 @@ const styles = StyleSheet.create({
      * Custom opener styles
      */
     customOpener: {
-        borderLeft: `${spacing.xxxSmall_4}px solid ${color.purple}`,
+        borderLeft: `${spacing.xxxSmall_4}px solid ${semanticColor.status.warning.foreground}`,
         borderRadius: spacing.xxxSmall_4,
-        background: color.fadedPurple24,
-        color: color.offBlack,
+        background: semanticColor.status.warning.background,
+        color: semanticColor.text.primary,
         padding: spacing.medium_16,
     },
     focused: {
-        outlineColor: color.purple,
+        outlineColor: semanticColor.border.focus,
         outlineOffset: spacing.xxxxSmall_2,
     },
     hovered: {
         textDecoration: "underline",
         cursor: "pointer",
     },
     pressed: {
-        color: color.blue,
+        color: semanticColor.status.warning.foreground,
     },
 });
 
@@ -482,8 +482,8 @@ export const CustomActionItems: StoryComponentType = {
                 onClick={action("user profile clicked!")}
                 style={{
                     [":hover [data-testid=new-pill]" as any]: {
-                        backgroundColor: color.white,
-                        color: color.blue,
+                        backgroundColor: semanticColor.surface.primary,
+                        color: semanticColor.status.notice.foreground,
                     },
                 }}
             />,

__docs__/wonder-blocks-dropdown/combobox.stories.tsx

@@ -7,7 +7,7 @@ import * as React from "react";
 import magnifyingGlassIcon from "@phosphor-icons/core/bold/magnifying-glass-bold.svg";
 
 import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
-import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import {Combobox, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
@@ -49,7 +49,7 @@ const customItems = allProfilesWithPictures.map((user, index) => (
 
 const styles = StyleSheet.create({
     example: {
-        background: color.offWhite,
+        background: semanticColor.surface.secondary,
         padding: spacing.medium_16,
         width: 300,
     },

__docs__/wonder-blocks-dropdown/listbox.stories.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import {Listbox, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
 import Pill from "@khanacademy/wonder-blocks-pill";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import {allProfilesWithPictures} from "./option-item-examples";
 
@@ -27,12 +27,12 @@ const items = [
 
 const styles = StyleSheet.create({
     example: {
-        background: color.offWhite,
+        background: semanticColor.surface.secondary,
         padding: spacing.medium_16,
         width: 360,
     },
     customListbox: {
-        border: `5px solid ${color.offBlack16}`,
+        border: `5px solid ${semanticColor.border.primary}`,
         width: 250,
     },
 });

__docs__/wonder-blocks-dropdown/multi-select.stories.tsx

@@ -8,7 +8,7 @@ import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import Button from "@khanacademy/wonder-blocks-button";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
 import {MultiSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
 import Pill from "@khanacademy/wonder-blocks-pill";
@@ -109,22 +109,22 @@ const styles = StyleSheet.create({
      * Custom opener styles
      */
     customOpener: {
-        borderLeft: `${spacing.xxxSmall_4}px solid ${color.purple}`,
+        borderLeft: `${spacing.xxxSmall_4}px solid ${semanticColor.status.warning.foreground}`,
         borderRadius: spacing.xxxSmall_4,
-        background: color.fadedPurple24,
-        color: color.offBlack,
+        background: semanticColor.status.warning.background,
+        color: semanticColor.text.primary,
         padding: spacing.medium_16,
     },
     focused: {
-        outlineColor: color.purple,
+        outlineColor: semanticColor.border.focus,
         outlineOffset: spacing.xxxxSmall_2,
     },
     hovered: {
         textDecoration: "underline",
         cursor: "pointer",
     },
     pressed: {
-        color: color.blue,
+        color: semanticColor.status.warning.foreground,
     },
 });