Roll v2 Keypad Onto Desktop Web

[nedredmond]

Screen.Recording.2023-08-03.at.2.55.21.PM.mov

Updates Perseus / Math Input to use keypad.

Also changes how it's used:

• Instead of a set of keys appearing on focus, the button on the right acts as a toggle.
• Instead of a warning icon appearing when there is an parsing, the input shows a red "invalid" state and a tooltip appears with a friendly message.
• buttonsVisible prop states changed:
  • focused default behavior, toggle off to start
  • always default behavior, toggle on to start
  • never toggle button disabled
• buttonSets type was marked as deprecated
  • keypadButtonSets prop added that takes new type
  • buttonSets maps to keypadButtonSets
• Also adds optional extraKeys prop that takes an array of Keys.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5033535

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@khanacademy/perseus	Major
@khanacademy/perseus-editor	Minor
@khanacademy/math-input	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/great-pigs-deny.md, .changeset/stale-otters-fix.md, packages/math-input/src/index.ts, packages/perseus/src/perseus-types.ts, packages/math-input/src/data/keys.ts, packages/perseus/src/__tests__/mock-asset-loading-widget.tsx, packages/perseus/src/components/math-input.tsx, packages/perseus/src/components/tex-buttons.tsx, packages/perseus/src/styles/perseus-renderer.less, packages/perseus/src/widgets/expression.tsx, packages/perseus-editor/src/widgets/expression-editor.tsx, packages/perseus-editor/src/widgets/interaction-editor.tsx, packages/perseus/src/components/__stories__/math-input.stories.tsx, packages/perseus/src/components/__tests__/math-input.test.tsx, packages/perseus/src/styles/widgets/expression.less, packages/perseus/src/widgets/__stories__/expression.stories.tsx, packages/perseus/src/widgets/__tests__/expression.test.tsx, packages/perseus-editor/src/widgets/interaction/constraint-editor.tsx

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR711

[github-actions]

Size Change: +2.51 kB (0%)

Total Size: 852 kB

Filename	Size	Change
packages/math-input/dist/es/index.js	105 kB	+566 B (+1%)
packages/perseus-editor/dist/es/index.js	268 kB	+205 B (0%)
packages/perseus/dist/es/index.js	398 kB	+1.74 kB (0%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.1 kB
packages/kmath/dist/es/index.js	4.25 kB
packages/perseus-core/dist/es/index.js	934 B
packages/perseus-error/dist/es/index.js	846 B
packages/perseus-linter/dist/es/index.js	21.4 kB
packages/pure-markdown/dist/es/index.js	3.77 kB
packages/simple-markdown/dist/es/index.js	12.3 kB

_{compressed-size-action}

[jeremywiebe]

Whew, this ended up being quite a big change. I'm approving as the code looks fine (I do have some non-blocking thoughts).

But for this PR I think we should definitely test it in webapp before landing the PR (using the snapshot). This affects content editing as well as the expression widget so we need to make sure we don't break those usages.

[codecov]

Codecov Report

Merging #711 (70a0ee8) into main (7d8905b) will increase coverage by 1.32%.
The diff coverage is 82.17%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #711      +/-   ##
==========================================
+ Coverage   59.59%   60.92%   +1.32%     
==========================================
  Files         480      482       +2     
  Lines      105193   105430     +237     
  Branches     6025     8710    +2685     
==========================================
+ Hits        62688    64228    +1540     
+ Misses      42505    41202    -1303     

Files	Coverage Δ
packages/math-input/src/data/keys.ts	100.00% <100.00%> (+100.00%)	⬆️
packages/math-input/src/index.ts	100.00% <100.00%> (ø)
packages/perseus/src/components/tex-buttons.tsx	37.72% <100.00%> (-22.76%)	⬇️
...itor/src/widgets/interaction/constraint-editor.tsx	21.23% <0.00%> (-0.30%)	⬇️
packages/perseus/src/widgets/expression.tsx	92.99% <89.89%> (-1.20%)	⬇️
packages/perseus/src/components/math-input.tsx	85.35% <90.87%> (+0.36%)	⬆️
...s/perseus-editor/src/widgets/expression-editor.tsx	45.53% <37.20%> (-0.44%)	⬇️
.../perseus-editor/src/widgets/interaction-editor.tsx	8.95% <0.00%> (-0.05%)	⬇️

... and 44 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7d8905b...70a0ee8. Read the comment docs.