Conditionally switch decimal separator based on locale

[handeyeco]

Summary:

We were supposed to be switching between , and ., but we didn't see that through when updating how we're rendering icons for the v2 keypad. This updates that and adds some unit tests.

Issue: LC-1453

Test plan:

• Use or simulate mobile web
• Go to an exercise with a MathInput
• Open the keypad by focusing the MathInput
• Note a . as the decimal separator (if you're in the US)
• Change your locale?
• Use or simulate mobile web
• Go to an exercise with a MathInput
• Open the keypad by focusing the MathInput
• Note a , as the decimal separator

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/spotty-snails-serve.md, packages/math-input/src/enums.ts, packages/math-input/src/utils.ts, packages/math-input/src/data/key-configs.ts, packages/math-input/src/components/key-handlers/key-translator.ts, packages/math-input/src/components/keypad/button-assets.tsx, packages/math-input/src/components/keypad/__tests__/keypad.test.tsx, packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap, packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap

---

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

[github-actions]

Size Change: +234 B (0%)

Total Size: 863 kB

Filename	Size	Change
packages/math-input/dist/es/index.js	108 kB	+234 B (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	907 B
packages/perseus-editor/dist/es/index.js	269 kB
packages/perseus-error/dist/es/index.js	878 B
packages/perseus-linter/dist/es/index.js	21.8 kB
packages/perseus/dist/es/index.js	404 kB
packages/pure-markdown/dist/es/index.js	3.77 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[codecov]

Codecov Report

Merging #800 (0f6e97c) into main (6078ac0) will increase coverage by 1.26%.
Report is 1 commits behind head on main.
The diff coverage is 100.00%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #800      +/-   ##
==========================================
+ Coverage   60.67%   61.93%   +1.26%     
==========================================
  Files         484      486       +2     
  Lines      105880   105903      +23     
  Branches     6224     8919    +2695     
==========================================
+ Hits        64243    65596    +1353     
+ Misses      41637    40307    -1330     

Files	Coverage Δ
...nput/src/components/key-handlers/key-translator.ts	92.79% <100.00%> (-0.10%)	⬇️
...math-input/src/components/keypad/button-assets.tsx	62.18% <100.00%> (+0.48%)	⬆️
packages/math-input/src/data/key-configs.ts	100.00% <100.00%> (+0.75%)	⬆️
packages/math-input/src/enums.ts	100.00% <ø> (ø)
packages/math-input/src/utils.ts	94.11% <100.00%> (+1.26%)	⬆️

... and 31 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 6078ac0...0f6e97c. Read the comment docs.

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR800

[nedredmond]

I guess the actual localization is handled in Webapp? I don't see here where we are conditionally switching based on locale.

[handeyeco]

I guess the actual localization is handled in Webapp? I don't see here where we are conditionally switching based on locale.

It's based off of wonder-blocks-i18n. The logic already existed from the v1 keypad days, we just needed to tweak some things to make it work with the v2 keypad.

// utils.ts
import {getDecimalSeparator} from "@khanacademy/wonder-blocks-i18n";