docs: replace FAB and Switch screenshots with live interactive examples #5069
There are no files selected for viewing
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { FAB, type FABSize, type FABVariant } from 'react-native-paper'; | ||
|
|
||
| import InteractiveExample, { ExampleRow, Labelled } from './InteractiveExample'; | ||
|
|
||
| const VARIANTS: FABVariant[] = [ | ||
| 'primary', | ||
| 'secondary', | ||
| 'tertiary', | ||
| 'tonalPrimary', | ||
| 'tonalSecondary', | ||
| 'tonalTertiary', | ||
| ]; | ||
|
|
||
| const SIZES: FABSize[] = ['default', 'medium', 'large']; | ||
|
|
||
| export const FABVariantsExample = () => ( | ||
| <InteractiveExample title="Variants"> | ||
| <ExampleRow> | ||
| {VARIANTS.map((variant) => ( | ||
| <Labelled key={variant} label={variant}> | ||
| <FAB | ||
| icon="pencil" | ||
| variant={variant} | ||
| onPress={() => {}} | ||
| aria-label={`${variant} floating action button`} | ||
| /> | ||
| </Labelled> | ||
| ))} | ||
| </ExampleRow> | ||
| </InteractiveExample> | ||
| ); | ||
|
|
||
| export const FABSizesExample = () => ( | ||
| <InteractiveExample title="Sizes"> | ||
| <ExampleRow> | ||
| {SIZES.map((size) => ( | ||
| <Labelled key={size} label={size}> | ||
| <FAB | ||
| icon="pencil" | ||
| size={size} | ||
| onPress={() => {}} | ||
| aria-label={`${size} floating action button`} | ||
| /> | ||
| </Labelled> | ||
| ))} | ||
| </ExampleRow> | ||
| </InteractiveExample> | ||
| ); | ||
|
|
||
| export const FABExtendedExample = () => { | ||
| const [expanded, setExpanded] = React.useState(true); | ||
|
|
||
| return ( | ||
| <InteractiveExample title="Extended"> | ||
| <FAB.Extended | ||
| icon="plus" | ||
| label="New message" | ||
| expanded={expanded} | ||
| onPress={() => setExpanded((value) => !value)} | ||
| /> | ||
| </InteractiveExample> | ||
| ); | ||
| }; | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import * as React from 'react'; | ||
| import { StyleSheet, View } from 'react-native'; | ||
|
|
||
| import { DarkTheme, LightTheme, Provider } from 'react-native-paper'; | ||
|
|
||
| import { useColorMode } from './theme-common'; | ||
|
|
||
| /** | ||
| * Row of demo variations, wrapping on narrow viewports. | ||
| */ | ||
| export const ExampleRow = ({ children }: React.PropsWithChildren) => ( | ||
| <View style={styles.row}>{children}</View> | ||
| ); | ||
|
|
||
| /** | ||
| * A single demo variation captioned with the prop value it illustrates. | ||
| */ | ||
| export const Labelled = ({ | ||
| label, | ||
| children, | ||
| }: React.PropsWithChildren<{ label: string }>) => ( | ||
| <View style={styles.item}> | ||
| {children} | ||
| <span className="paper-interactive-example__label">{label}</span> | ||
| </View> | ||
| ); | ||
|
|
||
| type InteractiveExampleProps = React.PropsWithChildren<{ | ||
| /** | ||
| * Short caption rendered above the live preview, describing what the | ||
| * example demonstrates. | ||
| */ | ||
| title?: string; | ||
| }>; | ||
|
|
||
| /** | ||
| * Shared shell for live component demos embedded in the docs. | ||
| * | ||
| * The Paper theme follows the active docs color mode so demos match the | ||
| * surrounding page. | ||
| */ | ||
| const InteractiveExample = ({ title, children }: InteractiveExampleProps) => { | ||
| const isDarkTheme = useColorMode().colorMode === 'dark'; | ||
|
|
||
| return ( | ||
| <Provider theme={isDarkTheme ? DarkTheme : LightTheme}> | ||
|
Collaborator
There was a problem hiding this comment. Have you checked these in dark mode? I'm afraid they render with light-theme colors, so the caption under each switch ends up dark on dark and unreadable.
Collaborator
Author
There was a problem hiding this comment. I have checked dark mode (even the screenshots are in dark mode) however, you're right about the text color - i didn't notice this. Fixed now 👍 
|
||
| <figure className="paper-interactive-example"> | ||
| {title ? ( | ||
| <figcaption className="paper-interactive-example__title"> | ||
| {title} | ||
| </figcaption> | ||
| ) : null} | ||
| <View style={styles.content}>{children}</View> | ||
| </figure> | ||
| </Provider> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| content: { | ||
| alignItems: 'flex-start', | ||
| }, | ||
| row: { | ||
| flexDirection: 'row', | ||
| flexWrap: 'wrap', | ||
| alignItems: 'center', | ||
| gap: 24, | ||
| }, | ||
| item: { | ||
| alignItems: 'center', | ||
| gap: 8, | ||
| }, | ||
| }); | ||
|
|
||
| export default InteractiveExample; | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { Switch } from 'react-native-paper'; | ||
|
|
||
| import InteractiveExample, { ExampleRow, Labelled } from './InteractiveExample'; | ||
|
|
||
| export const SwitchStatesExample = () => { | ||
| const [on, setOn] = React.useState(true); | ||
| const [off, setOff] = React.useState(false); | ||
|
|
||
| return ( | ||
| <InteractiveExample title="Enabled"> | ||
| <ExampleRow> | ||
| <Labelled label="selected"> | ||
| <Switch value={on} onValueChange={setOn} aria-label="Selected" /> | ||
| </Labelled> | ||
| <Labelled label="unselected"> | ||
| <Switch value={off} onValueChange={setOff} aria-label="Unselected" /> | ||
| </Labelled> | ||
| </ExampleRow> | ||
| </InteractiveExample> | ||
| ); | ||
| }; | ||
|
|
||
| export const SwitchDisabledExample = () => ( | ||
| <InteractiveExample title="Disabled"> | ||
| <ExampleRow> | ||
| <Labelled label="selected"> | ||
| <Switch value disabled aria-label="Disabled and selected" /> | ||
| </Labelled> | ||
| <Labelled label="unselected"> | ||
| <Switch value={false} disabled aria-label="Disabled and unselected" /> | ||
| </Labelled> | ||
| </ExampleRow> | ||
| </InteractiveExample> | ||
| ); | ||
|
|
||
| export const SwitchIconsExample = () => { | ||
| const [on, setOn] = React.useState(true); | ||
| const [off, setOff] = React.useState(false); | ||
|
|
||
| return ( | ||
| <InteractiveExample title="With icons in the handle"> | ||
| <ExampleRow> | ||
| <Labelled label="selected"> | ||
| <Switch | ||
| value={on} | ||
| onValueChange={setOn} | ||
| checkedIcon="check" | ||
| uncheckedIcon="close" | ||
| aria-label="Selected with icon" | ||
| /> | ||
| </Labelled> | ||
| <Labelled label="unselected"> | ||
| <Switch | ||
| value={off} | ||
| onValueChange={setOff} | ||
| checkedIcon="check" | ||
| uncheckedIcon="close" | ||
| aria-label="Unselected with icon" | ||
| /> | ||
| </Labelled> | ||
| </ExampleRow> | ||
| </InteractiveExample> | ||
| ); | ||
| }; |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| export type LiveExample = { | ||
| /** Module specifier the examples are imported from. */ | ||
| module: string; | ||
| /** Named exports rendered, in order, under the page summary. */ | ||
| exports: string[]; | ||
| }; | ||
|
|
||
| export const liveExamples: Record<string, LiveExample> = { | ||
| FAB: { | ||
| module: '@docs/components/FABExample.tsx', | ||
| exports: ['FABVariantsExample', 'FABSizesExample'], | ||
| }, | ||
| Extended: { | ||
| module: '@docs/components/FABExample.tsx', | ||
| exports: ['FABExtendedExample'], | ||
| }, | ||
| Switch: { | ||
| module: '@docs/components/SwitchExample.tsx', | ||
| exports: [ | ||
| 'SwitchStatesExample', | ||
| 'SwitchDisabledExample', | ||
| 'SwitchIconsExample', | ||
| ], | ||
| }, | ||
| }; |
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
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
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
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Have you checked the extended FAB on the built page?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, checked it on the built output (yarn build + yarn preview), it renders correctly, and the interaction is as expected
