diff --git a/.changeset/poor-buckets-raise.md b/.changeset/poor-buckets-raise.md new file mode 100644 index 00000000000..1a75e256cf9 --- /dev/null +++ b/.changeset/poor-buckets-raise.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +Fix height difference when displaying NOTA (none of the above) radio choice diff --git a/packages/perseus/src/widgets/radio/__tests__/multiple-choice-component.test.tsx b/packages/perseus/src/widgets/radio/__tests__/multiple-choice-component.test.tsx index 33203facc3c..78a124d314f 100644 --- a/packages/perseus/src/widgets/radio/__tests__/multiple-choice-component.test.tsx +++ b/packages/perseus/src/widgets/radio/__tests__/multiple-choice-component.test.tsx @@ -149,17 +149,19 @@ describe("Multiple choice component", () => { expect(screen.getByText("foo-bar-zot")).toBeInTheDocument(); }); - it("uses the i18n version of 'None of the above' when the choice is set as such", () => { + it("displays provided content for 'None of the above' choices", () => { + // The widget layer is responsible for setting the correct content + // for NOTA choices. The component just displays whatever content + // is passed to it. const choiceOverrides = { isNoneOfTheAbove: true, - content: "foo-bar-zot", + content: "Custom NOTA content", }; const props = getComponentProps({ choiceOverrides, }); render(); - expect(screen.queryByText("foo-bar-zot")).not.toBeInTheDocument(); - expect(screen.getByText("None of the above")).toBeInTheDocument(); + expect(screen.getByText("Custom NOTA content")).toBeInTheDocument(); }); it("shows the provided rationale when in review mode", () => { diff --git a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx index 97a2970e0b7..6d6dae4a5c6 100644 --- a/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx +++ b/packages/perseus/src/widgets/radio/multiple-choice-component.new.tsx @@ -191,9 +191,6 @@ const ChoiceListItems = (props: ChoiceListItemsProps): React.ReactElement => { ? "correct" : "wrong" : undefined; - const content = choice.isNoneOfTheAbove - ? i18nStrings.noneOfTheAbove - : choice.content; let rationale: React.ReactElement | undefined; if (reviewMode && choice.hasRationale) { const rationaleId = `${contentId}-rationale`; @@ -219,7 +216,7 @@ const ChoiceListItems = (props: ChoiceListItemsProps): React.ReactElement => { updateChecked={updateChecked} >
-
{content}
+
{choice.content}
{rationale}