Merge branch 'main' into dropdown-fc

Khan · Dec 2, 2024 · 388de15 · 388de15
2 parents 32b4f84 + bb66c18
commit 388de15
Show file tree

Hide file tree

Showing 39 changed files with 656 additions and 121 deletions.
diff --git a/.github/workflows/node-ci-lint.yml b/.github/workflows/node-ci-lint.yml
@@ -13,7 +13,10 @@ jobs:
         os: [ubuntu-latest]
         node-version: [20.x]
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:

diff --git a/__docs__/wonder-blocks-dropdown/combobox.stories.tsx b/__docs__/wonder-blocks-dropdown/combobox.stories.tsx
@@ -4,10 +4,13 @@ import {Meta, StoryObj} from "@storybook/react";
 import {expect, userEvent, within} from "@storybook/test";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
-import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+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 {Checkbox} from "@khanacademy/wonder-blocks-form";
 import {Combobox, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import {allProfilesWithPictures} from "./option-item-examples";
 
@@ -428,3 +431,83 @@ export const Error: Story = {
         error: true,
     },
 };
+
+/**
+ * With `startIcon`, you can customize the icon that appears at the beginning of
+ * the Combobox. This is useful when you want to add a custom icon to the
+ * component.
+ *
+ * **NOTE:** When `startIcon` is set, we set some default values for the icon:
+ * - `size`: "small"
+ * - `color`: `semanticColor.icon.default`
+ *
+ * You can customize the size and color of the icon by passing the `size` and
+ * `color` props to the `PhosphorIcon` component.
+ */
+export const StartIcon: Story = {
+    render: function Render(args: PropsFor<typeof Combobox>) {
+        const [_, updateArgs] = useArgs();
+
+        return (
+            <View style={{gap: spacing.medium_16}}>
+                <LabelMedium>With default size and color:</LabelMedium>
+                <Combobox
+                    {...args}
+                    startIcon={<PhosphorIcon icon={magnifyingGlassIcon} />}
+                    onChange={(newValue) => {
+                        updateArgs({value: newValue});
+                        action("onChange")(newValue);
+                    }}
+                />
+                <LabelMedium>With custom size:</LabelMedium>
+                <Combobox
+                    {...args}
+                    startIcon={
+                        <PhosphorIcon
+                            icon={magnifyingGlassIcon}
+                            size="medium"
+                        />
+                    }
+                    onChange={(newValue) => {
+                        updateArgs({value: newValue});
+                        action("onChange")(newValue);
+                    }}
+                />
+                <LabelMedium>With custom color:</LabelMedium>
+                <Combobox
+                    {...args}
+                    startIcon={
+                        <PhosphorIcon
+                            icon={magnifyingGlassIcon}
+                            size="small"
+                            color={semanticColor.icon.action}
+                        />
+                    }
+                    onChange={(newValue) => {
+                        updateArgs({value: newValue});
+                        action("onChange")(newValue);
+                    }}
+                />
+                <LabelMedium>Disabled (overrides color prop):</LabelMedium>
+                <Combobox
+                    {...args}
+                    startIcon={
+                        <PhosphorIcon
+                            icon={magnifyingGlassIcon}
+                            size="small"
+                            color={semanticColor.icon.action}
+                        />
+                    }
+                    disabled={true}
+                    onChange={(newValue) => {
+                        updateArgs({value: newValue});
+                        action("onChange")(newValue);
+                    }}
+                />
+            </View>
+        );
+    },
+    args: {
+        children: items,
+    },
+};
diff --git a/__docs__/wonder-blocks-dropdown/multi-select.argtypes.ts b/__docs__/wonder-blocks-dropdown/multi-select.argtypes.ts
@@ -21,6 +21,18 @@ const argTypes: ArgTypes = {
             type: {summary: "Labels"},
         },
     },
+    showOpenerLabelAsText: {
+        control: {type: "boolean"},
+        description: `When false, the SelectOpener can show a Node as a label. When true, the
+         SelectOpener will use a string as a label. If using custom OptionItems, a
+         plain text label can be provided with the \`labelAsText\` prop.
+         Defaults to true.`,
+
+        table: {
+            type: {summary: "boolean"},
+            defaultValue: {summary: "true"},
+        },
+    },
 };
 
 export default argTypes;
diff --git a/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx b/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
@@ -18,7 +18,12 @@ import ComponentInfo from "../../.storybook/components/component-info";
 import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
 import multiSelectArgtypes from "./multi-select.argtypes";
 import {defaultLabels} from "../../packages/wonder-blocks-dropdown/src/util/constants";
-import {allCountries, allProfilesWithPictures} from "./option-item-examples";
+import {
+    allCountries,
+    allProfilesWithPictures,
+    locales,
+    chatIcon,
+} from "./option-item-examples";
 import {OpenerProps} from "../../packages/wonder-blocks-dropdown/src/util/types";
 import Strut from "../../packages/wonder-blocks-layout/src/components/strut";
 
@@ -650,3 +655,54 @@ export const CustomOptionItems: StoryComponentType = {
         ),
     ],
 };
+
+/**
+ * This example illustrates how a JSX Element can appear as the label by setting
+ * `showOpenerLabelAsText` to false. Note that in this example, we define
+ * `labelAsText` on the OptionItems to ensure that filtering works correctly.
+ */
+export const CustomOptionItemsWithNodeLabel: StoryComponentType = {
+    render: function Render() {
+        const [opened, setOpened] = React.useState(true);
+        const [selectedValues, setSelectedValues] = React.useState<
+            Array<string>
+        >([]);
+
+        const handleChange = (selectedValues: Array<string>) => {
+            setSelectedValues(selectedValues);
+        };
+
+        const handleToggle = (opened: boolean) => {
+            setOpened(opened);
+        };
+
+        return (
+            <MultiSelect
+                onChange={handleChange}
+                selectedValues={selectedValues}
+                onToggle={handleToggle}
+                opened={opened}
+                showOpenerLabelAsText={false}
+                isFilterable={true}
+            >
+                {locales.map((locale, index) => (
+                    <OptionItem
+                        key={index}
+                        value={String(index)}
+                        label={
+                            <span>
+                                {chatIcon} {locale}
+                            </span>
+                        }
+                        labelAsText={locale}
+                    />
+                ))}
+            </MultiSelect>
+        );
+    },
+    decorators: [
+        (Story): React.ReactElement<React.ComponentProps<typeof View>> => (
+            <View style={styles.wrapper}>{Story()}</View>
+        ),
+    ],
+};
diff --git a/__docs__/wonder-blocks-dropdown/option-item-examples.tsx b/__docs__/wonder-blocks-dropdown/option-item-examples.tsx
@@ -1,5 +1,10 @@
 import * as React from "react";
 import userCircleIcon from "@phosphor-icons/core/duotone/user-circle-duotone.svg";
+import chatBubbleIcon from "@phosphor-icons/core/regular/chats.svg";
+import bitcoinIcon from "@phosphor-icons/core/regular/currency-btc.svg";
+import euroIcon from "@phosphor-icons/core/regular/currency-eur.svg";
+import dollarIcon from "@phosphor-icons/core/regular/currency-dollar.svg";
+import yenIcon from "@phosphor-icons/core/regular/currency-jpy.svg";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 
 export const allCountries = [
@@ -301,3 +306,23 @@ export const allProfilesWithPictures = [
         picture: icon,
     },
 ];
+
+export const currencies = [
+    {name: "Bitcoin", icon: bitcoinIcon},
+    {name: "Dollars", icon: dollarIcon},
+    {name: "Yen", icon: yenIcon},
+    {name: "Euros", icon: euroIcon},
+];
+
+export const locales = [
+    "অসমীয়া",
+    "Azərbaycanca",
+    "čeština",
+    "dansk",
+    "Ελληνικά",
+    "ગુજરાતી",
+    "magyar",
+    "Bahasa Indonesia",
+];
+
+export const chatIcon = <PhosphorIcon icon={chatBubbleIcon} size={"small"} />;
diff --git a/__docs__/wonder-blocks-dropdown/single-select.argtypes.ts b/__docs__/wonder-blocks-dropdown/single-select.argtypes.ts
@@ -21,6 +21,18 @@ const argTypes: ArgTypes = {
             type: {summary: "Labels"},
         },
     },
+    showOpenerLabelAsText: {
+        control: {type: "boolean"},
+        description: `When false, the SelectOpener can show a Node as a label. When true, the
+         SelectOpener will use a string as a label. If using custom OptionItems, a
+         plain text label can be provided with the \`labelAsText\` prop.
+         Defaults to true.`,
+
+        table: {
+            type: {summary: "boolean"},
+            defaultValue: {summary: "true"},
+        },
+    },
 };
 
 export default argTypes;
diff --git a/__docs__/wonder-blocks-dropdown/single-select.stories.tsx b/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
@@ -31,7 +31,11 @@ import ComponentInfo from "../../.storybook/components/component-info";
 import singleSelectArgtypes from "./single-select.argtypes";
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 import {defaultLabels} from "../../packages/wonder-blocks-dropdown/src/util/constants";
-import {allCountries, allProfilesWithPictures} from "./option-item-examples";
+import {
+    allCountries,
+    allProfilesWithPictures,
+    currencies,
+} from "./option-item-examples";
 import {OpenerProps} from "../../packages/wonder-blocks-dropdown/src/util/types";
 
 type StoryComponentType = StoryObj<typeof SingleSelect>;
@@ -884,6 +888,58 @@ export const CustomOptionItems: StoryComponentType = {
     },
 };
 
+/**
+ * This example illustrates how a JSX Element can appear as the label if
+ * `labelAsText` is undefined. Note that in this example, we define `labelAsText`
+ * on the OptionItems to ensure that filtering works correctly.
+ */
+export const CustomOptionItemWithNodeLabel: StoryComponentType = {
+    render: function Render() {
+        const [opened, setOpened] = React.useState(true);
+        const [selectedValue, setSelectedValue] = React.useState("");
+
+        const handleChange = (selectedValue: string) => {
+            setSelectedValue(selectedValue);
+        };
+
+        const handleToggle = (opened: boolean) => {
+            setOpened(opened);
+        };
+
+        return (
+            <View style={styles.wrapper}>
+                <SingleSelect
+                    placeholder="Select your currency"
+                    onChange={handleChange}
+                    selectedValue={selectedValue}
+                    onToggle={handleToggle}
+                    opened={opened}
+                    showOpenerLabelAsText={false}
+                    isFilterable={true}
+                >
+                    {currencies.map((currency, index) => (
+                        <OptionItem
+                            key={index}
+                            value={String(index)}
+                            horizontalRule="full-width"
+                            label={
+                                <span>
+                                    <PhosphorIcon
+                                        icon={currency.icon}
+                                        size={"small"}
+                                    />
+                                    {currency.name}
+                                </span>
+                            }
+                            labelAsText={currency.name}
+                        />
+                    ))}
+                </SingleSelect>
+            </View>
+        );
+    },
+};
+
 /**
  * This example illustrates how you can use the `OptionItem` component to
  * display a virtualized list with custom option items. Note that in this

diff --git a/__docs__/wonder-blocks-toolbar/toolbar.argtypes.tsx b/__docs__/wonder-blocks-toolbar/toolbar.argtypes.tsx
@@ -20,7 +20,8 @@ const styles = StyleSheet.create({
     fillContent: {
         marginLeft: spacing.small_12,
         [mobile]: {
-            width: "100vw",
+            marginLeft: 0,
+            width: "100%",
         },
     },
     onlyDesktop: {

diff --git a/__docs__/wonder-blocks-toolbar/toolbar.stories.tsx b/__docs__/wonder-blocks-toolbar/toolbar.stories.tsx
@@ -228,6 +228,7 @@ export const CustomToolbar: StoryComponentType = {
             <View
                 style={{
                     width: 300,
+                    maxWidth: "100%",
                     height: spacing.xSmall_8,
                     background: semanticColor.mastery.primary,
                 }}

diff --git a/packages/wonder-blocks-birthday-picker/CHANGELOG.md b/packages/wonder-blocks-birthday-picker/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @khanacademy/wonder-blocks-birthday-picker
 
+## 2.0.92
+
+### Patch Changes
+
+-   Updated dependencies [2b8424ca]
+    -   @khanacademy/wonder-blocks-dropdown@5.8.0
+
+## 2.0.91
+
+### Patch Changes
+
+-   Updated dependencies [c512e76e]
+    -   @khanacademy/wonder-blocks-dropdown@5.7.0
+
 ## 2.0.90
 
 ### Patch Changes

diff --git a/packages/wonder-blocks-birthday-picker/package.json b/packages/wonder-blocks-birthday-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-birthday-picker",
-  "version": "2.0.90",
+  "version": "2.0.92",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,7 +15,7 @@
   "dependencies": {
     "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-core": "^7.0.1",
-    "@khanacademy/wonder-blocks-dropdown": "^5.6.3",
+    "@khanacademy/wonder-blocks-dropdown": "^5.8.0",
     "@khanacademy/wonder-blocks-icon": "^4.2.0",
     "@khanacademy/wonder-blocks-layout": "^2.2.2",
     "@khanacademy/wonder-blocks-tokens": "^2.1.0",