Skip to content

Commit 48a0132

Browse files
committed
docs(button): update for filled/tonal modes and outlined tokens
Update the Button doc data sources to match the v6 API: rename the contained/contained-tonal color + screenshot entries to filled/tonal, set the outlined label to onSurfaceVariant, and switch mode="contained" to mode="filled" in the react-navigation and ripple-effect guides. The Button.mdx page is generated from these sources plus the component JSDoc.
1 parent d0fb841 commit 48a0132

5 files changed

Lines changed: 26 additions & 26 deletions

File tree

docs/docs/guides/09-react-navigation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ function HomeScreen({ navigation }) {
8787
<View style={style.container}>
8888
<Text>Home Screen</Text>
8989
<Button
90-
mode="contained"
90+
mode="filled"
9191
onPress={() => navigation.navigate('Details')}
9292
label="Go to details"
9393
/>

docs/docs/guides/11-ripple-effect.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ The `rippleColor` prop is available for every pressable component which allows y
1818
<Button
1919
rippleColor="#FF000020"
2020
icon="camera"
21-
mode="contained"
21+
mode="filled"
2222
onPress={() => console.log('Pressed')}
2323
label="Press me"
2424
/>

docs/src/data/screenshots.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@ const screenshots = {
2222
BottomNavigation: 'screenshots/bottom-navigation.gif',
2323
'BottomNavigation.Bar': 'screenshots/bottom-navigation-tabs.jpg',
2424
Button: {
25-
text: 'screenshots/button-1.png',
26-
outlined: 'screenshots/button-2.png',
27-
contained: 'screenshots/button-3.png',
25+
filled: 'screenshots/button-3.png',
26+
tonal: 'screenshots/button-5.png',
2827
elevated: 'screenshots/button-4.png',
29-
'contained-tonal': 'screenshots/button-5.png',
28+
outlined: 'screenshots/button-2.png',
29+
text: 'screenshots/button-1.png',
3030
},
3131
Card: {
3232
elevated: 'screenshots/card-1.png',

docs/src/data/themeColors.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -47,36 +47,36 @@ const themeColors = {
4747
},
4848
Button: {
4949
active: {
50-
elevated: {
51-
backgroundColor: 'theme.colors.elevation.level1',
52-
textColor: 'theme.colors.primary',
53-
},
54-
contained: {
50+
filled: {
5551
backgroundColor: 'theme.colors.primary',
5652
textColor: 'theme.colors.onPrimary',
5753
},
58-
'contained-tonal': {
54+
tonal: {
5955
backgroundColor: 'theme.colors.secondaryContainer',
6056
textColor: 'theme.colors.onSecondaryContainer',
6157
},
62-
outlined: {
58+
elevated: {
59+
backgroundColor: 'theme.colors.elevation.level1',
6360
textColor: 'theme.colors.primary',
61+
},
62+
outlined: {
63+
textColor: 'theme.colors.onSurfaceVariant',
6464
borderColor: 'theme.colors.outline',
6565
},
6666
text: {
6767
textColor: 'theme.colors.primary',
6868
},
6969
},
7070
disabled: {
71-
elevated: {
71+
filled: {
7272
backgroundColor: 'theme.colors.surfaceDisabled',
7373
textColor: 'theme.colors.onSurfaceDisabled',
7474
},
75-
contained: {
75+
tonal: {
7676
backgroundColor: 'theme.colors.surfaceDisabled',
7777
textColor: 'theme.colors.onSurfaceDisabled',
7878
},
79-
'contained-tonal': {
79+
elevated: {
8080
backgroundColor: 'theme.colors.surfaceDisabled',
8181
textColor: 'theme.colors.onSurfaceDisabled',
8282
},

docs/src/utils/__tests__/themeColors.test.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,36 @@ import { getMaxNestedLevel, getUniqueNestedKeys } from '../themeColors';
22

33
const Button = {
44
active: {
5-
elevated: {
6-
backgroundColor: 'theme.colors.elevation.level1',
7-
color: 'theme.colors.primary',
8-
},
9-
contained: {
5+
filled: {
106
backgroundColor: 'theme.colors.primary',
117
color: 'theme.colors.onPrimary',
128
},
13-
'contained-tonal': {
9+
tonal: {
1410
backgroundColor: 'theme.colors.secondaryContainer',
1511
color: 'theme.colors.onSecondaryContainer',
1612
},
17-
outlined: {
13+
elevated: {
14+
backgroundColor: 'theme.colors.elevation.level1',
1815
color: 'theme.colors.primary',
16+
},
17+
outlined: {
18+
color: 'theme.colors.onSurfaceVariant',
1919
borderColor: 'theme.colors.outline',
2020
},
2121
text: {
2222
color: 'theme.colors.primary',
2323
},
2424
},
2525
disabled: {
26-
elevated: {
26+
filled: {
2727
backgroundColor: 'theme.colors.surfaceDisabled',
2828
color: 'theme.colors.onSurfaceDisabled',
2929
},
30-
contained: {
30+
tonal: {
3131
backgroundColor: 'theme.colors.surfaceDisabled',
3232
color: 'theme.colors.onSurfaceDisabled',
3333
},
34-
'contained-tonal': {
34+
elevated: {
3535
backgroundColor: 'theme.colors.surfaceDisabled',
3636
color: 'theme.colors.onSurfaceDisabled',
3737
},

0 commit comments

Comments
 (0)