@fluentui-react-native/experimental-shadow 0.2.15 → 0.2.17

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 (17) hide show
  1. package/CHANGELOG.json +43 -1
  2. package/CHANGELOG.md +20 -2
  3. package/SPEC.md +2 -2
  4. package/lib/__tests__/Shadow.test.js +9 -0
  5. package/lib/__tests__/Shadow.test.js.map +1 -1
  6. package/lib/shadowStyle.d.ts.map +1 -1
  7. package/lib/shadowStyle.js +8 -2
  8. package/lib/shadowStyle.js.map +1 -1
  9. package/lib-commonjs/__tests__/Shadow.test.js +9 -0
  10. package/lib-commonjs/__tests__/Shadow.test.js.map +1 -1
  11. package/lib-commonjs/shadowStyle.d.ts.map +1 -1
  12. package/lib-commonjs/shadowStyle.js +8 -2
  13. package/lib-commonjs/shadowStyle.js.map +1 -1
  14. package/package.json +3 -3
  15. package/src/__tests__/Shadow.test.tsx +11 -0
  16. package/src/__tests__/__snapshots__/Shadow.test.tsx.snap +28 -26
  17. package/src/shadowStyle.ts +9 -3
package/CHANGELOG.json CHANGED
@@ -2,7 +2,49 @@
2
2
  "name": "@fluentui-react-native/experimental-shadow",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 09 Sep 2022 23:53:43 GMT",
5
+ "date": "Wed, 14 Sep 2022 23:05:58 GMT",
6
+ "tag": "@fluentui-react-native/experimental-shadow_v0.2.17",
7
+ "version": "0.2.17",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui-react-native/experimental-shadow",
13
+ "comment": "Bump @fluentui-react-native/framework to v0.8.2",
14
+ "commit": "bb45f425d71a2c9f4c8088ae2e15d93759b915bb"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui-react-native/experimental-shadow",
19
+ "comment": "Bump @fluentui-react-native/pressable to v0.9.10",
20
+ "commit": "bb45f425d71a2c9f4c8088ae2e15d93759b915bb"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Mon, 12 Sep 2022 18:52:11 GMT",
27
+ "tag": "@fluentui-react-native/experimental-shadow_v0.2.16",
28
+ "version": "0.2.16",
29
+ "comments": {
30
+ "patch": [
31
+ {
32
+ "author": "78454019+lyzhan7@users.noreply.github.com",
33
+ "package": "@fluentui-react-native/experimental-shadow",
34
+ "commit": "1dbd38f7204a32f336f6c1c23d5d3ed3ee0ed5e5",
35
+ "comment": "Updated screenshots"
36
+ },
37
+ {
38
+ "author": "ruaraki@microsoft.com",
39
+ "package": "@fluentui-react-native/experimental-shadow",
40
+ "commit": "b3c75109b7cd2863307aa717b822898bda05648e",
41
+ "comment": "Change the test"
42
+ }
43
+ ]
44
+ }
45
+ },
46
+ {
47
+ "date": "Fri, 09 Sep 2022 23:54:15 GMT",
6
48
  "tag": "@fluentui-react-native/experimental-shadow_v0.2.15",
7
49
  "version": "0.2.15",
8
50
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,30 @@
1
1
  # Change Log - @fluentui-react-native/experimental-shadow
2
2
 
3
- This log was last generated on Fri, 09 Sep 2022 23:53:43 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 14 Sep 2022 23:05:58 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 0.2.17
8
+
9
+ Wed, 14 Sep 2022 23:05:58 GMT
10
+
11
+ ### Patches
12
+
13
+ - Bump @fluentui-react-native/framework to v0.8.2
14
+ - Bump @fluentui-react-native/pressable to v0.9.10
15
+
16
+ ## 0.2.16
17
+
18
+ Mon, 12 Sep 2022 18:52:11 GMT
19
+
20
+ ### Patches
21
+
22
+ - Updated screenshots (78454019+lyzhan7@users.noreply.github.com)
23
+ - Change the test (ruaraki@microsoft.com)
24
+
7
25
  ## 0.2.15
8
26
 
9
- Fri, 09 Sep 2022 23:53:43 GMT
27
+ Fri, 09 Sep 2022 23:54:15 GMT
10
28
 
11
29
  ### Patches
12
30
 
package/SPEC.md CHANGED
@@ -12,8 +12,8 @@ These are the current `Shadow` variants:
12
12
 
13
13
  | | Light mode | Dark mode |
14
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"> |
15
+ | Regular shadows | <img width="820" alt="light" src="https://user-images.githubusercontent.com/78454019/187567525-64592ead-c64c-4cc1-acd3-a21abdea2d35.png"> | <img width="820" alt="dark" src="https://user-images.githubusercontent.com/78454019/187567552-3b376f4d-eacd-482d-a395-a261c374c9f6.png"> |
16
+ | Brand shadows | <img width="820" alt="light-brand" src="https://user-images.githubusercontent.com/78454019/187567541-c939ceaa-35b1-4cd6-84b5-55d8a5032e0c.png"> | <img width="820" alt="dark-brand" src="https://user-images.githubusercontent.com/78454019/187567558-79783f9b-2bff-463c-b7b5-7ec692b000fd.png"> |
17
17
 
18
18
  ## Sample Code
19
19
 
package/lib/__tests__/Shadow.test.js CHANGED
@@ -17,6 +17,12 @@ var TestPressableWithShadow = function () {
17
17
  React.createElement(Pressable, null)));
18
18
  };
19
19
  describe('Shadow component tests', function () {
20
+ beforeAll(function () {
21
+ jest.mock('react-native/Libraries/Utilities/Platform', function () { return ({
22
+ OS: 'macos',
23
+ select: function () { return null; },
24
+ }); });
25
+ });
20
26
  it('Shadow (depth=2)', function () {
21
27
  var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=2)", depth: "shadow2" })).toJSON();
22
28
  expect(tree).toMatchSnapshot();
@@ -75,5 +81,8 @@ describe('Shadow component tests', function () {
75
81
  it('Shadow re-renders correctly', function () {
76
82
  checkReRender(function () { return React.createElement(TestShadow, { displayText: "Shadow render twice test", depth: "shadow2" }); }, 2);
77
83
  });
84
+ afterAll(function () {
85
+ jest.unmock('react-native/Libraries/Utilities/Platform');
86
+ });
78
87
  });
79
88
  //# sourceMappingURL=Shadow.test.js.map
package/lib/__tests__/Shadow.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}
package/lib/shadowStyle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAGjE,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EAwB7D"}
1
+ {"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAQjE,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EAyB7D"}
package/lib/shadowStyle.js CHANGED
@@ -1,13 +1,19 @@
1
1
  import { memoize } from '@fluentui-react-native/framework';
2
+ import { Platform } from 'react-native';
3
+ // For iOS/macOS, the blur property from the token is not the same as the shadow radius value,
4
+ // it needs to be divided by 2 to achieve the same effect. See https://github.com/microsoft/apple-ux-guide/blob/gh-pages/Shadows.md
5
+ var appleShadowBlurAdjustment = 0.5;
6
+ var defaultShadowBlurAdjustment = 1;
2
7
  export var getShadowTokenStyleSet = memoize(getShadowTokenStyleSetWorker);
3
8
  function getShadowTokenStyleSetWorker(shadowToken) {
4
9
  var keyShadow = shadowToken.key;
5
10
  var ambientShadow = shadowToken.ambient;
11
+ var shadowBlurAdjustment = Platform.OS === 'macos' || Platform.OS === 'ios' ? appleShadowBlurAdjustment : defaultShadowBlurAdjustment;
6
12
  return {
7
13
  key: {
8
14
  shadowColor: shadowColorFromRGBAColor(keyShadow.color),
9
15
  shadowOpacity: shadowOpacityFromRGBAColor(keyShadow.color),
10
- shadowRadius: keyShadow.blur,
16
+ shadowRadius: keyShadow.blur * shadowBlurAdjustment,
11
17
  shadowOffset: {
12
18
  width: keyShadow.x,
13
19
  height: keyShadow.y,
@@ -16,7 +22,7 @@ function getShadowTokenStyleSetWorker(shadowToken) {
16
22
  ambient: {
17
23
  shadowColor: shadowColorFromRGBAColor(ambientShadow.color),
18
24
  shadowOpacity: shadowOpacityFromRGBAColor(ambientShadow.color),
19
- shadowRadius: ambientShadow.blur,
25
+ shadowRadius: ambientShadow.blur * shadowBlurAdjustment,
20
26
  shadowOffset: {
21
27
  width: ambientShadow.x,
22
28
  height: ambientShadow.y,
package/lib/shadowStyle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAI3D,MAAM,CAAC,IAAM,sBAAsB,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,WAAwB;IAC5D,IAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC;IAClC,IAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC;IAE1C,OAAO;QACL,GAAG,EAAE;YACH,WAAW,EAAE,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC;YACtD,aAAa,EAAE,0BAA0B,CAAC,SAAS,CAAC,KAAK,CAAC;YAC1D,YAAY,EAAE,SAAS,CAAC,IAAI;YAC5B,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS,CAAC,CAAC;gBAClB,MAAM,EAAE,SAAS,CAAC,CAAC;aACpB;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wBAAwB,CAAC,aAAa,CAAC,KAAK,CAAC;YAC1D,aAAa,EAAE,0BAA0B,CAAC,aAAa,CAAC,KAAK,CAAC;YAC9D,YAAY,EAAE,aAAa,CAAC,IAAI;YAChC,YAAY,EAAE;gBACZ,KAAK,EAAE,aAAa,CAAC,CAAC;gBACtB,MAAM,EAAE,aAAa,CAAC,CAAC;aACxB;SACF;KACF,CAAC;AACJ,CAAC;AAED,IAAM,wBAAwB,GAAG,UAAC,SAAqB;IACrD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,0BAA0B,GAAG,UAAC,SAAqB;IACvD,IAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAEtD,8BAA8B;IAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAClD,CAAC,CAAC"}
1
+ {"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,OAAO,EAAc,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEpD,8FAA8F;AAC9F,mIAAmI;AACnI,IAAM,yBAAyB,GAAG,GAAG,CAAC;AACtC,IAAM,2BAA2B,GAAG,CAAC,CAAC;AAEtC,MAAM,CAAC,IAAM,sBAAsB,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,WAAwB;IAC5D,IAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC;IAClC,IAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,IAAM,oBAAoB,GAAG,QAAQ,CAAC,EAAE,KAAK,OAAO,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,2BAA2B,CAAC;IAExI,OAAO;QACL,GAAG,EAAE;YACH,WAAW,EAAE,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC;YACtD,aAAa,EAAE,0BAA0B,CAAC,SAAS,CAAC,KAAK,CAAC;YAC1D,YAAY,EAAE,SAAS,CAAC,IAAI,GAAG,oBAAoB;YACnD,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS,CAAC,CAAC;gBAClB,MAAM,EAAE,SAAS,CAAC,CAAC;aACpB;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wBAAwB,CAAC,aAAa,CAAC,KAAK,CAAC;YAC1D,aAAa,EAAE,0BAA0B,CAAC,aAAa,CAAC,KAAK,CAAC;YAC9D,YAAY,EAAE,aAAa,CAAC,IAAI,GAAG,oBAAoB;YACvD,YAAY,EAAE;gBACZ,KAAK,EAAE,aAAa,CAAC,CAAC;gBACtB,MAAM,EAAE,aAAa,CAAC,CAAC;aACxB;SACF;KACF,CAAC;AACJ,CAAC;AAED,IAAM,wBAAwB,GAAG,UAAC,SAAqB;IACrD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,0BAA0B,GAAG,UAAC,SAAqB;IACvD,IAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAEtD,8BAA8B;IAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAClD,CAAC,CAAC"}
package/lib-commonjs/__tests__/Shadow.test.js CHANGED
@@ -38,6 +38,12 @@ var TestPressableWithShadow = function () {
38
38
  React.createElement(pressable_1.Pressable, null)));
39
39
  };
40
40
  describe('Shadow component tests', function () {
41
+ beforeAll(function () {
42
+ jest.mock('react-native/Libraries/Utilities/Platform', function () { return ({
43
+ OS: 'macos',
44
+ select: function () { return null; },
45
+ }); });
46
+ });
41
47
  it('Shadow (depth=2)', function () {
42
48
  var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=2)", depth: "shadow2" })).toJSON();
43
49
  expect(tree).toMatchSnapshot();
@@ -96,5 +102,8 @@ describe('Shadow component tests', function () {
96
102
  it('Shadow re-renders correctly', function () {
97
103
  (0, test_tools_1.checkReRender)(function () { return React.createElement(TestShadow, { displayText: "Shadow render twice test", depth: "shadow2" }); }, 2);
98
104
  });
105
+ afterAll(function () {
106
+ jest.unmock('react-native/Libraries/Utilities/Platform');
107
+ });
99
108
  });
100
109
  //# sourceMappingURL=Shadow.test.js.map
package/lib-commonjs/__tests__/Shadow.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}
package/lib-commonjs/shadowStyle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAGjE,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EAwB7D"}
1
+ {"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAQjE,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EAyB7D"}
package/lib-commonjs/shadowStyle.js CHANGED
@@ -2,15 +2,21 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.getShadowTokenStyleSet = void 0;
4
4
  var framework_1 = require("@fluentui-react-native/framework");
5
+ var react_native_1 = require("react-native");
6
+ // For iOS/macOS, the blur property from the token is not the same as the shadow radius value,
7
+ // it needs to be divided by 2 to achieve the same effect. See https://github.com/microsoft/apple-ux-guide/blob/gh-pages/Shadows.md
8
+ var appleShadowBlurAdjustment = 0.5;
9
+ var defaultShadowBlurAdjustment = 1;
5
10
  exports.getShadowTokenStyleSet = (0, framework_1.memoize)(getShadowTokenStyleSetWorker);
6
11
  function getShadowTokenStyleSetWorker(shadowToken) {
7
12
  var keyShadow = shadowToken.key;
8
13
  var ambientShadow = shadowToken.ambient;
14
+ var shadowBlurAdjustment = react_native_1.Platform.OS === 'macos' || react_native_1.Platform.OS === 'ios' ? appleShadowBlurAdjustment : defaultShadowBlurAdjustment;
9
15
  return {
10
16
  key: {
11
17
  shadowColor: shadowColorFromRGBAColor(keyShadow.color),
12
18
  shadowOpacity: shadowOpacityFromRGBAColor(keyShadow.color),
13
- shadowRadius: keyShadow.blur,
19
+ shadowRadius: keyShadow.blur * shadowBlurAdjustment,
14
20
  shadowOffset: {
15
21
  width: keyShadow.x,
16
22
  height: keyShadow.y,
@@ -19,7 +25,7 @@ function getShadowTokenStyleSetWorker(shadowToken) {
19
25
  ambient: {
20
26
  shadowColor: shadowColorFromRGBAColor(ambientShadow.color),
21
27
  shadowOpacity: shadowOpacityFromRGBAColor(ambientShadow.color),
22
- shadowRadius: ambientShadow.blur,
28
+ shadowRadius: ambientShadow.blur * shadowBlurAdjustment,
23
29
  shadowOffset: {
24
30
  width: ambientShadow.x,
25
31
  height: ambientShadow.y,
package/lib-commonjs/shadowStyle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AAAA,8DAA2D;AAI9C,QAAA,sBAAsB,GAAG,IAAA,mBAAO,EAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,WAAwB;IAC5D,IAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC;IAClC,IAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC;IAE1C,OAAO;QACL,GAAG,EAAE;YACH,WAAW,EAAE,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC;YACtD,aAAa,EAAE,0BAA0B,CAAC,SAAS,CAAC,KAAK,CAAC;YAC1D,YAAY,EAAE,SAAS,CAAC,IAAI;YAC5B,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS,CAAC,CAAC;gBAClB,MAAM,EAAE,SAAS,CAAC,CAAC;aACpB;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wBAAwB,CAAC,aAAa,CAAC,KAAK,CAAC;YAC1D,aAAa,EAAE,0BAA0B,CAAC,aAAa,CAAC,KAAK,CAAC;YAC9D,YAAY,EAAE,aAAa,CAAC,IAAI;YAChC,YAAY,EAAE;gBACZ,KAAK,EAAE,aAAa,CAAC,CAAC;gBACtB,MAAM,EAAE,aAAa,CAAC,CAAC;aACxB;SACF;KACF,CAAC;AACJ,CAAC;AAED,IAAM,wBAAwB,GAAG,UAAC,SAAqB;IACrD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,0BAA0B,GAAG,UAAC,SAAqB;IACvD,IAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAEtD,8BAA8B;IAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAClD,CAAC,CAAC"}
1
+ {"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AAAA,8DAA2D;AAE3D,6CAAoD;AAEpD,8FAA8F;AAC9F,mIAAmI;AACnI,IAAM,yBAAyB,GAAG,GAAG,CAAC;AACtC,IAAM,2BAA2B,GAAG,CAAC,CAAC;AAEzB,QAAA,sBAAsB,GAAG,IAAA,mBAAO,EAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,WAAwB;IAC5D,IAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC;IAClC,IAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,IAAM,oBAAoB,GAAG,uBAAQ,CAAC,EAAE,KAAK,OAAO,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,2BAA2B,CAAC;IAExI,OAAO;QACL,GAAG,EAAE;YACH,WAAW,EAAE,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC;YACtD,aAAa,EAAE,0BAA0B,CAAC,SAAS,CAAC,KAAK,CAAC;YAC1D,YAAY,EAAE,SAAS,CAAC,IAAI,GAAG,oBAAoB;YACnD,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS,CAAC,CAAC;gBAClB,MAAM,EAAE,SAAS,CAAC,CAAC;aACpB;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wBAAwB,CAAC,aAAa,CAAC,KAAK,CAAC;YAC1D,aAAa,EAAE,0BAA0B,CAAC,aAAa,CAAC,KAAK,CAAC;YAC9D,YAAY,EAAE,aAAa,CAAC,IAAI,GAAG,oBAAoB;YACvD,YAAY,EAAE;gBACZ,KAAK,EAAE,aAAa,CAAC,CAAC;gBACtB,MAAM,EAAE,aAAa,CAAC,CAAC;aACxB;SACF;KACF,CAAC;AACJ,CAAC;AAED,IAAM,wBAAwB,GAAG,UAAC,SAAqB;IACrD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,0BAA0B,GAAG,UAAC,SAAqB;IACvD,IAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAEtD,8BAA8B;IAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAClD,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-react-native/experimental-shadow",
3
- "version": "0.2.15",
3
+ "version": "0.2.17",
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",
@@ -22,8 +22,8 @@
22
22
  "directory": "packages/experimental/Shadow"
23
23
  },
24
24
  "dependencies": {
25
- "@fluentui-react-native/framework": "0.8.1",
26
- "@fluentui-react-native/pressable": "0.9.9",
25
+ "@fluentui-react-native/framework": "0.8.2",
26
+ "@fluentui-react-native/pressable": "0.9.10",
27
27
  "@fluentui-react-native/theme-types": "0.18.0"
28
28
  },
29
29
  "devDependencies": {
package/src/__tests__/Shadow.test.tsx CHANGED
@@ -32,6 +32,13 @@ const TestPressableWithShadow: React.FunctionComponent = () => {
32
32
  };
33
33
 
34
34
  describe('Shadow component tests', () => {
35
+ beforeAll(() => {
36
+ jest.mock('react-native/Libraries/Utilities/Platform', () => ({
37
+ OS: 'macos',
38
+ select: () => null,
39
+ }));
40
+ });
41
+
35
42
  it('Shadow (depth=2)', () => {
36
43
  const tree = renderer.create(<TestShadow displayText="Shadow (depth=2)" depth="shadow2" />).toJSON();
37
44
  expect(tree).toMatchSnapshot();
@@ -104,4 +111,8 @@ describe('Shadow component tests', () => {
104
111
  it('Shadow re-renders correctly', () => {
105
112
  checkReRender(() => <TestShadow displayText="Shadow render twice test" depth="shadow2" />, 2);
106
113
  });
114
+
115
+ afterAll(() => {
116
+ jest.unmock('react-native/Libraries/Utilities/Platform');
117
+ });
107
118
  });
package/src/__tests__/__snapshots__/Shadow.test.tsx.snap CHANGED
@@ -10,7 +10,7 @@ exports[`Shadow component tests Brand shadow (depth=2) 1`] = `
10
10
  "width": 0,
11
11
  },
12
12
  "shadowOpacity": 0.3,
13
- "shadowRadius": 2,
13
+ "shadowRadius": 1,
14
14
  }
15
15
  }
16
16
  >
@@ -23,7 +23,7 @@ exports[`Shadow component tests Brand shadow (depth=2) 1`] = `
23
23
  "width": 0,
24
24
  },
25
25
  "shadowOpacity": 0.25,
26
- "shadowRadius": 2,
26
+ "shadowRadius": 1,
27
27
  }
28
28
  }
29
29
  >
@@ -44,7 +44,7 @@ exports[`Shadow component tests Brand shadow (depth=4) 1`] = `
44
44
  "width": 0,
45
45
  },
46
46
  "shadowOpacity": 0.3,
47
- "shadowRadius": 2,
47
+ "shadowRadius": 1,
48
48
  }
49
49
  }
50
50
  >
@@ -57,7 +57,7 @@ exports[`Shadow component tests Brand shadow (depth=4) 1`] = `
57
57
  "width": 0,
58
58
  },
59
59
  "shadowOpacity": 0.25,
60
- "shadowRadius": 4,
60
+ "shadowRadius": 2,
61
61
  }
62
62
  }
63
63
  >
@@ -78,7 +78,7 @@ exports[`Shadow component tests Brand shadow (depth=8) 1`] = `
78
78
  "width": 0,
79
79
  },
80
80
  "shadowOpacity": 0.3,
81
- "shadowRadius": 2,
81
+ "shadowRadius": 1,
82
82
  }
83
83
  }
84
84
  >
@@ -91,7 +91,7 @@ exports[`Shadow component tests Brand shadow (depth=8) 1`] = `
91
91
  "width": 0,
92
92
  },
93
93
  "shadowOpacity": 0.25,
94
- "shadowRadius": 8,
94
+ "shadowRadius": 4,
95
95
  }
96
96
  }
97
97
  >
@@ -112,7 +112,7 @@ exports[`Shadow component tests Brand shadow (depth=16) 1`] = `
112
112
  "width": 0,
113
113
  },
114
114
  "shadowOpacity": 0.3,
115
- "shadowRadius": 2,
115
+ "shadowRadius": 1,
116
116
  }
117
117
  }
118
118
  >
@@ -125,7 +125,7 @@ exports[`Shadow component tests Brand shadow (depth=16) 1`] = `
125
125
  "width": 0,
126
126
  },
127
127
  "shadowOpacity": 0.25,
128
- "shadowRadius": 16,
128
+ "shadowRadius": 8,
129
129
  }
130
130
  }
131
131
  >
@@ -146,7 +146,7 @@ exports[`Shadow component tests Brand shadow (depth=28) 1`] = `
146
146
  "width": 0,
147
147
  },
148
148
  "shadowOpacity": 0.3,
149
- "shadowRadius": 8,
149
+ "shadowRadius": 4,
150
150
  }
151
151
  }
152
152
  >
@@ -159,7 +159,7 @@ exports[`Shadow component tests Brand shadow (depth=28) 1`] = `
159
159
  "width": 0,
160
160
  },
161
161
  "shadowOpacity": 0.25,
162
- "shadowRadius": 28,
162
+ "shadowRadius": 14,
163
163
  }
164
164
  }
165
165
  >
@@ -180,7 +180,7 @@ exports[`Shadow component tests Brand shadow (depth=64) 1`] = `
180
180
  "width": 0,
181
181
  },
182
182
  "shadowOpacity": 0.3,
183
- "shadowRadius": 8,
183
+ "shadowRadius": 4,
184
184
  }
185
185
  }
186
186
  >
@@ -193,7 +193,7 @@ exports[`Shadow component tests Brand shadow (depth=64) 1`] = `
193
193
  "width": 0,
194
194
  },
195
195
  "shadowOpacity": 0.25,
196
- "shadowRadius": 64,
196
+ "shadowRadius": 32,
197
197
  }
198
198
  }
199
199
  >
@@ -214,7 +214,7 @@ exports[`Shadow component tests Pressable that has a shadow 1`] = `
214
214
  "width": 0,
215
215
  },
216
216
  "shadowOpacity": 0.12,
217
- "shadowRadius": 2,
217
+ "shadowRadius": 1,
218
218
  }
219
219
  }
220
220
  >
@@ -222,6 +222,8 @@ exports[`Shadow component tests Pressable that has a shadow 1`] = `
222
222
  onBlur={[Function]}
223
223
  onClick={[Function]}
224
224
  onFocus={[Function]}
225
+ onMouseEnter={[Function]}
226
+ onMouseLeave={[Function]}
225
227
  onResponderGrant={[Function]}
226
228
  onResponderMove={[Function]}
227
229
  onResponderRelease={[Function]}
@@ -236,7 +238,7 @@ exports[`Shadow component tests Pressable that has a shadow 1`] = `
236
238
  "width": 0,
237
239
  },
238
240
  "shadowOpacity": 0.14,
239
- "shadowRadius": 16,
241
+ "shadowRadius": 8,
240
242
  }
241
243
  }
242
244
  />
@@ -253,7 +255,7 @@ exports[`Shadow component tests Shadow (depth=2) 1`] = `
253
255
  "width": 0,
254
256
  },
255
257
  "shadowOpacity": 0.12,
256
- "shadowRadius": 2,
258
+ "shadowRadius": 1,
257
259
  }
258
260
  }
259
261
  >
@@ -266,7 +268,7 @@ exports[`Shadow component tests Shadow (depth=2) 1`] = `
266
268
  "width": 0,
267
269
  },
268
270
  "shadowOpacity": 0.14,
269
- "shadowRadius": 2,
271
+ "shadowRadius": 1,
270
272
  }
271
273
  }
272
274
  >
@@ -287,7 +289,7 @@ exports[`Shadow component tests Shadow (depth=4) 1`] = `
287
289
  "width": 0,
288
290
  },
289
291
  "shadowOpacity": 0.12,
290
- "shadowRadius": 2,
292
+ "shadowRadius": 1,
291
293
  }
292
294
  }
293
295
  >
@@ -300,7 +302,7 @@ exports[`Shadow component tests Shadow (depth=4) 1`] = `
300
302
  "width": 0,
301
303
  },
302
304
  "shadowOpacity": 0.14,
303
- "shadowRadius": 4,
305
+ "shadowRadius": 2,
304
306
  }
305
307
  }
306
308
  >
@@ -321,7 +323,7 @@ exports[`Shadow component tests Shadow (depth=8) 1`] = `
321
323
  "width": 0,
322
324
  },
323
325
  "shadowOpacity": 0.12,
324
- "shadowRadius": 2,
326
+ "shadowRadius": 1,
325
327
  }
326
328
  }
327
329
  >
@@ -334,7 +336,7 @@ exports[`Shadow component tests Shadow (depth=8) 1`] = `
334
336
  "width": 0,
335
337
  },
336
338
  "shadowOpacity": 0.14,
337
- "shadowRadius": 8,
339
+ "shadowRadius": 4,
338
340
  }
339
341
  }
340
342
  >
@@ -355,7 +357,7 @@ exports[`Shadow component tests Shadow (depth=16) 1`] = `
355
357
  "width": 0,
356
358
  },
357
359
  "shadowOpacity": 0.12,
358
- "shadowRadius": 2,
360
+ "shadowRadius": 1,
359
361
  }
360
362
  }
361
363
  >
@@ -368,7 +370,7 @@ exports[`Shadow component tests Shadow (depth=16) 1`] = `
368
370
  "width": 0,
369
371
  },
370
372
  "shadowOpacity": 0.14,
371
- "shadowRadius": 16,
373
+ "shadowRadius": 8,
372
374
  }
373
375
  }
374
376
  >
@@ -389,7 +391,7 @@ exports[`Shadow component tests Shadow (depth=28) 1`] = `
389
391
  "width": 0,
390
392
  },
391
393
  "shadowOpacity": 0.2,
392
- "shadowRadius": 8,
394
+ "shadowRadius": 4,
393
395
  }
394
396
  }
395
397
  >
@@ -402,7 +404,7 @@ exports[`Shadow component tests Shadow (depth=28) 1`] = `
402
404
  "width": 0,
403
405
  },
404
406
  "shadowOpacity": 0.24,
405
- "shadowRadius": 28,
407
+ "shadowRadius": 14,
406
408
  }
407
409
  }
408
410
  >
@@ -423,7 +425,7 @@ exports[`Shadow component tests Shadow (depth=64) 1`] = `
423
425
  "width": 0,
424
426
  },
425
427
  "shadowOpacity": 0.2,
426
- "shadowRadius": 8,
428
+ "shadowRadius": 4,
427
429
  }
428
430
  }
429
431
  >
@@ -436,7 +438,7 @@ exports[`Shadow component tests Shadow (depth=64) 1`] = `
436
438
  "width": 0,
437
439
  },
438
440
  "shadowOpacity": 0.24,
439
- "shadowRadius": 64,
441
+ "shadowRadius": 32,
440
442
  }
441
443
  }
442
444
  >
package/src/shadowStyle.ts CHANGED
@@ -1,18 +1,24 @@
1
1
  import { memoize } from '@fluentui-react-native/framework';
2
2
  import { ShadowToken } from '@fluentui-react-native/theme-types';
3
- import { ColorValue } from 'react-native';
3
+ import { ColorValue, Platform } from 'react-native';
4
+
5
+ // For iOS/macOS, the blur property from the token is not the same as the shadow radius value,
6
+ // it needs to be divided by 2 to achieve the same effect. See https://github.com/microsoft/apple-ux-guide/blob/gh-pages/Shadows.md
7
+ const appleShadowBlurAdjustment = 0.5;
8
+ const defaultShadowBlurAdjustment = 1;
4
9
 
5
10
  export const getShadowTokenStyleSet = memoize(getShadowTokenStyleSetWorker);
6
11
 
7
12
  function getShadowTokenStyleSetWorker(shadowToken: ShadowToken) {
8
13
  const keyShadow = shadowToken.key;
9
14
  const ambientShadow = shadowToken.ambient;
15
+ const shadowBlurAdjustment = Platform.OS === 'macos' || Platform.OS === 'ios' ? appleShadowBlurAdjustment : defaultShadowBlurAdjustment;
10
16
 
11
17
  return {
12
18
  key: {
13
19
  shadowColor: shadowColorFromRGBAColor(keyShadow.color),
14
20
  shadowOpacity: shadowOpacityFromRGBAColor(keyShadow.color),
15
- shadowRadius: keyShadow.blur,
21
+ shadowRadius: keyShadow.blur * shadowBlurAdjustment,
16
22
  shadowOffset: {
17
23
  width: keyShadow.x,
18
24
  height: keyShadow.y,
@@ -21,7 +27,7 @@ function getShadowTokenStyleSetWorker(shadowToken: ShadowToken) {
21
27
  ambient: {
22
28
  shadowColor: shadowColorFromRGBAColor(ambientShadow.color),
23
29
  shadowOpacity: shadowOpacityFromRGBAColor(ambientShadow.color),
24
- shadowRadius: ambientShadow.blur,
30
+ shadowRadius: ambientShadow.blur * shadowBlurAdjustment,
25
31
  shadowOffset: {
26
32
  width: ambientShadow.x,
27
33
  height: ambientShadow.y,