docs: replace FAB and Switch screenshots with live interactive examples - #5069
Open
hristototov wants to merge 5 commits into
Open
docs: replace FAB and Switch screenshots with live interactive examples#5069hristototov wants to merge 5 commits into
hristototov wants to merge 5 commits into
Conversation
added 2 commits
August 24, 2026 14:57
hristototov
changed the title
hristototov
changed the title
satya164
requested changes
Aug 25, 2026
satya164
left a comment
satya164
left a comment
Member
There was a problem hiding this comment.
Please avoid emdashes and claudism in text. Using LLM is fine but we shouldn't make our documentation look AI generated without human attention.
| 'tonalPrimary', | ||
| 'tonalSecondary', | ||
| 'tonalTertiary', | ||
| ] as const; |
Member
There was a problem hiding this comment.
Remove the comment. Annotate the VARIANTS with a type based on the Variant so it actually stays in sync instead of the comment saying it does
Comment on lines
+20
to
+23
| /** | ||
| * Every spec size accepted by the `size` prop. | ||
| */ | ||
| const SIZES = ['default', 'medium', 'large'] as const; |
Comment on lines
+60
to
+63
| * Paper components depend on browser APIs through `react-native-web`, so the | ||
| * tree is only mounted on the client and a same-sized placeholder is rendered | ||
| * during SSR to avoid layout shift. The Paper theme is kept in sync with the | ||
| * active docs color mode so demos match the surrounding page. |
Member
There was a problem hiding this comment.
The comment is wrong for the component's content. There's nothing related to SSR here.
But also why are we only rendering these on client and skipping on SSR? We need to render components both on SSR and client.
Collaborator
Author
There was a problem hiding this comment.
updated
- Dropped
BrowserOnlyand thePlaceholder, then collapsedFrame+ the pass-throughInteractiveExampleinto a single component with no gate; the split had no purpose - Removed the now-dead
.paper-interactive-example--loadingclass - Rewrote the comment
Collaborator
Author
There was a problem hiding this comment.
updated
- Dropped
BrowserOnlyand thePlaceholder, then collapsedFrame+ the pass-throughInteractiveExampleinto a single component with no gate; the split had no purpose - Removed the now-dead
.paper-interactive-example--loadingclass - Rewrote the comment
added 2 commits
August 26, 2026 11:07
…into hristototov/revisit-docs
JKobrynski
reviewed
Aug 28, 2026
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
3 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.
Motivation
Parts of the documentation have drifted out of sync with the v6 modernisation effort. The FAB and Switch pages were still illustrated with screenshots captured before those components were reworked for the latest Material Design 3 spec, so they showed outdated naming and token references:
modeprop — it'svariant(six role-color presets) andsize(three spec sizes) now.Android (enabled/disabled)/iOS (enabled/disabled)screenshot split, which no longer reflects reality: the modernised component renders the same MD3 visuals on both platforms.Static images also can't show what these components actually do - the Switch handle animation, the Extended FAB expand/collapse transition - and they silently rot every time a component changes.
This PR drops those screenshots and inlines the real components instead, so the docs render live from
Related issue
Closes #4991
Implementation notes
A general mechanism rather than a one-off, so the remaining outdated pages can follow:
docs/src/data/liveExamples.ts- new registry mapping a component title to the example module and named exports to render. Adding an entry here automatically removes that component's screenshot tabs, so a component is documented either with screenshots or with live examples, never both. The invariant is enforced in one place ingeneratePageMDX.ts.docs/src/components/InteractiveExample.tsx- shared shell for embedded demos. Paper components reach browser APIs throughreact-native-web, so the tree mounts client-only behindBrowserOnlywith a same-sized placeholder during SSR to avoid layout shift, and the Paper theme is kept in sync with the active docs color mode. Follows the existing pattern inBannerExample.tsx.FABExample.tsx/SwitchExample.tsx- the actual demos. The FAB variant and size lists mirror theVariantandSizeunions insrc/components/FAB/tokens.tsin order, so a spec change surfaces as a type error rather than a stale image.Also includes one small runtime fix surfaced while building the demos:
Switch'sabsoluteFillstyle was missingalignItems/justifyContent, so the unselected icon which is smaller than theSELECTED_ICON-sizediconWrapit sits in - was pinned to the top-left instead of centered. Snapshots updated accordingly.Images