Add support for centered NumericInputs by handeyeco · Pull Request #3731 · Khan/perseus

handeyeco · 2026-06-05T18:07:21Z

Summary:

Go schema change: https://github.com/Khan/webapp/pull/39970

This PR adds support for centered NumericInputs. This required a change to the schema for NumericInput's widgetOptions:

- rightAlign?: Boolean;
+ textAlign: "start" | "end" | "center";

This meant that I needed to update the widget, editor, parser, stories, and tests. Ultimately it's a small change to the UI and a lot of changes to our safety nets.

I decided to go with start/end vs left/right to set us up for i18n in the future. However maybe we want to keep left/right and we can add start/end later? That would let content creators pick: "this needs to be on the left" or "this can be at the start of whatever the locale wants".

Issue: LEMS-4144

Test plan:

Most of this PR is adding/updating tests including:

Adding a story here: ?path=/story/widgets-numeric-input-visual-regression-tests-initial-state--center-text-align
Making the control interactive here: ?path=/docs/widgets-numeric-input--docs

github-actions · 2026-06-05T18:09:57Z

Size Change: +400 B (+0.08%)

Total Size: 508 kB

📦 View Changed

Filename	Size	Change
`packages/perseus-core/dist/es/index.item-splitting.js`	12.2 kB	+124 B (+1.03%)
`packages/perseus-core/dist/es/index.js`	26.4 kB	+161 B (+0.61%)
`packages/perseus-editor/dist/es/index.js`	105 kB	+41 B (+0.04%)
`packages/perseus/dist/es/index.js`	200 kB	+74 B (+0.04%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.6 kB
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	6.32 kB
`packages/math-input/dist/es/index.js`	98.5 kB
`packages/math-input/dist/es/strings.js`	1.61 kB
`packages/perseus-linter/dist/es/index.js`	9.65 kB
`packages/perseus-score/dist/es/index.js`	10.2 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	8.6 kB
`packages/pure-markdown/dist/es/index.js`	1.39 kB
`packages/simple-markdown/dist/es/index.js`	6.71 kB

_{compressed-size-action}

handeyeco · 2026-06-05T18:50:58Z

    });
 });
+
+describe("textAlign", () => {


Tests to make sure:

We can migrate from rightAlign to textAlign

We can parse textAlign correctly

handeyeco · 2026-06-05T18:51:56Z

    }),
 );
+
+function migrateV0ToV1(


Replacing rightAlign with textAlign is a major change and requires a migration.

handeyeco · 2026-06-05T18:55:21Z

+                    coefficient: false,
+                    labelText: "",
+                    size: "normal",
+                    textAlign: "center",


Test to make sure we can parse the new textAlign

handeyeco · 2026-06-05T18:56:18Z

        ]);
    });
+
+    it("converts alignment when rightAlign is undefined", () => {


Make sure IN-to-NI still works.

Greatly appreciate you adding these tests for us!

handeyeco · 2026-06-05T18:57:27Z

    });

-    it("should be possible to select right alignment", async () => {
+    it("should be possible to change text alignment", async () => {


Test to make sure the editor can select the new options

handeyeco · 2026-06-05T18:58:20Z

+};
+
+// Verifies the center-aligned text input variant with a pre-filled value — the value should appear in the center
+export const CenterTextAlign: Story = {


Visual regression test for centered NIs.

handeyeco · 2026-06-05T18:59:24Z

+          "coefficient": false,
+          "labelText": "",
+          "size": "normal",
+          "textAlign": "center",


This is the important bit here.

handeyeco · 2026-06-05T19:05:40Z

+          "coefficient": false,
+          "labelText": "",
+          "size": "normal",
+          "textAlign": "end",


This is the expected transformation of the legacy schema: rightAlign: true -> textAlign: end.

…t alignment in NumericInputs

github-actions · 2026-06-05T19:15:15Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (d550a0d) and published it to npm. You
can install it using the tag PR3731.

Example:

pnpm add @khanacademy/perseus@PR3731

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR3731

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR3731

handeyeco · 2026-06-05T19:20:03Z

+                    coefficient: false,
+                    labelText: "",
+                    size: "normal",
+                    rightAlign: true,


Test to make sure we can still parse rightAlign

handeyeco · 2026-06-05T19:25:39Z

+     * How to align the text in the input
+     * it's "start"/"end" vs "left"/"right" to support i18n in the future
+     */
+    textAlign: "start" | "end" | "center";


I could have done textAlign? but I feel like it's easier to just let the parser provide a default so we always have a value.

I like the idea of working to reduce optionality in the schema and have the parser fill in details. I think we found that depending on the React widget components do the defaulting is tricky now that we have server-side scoring, etc.

jeremywiebe

Drive-by comments. I'll leave it to project folks to approve. Thanks for this Matthew!

jeremywiebe · 2026-06-05T19:52:15Z

+        expect(result.value.options.textAlign).toBe("start");
+    });
+
+    it("migrates from v0 to v1 when textAlign is true", () => {


Suggested change

it("migrates from v0 to v1 when textAlign is true", () => {

it("migrates from v0 to v1 when rightAlign is true", () => {

jeremywiebe · 2026-06-05T19:58:47Z

+     * How to align the text in the input
+     * it's "start"/"end" vs "left"/"right" to support i18n in the future
+     */
+    textAlign: "start" | "end" | "center";


I like the idea of working to reduce optionality in the schema and have the parser fill in details. I think we found that depending on the React widget components do the defaulting is tricky now that we have server-side scoring, etc.

jeremywiebe · 2026-06-05T20:04:26Z

+        const textAlign = (
+            <label>
+                Text alignment
+                <SingleSelect
+                    selectedValue={this.props.textAlign}
+                    onChange={(value) => {
+                        this.props.onChange({textAlign: value});
                    }}
+                    placeholder="Select text alignment"
                >
-                    Right
-                </Pill>
-            </fieldset>
+                    <OptionItem value="start" label="Left" />
+                    <OptionItem value="center" label="Center" />
+                    <OptionItem value="end" label="Right" />
+                </SingleSelect>
+            </label>


Not directly related, but I'd love to move away from creating variables with snippets of JSX which we then render at some place in favour of bespoke little components.

Although we don't use the React Component view much, modelling these as react components helps them show up much better in that component debugger.

I also think it's a bit more idiomatic as React can manage re-rendering at that level.

🤷‍♂️

Something like this:

function AlignmentSelector(props: { value: "left" | "right" | "centre", onChange: (alignment: string) => void, }) { return (<label> Text alignment <SingleSelect selectedValue={this.props.textAlign} onChange={(value) => { this.props.onChange({textAlign: value}); }} placeholder="Select text alignment" > <OptionItem value="start" label="Left" /> <OptionItem value="center" label="Center" /> <OptionItem value="end" label="Right" /> </SingleSelect> </label>) }

And then ...

<AlignmentSelector value={this.props.textAlign} onChange={(alignment) => { this.props.onChange({textAlign: alignment}); } />

jeremywiebe · 2026-06-05T20:05:48Z

 #answercontent input[type="text"].perseus-input-right-align,
 #answercontent input[type="number"].perseus-input-right-align,
 .framework-perseus input[type="text"].perseus-input-right-align,
 .framework-perseus input[type="number"].perseus-input-right-align {
    text-align: right;
 }
 .framework-perseus.perseus-mobile .perseus-input-right-align .keypad-input {
    text-align: right;
 }


Do these need to be updated? Like .perseus-input-end-align or something?

jeremywiebe · 2026-06-05T20:07:12Z

    static defaultProps: DefaultProps = {
        size: "normal",
-        rightAlign: false,
+        textAlign: "start",


If the widget options don't make this optional, can this prop be made required here and avoid needing a default?

jeremywiebe · 2026-06-05T20:07:28Z

    padding: 0.4rem;
 }

 .input-with-examples.right-align {


Is this .end-align now?

SonicScrewdriver

This generally looks great to me! I just had a comment for numeric-input.stories.tsx, and there's a couple things Jeremy pointed out that we should fix up with the styles. (I'm not sure if IN/NI widgets share any styles with the Expression widget, but hopefully not.)

SonicScrewdriver · 2026-06-05T22:13:28Z

        coefficient: false,
        userInput: {currentValue: ""},
-        rightAlign: false,
+        alignment: "start",


Should this be textAlign?

handeyeco added 10 commits June 5, 2026 09:47

[LEMS-4144/center-ni] change schema

f325adf

[LEMS-4144/center-ni] work on the parser

6a8a75e

[LEMS-4144/center-ni] fix to-numeric-input

929bfcd

[LEMS-4144/center-ni] fix widget generator

6171ed6

[LEMS-4144/center-ni] fix some types

1c1559e

[LEMS-4144/center-ni] rename new field

5ee7020

[LEMS-4144/center-ni] fix Storybook control

b9799fc

[LEMS-4144/center-ni] fix all tests

db61b60

[LEMS-4144/center-ni] update editor

4f5bec9

[LEMS-4144/center-ni] implement styling

06f7624

handeyeco self-assigned this Jun 5, 2026

handeyeco added the olc-5.0.f429d label Jun 5, 2026

handeyeco changed the title ~~fix Storybook control~~ Add support for centered NumericInputs Jun 5, 2026

github-actions Bot added item-splitting-change schema-change Attached to PRs when we detect Perseus Schema changes in it labels Jun 5, 2026

handeyeco added 3 commits June 5, 2026 13:17

[LEMS-4144/center-ni] clean up test

7f5d847

[LEMS-4144/center-ni] fix parsing test

0716687

[LEMS-4144/center-ni] fix other regression test

0d44712

handeyeco commented Jun 5, 2026

View reviewed changes

handeyeco marked this pull request as ready for review June 5, 2026 19:06

handeyeco requested review from SonicScrewdriver and benchristel June 5, 2026 19:07

handeyeco added schema-change-ack Acknowledges that this PR's data-schema change has been reviewed by Content Platform item-splitting-change-ack Acknowledges that this PR's item-splitting bundle change has been reviewed labels Jun 5, 2026

handeyeco requested review from a team June 5, 2026 19:07

handeyeco added 2 commits June 5, 2026 14:12

[LEMS-4144/center-ni] docs(changeset): Add support for "centered" tex…

a8487bf

…t alignment in NumericInputs

[LEMS-4144/center-ni] update changeset

d550a0d

handeyeco commented Jun 5, 2026

View reviewed changes

jeremywiebe reviewed Jun 5, 2026

View reviewed changes

SonicScrewdriver reviewed Jun 5, 2026

View reviewed changes

	it("migrates from v0 to v1 when textAlign is true", () => {
	it("migrates from v0 to v1 when rightAlign is true", () => {

Conversation

handeyeco commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Test plan:

Uh oh!

github-actions Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeremywiebe left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SonicScrewdriver left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

handeyeco commented Jun 5, 2026 •

edited

Loading

github-actions Bot commented Jun 5, 2026 •

edited

Loading

github-actions Bot commented Jun 5, 2026 •

edited

Loading