@fluentui-react-native/experimental-shadow 0.2.9 → 0.2.12

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 (12) hide show
  1. package/CHANGELOG.json +46 -1
  2. package/CHANGELOG.md +26 -2
  3. package/SPEC.md +45 -1
  4. package/lib/Shadow.d.ts.map +1 -1
  5. package/lib/Shadow.js +10 -3
  6. package/lib/Shadow.js.map +1 -1
  7. package/lib-commonjs/Shadow.d.ts.map +1 -1
  8. package/lib-commonjs/Shadow.js +10 -3
  9. package/lib-commonjs/Shadow.js.map +1 -1
  10. package/package.json +4 -4
  11. package/src/Shadow.tsx +13 -6
  12. package/src/__tests__/__snapshots__/Shadow.test.tsx.snap +36 -60
package/CHANGELOG.json CHANGED
@@ -2,7 +2,52 @@
2
2
  "name": "@fluentui-react-native/experimental-shadow",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 20 Jul 2022 16:23:54 GMT",
5
+ "date": "Mon, 15 Aug 2022 23:28:33 GMT",
6
+ "tag": "@fluentui-react-native/experimental-shadow_v0.2.12",
7
+ "version": "0.2.12",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "78454019+lyzhan7@users.noreply.github.com",
12
+ "package": "@fluentui-react-native/experimental-shadow",
13
+ "commit": "0f96f121a70581779472908ff4e00a914dcd1bf0",
14
+ "comment": "Initial SPEC.md for shadows"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Mon, 15 Aug 2022 22:12:03 GMT",
21
+ "tag": "@fluentui-react-native/experimental-shadow_v0.2.11",
22
+ "version": "0.2.11",
23
+ "comments": {
24
+ "patch": [
25
+ {
26
+ "author": "78454019+lyzhan7@users.noreply.github.com",
27
+ "package": "@fluentui-react-native/experimental-shadow",
28
+ "commit": "5e9c0dfef3718735520706056cb1c5f62524efd7",
29
+ "comment": "Pass key shadow props into child instead of a new view"
30
+ }
31
+ ]
32
+ }
33
+ },
34
+ {
35
+ "date": "Mon, 25 Jul 2022 21:27:20 GMT",
36
+ "tag": "@fluentui-react-native/experimental-shadow_v0.2.10",
37
+ "version": "0.2.10",
38
+ "comments": {
39
+ "patch": [
40
+ {
41
+ "author": "sanajmi@microsoft.com",
42
+ "package": "@fluentui-react-native/experimental-shadow",
43
+ "commit": "0772c5674928d890bf843ca0891f646f58ff0673",
44
+ "comment": "Combine platform specific test apps"
45
+ }
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "date": "Wed, 20 Jul 2022 16:24:28 GMT",
6
51
  "tag": "@fluentui-react-native/experimental-shadow_v0.2.9",
7
52
  "version": "0.2.9",
8
53
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,36 @@
1
1
  # Change Log - @fluentui-react-native/experimental-shadow
2
2
 
3
- This log was last generated on Wed, 20 Jul 2022 16:23:54 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 15 Aug 2022 23:28:33 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 0.2.12
8
+
9
+ Mon, 15 Aug 2022 23:28:33 GMT
10
+
11
+ ### Patches
12
+
13
+ - Initial SPEC.md for shadows (78454019+lyzhan7@users.noreply.github.com)
14
+
15
+ ## 0.2.11
16
+
17
+ Mon, 15 Aug 2022 22:12:03 GMT
18
+
19
+ ### Patches
20
+
21
+ - Pass key shadow props into child instead of a new view (78454019+lyzhan7@users.noreply.github.com)
22
+
23
+ ## 0.2.10
24
+
25
+ Mon, 25 Jul 2022 21:27:20 GMT
26
+
27
+ ### Patches
28
+
29
+ - Combine platform specific test apps (sanajmi@microsoft.com)
30
+
7
31
  ## 0.2.9
8
32
 
9
- Wed, 20 Jul 2022 16:23:54 GMT
33
+ Wed, 20 Jul 2022 16:24:28 GMT
10
34
 
11
35
  ### Patches
12
36
 
package/SPEC.md CHANGED
@@ -2,4 +2,48 @@
2
2
 
3
3
  ## Background
4
4
 
5
- Please write here you documentation...
5
+ A `Shadow` is a component that can be used to add Fluent shadows to other components.
6
+
7
+ Shadows defined in the Fluent design system are actually comprised of two shadows. The **key shadow** is used to create a feeling of distance, and the **ambient shadow** is used to define the edges of the shape.
8
+
9
+ ## Shadow Depth Ramp
10
+
11
+ These are the current `Shadow` variants:
12
+
13
+ | | Light mode | Dark mode |
14
+ | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
15
+ | Regular shadows | <img width="801" alt="Screen Shot 2022-08-12 at 10 46 45 AM" src="https://user-images.githubusercontent.com/78454019/184426272-fe23d23f-3c60-4811-82d8-16ae8dc501d9.png"> | <img width="788" alt="Screen Shot 2022-08-12 at 12 08 56 PM" src="https://user-images.githubusercontent.com/78454019/184427236-0b93d797-fdde-4367-9caa-751bcf335eea.png"> |
16
+ | Brand shadows | <img width="802" alt="Screen Shot 2022-08-12 at 12 09 15 PM" src="https://user-images.githubusercontent.com/78454019/184427300-06dacedc-5f39-4dc1-b07b-536186115d2e.png"> | <img width="789" alt="Screen Shot 2022-08-12 at 12 09 03 PM" src="https://user-images.githubusercontent.com/78454019/184427338-c322d223-4719-4593-a550-8360c45aa2e5.png"> |
17
+
18
+ ## Sample Code
19
+
20
+ Examples adding some Shadows to some text:
21
+
22
+ ```tsx
23
+ <Shadow shadowToken={theme.shadows.shadow8}>
24
+ <Text>Text box with shadow8</Text>
25
+ </Shadow>
26
+ ```
27
+
28
+ ```tsx
29
+ <Shadow shadowToken={theme.shadows.shadow8brand}>
30
+ <Text>Text box with shadow8brand</Text>
31
+ </Shadow>
32
+ ```
33
+
34
+ For more examples of using Shadow, please see the [ShadowTest test page](https://github.com/microsoft/fluentui-react-native/tree/main/apps/fluent-tester/src/TestComponents/Shadow) in the [Fluent Tester app](https://github.com/microsoft/fluentui-react-native/blob/main/apps/fluent-tester/README.md).
35
+
36
+ For an example of adding a Shadow as a slot to a Fluent component, please see the [FAB component](https://github.com/microsoft/fluentui-react-native/tree/main/packages/components/Button/src/FAB) - this component exists on both iOS and Android, but currently only the iOS version uses the Shadow component. The [Notification component](https://github.com/microsoft/fluentui-react-native/tree/main/packages/components/Notification) is another example that uses the Shadow component.
37
+
38
+ ## API
39
+
40
+ ### Props
41
+
42
+ The `Shadow` component takes in one prop called `ShadowToken`. The variants of ShadowToken are all defined in the theme.
43
+ If `undefined` is passed into the `shadowToken` prop, no shadow will be rendered.
44
+
45
+ `Shadow` must take exactly one child, which must support a style that derives from ViewStyle (ex. View, Text)
46
+
47
+ ## Notes
48
+
49
+ - Known issue: there may be some slight rounding discrepancies due to hex to decimal rounding errors, ex. opacity 0.24 may end up at 0.25.
package/lib/Shadow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAIzD,eAAO,MAAM,MAAM,4EAWjB,CAAC;AAIH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAIzD,eAAO,MAAM,MAAM,4EAkBjB,CAAC;AAIH,eAAe,MAAM,CAAC"}
package/lib/Shadow.js CHANGED
@@ -17,9 +17,16 @@ import { getShadowTokenStyleSet } from './shadowStyle';
17
17
  export var Shadow = stagedComponent(function (props) {
18
18
  return function (final, children) {
19
19
  var shadowTokenStyleSet = getShadowTokenStyleSet(props.shadowToken);
20
- var mergedProps = mergeProps(final, { style: shadowTokenStyleSet.key });
21
- return (React.createElement(View, { style: shadowTokenStyleSet.ambient },
22
- React.createElement(View, __assign({}, mergedProps), children)));
20
+ var mergedProps = mergeProps(final, { style: shadowTokenStyleSet.ambient });
21
+ var childrenArray = React.Children.toArray(children);
22
+ var child = childrenArray[0];
23
+ if (__DEV__) {
24
+ if (childrenArray.length !== 1) {
25
+ console.warn('Shadow must only have one child');
26
+ }
27
+ }
28
+ var childWithKeyShadow = React.cloneElement(child, mergeProps(child.props, { style: shadowTokenStyleSet.key }));
29
+ return React.createElement(View, __assign({}, mergedProps), childWithKeyShadow);
23
30
  };
24
31
  });
25
32
  Shadow.displayName = shadowName;
package/lib/Shadow.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAe,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,CAAC,IAAM,MAAM,GAAG,eAAe,CAAC,UAAC,KAAkB;IACvD,OAAO,UAAC,KAAkB,EAAE,QAAyB;QACnD,IAAM,mBAAmB,GAAG,sBAAsB,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACtE,IAAM,WAAW,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC;QAE1E,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO;YACtC,oBAAC,IAAI,eAAK,WAAW,GAAG,QAAQ,CAAQ,CACnC,CACR,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,UAAU,CAAC;AAEhC,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAe,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,CAAC,IAAM,MAAM,GAAG,eAAe,CAAC,UAAC,KAAkB;IACvD,OAAO,UAAC,KAAkB,EAAE,QAAyB;QACnD,IAAM,mBAAmB,GAAG,sBAAsB,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACtE,IAAM,WAAW,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,OAAO,EAAE,CAAC,CAAC;QAE9E,IAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAyB,CAAC;QAC/E,IAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAE/B,IAAI,OAAO,EAAE;YACX,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9B,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;aACjD;SACF;QAED,IAAM,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAElH,OAAO,oBAAC,IAAI,eAAK,WAAW,GAAG,kBAAkB,CAAQ,CAAC;IAC5D,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,UAAU,CAAC;AAEhC,eAAe,MAAM,CAAC"}
package/lib-commonjs/Shadow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAIzD,eAAO,MAAM,MAAM,4EAWjB,CAAC;AAIH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAIzD,eAAO,MAAM,MAAM,4EAkBjB,CAAC;AAIH,eAAe,MAAM,CAAC"}
package/lib-commonjs/Shadow.js CHANGED
@@ -39,9 +39,16 @@ var shadowStyle_1 = require("./shadowStyle");
39
39
  exports.Shadow = (0, framework_1.stagedComponent)(function (props) {
40
40
  return function (final, children) {
41
41
  var shadowTokenStyleSet = (0, shadowStyle_1.getShadowTokenStyleSet)(props.shadowToken);
42
- var mergedProps = (0, framework_1.mergeProps)(final, { style: shadowTokenStyleSet.key });
43
- return (React.createElement(react_native_1.View, { style: shadowTokenStyleSet.ambient },
44
- React.createElement(react_native_1.View, __assign({}, mergedProps), children)));
42
+ var mergedProps = (0, framework_1.mergeProps)(final, { style: shadowTokenStyleSet.ambient });
43
+ var childrenArray = React.Children.toArray(children);
44
+ var child = childrenArray[0];
45
+ if (__DEV__) {
46
+ if (childrenArray.length !== 1) {
47
+ console.warn('Shadow must only have one child');
48
+ }
49
+ }
50
+ var childWithKeyShadow = React.cloneElement(child, (0, framework_1.mergeProps)(child.props, { style: shadowTokenStyleSet.key }));
51
+ return React.createElement(react_native_1.View, __assign({}, mergedProps), childWithKeyShadow);
45
52
  };
46
53
  });
47
54
  exports.Shadow.displayName = Shadow_types_1.shadowName;
package/lib-commonjs/Shadow.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,6CAAoC;AACpC,+CAAyD;AACzD,8DAA+E;AAC/E,6CAAuD;AAE1C,QAAA,MAAM,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAkB;IACvD,OAAO,UAAC,KAAkB,EAAE,QAAyB;QACnD,IAAM,mBAAmB,GAAG,IAAA,oCAAsB,EAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACtE,IAAM,WAAW,GAAG,IAAA,sBAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC;QAE1E,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO;YACtC,oBAAC,mBAAI,eAAK,WAAW,GAAG,QAAQ,CAAQ,CACnC,CACR,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAM,CAAC,WAAW,GAAG,yBAAU,CAAC;AAEhC,kBAAe,cAAM,CAAC"}
1
+ {"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,6CAAoC;AACpC,+CAAyD;AACzD,8DAA+E;AAC/E,6CAAuD;AAE1C,QAAA,MAAM,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAkB;IACvD,OAAO,UAAC,KAAkB,EAAE,QAAyB;QACnD,IAAM,mBAAmB,GAAG,IAAA,oCAAsB,EAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACtE,IAAM,WAAW,GAAG,IAAA,sBAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,OAAO,EAAE,CAAC,CAAC;QAE9E,IAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAyB,CAAC;QAC/E,IAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAE/B,IAAI,OAAO,EAAE;YACX,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9B,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;aACjD;SACF;QAED,IAAM,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,IAAA,sBAAU,EAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAElH,OAAO,oBAAC,mBAAI,eAAK,WAAW,GAAG,kBAAkB,CAAQ,CAAC;IAC5D,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAM,CAAC,WAAW,GAAG,yBAAU,CAAC;AAEhC,kBAAe,cAAM,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-react-native/experimental-shadow",
3
- "version": "0.2.9",
3
+ "version": "0.2.12",
4
4
  "description": "A cross-platform Shadow component using the Fluent Design System",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -29,12 +29,12 @@
29
29
  "@fluentui-react-native/eslint-config-rules": "^0.1.1",
30
30
  "@fluentui-react-native/test-tools": ">=0.1.1 <1.0.0",
31
31
  "@fluentui-react-native/scripts": "^0.1.1",
32
- "react": ">=17.0.2",
32
+ "react": "17.0.2",
33
33
  "react-native": "^0.66.0"
34
34
  },
35
35
  "peerDependencies": {
36
- "react": ">=17.0.2",
37
- "react-native": ">=0.66.0"
36
+ "react": "17.0.2",
37
+ "react-native": "^0.66.0"
38
38
  },
39
39
  "author": "",
40
40
  "license": "MIT"
package/src/Shadow.tsx CHANGED
@@ -7,13 +7,20 @@ import { getShadowTokenStyleSet } from './shadowStyle';
7
7
  export const Shadow = stagedComponent((props: ShadowProps) => {
8
8
  return (final: ShadowProps, children: React.ReactNode) => {
9
9
  const shadowTokenStyleSet = getShadowTokenStyleSet(props.shadowToken);
10
- const mergedProps = mergeProps(final, { style: shadowTokenStyleSet.key });
10
+ const mergedProps = mergeProps(final, { style: shadowTokenStyleSet.ambient });
11
11
 
12
- return (
13
- <View style={shadowTokenStyleSet.ambient}>
14
- <View {...mergedProps}>{children}</View>
15
- </View>
16
- );
12
+ const childrenArray = React.Children.toArray(children) as React.ReactElement[];
13
+ const child = childrenArray[0];
14
+
15
+ if (__DEV__) {
16
+ if (childrenArray.length !== 1) {
17
+ console.warn('Shadow must only have one child');
18
+ }
19
+ }
20
+
21
+ const childWithKeyShadow = React.cloneElement(child, mergeProps(child.props, { style: shadowTokenStyleSet.key }));
22
+
23
+ return <View {...mergedProps}>{childWithKeyShadow}</View>;
17
24
  };
18
25
  });
19
26
 
package/src/__tests__/__snapshots__/Shadow.test.tsx.snap CHANGED
@@ -14,7 +14,7 @@ exports[`Shadow component tests Brand shadow (depth=2) 1`] = `
14
14
  }
15
15
  }
16
16
  >
17
- <View
17
+ <Text
18
18
  style={
19
19
  Object {
20
20
  "shadowColor": "#000000",
@@ -27,10 +27,8 @@ exports[`Shadow component tests Brand shadow (depth=2) 1`] = `
27
27
  }
28
28
  }
29
29
  >
30
- <Text>
31
- Brand shadow (depth=2)
32
- </Text>
33
- </View>
30
+ Brand shadow (depth=2)
31
+ </Text>
34
32
  </View>
35
33
  `;
36
34
 
@@ -48,7 +46,7 @@ exports[`Shadow component tests Brand shadow (depth=4) 1`] = `
48
46
  }
49
47
  }
50
48
  >
51
- <View
49
+ <Text
52
50
  style={
53
51
  Object {
54
52
  "shadowColor": "#000000",
@@ -61,10 +59,8 @@ exports[`Shadow component tests Brand shadow (depth=4) 1`] = `
61
59
  }
62
60
  }
63
61
  >
64
- <Text>
65
- Brand shadow (depth=4)
66
- </Text>
67
- </View>
62
+ Brand shadow (depth=4)
63
+ </Text>
68
64
  </View>
69
65
  `;
70
66
 
@@ -82,7 +78,7 @@ exports[`Shadow component tests Brand shadow (depth=8) 1`] = `
82
78
  }
83
79
  }
84
80
  >
85
- <View
81
+ <Text
86
82
  style={
87
83
  Object {
88
84
  "shadowColor": "#000000",
@@ -95,10 +91,8 @@ exports[`Shadow component tests Brand shadow (depth=8) 1`] = `
95
91
  }
96
92
  }
97
93
  >
98
- <Text>
99
- Brand shadow (depth=8)
100
- </Text>
101
- </View>
94
+ Brand shadow (depth=8)
95
+ </Text>
102
96
  </View>
103
97
  `;
104
98
 
@@ -116,7 +110,7 @@ exports[`Shadow component tests Brand shadow (depth=16) 1`] = `
116
110
  }
117
111
  }
118
112
  >
119
- <View
113
+ <Text
120
114
  style={
121
115
  Object {
122
116
  "shadowColor": "#000000",
@@ -129,10 +123,8 @@ exports[`Shadow component tests Brand shadow (depth=16) 1`] = `
129
123
  }
130
124
  }
131
125
  >
132
- <Text>
133
- Brand shadow (depth=16)
134
- </Text>
135
- </View>
126
+ Brand shadow (depth=16)
127
+ </Text>
136
128
  </View>
137
129
  `;
138
130
 
@@ -150,7 +142,7 @@ exports[`Shadow component tests Brand shadow (depth=28) 1`] = `
150
142
  }
151
143
  }
152
144
  >
153
- <View
145
+ <Text
154
146
  style={
155
147
  Object {
156
148
  "shadowColor": "#000000",
@@ -163,10 +155,8 @@ exports[`Shadow component tests Brand shadow (depth=28) 1`] = `
163
155
  }
164
156
  }
165
157
  >
166
- <Text>
167
- Brand shadow (depth=28)
168
- </Text>
169
- </View>
158
+ Brand shadow (depth=28)
159
+ </Text>
170
160
  </View>
171
161
  `;
172
162
 
@@ -184,7 +174,7 @@ exports[`Shadow component tests Brand shadow (depth=64) 1`] = `
184
174
  }
185
175
  }
186
176
  >
187
- <View
177
+ <Text
188
178
  style={
189
179
  Object {
190
180
  "shadowColor": "#000000",
@@ -197,10 +187,8 @@ exports[`Shadow component tests Brand shadow (depth=64) 1`] = `
197
187
  }
198
188
  }
199
189
  >
200
- <Text>
201
- Brand shadow (depth=64)
202
- </Text>
203
- </View>
190
+ Brand shadow (depth=64)
191
+ </Text>
204
192
  </View>
205
193
  `;
206
194
 
@@ -218,7 +206,7 @@ exports[`Shadow component tests Shadow (depth=2) 1`] = `
218
206
  }
219
207
  }
220
208
  >
221
- <View
209
+ <Text
222
210
  style={
223
211
  Object {
224
212
  "shadowColor": "#000000",
@@ -231,10 +219,8 @@ exports[`Shadow component tests Shadow (depth=2) 1`] = `
231
219
  }
232
220
  }
233
221
  >
234
- <Text>
235
- Shadow (depth=2)
236
- </Text>
237
- </View>
222
+ Shadow (depth=2)
223
+ </Text>
238
224
  </View>
239
225
  `;
240
226
 
@@ -252,7 +238,7 @@ exports[`Shadow component tests Shadow (depth=4) 1`] = `
252
238
  }
253
239
  }
254
240
  >
255
- <View
241
+ <Text
256
242
  style={
257
243
  Object {
258
244
  "shadowColor": "#000000",
@@ -265,10 +251,8 @@ exports[`Shadow component tests Shadow (depth=4) 1`] = `
265
251
  }
266
252
  }
267
253
  >
268
- <Text>
269
- Shadow (depth=4)
270
- </Text>
271
- </View>
254
+ Shadow (depth=4)
255
+ </Text>
272
256
  </View>
273
257
  `;
274
258
 
@@ -286,7 +270,7 @@ exports[`Shadow component tests Shadow (depth=8) 1`] = `
286
270
  }
287
271
  }
288
272
  >
289
- <View
273
+ <Text
290
274
  style={
291
275
  Object {
292
276
  "shadowColor": "#000000",
@@ -299,10 +283,8 @@ exports[`Shadow component tests Shadow (depth=8) 1`] = `
299
283
  }
300
284
  }
301
285
  >
302
- <Text>
303
- Shadow (depth=8)
304
- </Text>
305
- </View>
286
+ Shadow (depth=8)
287
+ </Text>
306
288
  </View>
307
289
  `;
308
290
 
@@ -320,7 +302,7 @@ exports[`Shadow component tests Shadow (depth=16) 1`] = `
320
302
  }
321
303
  }
322
304
  >
323
- <View
305
+ <Text
324
306
  style={
325
307
  Object {
326
308
  "shadowColor": "#000000",
@@ -333,10 +315,8 @@ exports[`Shadow component tests Shadow (depth=16) 1`] = `
333
315
  }
334
316
  }
335
317
  >
336
- <Text>
337
- Shadow (depth=16)
338
- </Text>
339
- </View>
318
+ Shadow (depth=16)
319
+ </Text>
340
320
  </View>
341
321
  `;
342
322
 
@@ -354,7 +334,7 @@ exports[`Shadow component tests Shadow (depth=28) 1`] = `
354
334
  }
355
335
  }
356
336
  >
357
- <View
337
+ <Text
358
338
  style={
359
339
  Object {
360
340
  "shadowColor": "#000000",
@@ -367,10 +347,8 @@ exports[`Shadow component tests Shadow (depth=28) 1`] = `
367
347
  }
368
348
  }
369
349
  >
370
- <Text>
371
- Shadow (depth=28)
372
- </Text>
373
- </View>
350
+ Shadow (depth=28)
351
+ </Text>
374
352
  </View>
375
353
  `;
376
354
 
@@ -388,7 +366,7 @@ exports[`Shadow component tests Shadow (depth=64) 1`] = `
388
366
  }
389
367
  }
390
368
  >
391
- <View
369
+ <Text
392
370
  style={
393
371
  Object {
394
372
  "shadowColor": "#000000",
@@ -401,9 +379,7 @@ exports[`Shadow component tests Shadow (depth=64) 1`] = `
401
379
  }
402
380
  }
403
381
  >
404
- <Text>
405
- Shadow (depth=64)
406
- </Text>
407
- </View>
382
+ Shadow (depth=64)
383
+ </Text>
408
384
  </View>
409
385
  `;