[Radio] Merge top-level widget files into one, and refactor to remove legacy code by mark-fitzgerald · Pull Request #3273 · Khan/perseus

mark-fitzgerald · 2026-02-21T01:15:02Z

Summary:

This PR merges radio.ts, radio.ff.tsx, and multiple-choice-widget.tsx into a single file. It also refactors the code to remove as much of the legacy code as is possible at this time. This merging and refactoring removes the last of the Feature Flag code used during development and release.

Issue: LEMS-3849

Test plan:

Launch Storyboook
Navigate to any of the Radio widget stories
- Note that widet works properly in each
Go to ZND for this PR
Navigate to any of the Radio widget example exercises and articles
- Note that the interactions and grading work properly
Edit an exercise in the ZND
Adjust any of the widget settings
- Note that editing works properly

…adio.ff.tsx into multiple-choice-widget.tsx. Start working through TypeScript errors caused by changes.

…-3849-radio-merge-top-level-files

Update unit tests.

…-3849-radio-merge-top-level-files

Adjust getPromptJSON to use the randomized choices.

…e top-level widget files into one, and refactor to remove legacy code

github-actions · 2026-02-21T01:15:47Z

🗄️ Schema Change: No Changes ✅

github-actions · 2026-02-21T01:16:05Z

🛠️ Item Splitting: No Changes ✅

github-actions · 2026-02-21T01:16:14Z

Size Change: -272 B (-0.06%)

Total Size: 485 kB

Filename	Size	Change
`packages/perseus/dist/es/index.js`	187 kB	-272 B (-0.15%)

ℹ️ 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.96 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`	11.8 kB
`packages/perseus-core/dist/es/index.js`	24.9 kB
`packages/perseus-editor/dist/es/index.js`	99.4 kB
`packages/perseus-linter/dist/es/index.js`	8.83 kB
`packages/perseus-score/dist/es/index.js`	9.26 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	7.49 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 · 2026-02-21T01:17:07Z

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3273

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

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

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

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

…oWidgetHandle (only used within the file).

handeyeco · 2026-02-23T15:56:06Z

packages/perseus/src/widgets/group/group.test.tsx

-                            readOnly: false,
-                            selected: false,
-                        },
+                        {selected: false},


I would be cautious changing the result from getSerializedState.

It is deprecated and we've told people it is unstable, but there are still consumers around until probably 2027.

A possible alternative is to keep the shape of the return value of getSerializedState and fill it with placeholder values in Radio's implementation of getSerializedState.

@handeyeco Do we have a ticket to fully removing the deprecated function? maybe we can add a todo here attributed to that work in the future, for easier search.

https://khanacademy.atlassian.net/browse/LEMS-3185

handeyeco · 2026-02-23T16:04:44Z

packages/perseus/src/widgets/radio/radio-widget.tsx

    correct: boolean;
    isNoneOfTheAbove: boolean;
-    previouslyAnswered: boolean;
-    // TODO(LEMS-3783): remove uses of `revealNoneOfTheAbove`
-    revealNoneOfTheAbove: boolean;


Does this fulfill https://khanacademy.atlassian.net/browse/LEMS-3783 or is there still more to do?

I found one other instance of that TODO in perseus/src/types.ts. I'll remove it from there, as well.

handeyeco · 2026-02-23T16:23:00Z

packages/perseus/src/widgets/radio/radio.ff.tsx

-        return this.radioRef.current.getPromptJSON();
-    }
-
-    _mergePropsAndState(): Props & {


We don't need _mergePropsAndState anymore because we don't use the old state anymore right? It's all props now? I think we talked about doing this, just confirming.

That is correct.

handeyeco · 2026-02-23T16:24:28Z

packages/perseus/src/widgets/radio/serialize-radio.test.ts

    choiceStates: [
        {
            selected: true, // <= note we stash user input
-            highlighted: false,


This is probably where I should have put that other comment: serialize-[widget].test.ts tests should be changed with caution.

handeyeco · 2026-02-23T16:29:35Z

packages/perseus/src/widgets/radio/radio-widget.tsx

-// Export as Radio for backwards compatibility until we can
-// perform Content Backfills to officially rename the Radio Widget
-const Radio = MultipleChoiceWidget;
+class Radio extends React.Component<Props> implements Widget {


As an outsider to the Radio project, I find it confusing that we seem to use "multiple choice widget" and "radio" interchangeably. I would advocate either:

(Preferred) Only use "radio" since it's well known by the rest of the org

Only use "multiple choice widget" so that we are consistent

This file is a good example of why this is confusing: the main export is Radio and the norm in React is to find that in radio.tsx (or index.tsx but I think it's even more confusing to have 5 index.tsx files open at once). However it's found in radio/multiple-choice-widget.tsx...it's kind of painful writing that.

Where do I find the tests for Radio? multiple-choice-widget.test.tsx obviously. Where do I find test data for multiple-choice.test.ts? radio.testdata.ts!

…es in getSerializedState output so that consumers aren't disrupted by it. These will be fully removed once LEMS-3185 is completed.

…roperty to aid in PR review.

anakaren-rojas · 2026-02-23T21:39:19Z

packages/perseus/src/widgets/radio/radio-widget.tsx

            handleUserInput({
                selectedChoiceIds: checkedChoiceIds,
            });

            trackInteraction();
-            announceChoiceChange(newChoiceStates);
+            announceChoiceChange(choiceStates);


Will calling announceChoiceChange with choiceStates pulled from props.userInput result in a stale/incorrect SR announcement?
I don't think handleUserInput will update the userInput before the announcement runs

Correct. More specifically, the logic for generating the choices in the props for this file has now been moved to this file. So, this announcement function should be pulling from the new object in this file.

anakaren-rojas · 2026-02-23T21:53:27Z

packages/perseus/src/widgets/radio/multiple-choice-widget.tsx

    editMode?: boolean;
    labelWrap?: boolean;
    randomize?: boolean;
+    onChoiceChange: (choiceId: string, newCheckedState: boolean) => void;


Do we need onChoiceChange on RadioProps? It looks like the widget computes onChoiceChange internally (based on apiOptions.readOnly / review mode) and never reads props.onChoiceChange. Can we remove it from the props type to avoid confusion?
Also, somewhat related, there are a few props that don't seem to be used at all, we might be able to remove them, like editMode and labelWrap

Good catch on the onChoiceChange. I added it for a reason, originally. Looks like that reason got resolved after further refactoring.

Removed those other two props, a well.

I think your updates might still be local 😅

ivyolamit

Mark changes looks logical to me, going to do a smoke test next.

ivyolamit · 2026-02-23T17:36:23Z

packages/perseus/src/widgets/radio/radio.ff.tsx

ivyolamit · 2026-02-23T22:14:07Z

packages/perseus/src/types.ts

@@ -100,13 +100,6 @@ export type EditorMode = "edit" | "preview" | "json";

 export type ChoiceState = {
    selected: boolean;


I remembered you brought this up before if we still need ChoiceState or not, do you remember what was the end result of that discussion?

I imagine this could be refactored now that it is only a singular value (selected). However, it is used in a number of places, so pulling it out now would be beyond the scope of this ticket.

…-choice" instead of "radio", for consistency. Remove unused props: editMode, labelWrap, onChoiceChange.

anakaren-rojas

What an undertaking!

ivyolamit

Sorry for the delay, changes look good to me 🎉

…radio".

mark-fitzgerald added 7 commits February 13, 2026 11:47

[LEMS-3849-radio-merge-top-level-files] Simplification of choiceStates.

d217b1e

[LEMS-3849-radio-merge-top-level-files] Finish merging radio.ts and r…

4bc8f3a

…adio.ff.tsx into multiple-choice-widget.tsx. Start working through TypeScript errors caused by changes.

[LEMS-3849-radio-merge-top-level-files] Merge branch 'main' into LEMS…

3bf36f5

…-3849-radio-merge-top-level-files

[LEMS-3849-radio-merge-top-level-files] Fix type conflicts.

e303a11

Update unit tests.

[LEMS-3849-radio-merge-top-level-files] Merge branch 'main' into LEMS…

f04bc8b

…-3849-radio-merge-top-level-files

[LEMS-3849-radio-merge-top-level-files] Update unit tests.

8ac4e62

Adjust getPromptJSON to use the randomized choices.

[LEMS-3849-radio-merge-top-level-files] docs(changeset): [Radio] Merg…

8cb6e93

…e top-level widget files into one, and refactor to remove legacy code

mark-fitzgerald self-assigned this Feb 21, 2026

mark-fitzgerald added the olc-5.0.97b91 label Feb 21, 2026

mark-fitzgerald requested review from Myranae and handeyeco February 21, 2026 01:15

mark-fitzgerald requested review from anakaren-rojas and ivyolamit February 21, 2026 01:15

[LEMS-3849-radio-merge-top-level-files] Remove "export" for type Radi…

a1f5399

…oWidgetHandle (only used within the file).

handeyeco reviewed Feb 23, 2026

View reviewed changes

mark-fitzgerald added 2 commits February 23, 2026 13:59

[LEMS-3849-radio-merge-top-level-files] Restore choice state properti…

9059eb8

…es in getSerializedState output so that consumers aren't disrupted by it. These will be fully removed once LEMS-3185 is completed.

[LEMS-3849-radio-merge-top-level-files] Adjust position of readOnly p…

58cea91

…roperty to aid in PR review.

anakaren-rojas reviewed Feb 23, 2026

View reviewed changes

ivyolamit reviewed Feb 23, 2026

View reviewed changes

mark-fitzgerald added 2 commits February 23, 2026 16:50

[LEMS-3849-radio-merge-top-level-files] Rename files to use "multiple…

e9f3d09

…-choice" instead of "radio", for consistency. Remove unused props: editMode, labelWrap, onChoiceChange.

[LEMS-3849-radio-merge-top-level-files] Prettier

61e9ebe

anakaren-rojas approved these changes Feb 25, 2026

View reviewed changes

ivyolamit approved these changes Feb 25, 2026

View reviewed changes

[LEMS-3849-radio-merge-top-level-files] Revert "multiple choice" to "…

4f249f8

…radio".

		@@ -100,13 +100,6 @@ export type EditorMode = "edit" \| "preview" \| "json";

		export type ChoiceState = {
		selected: boolean;

Conversation

mark-fitzgerald commented Feb 21, 2026

Summary:

Test plan:

Uh oh!

github-actions bot commented Feb 21, 2026 • 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 Feb 21, 2026 • 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 Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Feb 21, 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!

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 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!

anakaren-rojas left a comment

Choose a reason for hiding this comment

Uh oh!

ivyolamit left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions bot commented Feb 21, 2026 •

edited

Loading

github-actions bot commented Feb 21, 2026 •

edited

Loading

github-actions bot commented Feb 21, 2026 •

edited

Loading

github-actions bot commented Feb 21, 2026 •

edited

Loading