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

[nishasy]

Summary:

Added the following Numeric Input regression stories identified in QE:

Initial State:

• Very long number (in either size box)
• (Nested) In markdown table (either size box)
• (Nested) In Explanation widget
• (Nested) In graded group/set
• Multiple inputs in paragraph (may be stacked directly above each other in some screen widths)
• Inline with dropdown in paragraph (to visually check vertical spacing)

Interactions:

• RTL: Tooltip with multiple format types (bullet points on reverse side)
• Tooltip with all format types/bullets showing
• (Focused) Mobile app phone with basic keypad open
• (Focused) Mobile app tablet with expanded keypad open (landscape dimension)
• (Checked) Invalid input (“Keep trying…” popover)

Did not add/not supported:

• (If supported) Input containing \pi, \sqrt, or other Numeric Input-supported TeX

Issue: https://khanacademy.atlassian.net/browse/LEMS-4256

Test plan:

Storybook pages

• /?path=/story/widgets-numeric-input-visual-regression-tests-initial-state--inline-with-dropdown
• /?path=/story/widgets-numeric-input-visual-regression-tests-initial-state--long-number
• /?path=/story/widgets-numeric-input-visual-regression-tests-initial-state--multiple-inputs-in-paragraph
• /?path=/story/widgets-numeric-input-visual-regression-tests-interactions--invalid-input-keep-trying-popover
• /?path=/story/widgets-numeric-input-visual-regression-tests-interactions--mobile-phone-basic-keypad-open
• /?path=/story/widgets-numeric-input-visual-regression-tests-interactions--mobile-tablet-expanded-keypad-open
• /?path=/story/widgets-numeric-input-visual-regression-tests-interactions--with-tooltip-all-answer-forms
• /?path=/story/widgets-numeric-input-visual-regression-tests-interactions--with-tooltip-all-answer-forms-rtl
• /?path=/story/widgets-numeric-input-visual-regression-tests-interactions--with-tooltip-multiple-answer-forms-rtl
• /?path=/story/widgets-nested-widgets-visual-regression-tests-initial-state--numeric-input-in-graded-group
• /?path=/story/widgets-nested-widgets-visual-regression-tests-initial-state--numeric-input-in-table
• /?path=/story/widgets-nested-widgets-visual-regression-tests-interactions--numeric-input-in-explanation

[github-actions]

Size Change: 0 B

Total Size: 518 kB

ℹ️ 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.31 kB
packages/math-input/dist/es/index.js	98.5 kB
packages/math-input/dist/es/strings.js	1.61 kB
packages/perseus-core/dist/es/index.item-splitting.js	12.4 kB
packages/perseus-core/dist/es/index.js	27.5 kB
packages/perseus-editor/dist/es/index.js	105 kB
packages/perseus-linter/dist/es/index.js	9.8 kB
packages/perseus-score/dist/es/index.js	10.2 kB
packages/perseus-utils/dist/es/index.js	403 B
packages/perseus/dist/es/index.js	205 kB
packages/perseus/dist/es/strings.js	12.4 kB
packages/pure-markdown/dist/es/index.js	1.39 kB
packages/simple-markdown/dist/es/index.js	6.71 kB

_{compressed-size-action}

[github-actions]

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3812

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

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

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

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