[ColorSync] [Numeric Input] Add more regression stories for the Numeric Input widget

.changeset/happy-waves-nail.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+[ColorSync][numeric input] Add more regression stories for the Numeric Input widget

packages/perseus/src/styles/widgets/numeric.css

@@ -6,7 +6,7 @@
 }
 .input-with-examples-tooltip ul {
     list-style-type: disc;
-    margin-left: 30px;
+    margin-inline-start: 30px;
 }
 .input-with-examples-tooltip strong {
     font-weight: 700;

packages/perseus/src/widgets/__docs__/nested-widgets-initial-state-regression.stories.tsx

@@ -1,6 +1,7 @@
 import {
     type GradedGroupWidget,
     type PerseusExplanationWidgetOptions,
+    type PerseusRenderer,
 } from "@khanacademy/perseus-core";
 
 import {themeModes} from "../../../../../.storybook/modes";
@@ -11,6 +12,8 @@ import {
     explanationWithDefinitionOptions,
     gradedGroupWithRadioAndDefinition,
     gradedGroupWithRadioAndExplanation,
+    numericInputInGradedGroup,
+    numericInputInTable,
     gradedGroupWithInteractiveGraphAndRadio,
 } from "./nested-widgets.testdata";
 
@@ -64,3 +67,19 @@ export const ExplanationWithDefinition: ExplanationStory = {
     decorators: [articleRendererDecorator, explanationRendererDecorator],
     args: explanationWithDefinitionOptions,
 };
+
+type RendererStory = StoryObj<PerseusRenderer>;
+
+export const NumericInputInTable: RendererStory = {
+    decorators: [articleRendererDecorator],
+    parameters: {
+        question: numericInputInTable,
+    },
+};
+
+export const NumericInputInGradedGroup: RendererStory = {
+    decorators: [articleRendererDecorator],
+    parameters: {
+        question: numericInputInGradedGroup,
+    },
+};

packages/perseus/src/widgets/__docs__/nested-widgets-interactions-regression.stories.tsx

@@ -13,6 +13,7 @@ import {
     gradedGroupWithRadioAndDefinition,
     gradedGroupWithRadioAndExplanation,
     imageInContent,
+    numericInputInExplanation,
     videoInContent,
 } from "./nested-widgets.testdata";
 
@@ -144,3 +145,16 @@ export const ExplanationWithDefinition: ExplanationStory = {
         await userEvent.click(definitionTrigger);
     },
 };
+
+export const NumericInputInExplanation: StoryObj = {
+    decorators: [articleRendererDecorator],
+    parameters: {
+        question: numericInputInExplanation,
+    },
+    play: async ({canvas, userEvent}) => {
+        const explanationTrigger = canvas.getByRole("button", {
+            name: "Show practice problem",
+        });
+        await userEvent.click(explanationTrigger);
+    },
+};

packages/perseus/src/widgets/__docs__/nested-widgets.testdata.ts

@@ -8,6 +8,8 @@ import {
     generateIGPointGraph,
     generateImageOptions,
     generateImageWidget,
+    generateNumericInputOptions,
+    generateNumericInputWidget,
     generateInteractiveGraphOptions,
     generateInteractiveGraphWidget,
     generateRadioChoice,
@@ -223,6 +225,69 @@ export const definitionInContentAndExplanation: PerseusRenderer =
         },
     });
 
+export const numericInputInTable: PerseusRenderer = generateTestPerseusRenderer(
+    {
+        content:
+            "| Normal-size input | Small-size input |\n" +
+            "| --- | --- |\n" +
+            "| [[☃ numeric-input 1]] | [[☃ numeric-input 2]] |",
+        widgets: {
+            "numeric-input 1": generateNumericInputWidget({
+                options: generateNumericInputOptions({size: "normal"}),
+            }),
+            "numeric-input 2": generateNumericInputWidget({
+                options: generateNumericInputOptions({size: "small"}),
+            }),
+        },
+    },
+);
+
+export const numericInputInGradedGroup: PerseusRenderer =
+    generateTestPerseusRenderer({
+        content: "[[☃ graded-group 1]]",
+        widgets: {
+            "graded-group 1": generateGradedGroupWidget({
+                options: generateGradedGroupOptions({
+                    title: "USS Enterprise registry",
+                    content:
+                        "What is the registry number of the original USS " +
+                        "Enterprise?\n\nNCC-[[☃ numeric-input 1]]",
+                    widgets: {
+                        "numeric-input 1": generateNumericInputWidget({
+                            options: generateNumericInputOptions({
+                                size: "normal",
+                            }),
+                        }),
+                    },
+                }),
+            }),
+        },
+    });
+
+export const numericInputInExplanation: PerseusRenderer =
+    generateTestPerseusRenderer({
+        content: "Warp factors are not linear.\n\n[[☃ explanation 1]]",
+        widgets: {
+            "explanation 1": generateExplanationWidget({
+                options: generateExplanationOptions({
+                    showPrompt: "Show practice problem",
+                    hidePrompt: "Hide practice problem",
+                    explanation:
+                        "Warp 1 equals the speed of light. Enter the warp " +
+                        "factor that equals twice the speed of light: " +
+                        "[[☃ numeric-input 1]]",
+                    widgets: {
+                        "numeric-input 1": generateNumericInputWidget({
+                            options: generateNumericInputOptions({
+                                size: "normal",
+                            }),
+                        }),
+                    },
+                }),
+            }),
+        },
+    });
+
 export const explanationWithDefinitionOptions: PerseusExplanationWidgetOptions =
     generateExplanationOptions({
         explanation:

packages/perseus/src/widgets/numeric-input/__docs__/numeric-input-initial-state-regression.stories.tsx

@@ -1,4 +1,14 @@
+import {
+    generateDropdownOptions,
+    generateDropdownWidget,
+    generateNumericInputOptions,
+    generateNumericInputWidget,
+    generateTestPerseusRenderer,
+} from "@khanacademy/perseus-core";
+import * as React from "react";
+
 import {themeModes} from "../../../../../../.storybook/modes";
+import QuestionRendererForStories from "../../__testutils__/question-renderer-for-stories";
 
 import {numericInputRendererDecorator} from "./numeric-input-renderer-decorator";
 
@@ -69,3 +79,106 @@ export const CenterTextAlign: Story = {
         textAlign: "center",
     },
 };
+
+// Verifies that a very long number does not overflow or distort the input box
+export const LongNumber: Story = {
+    decorators: [numericInputRendererDecorator],
+    parameters: {
+        initialUserInput: {
+            "numeric-input 1": {currentValue: "12345678901234567890"},
+        },
+    },
+    args: {
+        size: "normal",
+    },
+};
+
+export const MultipleInputsInParagraph: Story = {
+    decorators: [
+        (Story) => (
+            // Limit the width to force two inputs to stack vertically.
+            <div style={{maxWidth: "500px"}}>
+                <Story />
+            </div>
+        ),
+    ],
+    render: function Render() {
+        return (
+            <QuestionRendererForStories
+                question={generateTestPerseusRenderer({
+                    content:
+                        "On long-range sensors, the bridge crew counted " +
+                        "[[☃ numeric-input 1]] Borg cubes, [[☃ numeric-input 2]] " +
+                        "Romulan warbirds, and [[☃ numeric-input 3]] Klingon " +
+                        "birds-of-prey approaching the neutral zone.",
+                    widgets: {
+                        "numeric-input 1": generateNumericInputWidget({
+                            options: generateNumericInputOptions({
+                                size: "normal",
+                            }),
+                        }),
+                        "numeric-input 2": generateNumericInputWidget({
+                            options: generateNumericInputOptions({
+                                size: "normal",
+                            }),
+                        }),
+                        "numeric-input 3": generateNumericInputWidget({
+                            options: generateNumericInputOptions({
+                                size: "normal",
+                            }),
+                        }),
+                    },
+                })}
+                initialUserInput={{
+                    "numeric-input 1": {currentValue: "12"},
+                    "numeric-input 2": {currentValue: "7"},
+                    "numeric-input 3": {currentValue: "23"},
+                }}
+            />
+        );
+    },
+};
+
+/**
+ * Verifies the vertical spacing/baseline alignment when a numeric input sits
+ * inline with a dropdown in the same paragraph.
+ */
+export const InlineWithDropdown: Story = {
+    render: function Render() {
+        return (
+            <QuestionRendererForStories
+                question={generateTestPerseusRenderer({
+                    content:
+                        "The shuttlecraft can carry [[☃ numeric-input 1]] " +
+                        "supply crates, which is [[☃ dropdown 1]] the cargo " +
+                        "limit set by Starfleet.",
+                    widgets: {
+                        "numeric-input 1": generateNumericInputWidget({
+                            options: generateNumericInputOptions({
+                                size: "normal",
+                            }),
+                        }),
+                        "dropdown 1": generateDropdownWidget({
+                            options: generateDropdownOptions({
+                                placeholder: "greater/less than or equal to",
+                                choices: [
+                                    {
+                                        content: "greater than or equal to",
+                                        correct: false,
+                                    },
+                                    {
+                                        content: "less than or equal to",
+                                        correct: true,
+                                    },
+                                ],
+                            }),
+                        }),
+                    },
+                })}
+                initialUserInput={{
+                    "numeric-input 1": {currentValue: "42"},
+                }}
+            />
+        );
+    },
+};