@fluentui-react-native/experimental-shadow 0.6.19 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +52 -0
  2. package/SPEC.md +1 -1
  3. package/lib/Shadow.d.ts +1 -1
  4. package/lib/Shadow.d.ts.map +1 -1
  5. package/lib/Shadow.js +11 -17
  6. package/lib/Shadow.js.map +1 -1
  7. package/lib/Shadow.types.d.ts +3 -0
  8. package/lib/Shadow.types.d.ts.map +1 -1
  9. package/lib/Shadow.types.js.map +1 -1
  10. package/lib/__tests__/Shadow.test.js +87 -44
  11. package/lib/__tests__/Shadow.test.js.map +1 -1
  12. package/lib/shadowStyle.js.map +1 -1
  13. package/lib-commonjs/Shadow.d.ts +1 -1
  14. package/lib-commonjs/Shadow.d.ts.map +1 -1
  15. package/lib-commonjs/Shadow.js +30 -26
  16. package/lib-commonjs/Shadow.js.map +1 -1
  17. package/lib-commonjs/Shadow.types.d.ts +3 -0
  18. package/lib-commonjs/Shadow.types.d.ts.map +1 -1
  19. package/lib-commonjs/Shadow.types.js.map +1 -1
  20. package/lib-commonjs/__tests__/Shadow.test.js +104 -51
  21. package/lib-commonjs/__tests__/Shadow.test.js.map +1 -1
  22. package/lib-commonjs/index.js +2 -2
  23. package/lib-commonjs/index.js.map +1 -1
  24. package/lib-commonjs/shadowStyle.js.map +1 -1
  25. package/package.json +61 -59
  26. package/src/Shadow.tsx +8 -17
  27. package/src/Shadow.types.ts +4 -0
  28. package/src/__tests__/Shadow.test.tsx +83 -34
  29. package/src/__tests__/__snapshots__/Shadow.test.tsx.snap +0 -4
package/src/__tests__/Shadow.test.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
- import { Text, View } from 'react-native';
2
+ import { act } from 'react';
3
+ import { Text, View, type ViewStyle } from 'react-native';
3
4
 
4
5
  import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
5
6
  import { Pressable } from '@fluentui-react-native/pressable';
@@ -46,7 +47,7 @@ const TestShadowOnChildViewWithProps: React.FunctionComponent<ShadowOnChildViewW
46
47
  const theme = useFluentTheme();
47
48
  return (
48
49
  <Shadow shadowToken={theme.shadows['shadow16']}>
49
- <View style={mergeStyles(props.childViewStyleProps, backgroundColor)}>
50
+ <View style={mergeStyles<ViewStyle>(props.childViewStyleProps, backgroundColor)}>
50
51
  <Text>{JSON.stringify(props.childViewStyleProps)}</Text>
51
52
  </View>
52
53
  </Shadow>
@@ -62,83 +63,131 @@ describe('Shadow component tests', () => {
62
63
  });
63
64
 
64
65
  it('Shadow (depth=2)', () => {
65
- const tree = renderer.create(<TestShadow displayText="Shadow (depth=2)" depth="shadow2" />).toJSON();
66
- expect(tree).toMatchSnapshot();
66
+ let component: renderer.ReactTestRenderer;
67
+ act(() => {
68
+ component = renderer.create(<TestShadow displayText="Shadow (depth=2)" depth="shadow2" />);
69
+ });
70
+ expect(component!.toJSON()).toMatchSnapshot();
67
71
  });
68
72
 
69
73
  it('Shadow (depth=4)', () => {
70
- const tree = renderer.create(<TestShadow displayText="Shadow (depth=4)" depth="shadow4" />).toJSON();
71
- expect(tree).toMatchSnapshot();
74
+ let component: renderer.ReactTestRenderer;
75
+ act(() => {
76
+ component = renderer.create(<TestShadow displayText="Shadow (depth=4)" depth="shadow4" />);
77
+ });
78
+ expect(component!.toJSON()).toMatchSnapshot();
72
79
  });
73
80
 
74
81
  it('Shadow (depth=8)', () => {
75
- const tree = renderer.create(<TestShadow displayText="Shadow (depth=8)" depth="shadow8" />).toJSON();
76
- expect(tree).toMatchSnapshot();
82
+ let component: renderer.ReactTestRenderer;
83
+ act(() => {
84
+ component = renderer.create(<TestShadow displayText="Shadow (depth=8)" depth="shadow8" />);
85
+ });
86
+ expect(component!.toJSON()).toMatchSnapshot();
77
87
  });
78
88
 
79
89
  it('Shadow (depth=16)', () => {
80
- const tree = renderer.create(<TestShadow displayText="Shadow (depth=16)" depth="shadow16" />).toJSON();
81
- expect(tree).toMatchSnapshot();
90
+ let component: renderer.ReactTestRenderer;
91
+ act(() => {
92
+ component = renderer.create(<TestShadow displayText="Shadow (depth=16)" depth="shadow16" />);
93
+ });
94
+ expect(component!.toJSON()).toMatchSnapshot();
82
95
  });
83
96
 
84
97
  it('Shadow (depth=28)', () => {
85
- const tree = renderer.create(<TestShadow displayText="Shadow (depth=28)" depth="shadow28" />).toJSON();
86
- expect(tree).toMatchSnapshot();
98
+ let component: renderer.ReactTestRenderer;
99
+ act(() => {
100
+ component = renderer.create(<TestShadow displayText="Shadow (depth=28)" depth="shadow28" />);
101
+ });
102
+ expect(component!.toJSON()).toMatchSnapshot();
87
103
  });
88
104
 
89
105
  it('Shadow (depth=64)', () => {
90
- const tree = renderer.create(<TestShadow displayText="Shadow (depth=64)" depth="shadow64" />).toJSON();
91
- expect(tree).toMatchSnapshot();
106
+ let component: renderer.ReactTestRenderer;
107
+ act(() => {
108
+ component = renderer.create(<TestShadow displayText="Shadow (depth=64)" depth="shadow64" />);
109
+ });
110
+ expect(component!.toJSON()).toMatchSnapshot();
92
111
  });
93
112
 
94
113
  it('Brand shadow (depth=2)', () => {
95
- const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=2)" depth="shadow2brand" />).toJSON();
96
- expect(tree).toMatchSnapshot();
114
+ let component: renderer.ReactTestRenderer;
115
+ act(() => {
116
+ component = renderer.create(<TestShadow displayText="Brand shadow (depth=2)" depth="shadow2brand" />);
117
+ });
118
+ expect(component!.toJSON()).toMatchSnapshot();
97
119
  });
98
120
 
99
121
  it('Brand shadow (depth=4)', () => {
100
- const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=4)" depth="shadow4brand" />).toJSON();
101
- expect(tree).toMatchSnapshot();
122
+ let component: renderer.ReactTestRenderer;
123
+ act(() => {
124
+ component = renderer.create(<TestShadow displayText="Brand shadow (depth=4)" depth="shadow4brand" />);
125
+ });
126
+ expect(component!.toJSON()).toMatchSnapshot();
102
127
  });
103
128
 
104
129
  it('Brand shadow (depth=8)', () => {
105
- const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=8)" depth="shadow8brand" />).toJSON();
106
- expect(tree).toMatchSnapshot();
130
+ let component: renderer.ReactTestRenderer;
131
+ act(() => {
132
+ component = renderer.create(<TestShadow displayText="Brand shadow (depth=8)" depth="shadow8brand" />);
133
+ });
134
+ expect(component!.toJSON()).toMatchSnapshot();
107
135
  });
108
136
 
109
137
  it('Brand shadow (depth=16)', () => {
110
- const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=16)" depth="shadow16brand" />).toJSON();
111
- expect(tree).toMatchSnapshot();
138
+ let component: renderer.ReactTestRenderer;
139
+ act(() => {
140
+ component = renderer.create(<TestShadow displayText="Brand shadow (depth=16)" depth="shadow16brand" />);
141
+ });
142
+ expect(component!.toJSON()).toMatchSnapshot();
112
143
  });
113
144
 
114
145
  it('Brand shadow (depth=28)', () => {
115
- const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=28)" depth="shadow28brand" />).toJSON();
116
- expect(tree).toMatchSnapshot();
146
+ let component: renderer.ReactTestRenderer;
147
+ act(() => {
148
+ component = renderer.create(<TestShadow displayText="Brand shadow (depth=28)" depth="shadow28brand" />);
149
+ });
150
+ expect(component!.toJSON()).toMatchSnapshot();
117
151
  });
118
152
 
119
153
  it('Brand shadow (depth=64)', () => {
120
- const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=64)" depth="shadow64brand" />).toJSON();
121
- expect(tree).toMatchSnapshot();
154
+ let component: renderer.ReactTestRenderer;
155
+ act(() => {
156
+ component = renderer.create(<TestShadow displayText="Brand shadow (depth=64)" depth="shadow64brand" />);
157
+ });
158
+ expect(component!.toJSON()).toMatchSnapshot();
122
159
  });
123
160
 
124
161
  it('Pressable that has a shadow vs. pressable without shadow', () => {
125
- const tree = renderer.create(<TestPressableWithAndWithoutShadow />).toJSON();
126
- expect(tree).toMatchSnapshot();
162
+ let component: renderer.ReactTestRenderer;
163
+ act(() => {
164
+ component = renderer.create(<TestPressableWithAndWithoutShadow />);
165
+ });
166
+ expect(component!.toJSON()).toMatchSnapshot();
127
167
  });
128
168
 
129
169
  it('Shadow on a child with margin and padding', () => {
130
- const tree = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ margin: 2, padding: 2 }} />).toJSON();
131
- expect(tree).toMatchSnapshot();
170
+ let component: renderer.ReactTestRenderer;
171
+ act(() => {
172
+ component = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ margin: 2, padding: 2 }} />);
173
+ });
174
+ expect(component!.toJSON()).toMatchSnapshot();
132
175
  });
133
176
 
134
177
  it('Shadow on a child with border radius', () => {
135
- const tree = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ borderRadius: 2 }} />).toJSON();
136
- expect(tree).toMatchSnapshot();
178
+ let component: renderer.ReactTestRenderer;
179
+ act(() => {
180
+ component = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ borderRadius: 2 }} />);
181
+ });
182
+ expect(component!.toJSON()).toMatchSnapshot();
137
183
  });
138
184
 
139
185
  it('Shadow on a child with border width', () => {
140
- const tree = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ borderWidth: 2 }} />).toJSON();
141
- expect(tree).toMatchSnapshot();
186
+ let component: renderer.ReactTestRenderer;
187
+ act(() => {
188
+ component = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ borderWidth: 2 }} />);
189
+ });
190
+ expect(component!.toJSON()).toMatchSnapshot();
142
191
  });
143
192
 
144
193
  afterAll(() => {
package/src/__tests__/__snapshots__/Shadow.test.tsx.snap CHANGED
@@ -236,8 +236,6 @@ exports[`Shadow component tests Pressable that has a shadow vs. pressable withou
236
236
  onBlur={[Function]}
237
237
  onClick={[Function]}
238
238
  onFocus={[Function]}
239
- onMouseEnter={[Function]}
240
- onMouseLeave={[Function]}
241
239
  onResponderGrant={[Function]}
242
240
  onResponderMove={[Function]}
243
241
  onResponderRelease={[Function]}
@@ -263,8 +261,6 @@ exports[`Shadow component tests Pressable that has a shadow vs. pressable withou
263
261
  onBlur={[Function]}
264
262
  onClick={[Function]}
265
263
  onFocus={[Function]}
266
- onMouseEnter={[Function]}
267
- onMouseLeave={[Function]}
268
264
  onResponderGrant={[Function]}
269
265
  onResponderMove={[Function]}
270
266
  onResponderRelease={[Function]}