Skip to content

Commit 787e4c6

Browse files
SimekSimek
authored
fix Snacks preview appearance, allow customizing, tweak few examples (#4754)
1 parent c132502 commit 787e4c6

14 files changed

Lines changed: 63 additions & 78 deletions

File tree

‎docs/textinput.md‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
6565
return (
6666
<SafeAreaProvider>
6767
<SafeAreaView
68-
style={[
69-
styles.container,
70-
{
71-
backgroundColor: value,
72-
},
73-
]}>
68+
style={{
69+
flex: 1,
70+
backgroundColor: value.toLowerCase(),
71+
}}>
7472
<TextInput
7573
editable
7674
multiline
@@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
8684
};
8785
8886
const styles = StyleSheet.create({
89-
container: {
90-
borderBottomColor: '#000',
91-
borderBottomWidth: 1,
92-
},
9387
textInput: {
9488
padding: 10,
89+
borderColor: '#000',
90+
borderWidth: 1,
91+
margin: 12,
9592
},
9693
});
9794

‎docs/view.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1717
const ViewBoxesWithColorAndText = () => {
1818
return (
1919
<SafeAreaProvider>
20-
<SafeAreaView style={{height: 100, flexDirection: 'row'}}>
21-
<View style={{backgroundColor: 'blue', flex: 0.2}} />
22-
<View style={{backgroundColor: 'red', flex: 0.4}} />
20+
<SafeAreaView style={{flexDirection: 'row'}}>
21+
<View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
22+
<View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
2323
<Text>Hello World!</Text>
2424
</SafeAreaView>
2525
</SafeAreaProvider>

‎plugins/remark-snackplayer/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ The above code snippet would look like this:
4040
| supportedPlatforms | Supported platforms | `"ios,android,web"` |
4141
| theme | SnackPlayer theme, `"light"` or `"dark"` | `"light"` |
4242
| preview | Preview visible, `"true"` or `"false"` | `"true"` |
43+
| deviceAppearance | Sets the preview mobile device appearance, `"light"` or `"dark"` | `"light"` |
4344
| loading | iFrame loading attribute, `"auto"`, `"lazy"` or `"eager"` | `"lazy"` |
4445
| deviceAndroid | Emulator type used for Android, [see Appetize options](https://docs.appetize.io/core-features/playback-options) | `pixel4` |
4546
| deviceIos | Simulator type used for iOS, [see Appetize options](https://docs.appetize.io/core-features/playback-options) | `iphone12` |

‎plugins/remark-snackplayer/src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ async function toJsxNode(node) {
5454
const theme = params.theme ?? 'light';
5555
const preview = params.preview ?? 'true';
5656
const loading = params.loading ?? 'lazy';
57+
const deviceAppearance = params.deviceAppearance ?? 'light';
5758

5859
// Need help constructing this AST node?
5960
// Use the MDX Playground and explore what your output mdast should look like
@@ -72,6 +73,7 @@ async function toJsxNode(node) {
7273
attr('data-snack-theme', theme),
7374
attr('data-snack-preview', preview),
7475
attr('data-snack-loading', loading),
76+
attr('data-snack-device-appearance', deviceAppearance),
7577
attr('data-snack-device-frame', 'false'),
7678
],
7779
children: [],

‎website/versioned_docs/version-0.77/textinput.md‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
6565
return (
6666
<SafeAreaProvider>
6767
<SafeAreaView
68-
style={[
69-
styles.container,
70-
{
71-
backgroundColor: value,
72-
},
73-
]}>
68+
style={{
69+
flex: 1,
70+
backgroundColor: value.toLowerCase(),
71+
}}>
7472
<TextInput
7573
editable
7674
multiline
@@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
8684
};
8785
8886
const styles = StyleSheet.create({
89-
container: {
90-
borderBottomColor: '#000',
91-
borderBottomWidth: 1,
92-
},
9387
textInput: {
9488
padding: 10,
89+
borderColor: '#000',
90+
borderWidth: 1,
91+
margin: 12,
9592
},
9693
});
9794

‎website/versioned_docs/version-0.77/view.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1717
const ViewBoxesWithColorAndText = () => {
1818
return (
1919
<SafeAreaProvider>
20-
<SafeAreaView style={{height: 100, flexDirection: 'row'}}>
21-
<View style={{backgroundColor: 'blue', flex: 0.2}} />
22-
<View style={{backgroundColor: 'red', flex: 0.4}} />
20+
<SafeAreaView style={{flexDirection: 'row'}}>
21+
<View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
22+
<View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
2323
<Text>Hello World!</Text>
2424
</SafeAreaView>
2525
</SafeAreaProvider>

‎website/versioned_docs/version-0.78/textinput.md‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
6565
return (
6666
<SafeAreaProvider>
6767
<SafeAreaView
68-
style={[
69-
styles.container,
70-
{
71-
backgroundColor: value,
72-
},
73-
]}>
68+
style={{
69+
flex: 1,
70+
backgroundColor: value.toLowerCase(),
71+
}}>
7472
<TextInput
7573
editable
7674
multiline
@@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
8684
};
8785
8886
const styles = StyleSheet.create({
89-
container: {
90-
borderBottomColor: '#000',
91-
borderBottomWidth: 1,
92-
},
9387
textInput: {
9488
padding: 10,
89+
borderColor: '#000',
90+
borderWidth: 1,
91+
margin: 12,
9592
},
9693
});
9794

‎website/versioned_docs/version-0.78/view.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1717
const ViewBoxesWithColorAndText = () => {
1818
return (
1919
<SafeAreaProvider>
20-
<SafeAreaView style={{height: 100, flexDirection: 'row'}}>
21-
<View style={{backgroundColor: 'blue', flex: 0.2}} />
22-
<View style={{backgroundColor: 'red', flex: 0.4}} />
20+
<SafeAreaView style={{flexDirection: 'row'}}>
21+
<View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
22+
<View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
2323
<Text>Hello World!</Text>
2424
</SafeAreaView>
2525
</SafeAreaProvider>

‎website/versioned_docs/version-0.79/textinput.md‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,10 @@ const MultilineTextInputExample = () => {
6565
return (
6666
<SafeAreaProvider>
6767
<SafeAreaView
68-
style={[
69-
styles.container,
70-
{
71-
backgroundColor: value,
72-
},
73-
]}>
68+
style={{
69+
flex: 1,
70+
backgroundColor: value.toLowerCase(),
71+
}}>
7472
<TextInput
7573
editable
7674
multiline
@@ -86,12 +84,11 @@ const MultilineTextInputExample = () => {
8684
};
8785
8886
const styles = StyleSheet.create({
89-
container: {
90-
borderBottomColor: '#000',
91-
borderBottomWidth: 1,
92-
},
9387
textInput: {
9488
padding: 10,
89+
borderColor: '#000',
90+
borderWidth: 1,
91+
margin: 12,
9592
},
9693
});
9794

‎website/versioned_docs/version-0.79/view.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1717
const ViewBoxesWithColorAndText = () => {
1818
return (
1919
<SafeAreaProvider>
20-
<SafeAreaView style={{height: 100, flexDirection: 'row'}}>
21-
<View style={{backgroundColor: 'blue', flex: 0.2}} />
22-
<View style={{backgroundColor: 'red', flex: 0.4}} />
20+
<SafeAreaView style={{flexDirection: 'row'}}>
21+
<View style={{height: 100, backgroundColor: 'blue', flex: 0.2}} />
22+
<View style={{height: 100, backgroundColor: 'red', flex: 0.4}} />
2323
<Text>Hello World!</Text>
2424
</SafeAreaView>
2525
</SafeAreaProvider>

0 commit comments

Comments
 (0)