Feature: Modernized the playground ui#4811
Merged
heath-freenome merged 7 commits intorjsf-team:mainfrom Oct 31, 2025
Merged
Conversation
heath-freenome
force-pushed
the
modernize-playground
branch
from
717c0cb to
fb73cc2
Compare
heath-freenome
force-pushed
the
modernize-playground
branch
2 times, most recently
from
2155829 to
323c752
Compare
nickgros
reviewed
Oct 29, 2025
nickgros
approved these changes
Oct 29, 2025
Modernized the playground UI to allow for more real-estate for the actual form - Updated the `SampleSelector` to render the samples inside of a `Drawer` on the left side of the screen, that when closed just shows the selected sample name - Refactored the theme and subtheme selector from `Headers` into the `Editors` component, moving that and the existing content into an `Accordion` - Renamed the `Headers` component to `OptionsDrawer` moving all of the remaining content into a permanent right-side drawer - Also consolidated the two live settings schemas and uiSchemas into a single schema and uiSchema - Also moved the buttons above the live settings schema form - Updated `Playground` and `Sample.ts` to fix the imports due to the file rename - Updated the `ThemeSelector` and `SubthemeSelectors` to add click handlers to stop the click propagation - Updated `CopyLink` to make it wider and change the title to `Share Playground` - Updated `Playground` to change the fragment into a `Box` flexed, with 100%, adding the `SampleSelector` directly - Also added a second `Box` width 100% around the `Editors`, `Divider`, and `DemoFrame` - Moved the renamed `OptionsDrawer` below the second `Box` - Updated `Footer` to absolutely position the Netlify badge to the left of the Options Drawer # Conflicts: # packages/playground/src/components/OptionsDrawer.tsx # Conflicts: # packages/playground/src/components/OptionsDrawer.tsx
…all themes showed them in the README
# Conflicts: # CHANGELOG.md
heath-freenome
force-pushed
the
modernize-playground
branch
from
075726e to
3aed0ae
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Reasons for making this change
Modernized the playground UI to allow for more real-estate for the actual form
SampleSelectorto render the samples inside of aDraweron the left side of the screen, that when closed just shows the selected sample nameHeadersinto theEditorscomponent, moving that and the existing content into anAccordionHeaderscomponent toOptionsDrawermoving all of the remaining content into a permanent right-side drawerPlaygroundandSample.tsto fix the imports due to the file renameThemeSelectorandSubthemeSelectorsto add click handlers to stop the click propagationCopyLinkto make it wider and change the title toShare PlaygroundPlaygroundto change the fragment into aBoxflexed, with 100%, adding theSampleSelectordirectlyBoxwidth 100% around theEditors,Divider, andDemoFrameOptionsDrawerbelow the secondBoxFooterto absolutely position the Netlify badge to the left of the Options DrawerREADME.mdfiles in all the themes to show the snapshot with the latest theme UI from the playground, making it a link to the theme on GitHubCHANGELOG.mdaccordinglyChecklist
npx nx run-many --target=build --exclude=@rjsf/docs && npm run test:updateto update snapshots, if needed.