[Keypad] Update Keypad to use WonderBlocks Tabs component #2952

ivyolamit · 2025-10-03T23:56:25Z

Summary:

Refactor Keypad to use WB Tabs instead of Tabbar:

Add the WB Tabs component in Perseus
"DISMISS" which is the close button of the Keypad now uses the IconButton instead of the dismiss tab. Popover close button was also considered but turns out the Popover is only for the Expression widget usage and other usages like in mobile doesn't have the Popover.
Code Refactor to use WB Tabs in Keypad component
Delete unused Tabbar component

Limitations

Tabs component currently has a bug on tab navigation and is being fixed by the team.
Will have a follow-up PR for the tab navigation for the close button.

Before	After

Test plan:

Confirm that the Expression widget still looks and works as expected
Confirm that the MathInput still looks and works as expected

Co-Authored by Claude Code

github-actions · 2025-10-03T23:57:27Z

🗄️ Schema Change: No Changes ✅

github-actions · 2025-10-03T23:58:02Z

Size Change: -467 B (-0.09%)

Total Size: 499 kB

Filename	Size	Change
`packages/math-input/dist/es/index.js`	98.7 kB	-535 B (-0.54%)
`packages/perseus/dist/es/index.js`	204 kB	+68 B (+0.03%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.8 kB
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	5.98 kB
`packages/math-input/dist/es/strings.js`	1.61 kB
`packages/perseus-core/dist/es/index.item-splitting.js`	13.1 kB
`packages/perseus-core/dist/es/index.js`	22.4 kB
`packages/perseus-editor/dist/es/index.js`	97.9 kB
`packages/perseus-linter/dist/es/index.js`	7.68 kB
`packages/perseus-score/dist/es/index.js`	9.2 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	7.73 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 · 2025-10-03T23:58:03Z

🛠️ Item Splitting: No Changes ✅

github-actions · 2025-11-12T21:53:02Z

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR2952

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

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

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

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

packages/math-input/src/components/keypad/__tests__/keypad.test.tsx

ivyolamit · 2025-11-15T01:14:58Z

packages/math-input/src/components/keypad/utils/get-available-tabs.tsx

This used to be inside the Keypad component. Moved it to a utility function to dry the Keypad code. Intention is still the same as the original but the logic is now follows the props required for the WB Tabs component.

ivyolamit · 2025-11-15T01:18:36Z

packages/math-input/src/full-mobile-input.stories.tsx


    return (
-        <div style={{padding: "1rem 2rem"}}>
+        <div style={{padding: "1rem 2rem", minHeight: "400px"}}>


added minHeight here so that the keypad will be visible, current height doesn't show the entire keypad

handeyeco

It's a huge win when we can use someone else's code instead of maintaining our own version of things! Thanks for digging into this. 🌈

In the future it might be helpful to try stacked PRs. This PR accomplishes a lot but not everything is related so it's can be hard to follow.

handeyeco · 2025-11-17T15:52:58Z

packages/math-input/src/components/keypad/utils/get-cursor-context-config.ts

+import {CursorContext} from "../../input/cursor-contexts";

-import type {MathInputStrings} from "../../strings";
+import type {MathInputStrings} from "@khanacademy/math-input/strings";


Packages shouldn't import from themselves. I was thinking we had a lint rule for this 🤔

math-input shouldn't import from @khanacademy/math-input

handeyeco · 2025-11-17T15:56:21Z

packages/math-input/src/components/keypad/utils/index.ts

@@ -0,0 +1,5 @@
+export {getAvailableTabs} from "./get-available-tabs";


I don't really get the point of the index.ts file here. Now there are two ways to import these:

import {getAvailableTabs} from "./utils" import {getAvailableTabs} from "./utils/get-available-tabs"

IMO, for the sake of consistency, it would be better to only have one way.

handeyeco · 2025-11-17T16:02:04Z

packages/perseus/src/components/math-input.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */


Why add a folder for math-input if it only contains the math-input.tsx file? Doesn't seem like the folder is needed but, if it is, maybe it would make sense for this file to be index.ts so that we don't have to update imports.

Good catch! this was a left over of my initial refactor attempt. I'll update that.

handeyeco · 2025-11-17T16:04:20Z

packages/perseus/src/components/math-input.tsx

 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";


(comment on file/dir, not this line of code)

I don't think we need to add a math-input folder if the only file in it is just math-input.tsx. If for some reason we do need the math-input folder, maybe it would make sense for this file to be index.tsx so we don't need to update imports.

handeyeco · 2025-11-17T16:11:02Z

packages/math-input/src/components/keypad/keypad.tsx

+                        setSelectedPage(newSelectedPage as KeypadPageType);
+                    }}
+                    styles={{
+                        tab: {


Can we move these styles out of the JSX rendering? If we move them out of the component it will make the JSX easier to read and we'll get an added bonus in that we won't have to redeclare them every time we rerender.

handeyeco · 2025-11-17T16:13:42Z

packages/perseus/src/components/math-input.tsx


    handleKeypadPress: (key: KeypadKey, e: any) => void = (key, e) => {
+        // Handle dismiss key to close the keypad
+        if (key === "DISMISS") {


Do we still need a "DISMISS" key? Seems like that's obsolete now if we're using WB.

Unfortunately yes,

Initial approach was using the WB Tabs for the x button and had it styled to be positioned on the right most away from the other tabs, that didn't looked so good

Second approach is using Popover x button but had to remove that solution because other usages of the keypad doesn't have a popover

So i added back in the DISMISS key and hooked it in IconButton and positioned it at the right of the Tabs component

@handeyeco we do have potential code that we can remove though related to DIMISS. I'm just not confident if it's safe to remove now that we use the WB IconButton, you might have more context to this:

https://github.com/Khan/perseus/blob/main/packages/math-input/src/components/keypad/button-assets.tsx#L388

packages/math-input/src/components/keypad/tab-icon-label.tsx (this one will cause a ts error)

handeyeco · 2025-11-17T16:19:26Z

packages/math-input/src/components/keypad/keypad-fractions-only.tsx

+import type {KeypadProps} from "./keypad";
+import type {KeypadPageType} from "../../types";
+
+export type KeypadFractionsOnlyProps = Pick<


It's not clear to me why we need both KeypadFractionsOnly and FractionsPage. Couldn't KeypadFractionsOnly just be part of Keypad?

During the refactor i've separated the logic

Displaying of the fractions only without any tabs

Displaying of fractions together with other tabs

Both of this uses the FractionsPage, the first one is rendered directly from the KeyPad while the second one is is rendered via the util getAvailableTabs which will form the props that will be provided to the WB Tabs component.

Initially with #1 I added it in the Keypad component, but since it has a number of lines of code i decided to make it a different component so it will be easier to read in Keypad component like this (making the code dry):

// We don't want to show any available tabs on the fraction keypad if (fractionsOnly) { return <KeypadFractionsOnly {...props} />; }

handeyeco · 2025-11-17T16:23:25Z

packages/math-input/src/components/keypad/keypad.tsx

 import type {PerseusAnalyticsEvent, KeypadKey} from "@khanacademy/perseus-core";

-type Props = {
+export interface KeypadProps {


Just curious: is there a reason for switching from type to interface?

Our team had a discussion about this preference using interface.

ivyolamit · 2025-11-17T19:29:32Z

ZND Link: https://prod-znd-251117-5339-ce5d6e6.khanacademy.org/

packages/math-input/src/components/keypad/keypad.tsx

ivyolamit · 2025-11-17T23:19:27Z

It's a huge win when we can use someone else's code instead of maintaining our own version of things! Thanks for digging into this. 🌈

In the future it might be helpful to try stacked PRs. This PR accomplishes a lot but not everything is related so it's can be hard to follow.

Thanks @handeyeco for the review and i'll take note on your suggestion for stacking the PRs in the future 🙏🏼
I've updated the PR to address your comments and this is the latest ZND. When you have time please have another look 🙏🏼

handeyeco · 2025-11-18T16:54:21Z

packages/math-input/src/components/keypad/keypad.tsx


+    // We don't want to show any available tabs on the fraction keypad
+    if (fractionsOnly) {
+        return <KeypadFractionsOnly {...props} />;


I'm not a huge fan of the name. What about FractionKeypad? If we're splitting out FractionKeypad, I wonder if it would make sense to also split out a ExpressionKeypad too. Then Keypads return could be something like

return fractionsOnly ? <FractionKeypad {...props} /> : <ExpressionKeypad {...props} />

Although I'm not a fan of spreading props either. For instance you're still passing advancedRelations to FractionKeypad even though it's not used (and the type system doesn't allow using it). I think it makes more sense to explicitly pass props except in places where you really want to pass all props (like in forwardRef).

Thanks @handeyeco i'll look into it and do a follow-up PR.

## Summary: Temporary add code ownership to math-input and keypad while keypad refactor is ongoing in #2952 Issue: LEMS-3361 ## Test plan: Author: ivyolamit Reviewers: anakaren-rojas, mark-fitzgerald Required Reviewers: Approved By: anakaren-rojas, mark-fitzgerald Checks: ✅ 10 checks were successful, ⏭️ 1 check has been skipped Pull Request URL: #3051

## Summary: Add Tabs and IconButton packages for math-input/keypad refactor Context: Extracted package addition change from #2952 to minimize the risk of merge conflict since we will be waiting for Keypad QA. Issue: LEMS-3361 ## Test plan: Author: ivyolamit Reviewers: nishasy, ivyolamit Required Reviewers: Approved By: nishasy Checks: ✅ 10 checks were successful, ⏭️ 1 check has been skipped Pull Request URL: #3054

…o use WonderBlocks Tabs component

…nstead of Tabbar

…instead of popover close button

…es related to popover dismiss was removed

ivyolamit · 2025-11-20T19:56:06Z

👆🏼 Rebased from latest master which includes the adding for the packages, to minimize the merge conflict later as package files are often updated.
See: #3054

ivyolamit self-assigned this Oct 3, 2025

ivyolamit added the olc-5.0.853e0 label Oct 3, 2025

ivyolamit added the project agnostic PRs reviewable by any Perseus team member label Oct 6, 2025

ivyolamit force-pushed the LEMS-3361/use-wb-tab-in-expression branch from ee14db4 to 714a009 Compare November 12, 2025 21:50

ivyolamit commented Nov 13, 2025

View reviewed changes

packages/math-input/src/components/keypad/__tests__/keypad.test.tsx Show resolved Hide resolved

ivyolamit force-pushed the LEMS-3361/use-wb-tab-in-expression branch from 4187e5a to e8abe23 Compare November 15, 2025 01:08

ivyolamit commented Nov 15, 2025

View reviewed changes

ivyolamit marked this pull request as ready for review November 15, 2025 01:20

handeyeco reviewed Nov 17, 2025

View reviewed changes

ivyolamit commented Nov 17, 2025

View reviewed changes

packages/math-input/src/components/keypad/keypad.tsx Show resolved Hide resolved

ivyolamit commented Nov 17, 2025

View reviewed changes

packages/math-input/src/components/keypad/keypad.tsx Show resolved Hide resolved

ivyolamit requested a review from handeyeco November 17, 2025 23:17

handeyeco approved these changes Nov 18, 2025

View reviewed changes

ivyolamit mentioned this pull request Nov 19, 2025

Temporary add code ownership to math-input and keypad #3051

Merged

ivyolamit force-pushed the LEMS-3361/use-wb-tab-in-expression branch from 939212e to 6c5d1e3 Compare November 19, 2025 20:08

ivyolamit mentioned this pull request Nov 20, 2025

Add Tabs and IconButton packages for math-input/keypad refactor #3054

Merged

ivyolamit added 5 commits November 20, 2025 11:53

[LEMS-3361/use-wb-tab-in-expression] docs(changeset): Update Keypad t…

e4b4925

…o use WonderBlocks Tabs component

[LEMS-3361/use-wb-tab-in-expression] Refactor Keypad to use WB Tabs i…

1fb8465

…nstead of Tabbar

[LEMS-3361/use-wb-tab-in-expression] temp changes

5ae4085

[LEMS-3361/use-wb-tab-in-expression] use wonderblock tokens

67f2c74

[LEMS-3361/use-wb-tab-in-expression] update test

33d28c8

ivyolamit added 5 commits November 20, 2025 11:53

[LEMS-3361/use-wb-tab-in-expression] use IconButton for close button …

7691ee9

…instead of popover close button

[LEMS-3361/use-wb-tab-in-expression] undo moving of file

28e26be

[LEMS-3361/use-wb-tab-in-expression] have a consistent way of importing

b90d00f

[LEMS-3361/use-wb-tab-in-expression] move logic for WB Tabs styles

9574ef9

[LEMS-3361/use-wb-tab-in-expression] undo changes in test since chang…

6ea88ca

…es related to popover dismiss was removed

ivyolamit force-pushed the LEMS-3361/use-wb-tab-in-expression branch from 13f025e to 6ea88ca Compare November 20, 2025 19:53

This was referenced Nov 20, 2025

Use WB View instead of fake-react-native-web View #3055

Open

[Keypad] Fix Keypad uneven keys column width #3059

Open

		@@ -0,0 +1,5 @@
		export {getAvailableTabs} from "./get-available-tabs";

		@@ -1,5 +1,3 @@
		/* eslint-disable @khanacademy/ts-no-error-suppressions */

[Keypad] Update Keypad to use WonderBlocks Tabs component #2952

Are you sure you want to change the base?

[Keypad] Update Keypad to use WonderBlocks Tabs component #2952

Uh oh!

Conversation

ivyolamit commented Oct 3, 2025 • 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 Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🗄️ Schema Change: No Changes ✅

Uh oh!

github-actions bot commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠️ Item Splitting: No Changes ✅

Uh oh!

github-actions bot commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

Uh oh!

ivyolamit Nov 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ivyolamit Nov 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

handeyeco left a comment

Choose a reason for hiding this comment

Uh oh!

handeyeco Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

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!

ivyolamit commented Nov 17, 2025

Uh oh!

Uh oh!

Uh oh!

ivyolamit commented Nov 17, 2025 • 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!

ivyolamit commented Nov 20, 2025

Uh oh!

Reviewers

Assignees

ivyolamit commented Oct 3, 2025 •

edited

Loading

github-actions bot commented Oct 3, 2025 •

edited

Loading

github-actions bot commented Oct 3, 2025 •

edited

Loading

github-actions bot commented Oct 3, 2025 •

edited

Loading

github-actions bot commented Nov 12, 2025 •

edited

Loading

ivyolamit Nov 15, 2025 •

edited

Loading

ivyolamit Nov 15, 2025 •

edited

Loading

handeyeco Nov 17, 2025 •

edited

Loading

ivyolamit commented Nov 17, 2025 •

edited

Loading