diff --git a/.changeset/six-crabs-chew.md b/.changeset/six-crabs-chew.md new file mode 100644 index 0000000000..fa6f554a32 --- /dev/null +++ b/.changeset/six-crabs-chew.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +Added a reusable narrowViewportDecorator that constrains the story width to 400px, forcing content overflow so scroll buttons appear and applied the decorator to all "with scroll" radio widget stories. diff --git a/packages/perseus/src/widgets/__testutils__/story-decorators.tsx b/packages/perseus/src/widgets/__testutils__/story-decorators.tsx index ede8bf2e4d..7b2439ccf5 100644 --- a/packages/perseus/src/widgets/__testutils__/story-decorators.tsx +++ b/packages/perseus/src/widgets/__testutils__/story-decorators.tsx @@ -1,5 +1,7 @@ import * as React from "react"; +import type {Decorator} from "@storybook/react-vite"; + export const mobileDecorator = (Story) => (
@@ -82,3 +84,10 @@ export const articleFloatRightDecorator = (Story) => (
{articleContent3}
); + +// Force overflow so the radio widget’s scroll controls render in these stories. +export const narrowViewportDecorator: Decorator = (Story) => ( +
+ +
+); diff --git a/packages/perseus/src/widgets/radio/__docs__/multiple-choice-demo.new.stories.tsx b/packages/perseus/src/widgets/radio/__docs__/multiple-choice-demo.new.stories.tsx index 956693e88d..fb244c0f55 100644 --- a/packages/perseus/src/widgets/radio/__docs__/multiple-choice-demo.new.stories.tsx +++ b/packages/perseus/src/widgets/radio/__docs__/multiple-choice-demo.new.stories.tsx @@ -3,6 +3,7 @@ import * as React from "react"; import {getFeatureFlags} from "../../../testing/feature-flags-util"; import {ServerItemRendererWithDebugUI} from "../../../testing/server-item-renderer-with-debug-ui"; +import {narrowViewportDecorator} from "../../__testutils__/story-decorators"; import {groupedRadioRationaleQuestion} from "../../graded-group/graded-group.testdata"; import { question, @@ -122,6 +123,7 @@ export const SelectWithImagesAndScroll = { question: SingleSelectOverflowImageContent, }), }, + decorators: [narrowViewportDecorator], }; export const SingleSelectWithScroll = { @@ -130,6 +132,7 @@ export const SingleSelectWithScroll = { question: SingleSelectOverflowContent, }), }, + decorators: [narrowViewportDecorator], }; export const MultiSelectSimple = { @@ -154,6 +157,7 @@ export const MultiSelectWithScroll = { question: multiChoiceQuestionSimpleOverflowContent, }), }, + decorators: [narrowViewportDecorator], }; export const GradedGroupSetWithScroll = { @@ -162,6 +166,7 @@ export const GradedGroupSetWithScroll = { question: overflowContentInGradedGroupSet, }), }, + decorators: [narrowViewportDecorator], }; export const GradedGroup = { diff --git a/packages/perseus/src/widgets/radio/__docs__/multiple-choice-initial-state-regression.stories.tsx b/packages/perseus/src/widgets/radio/__docs__/multiple-choice-initial-state-regression.stories.tsx index d99cdc8336..4cf6294c72 100644 --- a/packages/perseus/src/widgets/radio/__docs__/multiple-choice-initial-state-regression.stories.tsx +++ b/packages/perseus/src/widgets/radio/__docs__/multiple-choice-initial-state-regression.stories.tsx @@ -12,6 +12,7 @@ import {ApiOptions} from "../../../perseus-api"; import {ServerItemRenderer} from "../../../server-item-renderer"; import {getFeatureFlags} from "../../../testing/feature-flags-util"; import {testDependenciesV2} from "../../../testing/test-dependencies"; +import {narrowViewportDecorator} from "../../__testutils__/story-decorators"; import { choicesWithGraphie, choicesWithImages, @@ -155,6 +156,7 @@ export const SingleSelectWithImagesAndScroll: Story = { }), }), }, + decorators: [narrowViewportDecorator], }; export const SingleSelectWithLongMathjax: Story = { @@ -329,6 +331,7 @@ export const MultiSelectWithImagesAndScroll: Story = { }), }), }, + decorators: [narrowViewportDecorator], }; export const MultiSelectWithLongText: Story = { @@ -363,6 +366,7 @@ export const GradedGroupSetWithScroll: Story = { question: overflowContentInGradedGroupSet, }), }, + decorators: [narrowViewportDecorator], }; function RadioQuestionRenderer(props: {