[its-a-numeric-story] Improving Numeric Input Storybook Stories #2138
Conversation
Modernizing story, ensuring controls work, updating RendererWithDebugUI to also set customKeypad alongside isMobile, and updating SideBySide to hide messy JSON. Issue: LEMS-2449 Test Plan: Ensure all tests pass + manual testing
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (7ca1c5b) and published it to npm. You Example: yarn add @khanacademy/perseus@PR2138If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR2138 |
|
Size Change: 0 B Total Size: 1.47 MB ℹ️ View Unchanged
|
| jsonObject: any; | ||
| }; | ||
|
|
||
| const SideBySide = ({ |
There was a problem hiding this comment.
After some discussion, it was determined that we really don't like this side-by-side view. I've renamed this to "SplitView" to be a little more generic (in case we ever want to change it back), and renamed the variables accordingly.
This moves the PerseusJSON below the Widget, which gives both the Widget and the JSON more room to breathe.
| ...apiOptions, | ||
| isMobile, | ||
| customKeypad: isMobile, // Use the mobile keypad for mobile | ||
| }; |
There was a problem hiding this comment.
Many of our stories would not respond to the "Mobile" toggle. This addition now ensures that all Widgets that use MathInput will properly render their mobile views.
| <ReactJson | ||
| style={{marginTop: "10px"}} | ||
| quotesOnKeys={false} | ||
| enableClipboard={false} | ||
| collapsed={5} | ||
| collapsed={true} |
There was a problem hiding this comment.
This auto-collapses the PerseusJSON view so that it doesn't fill the page, and push the Storybook Controls "below the fold".
| @@ -134,6 +175,7 @@ export const multipleAnswersWithDecimals: PerseusRenderer = { | |||
| value: 12.2, | |||
| simplify: "required", | |||
| message: "", | |||
| answerForms: ["decimal"], | |||
There was a problem hiding this comment.
Realized that these should be specifying their answerForms, just for consistency.
| </label> | ||
| </div> | ||
| ); | ||
| export const Default = ( |
There was a problem hiding this comment.
After setting up all the Storybook controls, I wasn't really sure if we needed any more stories as we can control most of these options on the fly now.
There was a problem hiding this comment.
Ah! Perhaps a story for each answerForm, as it IS a little frustrating to edit the json views for that. If possible, it'd be good to get an example of the pi answerForm with a note about how to trigger the "It seems like you've approximated pi" message.
Summary:
This PR is part of the Numeric Input Project.
The purpose of this PR is to improve our storybook setup for our Numeric Input Widget. This includes the following work:
- This allows us to ensure that our Widgets that use MathInput are properly updating when toggled into Mobile view
Current (Live) Storybook Example | PR Storybook Example
Issue: LEMS-2449
Test plan: