Use LabeledField in other component stories (#2400)

## Summary: Use LabeledField in other component stories Issue: WB-1783 ## Test plan: Verify stories for the following components: - SingleSelect (`?path=/docs/packages-dropdown-singleselect--docs`) - MultiSelect (`?path=/docs/packages-dropdown-multiselect--docs`) - TextArea (`?path=/docs/packages-form-textarea--docs`) - TextArea Variants (`?path=/docs/packages-form-textarea-all-variants--docs`) - TextField (`?path=/docs/packages-form-textfield--docs`) - TextField Variants (`?path=/docs/packages-form-textfield-all-variants--docs`) - SearchField (`?path=/docs/packages-searchfield--docs`) - SearchField Variants (`?path=/docs/packages-searchfield-all-variants--docs`) Note: This addresses Storybook a11y issues related to form fields and labels. There are some stories that focus on the form field without the label so those warnings will need to be handled separately! Author: beaesguerra Reviewers: jandrade, beaesguerra Required Reviewers: Approved By: jandrade 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), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ dependabot Pull Request URL: #2400
Khan · Dec 19, 2024 · 68221bc · 68221bc
1 parent d9bc865
commit 68221bc
Show file tree

Hide file tree

Showing 8 changed files with 433 additions and 652 deletions.
diff --git a/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx b/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
@@ -8,8 +8,8 @@ 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, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {HeadingLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {color, 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";
 import type {Labels} from "@khanacademy/wonder-blocks-dropdown";
@@ -25,7 +25,7 @@ import {
     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";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
 
 type StoryComponentType = StoryObj<typeof MultiSelect>;
 
@@ -271,7 +271,10 @@ export const CustomStylesOpened: StoryComponentType = {
     ],
 };
 
-const ControlledMultiSelect = (args: PropsFor<typeof MultiSelect>) => {
+const ControlledMultiSelect = (
+    storyArgs: PropsFor<typeof MultiSelect> & {label?: string},
+) => {
+    const {label, ...args} = storyArgs;
     const [opened, setOpened] = React.useState(false);
     const [selectedValues, setSelectedValues] = React.useState<string[]>(
         args.selectedValues || [],
@@ -280,31 +283,29 @@ const ControlledMultiSelect = (args: PropsFor<typeof MultiSelect>) => {
         null | string | void
     >(null);
     return (
-        <View style={{gap: spacing.xSmall_8}}>
-            <MultiSelect
-                {...args}
-                id="multi-select"
-                opened={opened}
-                onToggle={setOpened}
-                selectedValues={selectedValues}
-                onChange={setSelectedValues}
-                validate={(values) => {
-                    if (values.includes("jupiter")) {
-                        return "Don't pick jupiter!";
-                    }
-                }}
-                onValidate={setErrorMessage}
-            >
-                {items}
-            </MultiSelect>
-            {(errorMessage || args.error) && (
-                <LabelMedium
-                    style={{color: semanticColor.status.critical.foreground}}
+        <LabeledField
+            label={label || "MultiSelect"}
+            errorMessage={
+                errorMessage || (args.error && "Error from error prop")
+            }
+            field={
+                <MultiSelect
+                    {...args}
+                    opened={opened}
+                    onToggle={setOpened}
+                    selectedValues={selectedValues}
+                    onChange={setSelectedValues}
+                    validate={(values) => {
+                        if (values.includes("jupiter")) {
+                            return "Don't pick jupiter!";
+                        }
+                    }}
+                    onValidate={setErrorMessage}
                 >
-                    {errorMessage || "Error from error prop"}
-                </LabelMedium>
-            )}
-        </View>
+                    {items}
+                </MultiSelect>
+            }
+        />
     );
 };
 
@@ -378,20 +379,17 @@ export const Required: StoryComponentType = {
 export const ErrorFromValidation: StoryComponentType = {
     render: (args: PropsFor<typeof MultiSelect>) => {
         return (
-            <View style={{gap: spacing.xSmall_8}}>
-                <LabelMedium htmlFor="multi-select" tag="label">
-                    Validation example (try picking jupiter)
-                </LabelMedium>
-                <ControlledMultiSelect {...args} id="multi-select">
+            <View style={{gap: spacing.large_24}}>
+                <ControlledMultiSelect
+                    {...args}
+                    label="Validation example (try picking jupiter)"
+                >
                     {items}
                 </ControlledMultiSelect>
-                <LabelMedium htmlFor="multi-select" tag="label">
-                    Validation example (on mount)
-                </LabelMedium>
                 <ControlledMultiSelect
                     {...args}
+                    label="Validation example (on mount)"
                     selectedValues={["jupiter"]}
-                    id="multi-select"
                 >
                     {items}
                 </ControlledMultiSelect>
@@ -494,27 +492,30 @@ export const DropdownInModal: StoryComponentType = {
  */
 export const Disabled: StoryComponentType = {
     render: () => (
-        <View>
-            <LabelMedium style={{marginBottom: spacing.xSmall_8}}>
-                Disabled prop is set to true
-            </LabelMedium>
-            <MultiSelect disabled={true} onChange={() => {}}>
-                <OptionItem label="Mercury" value="1" />
-                <OptionItem label="Venus" value="2" />
-            </MultiSelect>
-            <Strut size={spacing.xLarge_32} />
-            <LabelMedium style={{marginBottom: spacing.xSmall_8}}>
-                No items
-            </LabelMedium>
-            <MultiSelect onChange={() => {}} />
-            <Strut size={spacing.xLarge_32} />
-            <LabelMedium style={{marginBottom: spacing.xSmall_8}}>
-                All items are disabled
-            </LabelMedium>
-            <MultiSelect onChange={() => {}}>
-                <OptionItem label="Mercury" value="1" disabled={true} />
-                <OptionItem label="Venus" value="2" disabled={true} />
-            </MultiSelect>
+        <View style={{gap: spacing.xLarge_32}}>
+            <LabeledField
+                label="Disabled prop is set to true"
+                field={
+                    <MultiSelect disabled={true} onChange={() => {}}>
+                        <OptionItem label="Mercury" value="1" />
+                        <OptionItem label="Venus" value="2" />
+                    </MultiSelect>
+                }
+            />
+            <LabeledField
+                label="No items"
+                field={<MultiSelect onChange={() => {}} />}
+            />
+
+            <LabeledField
+                label="All items are disabled"
+                field={
+                    <MultiSelect onChange={() => {}}>
+                        <OptionItem label="Mercury" value="1" disabled={true} />
+                        <OptionItem label="Venus" value="2" disabled={true} />
+                    </MultiSelect>
+                }
+            />
         </View>
     ),
 };

diff --git a/__docs__/wonder-blocks-dropdown/single-select.stories.tsx b/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
@@ -7,19 +7,14 @@ import {action} from "@storybook/addon-actions";
 import type {Meta, StoryObj} from "@storybook/react";
 
 import Button from "@khanacademy/wonder-blocks-button";
-import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
 import Pill from "@khanacademy/wonder-blocks-pill";
-import {
-    Body,
-    HeadingLarge,
-    LabelMedium,
-    LabelSmall,
-} from "@khanacademy/wonder-blocks-typography";
+import {Body, HeadingLarge} from "@khanacademy/wonder-blocks-typography";
 import {
     SingleSelect,
     OptionItem,
@@ -39,6 +34,7 @@ import {
     currencies,
 } from "./option-item-examples";
 import {OpenerProps} from "../../packages/wonder-blocks-dropdown/src/util/types";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
 
 type StoryComponentType = StoryObj<typeof SingleSelect>;
 type SingleSelectArgs = Partial<typeof SingleSelect>;
@@ -353,36 +349,49 @@ export const LongOptionLabels: StoryComponentType = {
  */
 export const Disabled: StoryComponentType = {
     render: () => (
-        <View>
-            <LabelMedium style={{marginBottom: spacing.xSmall_8}}>
-                Disabled prop is set to true
-            </LabelMedium>
-            <SingleSelect
-                placeholder="Choose a fruit"
-                onChange={() => {}}
-                selectedValue=""
-                disabled={true}
-            >
-                {items}
-            </SingleSelect>
-            <Strut size={spacing.xLarge_32} />
-            <LabelMedium style={{marginBottom: spacing.xSmall_8}}>
-                No items
-            </LabelMedium>
-            <SingleSelect placeholder="Choose a fruit" onChange={() => {}} />
-            <Strut size={spacing.xLarge_32} />
-            <LabelMedium style={{marginBottom: spacing.xSmall_8}}>
-                All items are disabled
-            </LabelMedium>
-            <SingleSelect placeholder="Choose a fruit" onChange={() => {}}>
-                <OptionItem label="Apple" value="1" disabled={true} />
-                <OptionItem label="Orange" value="2" disabled={true} />
-            </SingleSelect>
+        <View style={{gap: spacing.xLarge_32}}>
+            <LabeledField
+                label="Disabled prop is set to true"
+                field={
+                    <SingleSelect
+                        placeholder="Choose a fruit"
+                        onChange={() => {}}
+                        selectedValue=""
+                        disabled={true}
+                    >
+                        {items}
+                    </SingleSelect>
+                }
+            />
+            <LabeledField
+                label="No items"
+                field={
+                    <SingleSelect
+                        placeholder="Choose a fruit"
+                        onChange={() => {}}
+                    />
+                }
+            />
+            <LabeledField
+                label="All items are disabled"
+                field={
+                    <SingleSelect
+                        placeholder="Choose a fruit"
+                        onChange={() => {}}
+                    >
+                        <OptionItem label="Apple" value="1" disabled={true} />
+                        <OptionItem label="Orange" value="2" disabled={true} />
+                    </SingleSelect>
+                }
+            />
         </View>
     ),
 };
 
-const ControlledSingleSelect = (args: PropsFor<typeof SingleSelect>) => {
+const ControlledSingleSelect = (
+    storyArgs: PropsFor<typeof SingleSelect> & {label?: string},
+) => {
+    const {label, ...args} = storyArgs;
     const [opened, setOpened] = React.useState(false);
     const [selectedValue, setSelectedValue] = React.useState(
         args.selectedValue,
@@ -391,32 +400,30 @@ const ControlledSingleSelect = (args: PropsFor<typeof SingleSelect>) => {
         null | string | void
     >(null);
     return (
-        <View style={{gap: spacing.xSmall_8}}>
-            <SingleSelect
-                {...args}
-                id="single-select"
-                opened={opened}
-                onToggle={setOpened}
-                selectedValue={selectedValue}
-                onChange={setSelectedValue}
-                placeholder="Choose a fruit"
-                validate={(value) => {
-                    if (value === "lemon") {
-                        return "Pick another option!";
-                    }
-                }}
-                onValidate={setErrorMessage}
-            >
-                {items}
-            </SingleSelect>
-            {(errorMessage || args.error) && (
-                <LabelSmall
-                    style={{color: semanticColor.status.critical.foreground}}
+        <LabeledField
+            label={label || "SingleSelect"}
+            errorMessage={
+                errorMessage || (args.error && "Error from error prop")
+            }
+            field={
+                <SingleSelect
+                    {...args}
+                    opened={opened}
+                    onToggle={setOpened}
+                    selectedValue={selectedValue}
+                    onChange={setSelectedValue}
+                    placeholder="Choose a fruit"
+                    validate={(value) => {
+                        if (value === "lemon") {
+                            return "Pick another option!";
+                        }
+                    }}
+                    onValidate={setErrorMessage}
                 >
-                    {errorMessage || "Error from error prop"}
-                </LabelSmall>
-            )}
-        </View>
+                    {items}
+                </SingleSelect>
+            }
+        />
     );
 };
 
@@ -490,13 +497,10 @@ export const Required: StoryComponentType = {
 export const ErrorFromValidation: StoryComponentType = {
     render: (args: PropsFor<typeof SingleSelect>) => {
         return (
-            <View style={{gap: spacing.xSmall_8}}>
-                <LabelSmall htmlFor="single-select" tag="label">
-                    Validation example (try picking lemon to trigger an error)
-                </LabelSmall>
+            <View style={{gap: spacing.large_24}}>
                 <ControlledSingleSelect
                     {...args}
-                    id="single-select"
+                    label="Validation example (try picking lemon to trigger an error)"
                     validate={(value) => {
                         if (value === "lemon") {
                             return "Pick another option!";
@@ -505,12 +509,9 @@ export const ErrorFromValidation: StoryComponentType = {
                 >
                     {items}
                 </ControlledSingleSelect>
-                <LabelSmall htmlFor="single-select" tag="label">
-                    Validation example (on mount)
-                </LabelSmall>
                 <ControlledSingleSelect
                     {...args}
-                    id="single-select"
+                    label="Validation example (on mount)"
                     validate={(value) => {
                         if (value === "lemon") {
                             return "Pick another option!";

diff --git a/__docs__/wonder-blocks-form/text-area-variants.stories.tsx b/__docs__/wonder-blocks-form/text-area-variants.stories.tsx
@@ -4,8 +4,9 @@ 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 {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {TextArea} from "@khanacademy/wonder-blocks-form";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
 
 /**
  * The following stories are used to generate the pseudo states for the
@@ -58,16 +59,16 @@ const States = (props: {
                 {states.map((scenario) => {
                     return (
                         <View style={styles.scenario} key={scenario.label}>
-                            <LabelMedium
-                                style={props.light && {color: color.white}}
-                            >
-                                {scenario.label}
-                            </LabelMedium>
-                            <TextArea
-                                value=""
-                                onChange={() => {}}
-                                {...props}
-                                {...scenario.props}
+                            <LabeledField
+                                label={scenario.label}
+                                field={
+                                    <TextArea
+                                        value=""
+                                        onChange={() => {}}
+                                        {...props}
+                                        {...scenario.props}
+                                    />
+                                }
                             />
                         </View>
                     );