@fluentui-react-native/experimental-shadow 0.2.13 → 0.2.16
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.
- package/CHANGELOG.json +52 -1
- package/CHANGELOG.md +27 -2
- package/SPEC.md +3 -3
- package/lib/__tests__/Shadow.test.js +22 -2
- package/lib/__tests__/Shadow.test.js.map +1 -1
- package/lib/shadowStyle.d.ts.map +1 -1
- package/lib/shadowStyle.js +8 -2
- package/lib/shadowStyle.js.map +1 -1
- package/lib-commonjs/__tests__/Shadow.test.js +21 -1
- package/lib-commonjs/__tests__/Shadow.test.js.map +1 -1
- package/lib-commonjs/shadowStyle.d.ts.map +1 -1
- package/lib-commonjs/shadowStyle.js +8 -2
- package/lib-commonjs/shadowStyle.js.map +1 -1
- package/package.json +4 -3
- package/src/__tests__/Shadow.test.tsx +30 -2
- package/src/__tests__/__snapshots__/Shadow.test.tsx.snap +125 -60
- package/src/shadowStyle.ts +9 -3
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,58 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/experimental-shadow",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 12 Sep 2022 18:51:39 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/experimental-shadow_v0.2.16",
|
|
7
|
+
"version": "0.2.16",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "78454019+lyzhan7@users.noreply.github.com",
|
|
12
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
13
|
+
"commit": "1dbd38f7204a32f336f6c1c23d5d3ed3ee0ed5e5",
|
|
14
|
+
"comment": "Updated screenshots"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "ruaraki@microsoft.com",
|
|
18
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
19
|
+
"commit": "b3c75109b7cd2863307aa717b822898bda05648e",
|
|
20
|
+
"comment": "Change the test"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Fri, 09 Sep 2022 23:54:15 GMT",
|
|
27
|
+
"tag": "@fluentui-react-native/experimental-shadow_v0.2.15",
|
|
28
|
+
"version": "0.2.15",
|
|
29
|
+
"comments": {
|
|
30
|
+
"patch": [
|
|
31
|
+
{
|
|
32
|
+
"author": "78454019+lyzhan7@users.noreply.github.com",
|
|
33
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
34
|
+
"commit": "a664c9d7f82b7249340da1df9a32c4b5a0e606e1",
|
|
35
|
+
"comment": "Shadows should only take a child of type View"
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"date": "Mon, 29 Aug 2022 23:21:44 GMT",
|
|
42
|
+
"tag": "@fluentui-react-native/experimental-shadow_v0.2.14",
|
|
43
|
+
"version": "0.2.14",
|
|
44
|
+
"comments": {
|
|
45
|
+
"patch": [
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
49
|
+
"comment": "Bump @fluentui-react-native/framework to v0.8.1",
|
|
50
|
+
"commit": "370259af6f245b97a9a9129d8defbdd30a0bbd9d"
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"date": "Fri, 26 Aug 2022 18:15:16 GMT",
|
|
6
57
|
"tag": "@fluentui-react-native/experimental-shadow_v0.2.13",
|
|
7
58
|
"version": "0.2.13",
|
|
8
59
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,37 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/experimental-shadow
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 12 Sep 2022 18:51:39 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.2.16
|
|
8
|
+
|
|
9
|
+
Mon, 12 Sep 2022 18:51:39 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Updated screenshots (78454019+lyzhan7@users.noreply.github.com)
|
|
14
|
+
- Change the test (ruaraki@microsoft.com)
|
|
15
|
+
|
|
16
|
+
## 0.2.15
|
|
17
|
+
|
|
18
|
+
Fri, 09 Sep 2022 23:54:15 GMT
|
|
19
|
+
|
|
20
|
+
### Patches
|
|
21
|
+
|
|
22
|
+
- Shadows should only take a child of type View (78454019+lyzhan7@users.noreply.github.com)
|
|
23
|
+
|
|
24
|
+
## 0.2.14
|
|
25
|
+
|
|
26
|
+
Mon, 29 Aug 2022 23:21:44 GMT
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- Bump @fluentui-react-native/framework to v0.8.1
|
|
31
|
+
|
|
7
32
|
## 0.2.13
|
|
8
33
|
|
|
9
|
-
Fri, 26 Aug 2022 18:
|
|
34
|
+
Fri, 26 Aug 2022 18:15:16 GMT
|
|
10
35
|
|
|
11
36
|
### Patches
|
|
12
37
|
|
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="
|
|
16
|
-
| Brand shadows | <img width="
|
|
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
|
|
|
@@ -42,7 +42,7 @@ For an example of adding a Shadow as a slot to a Fluent component, please see th
|
|
|
42
42
|
The `Shadow` component takes in one prop called `ShadowToken`. The variants of ShadowToken are all defined in the theme.
|
|
43
43
|
If `undefined` is passed into the `shadowToken` prop, no shadow will be rendered.
|
|
44
44
|
|
|
45
|
-
`Shadow` must take exactly one child, which must
|
|
45
|
+
`Shadow` must take exactly one child, which must be of type View.
|
|
46
46
|
|
|
47
47
|
## Notes
|
|
48
48
|
|
|
@@ -1,15 +1,28 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { Text } from 'react-native';
|
|
2
|
+
import { Text, View } from 'react-native';
|
|
3
3
|
import { Shadow } from '../Shadow';
|
|
4
4
|
import { useFluentTheme } from '@fluentui-react-native/framework';
|
|
5
5
|
import * as renderer from 'react-test-renderer';
|
|
6
6
|
import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
|
|
7
|
+
import { Pressable } from '@fluentui-react-native/pressable';
|
|
7
8
|
var TestShadow = function (props) {
|
|
8
9
|
var theme = useFluentTheme();
|
|
9
10
|
return (React.createElement(Shadow, { shadowToken: theme.shadows[props.depth] },
|
|
10
|
-
React.createElement(
|
|
11
|
+
React.createElement(View, null,
|
|
12
|
+
React.createElement(Text, null, props.displayText))));
|
|
13
|
+
};
|
|
14
|
+
var TestPressableWithShadow = function () {
|
|
15
|
+
var theme = useFluentTheme();
|
|
16
|
+
return (React.createElement(Shadow, { shadowToken: theme.shadows['shadow16'] },
|
|
17
|
+
React.createElement(Pressable, null)));
|
|
11
18
|
};
|
|
12
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
|
+
});
|
|
13
26
|
it('Shadow (depth=2)', function () {
|
|
14
27
|
var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=2)", depth: "shadow2" })).toJSON();
|
|
15
28
|
expect(tree).toMatchSnapshot();
|
|
@@ -58,11 +71,18 @@ describe('Shadow component tests', function () {
|
|
|
58
71
|
var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=64)", depth: "shadow64brand" })).toJSON();
|
|
59
72
|
expect(tree).toMatchSnapshot();
|
|
60
73
|
});
|
|
74
|
+
it('Pressable that has a shadow', function () {
|
|
75
|
+
var tree = renderer.create(React.createElement(TestPressableWithShadow, null)).toJSON();
|
|
76
|
+
expect(tree).toMatchSnapshot();
|
|
77
|
+
});
|
|
61
78
|
it('Shadow simple rendering does not invalidate styling', function () {
|
|
62
79
|
checkRenderConsistency(function () { return React.createElement(TestShadow, { displayText: "Shadow render test", depth: "shadow2" }); }, 2);
|
|
63
80
|
});
|
|
64
81
|
it('Shadow re-renders correctly', function () {
|
|
65
82
|
checkReRender(function () { return React.createElement(TestShadow, { displayText: "Shadow render twice test", depth: "shadow2" }); }, 2);
|
|
66
83
|
});
|
|
84
|
+
afterAll(function () {
|
|
85
|
+
jest.unmock('react-native/Libraries/Utilities/Platform');
|
|
86
|
+
});
|
|
67
87
|
});
|
|
68
88
|
//# sourceMappingURL=Shadow.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;
|
|
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;
|
|
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;
|
|
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"}
|
|
@@ -25,12 +25,25 @@ var Shadow_1 = require("../Shadow");
|
|
|
25
25
|
var framework_1 = require("@fluentui-react-native/framework");
|
|
26
26
|
var renderer = __importStar(require("react-test-renderer"));
|
|
27
27
|
var test_tools_1 = require("@fluentui-react-native/test-tools");
|
|
28
|
+
var pressable_1 = require("@fluentui-react-native/pressable");
|
|
28
29
|
var TestShadow = function (props) {
|
|
29
30
|
var theme = (0, framework_1.useFluentTheme)();
|
|
30
31
|
return (React.createElement(Shadow_1.Shadow, { shadowToken: theme.shadows[props.depth] },
|
|
31
|
-
React.createElement(react_native_1.
|
|
32
|
+
React.createElement(react_native_1.View, null,
|
|
33
|
+
React.createElement(react_native_1.Text, null, props.displayText))));
|
|
34
|
+
};
|
|
35
|
+
var TestPressableWithShadow = function () {
|
|
36
|
+
var theme = (0, framework_1.useFluentTheme)();
|
|
37
|
+
return (React.createElement(Shadow_1.Shadow, { shadowToken: theme.shadows['shadow16'] },
|
|
38
|
+
React.createElement(pressable_1.Pressable, null)));
|
|
32
39
|
};
|
|
33
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
|
+
});
|
|
34
47
|
it('Shadow (depth=2)', function () {
|
|
35
48
|
var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=2)", depth: "shadow2" })).toJSON();
|
|
36
49
|
expect(tree).toMatchSnapshot();
|
|
@@ -79,11 +92,18 @@ describe('Shadow component tests', function () {
|
|
|
79
92
|
var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=64)", depth: "shadow64brand" })).toJSON();
|
|
80
93
|
expect(tree).toMatchSnapshot();
|
|
81
94
|
});
|
|
95
|
+
it('Pressable that has a shadow', function () {
|
|
96
|
+
var tree = renderer.create(React.createElement(TestPressableWithShadow, null)).toJSON();
|
|
97
|
+
expect(tree).toMatchSnapshot();
|
|
98
|
+
});
|
|
82
99
|
it('Shadow simple rendering does not invalidate styling', function () {
|
|
83
100
|
(0, test_tools_1.checkRenderConsistency)(function () { return React.createElement(TestShadow, { displayText: "Shadow render test", depth: "shadow2" }); }, 2);
|
|
84
101
|
});
|
|
85
102
|
it('Shadow re-renders correctly', function () {
|
|
86
103
|
(0, test_tools_1.checkReRender)(function () { return React.createElement(TestShadow, { displayText: "Shadow render twice test", depth: "shadow2" }); }, 2);
|
|
87
104
|
});
|
|
105
|
+
afterAll(function () {
|
|
106
|
+
jest.unmock('react-native/Libraries/Utilities/Platform');
|
|
107
|
+
});
|
|
88
108
|
});
|
|
89
109
|
//# sourceMappingURL=Shadow.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,
|
|
1
|
+
{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;
|
|
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"}
|
|
@@ -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,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AAAA,8DAA2D;
|
|
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.
|
|
3
|
+
"version": "0.2.16",
|
|
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,9 @@
|
|
|
22
22
|
"directory": "packages/experimental/Shadow"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@fluentui-react-native/framework": "0.8.
|
|
26
|
-
"@fluentui-react-native/
|
|
25
|
+
"@fluentui-react-native/framework": "0.8.1",
|
|
26
|
+
"@fluentui-react-native/pressable": "0.9.9",
|
|
27
|
+
"@fluentui-react-native/theme-types": "0.18.0"
|
|
27
28
|
},
|
|
28
29
|
"devDependencies": {
|
|
29
30
|
"@fluentui-react-native/eslint-config-rules": "^0.1.1",
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { Text } from 'react-native';
|
|
2
|
+
import { Text, View } from 'react-native';
|
|
3
3
|
import { Shadow } from '../Shadow';
|
|
4
4
|
import { useFluentTheme } from '@fluentui-react-native/framework';
|
|
5
5
|
import * as renderer from 'react-test-renderer';
|
|
6
6
|
import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
|
|
7
|
+
import { Pressable } from '@fluentui-react-native/pressable';
|
|
7
8
|
|
|
8
9
|
interface ShadowTestProps {
|
|
9
10
|
displayText: string;
|
|
@@ -14,12 +15,30 @@ const TestShadow: React.FunctionComponent<ShadowTestProps> = (props: ShadowTestP
|
|
|
14
15
|
const theme = useFluentTheme();
|
|
15
16
|
return (
|
|
16
17
|
<Shadow shadowToken={theme.shadows[props.depth]}>
|
|
17
|
-
<
|
|
18
|
+
<View>
|
|
19
|
+
<Text>{props.displayText}</Text>
|
|
20
|
+
</View>
|
|
21
|
+
</Shadow>
|
|
22
|
+
);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const TestPressableWithShadow: React.FunctionComponent = () => {
|
|
26
|
+
const theme = useFluentTheme();
|
|
27
|
+
return (
|
|
28
|
+
<Shadow shadowToken={theme.shadows['shadow16']}>
|
|
29
|
+
<Pressable />
|
|
18
30
|
</Shadow>
|
|
19
31
|
);
|
|
20
32
|
};
|
|
21
33
|
|
|
22
34
|
describe('Shadow component tests', () => {
|
|
35
|
+
beforeAll(() => {
|
|
36
|
+
jest.mock('react-native/Libraries/Utilities/Platform', () => ({
|
|
37
|
+
OS: 'macos',
|
|
38
|
+
select: () => null,
|
|
39
|
+
}));
|
|
40
|
+
});
|
|
41
|
+
|
|
23
42
|
it('Shadow (depth=2)', () => {
|
|
24
43
|
const tree = renderer.create(<TestShadow displayText="Shadow (depth=2)" depth="shadow2" />).toJSON();
|
|
25
44
|
expect(tree).toMatchSnapshot();
|
|
@@ -80,6 +99,11 @@ describe('Shadow component tests', () => {
|
|
|
80
99
|
expect(tree).toMatchSnapshot();
|
|
81
100
|
});
|
|
82
101
|
|
|
102
|
+
it('Pressable that has a shadow', () => {
|
|
103
|
+
const tree = renderer.create(<TestPressableWithShadow />).toJSON();
|
|
104
|
+
expect(tree).toMatchSnapshot();
|
|
105
|
+
});
|
|
106
|
+
|
|
83
107
|
it('Shadow simple rendering does not invalidate styling', () => {
|
|
84
108
|
checkRenderConsistency(() => <TestShadow displayText="Shadow render test" depth="shadow2" />, 2);
|
|
85
109
|
});
|
|
@@ -87,4 +111,8 @@ describe('Shadow component tests', () => {
|
|
|
87
111
|
it('Shadow re-renders correctly', () => {
|
|
88
112
|
checkReRender(() => <TestShadow displayText="Shadow render twice test" depth="shadow2" />, 2);
|
|
89
113
|
});
|
|
114
|
+
|
|
115
|
+
afterAll(() => {
|
|
116
|
+
jest.unmock('react-native/Libraries/Utilities/Platform');
|
|
117
|
+
});
|
|
90
118
|
});
|
|
@@ -10,11 +10,11 @@ exports[`Shadow component tests Brand shadow (depth=2) 1`] = `
|
|
|
10
10
|
"width": 0,
|
|
11
11
|
},
|
|
12
12
|
"shadowOpacity": 0.3,
|
|
13
|
-
"shadowRadius":
|
|
13
|
+
"shadowRadius": 1,
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
>
|
|
17
|
-
<
|
|
17
|
+
<View
|
|
18
18
|
style={
|
|
19
19
|
Object {
|
|
20
20
|
"shadowColor": "#000000",
|
|
@@ -23,12 +23,14 @@ exports[`Shadow component tests Brand shadow (depth=2) 1`] = `
|
|
|
23
23
|
"width": 0,
|
|
24
24
|
},
|
|
25
25
|
"shadowOpacity": 0.25,
|
|
26
|
-
"shadowRadius":
|
|
26
|
+
"shadowRadius": 1,
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
>
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
<Text>
|
|
31
|
+
Brand shadow (depth=2)
|
|
32
|
+
</Text>
|
|
33
|
+
</View>
|
|
32
34
|
</View>
|
|
33
35
|
`;
|
|
34
36
|
|
|
@@ -42,11 +44,11 @@ exports[`Shadow component tests Brand shadow (depth=4) 1`] = `
|
|
|
42
44
|
"width": 0,
|
|
43
45
|
},
|
|
44
46
|
"shadowOpacity": 0.3,
|
|
45
|
-
"shadowRadius":
|
|
47
|
+
"shadowRadius": 1,
|
|
46
48
|
}
|
|
47
49
|
}
|
|
48
50
|
>
|
|
49
|
-
<
|
|
51
|
+
<View
|
|
50
52
|
style={
|
|
51
53
|
Object {
|
|
52
54
|
"shadowColor": "#000000",
|
|
@@ -55,12 +57,14 @@ exports[`Shadow component tests Brand shadow (depth=4) 1`] = `
|
|
|
55
57
|
"width": 0,
|
|
56
58
|
},
|
|
57
59
|
"shadowOpacity": 0.25,
|
|
58
|
-
"shadowRadius":
|
|
60
|
+
"shadowRadius": 2,
|
|
59
61
|
}
|
|
60
62
|
}
|
|
61
63
|
>
|
|
62
|
-
|
|
63
|
-
|
|
64
|
+
<Text>
|
|
65
|
+
Brand shadow (depth=4)
|
|
66
|
+
</Text>
|
|
67
|
+
</View>
|
|
64
68
|
</View>
|
|
65
69
|
`;
|
|
66
70
|
|
|
@@ -74,11 +78,11 @@ exports[`Shadow component tests Brand shadow (depth=8) 1`] = `
|
|
|
74
78
|
"width": 0,
|
|
75
79
|
},
|
|
76
80
|
"shadowOpacity": 0.3,
|
|
77
|
-
"shadowRadius":
|
|
81
|
+
"shadowRadius": 1,
|
|
78
82
|
}
|
|
79
83
|
}
|
|
80
84
|
>
|
|
81
|
-
<
|
|
85
|
+
<View
|
|
82
86
|
style={
|
|
83
87
|
Object {
|
|
84
88
|
"shadowColor": "#000000",
|
|
@@ -87,12 +91,14 @@ exports[`Shadow component tests Brand shadow (depth=8) 1`] = `
|
|
|
87
91
|
"width": 0,
|
|
88
92
|
},
|
|
89
93
|
"shadowOpacity": 0.25,
|
|
90
|
-
"shadowRadius":
|
|
94
|
+
"shadowRadius": 4,
|
|
91
95
|
}
|
|
92
96
|
}
|
|
93
97
|
>
|
|
94
|
-
|
|
95
|
-
|
|
98
|
+
<Text>
|
|
99
|
+
Brand shadow (depth=8)
|
|
100
|
+
</Text>
|
|
101
|
+
</View>
|
|
96
102
|
</View>
|
|
97
103
|
`;
|
|
98
104
|
|
|
@@ -106,11 +112,11 @@ exports[`Shadow component tests Brand shadow (depth=16) 1`] = `
|
|
|
106
112
|
"width": 0,
|
|
107
113
|
},
|
|
108
114
|
"shadowOpacity": 0.3,
|
|
109
|
-
"shadowRadius":
|
|
115
|
+
"shadowRadius": 1,
|
|
110
116
|
}
|
|
111
117
|
}
|
|
112
118
|
>
|
|
113
|
-
<
|
|
119
|
+
<View
|
|
114
120
|
style={
|
|
115
121
|
Object {
|
|
116
122
|
"shadowColor": "#000000",
|
|
@@ -119,12 +125,14 @@ exports[`Shadow component tests Brand shadow (depth=16) 1`] = `
|
|
|
119
125
|
"width": 0,
|
|
120
126
|
},
|
|
121
127
|
"shadowOpacity": 0.25,
|
|
122
|
-
"shadowRadius":
|
|
128
|
+
"shadowRadius": 8,
|
|
123
129
|
}
|
|
124
130
|
}
|
|
125
131
|
>
|
|
126
|
-
|
|
127
|
-
|
|
132
|
+
<Text>
|
|
133
|
+
Brand shadow (depth=16)
|
|
134
|
+
</Text>
|
|
135
|
+
</View>
|
|
128
136
|
</View>
|
|
129
137
|
`;
|
|
130
138
|
|
|
@@ -138,11 +146,11 @@ exports[`Shadow component tests Brand shadow (depth=28) 1`] = `
|
|
|
138
146
|
"width": 0,
|
|
139
147
|
},
|
|
140
148
|
"shadowOpacity": 0.3,
|
|
141
|
-
"shadowRadius":
|
|
149
|
+
"shadowRadius": 4,
|
|
142
150
|
}
|
|
143
151
|
}
|
|
144
152
|
>
|
|
145
|
-
<
|
|
153
|
+
<View
|
|
146
154
|
style={
|
|
147
155
|
Object {
|
|
148
156
|
"shadowColor": "#000000",
|
|
@@ -151,12 +159,14 @@ exports[`Shadow component tests Brand shadow (depth=28) 1`] = `
|
|
|
151
159
|
"width": 0,
|
|
152
160
|
},
|
|
153
161
|
"shadowOpacity": 0.25,
|
|
154
|
-
"shadowRadius":
|
|
162
|
+
"shadowRadius": 14,
|
|
155
163
|
}
|
|
156
164
|
}
|
|
157
165
|
>
|
|
158
|
-
|
|
159
|
-
|
|
166
|
+
<Text>
|
|
167
|
+
Brand shadow (depth=28)
|
|
168
|
+
</Text>
|
|
169
|
+
</View>
|
|
160
170
|
</View>
|
|
161
171
|
`;
|
|
162
172
|
|
|
@@ -170,11 +180,11 @@ exports[`Shadow component tests Brand shadow (depth=64) 1`] = `
|
|
|
170
180
|
"width": 0,
|
|
171
181
|
},
|
|
172
182
|
"shadowOpacity": 0.3,
|
|
173
|
-
"shadowRadius":
|
|
183
|
+
"shadowRadius": 4,
|
|
174
184
|
}
|
|
175
185
|
}
|
|
176
186
|
>
|
|
177
|
-
<
|
|
187
|
+
<View
|
|
178
188
|
style={
|
|
179
189
|
Object {
|
|
180
190
|
"shadowColor": "#000000",
|
|
@@ -183,12 +193,55 @@ exports[`Shadow component tests Brand shadow (depth=64) 1`] = `
|
|
|
183
193
|
"width": 0,
|
|
184
194
|
},
|
|
185
195
|
"shadowOpacity": 0.25,
|
|
186
|
-
"shadowRadius":
|
|
196
|
+
"shadowRadius": 32,
|
|
187
197
|
}
|
|
188
198
|
}
|
|
189
199
|
>
|
|
190
|
-
|
|
191
|
-
|
|
200
|
+
<Text>
|
|
201
|
+
Brand shadow (depth=64)
|
|
202
|
+
</Text>
|
|
203
|
+
</View>
|
|
204
|
+
</View>
|
|
205
|
+
`;
|
|
206
|
+
|
|
207
|
+
exports[`Shadow component tests Pressable that has a shadow 1`] = `
|
|
208
|
+
<View
|
|
209
|
+
style={
|
|
210
|
+
Object {
|
|
211
|
+
"shadowColor": "#000000",
|
|
212
|
+
"shadowOffset": Object {
|
|
213
|
+
"height": 0,
|
|
214
|
+
"width": 0,
|
|
215
|
+
},
|
|
216
|
+
"shadowOpacity": 0.12,
|
|
217
|
+
"shadowRadius": 1,
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
>
|
|
221
|
+
<View
|
|
222
|
+
onBlur={[Function]}
|
|
223
|
+
onClick={[Function]}
|
|
224
|
+
onFocus={[Function]}
|
|
225
|
+
onMouseEnter={[Function]}
|
|
226
|
+
onMouseLeave={[Function]}
|
|
227
|
+
onResponderGrant={[Function]}
|
|
228
|
+
onResponderMove={[Function]}
|
|
229
|
+
onResponderRelease={[Function]}
|
|
230
|
+
onResponderTerminate={[Function]}
|
|
231
|
+
onResponderTerminationRequest={[Function]}
|
|
232
|
+
onStartShouldSetResponder={[Function]}
|
|
233
|
+
style={
|
|
234
|
+
Object {
|
|
235
|
+
"shadowColor": "#000000",
|
|
236
|
+
"shadowOffset": Object {
|
|
237
|
+
"height": 8,
|
|
238
|
+
"width": 0,
|
|
239
|
+
},
|
|
240
|
+
"shadowOpacity": 0.14,
|
|
241
|
+
"shadowRadius": 8,
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
/>
|
|
192
245
|
</View>
|
|
193
246
|
`;
|
|
194
247
|
|
|
@@ -202,11 +255,11 @@ exports[`Shadow component tests Shadow (depth=2) 1`] = `
|
|
|
202
255
|
"width": 0,
|
|
203
256
|
},
|
|
204
257
|
"shadowOpacity": 0.12,
|
|
205
|
-
"shadowRadius":
|
|
258
|
+
"shadowRadius": 1,
|
|
206
259
|
}
|
|
207
260
|
}
|
|
208
261
|
>
|
|
209
|
-
<
|
|
262
|
+
<View
|
|
210
263
|
style={
|
|
211
264
|
Object {
|
|
212
265
|
"shadowColor": "#000000",
|
|
@@ -215,12 +268,14 @@ exports[`Shadow component tests Shadow (depth=2) 1`] = `
|
|
|
215
268
|
"width": 0,
|
|
216
269
|
},
|
|
217
270
|
"shadowOpacity": 0.14,
|
|
218
|
-
"shadowRadius":
|
|
271
|
+
"shadowRadius": 1,
|
|
219
272
|
}
|
|
220
273
|
}
|
|
221
274
|
>
|
|
222
|
-
|
|
223
|
-
|
|
275
|
+
<Text>
|
|
276
|
+
Shadow (depth=2)
|
|
277
|
+
</Text>
|
|
278
|
+
</View>
|
|
224
279
|
</View>
|
|
225
280
|
`;
|
|
226
281
|
|
|
@@ -234,11 +289,11 @@ exports[`Shadow component tests Shadow (depth=4) 1`] = `
|
|
|
234
289
|
"width": 0,
|
|
235
290
|
},
|
|
236
291
|
"shadowOpacity": 0.12,
|
|
237
|
-
"shadowRadius":
|
|
292
|
+
"shadowRadius": 1,
|
|
238
293
|
}
|
|
239
294
|
}
|
|
240
295
|
>
|
|
241
|
-
<
|
|
296
|
+
<View
|
|
242
297
|
style={
|
|
243
298
|
Object {
|
|
244
299
|
"shadowColor": "#000000",
|
|
@@ -247,12 +302,14 @@ exports[`Shadow component tests Shadow (depth=4) 1`] = `
|
|
|
247
302
|
"width": 0,
|
|
248
303
|
},
|
|
249
304
|
"shadowOpacity": 0.14,
|
|
250
|
-
"shadowRadius":
|
|
305
|
+
"shadowRadius": 2,
|
|
251
306
|
}
|
|
252
307
|
}
|
|
253
308
|
>
|
|
254
|
-
|
|
255
|
-
|
|
309
|
+
<Text>
|
|
310
|
+
Shadow (depth=4)
|
|
311
|
+
</Text>
|
|
312
|
+
</View>
|
|
256
313
|
</View>
|
|
257
314
|
`;
|
|
258
315
|
|
|
@@ -266,11 +323,11 @@ exports[`Shadow component tests Shadow (depth=8) 1`] = `
|
|
|
266
323
|
"width": 0,
|
|
267
324
|
},
|
|
268
325
|
"shadowOpacity": 0.12,
|
|
269
|
-
"shadowRadius":
|
|
326
|
+
"shadowRadius": 1,
|
|
270
327
|
}
|
|
271
328
|
}
|
|
272
329
|
>
|
|
273
|
-
<
|
|
330
|
+
<View
|
|
274
331
|
style={
|
|
275
332
|
Object {
|
|
276
333
|
"shadowColor": "#000000",
|
|
@@ -279,12 +336,14 @@ exports[`Shadow component tests Shadow (depth=8) 1`] = `
|
|
|
279
336
|
"width": 0,
|
|
280
337
|
},
|
|
281
338
|
"shadowOpacity": 0.14,
|
|
282
|
-
"shadowRadius":
|
|
339
|
+
"shadowRadius": 4,
|
|
283
340
|
}
|
|
284
341
|
}
|
|
285
342
|
>
|
|
286
|
-
|
|
287
|
-
|
|
343
|
+
<Text>
|
|
344
|
+
Shadow (depth=8)
|
|
345
|
+
</Text>
|
|
346
|
+
</View>
|
|
288
347
|
</View>
|
|
289
348
|
`;
|
|
290
349
|
|
|
@@ -298,11 +357,11 @@ exports[`Shadow component tests Shadow (depth=16) 1`] = `
|
|
|
298
357
|
"width": 0,
|
|
299
358
|
},
|
|
300
359
|
"shadowOpacity": 0.12,
|
|
301
|
-
"shadowRadius":
|
|
360
|
+
"shadowRadius": 1,
|
|
302
361
|
}
|
|
303
362
|
}
|
|
304
363
|
>
|
|
305
|
-
<
|
|
364
|
+
<View
|
|
306
365
|
style={
|
|
307
366
|
Object {
|
|
308
367
|
"shadowColor": "#000000",
|
|
@@ -311,12 +370,14 @@ exports[`Shadow component tests Shadow (depth=16) 1`] = `
|
|
|
311
370
|
"width": 0,
|
|
312
371
|
},
|
|
313
372
|
"shadowOpacity": 0.14,
|
|
314
|
-
"shadowRadius":
|
|
373
|
+
"shadowRadius": 8,
|
|
315
374
|
}
|
|
316
375
|
}
|
|
317
376
|
>
|
|
318
|
-
|
|
319
|
-
|
|
377
|
+
<Text>
|
|
378
|
+
Shadow (depth=16)
|
|
379
|
+
</Text>
|
|
380
|
+
</View>
|
|
320
381
|
</View>
|
|
321
382
|
`;
|
|
322
383
|
|
|
@@ -330,11 +391,11 @@ exports[`Shadow component tests Shadow (depth=28) 1`] = `
|
|
|
330
391
|
"width": 0,
|
|
331
392
|
},
|
|
332
393
|
"shadowOpacity": 0.2,
|
|
333
|
-
"shadowRadius":
|
|
394
|
+
"shadowRadius": 4,
|
|
334
395
|
}
|
|
335
396
|
}
|
|
336
397
|
>
|
|
337
|
-
<
|
|
398
|
+
<View
|
|
338
399
|
style={
|
|
339
400
|
Object {
|
|
340
401
|
"shadowColor": "#000000",
|
|
@@ -343,12 +404,14 @@ exports[`Shadow component tests Shadow (depth=28) 1`] = `
|
|
|
343
404
|
"width": 0,
|
|
344
405
|
},
|
|
345
406
|
"shadowOpacity": 0.24,
|
|
346
|
-
"shadowRadius":
|
|
407
|
+
"shadowRadius": 14,
|
|
347
408
|
}
|
|
348
409
|
}
|
|
349
410
|
>
|
|
350
|
-
|
|
351
|
-
|
|
411
|
+
<Text>
|
|
412
|
+
Shadow (depth=28)
|
|
413
|
+
</Text>
|
|
414
|
+
</View>
|
|
352
415
|
</View>
|
|
353
416
|
`;
|
|
354
417
|
|
|
@@ -362,11 +425,11 @@ exports[`Shadow component tests Shadow (depth=64) 1`] = `
|
|
|
362
425
|
"width": 0,
|
|
363
426
|
},
|
|
364
427
|
"shadowOpacity": 0.2,
|
|
365
|
-
"shadowRadius":
|
|
428
|
+
"shadowRadius": 4,
|
|
366
429
|
}
|
|
367
430
|
}
|
|
368
431
|
>
|
|
369
|
-
<
|
|
432
|
+
<View
|
|
370
433
|
style={
|
|
371
434
|
Object {
|
|
372
435
|
"shadowColor": "#000000",
|
|
@@ -375,11 +438,13 @@ exports[`Shadow component tests Shadow (depth=64) 1`] = `
|
|
|
375
438
|
"width": 0,
|
|
376
439
|
},
|
|
377
440
|
"shadowOpacity": 0.24,
|
|
378
|
-
"shadowRadius":
|
|
441
|
+
"shadowRadius": 32,
|
|
379
442
|
}
|
|
380
443
|
}
|
|
381
444
|
>
|
|
382
|
-
|
|
383
|
-
|
|
445
|
+
<Text>
|
|
446
|
+
Shadow (depth=64)
|
|
447
|
+
</Text>
|
|
448
|
+
</View>
|
|
384
449
|
</View>
|
|
385
450
|
`;
|
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,
|