docs: replace FAB and Switch screenshots with live interactive examples - #5069
Open
hristototov wants to merge 2 commits into
Open
docs: replace FAB and Switch screenshots with live interactive examples#5069hristototov wants to merge 2 commits into
hristototov wants to merge 2 commits into
Conversation
added 2 commits
August 24, 2026 14:57
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
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