This is a feature-branch pull-request from feature/labeled-field to main

.changeset/big-starfishes-worry.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": patch
+---
+
+LabeledField: Refactor from class component to function component

.changeset/chilly-mirrors-add.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-form": patch
+---
+
+TextField and TextArea: Set `aria-required` if it is required

.changeset/dull-elephants-march.md

@@ -0,0 +1,8 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": minor
+---
+
+- Update `LabeledField` styling to use semantic tokens to match Figma specs
+- Add error icon to the error message. This addresses accessibility issues related to color being the only way to communicate information
+- Add a labels prop so that a translated label for the error icon can be passed in
+- Handle long text overflow with and without word breaks

.changeset/metal-maps-move.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-form": patch
+---
+
+TextField and TextArea validation: Always clear error message onChange if instantValidation=false so externally set error state can still be cleared

.changeset/pink-turtles-sleep.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": minor
+---
+
+LabeledField: Wire up attributes for elements and apply attributes to the field element

.changeset/serious-cherries-wonder.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": patch
+---
+
+Makes sure custom required messages passed into `LabeledField` or the `field` prop are displayed

.changeset/slow-otters-crash.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": patch
+---
+
+Set required, error and light props for LabeledField and field component if it is set on either LabeledField or field component

.changeset/smart-grapes-serve.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": patch
+---
+
+Use `errorMessage` prop instead of `error` prop for consistency (`error` prop is used for boolean props in form field components).

.changeset/spicy-rivers-marry.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": patch
+---
+
+LabeledField: Let `required` prop be a boolean or string so it can be passed down to the field prop

.changeset/two-pens-remember.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": patch
+---
+
+Sets up the initial implementation for LabeledField based on the internal FieldHeading component in the form package

__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>
     ),
 };