Skip to content

Commit c672183

Browse files
satya164satya164
committed
refactor: rework Surface and elevation shadows
1 parent df3cdfd commit c672183

70 files changed

Lines changed: 34848 additions & 11770 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/6.x/docs/components/Appbar/Appbar.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,11 +131,11 @@ export default MyComponent;
131131

132132
<div>
133133

134-
### elevated <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
134+
### elevation
135135

136136
</div>
137137

138-
<PropTable componentLink="Appbar/Appbar" prop="elevated" />
138+
<PropTable componentLink="Appbar/Appbar" prop="elevation" />
139139

140140
<div>
141141

‎docs/6.x/docs/components/Appbar/AppbarHeader.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,27 +82,27 @@ export default MyComponent;
8282

8383
<div>
8484

85-
### elevated <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
85+
### theme
8686

8787
</div>
8888

89-
<PropTable componentLink="Appbar/AppbarHeader" prop="elevated" />
89+
<PropTable componentLink="Appbar/AppbarHeader" prop="theme" />
9090

9191
<div>
9292

93-
### theme
93+
### style
9494

9595
</div>
9696

97-
<PropTable componentLink="Appbar/AppbarHeader" prop="theme" />
97+
<PropTable componentLink="Appbar/AppbarHeader" prop="style" />
9898

9999
<div>
100100

101-
### style
101+
### elevation
102102

103103
</div>
104104

105-
<PropTable componentLink="Appbar/AppbarHeader" prop="style" />
105+
<PropTable componentLink="Appbar/AppbarHeader" prop="elevation" />
106106

107107
<div>
108108

‎docs/6.x/docs/components/Card/Card.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,14 @@ export default MyComponent;
159159

160160
<PropTable componentLink="Card/Card" prop="accessible" />
161161

162+
<div>
163+
164+
### ref
165+
166+
</div>
167+
168+
<PropTable componentLink="Card/Card" prop="ref" />
169+
162170

163171

164172
<span />

‎docs/6.x/docs/components/Chip/Chip.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,14 @@ export default MyComponent;
268268

269269
<div>
270270

271+
### ref
272+
273+
</div>
274+
275+
<PropTable componentLink="Chip/Chip" prop="ref" />
276+
277+
<div>
278+
271279
### role
272280

273281
</div>

‎docs/6.x/docs/components/Modal.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,14 @@ export default MyComponent;
111111

112112
<div>
113113

114+
### elevation
115+
116+
</div>
117+
118+
<PropTable componentLink="Modal" prop="elevation" />
119+
120+
<div>
121+
114122
### style
115123

116124
</div>

‎docs/6.x/docs/components/Surface.mdx‎

Lines changed: 127 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
99
import ExtendedExample from '@docs/components/ExtendedExample.tsx';
1010

1111
Surface is a basic container that can give depth to an element with elevation shadow.
12-
On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
13-
See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
14-
Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
12+
13+
On Android, Surface uses the native `elevation` style,
14+
and falls back to shadows that approximate the elevation on other platforms.
1515

1616

1717

@@ -26,7 +26,7 @@ import { Surface, Text } from 'react-native-paper';
2626
import { StyleSheet } from 'react-native';
2727

2828
const MyComponent = () => (
29-
<Surface style={styles.surface} elevation={4}>
29+
<Surface style={styles.surface} elevation={4} borderRadius={8}>
3030
<Text>Surface</Text>
3131
</Surface>
3232
);
@@ -35,9 +35,9 @@ export default MyComponent;
3535

3636
const styles = StyleSheet.create({
3737
surface: {
38-
padding: 8,
3938
height: 80,
4039
width: 80,
40+
padding: 8,
4141
alignItems: 'center',
4242
justifyContent: 'center',
4343
},
@@ -52,11 +52,123 @@ const styles = StyleSheet.create({
5252

5353
<div>
5454

55-
### children (required)
55+
### backgroundColor
5656

5757
</div>
5858

59-
<PropTable componentLink="Surface" prop="children" />
59+
<PropTable componentLink="Surface" prop="backgroundColor" />
60+
61+
<div>
62+
63+
### borderRadius
64+
65+
</div>
66+
67+
<PropTable componentLink="Surface" prop="borderRadius" />
68+
69+
<div>
70+
71+
### borderBottomEndRadius
72+
73+
</div>
74+
75+
<PropTable componentLink="Surface" prop="borderBottomEndRadius" />
76+
77+
<div>
78+
79+
### borderBottomLeftRadius
80+
81+
</div>
82+
83+
<PropTable componentLink="Surface" prop="borderBottomLeftRadius" />
84+
85+
<div>
86+
87+
### borderBottomRightRadius
88+
89+
</div>
90+
91+
<PropTable componentLink="Surface" prop="borderBottomRightRadius" />
92+
93+
<div>
94+
95+
### borderBottomStartRadius
96+
97+
</div>
98+
99+
<PropTable componentLink="Surface" prop="borderBottomStartRadius" />
100+
101+
<div>
102+
103+
### borderEndEndRadius
104+
105+
</div>
106+
107+
<PropTable componentLink="Surface" prop="borderEndEndRadius" />
108+
109+
<div>
110+
111+
### borderEndStartRadius
112+
113+
</div>
114+
115+
<PropTable componentLink="Surface" prop="borderEndStartRadius" />
116+
117+
<div>
118+
119+
### borderStartEndRadius
120+
121+
</div>
122+
123+
<PropTable componentLink="Surface" prop="borderStartEndRadius" />
124+
125+
<div>
126+
127+
### borderStartStartRadius
128+
129+
</div>
130+
131+
<PropTable componentLink="Surface" prop="borderStartStartRadius" />
132+
133+
<div>
134+
135+
### borderTopEndRadius
136+
137+
</div>
138+
139+
<PropTable componentLink="Surface" prop="borderTopEndRadius" />
140+
141+
<div>
142+
143+
### borderTopLeftRadius
144+
145+
</div>
146+
147+
<PropTable componentLink="Surface" prop="borderTopLeftRadius" />
148+
149+
<div>
150+
151+
### borderTopRightRadius
152+
153+
</div>
154+
155+
<PropTable componentLink="Surface" prop="borderTopRightRadius" />
156+
157+
<div>
158+
159+
### borderTopStartRadius
160+
161+
</div>
162+
163+
<PropTable componentLink="Surface" prop="borderTopStartRadius" />
164+
165+
<div>
166+
167+
### borderCurve
168+
169+
</div>
170+
171+
<PropTable componentLink="Surface" prop="borderCurve" />
60172

61173
<div>
62174

@@ -92,6 +204,14 @@ const styles = StyleSheet.create({
92204

93205
<div>
94206

207+
### children (required)
208+
209+
</div>
210+
211+
<PropTable componentLink="Surface" prop="children" />
212+
213+
<div>
214+
95215
### testID
96216

97217
</div>

0 commit comments

Comments
 (0)