@fluentui-react-native/tester 0.103.23 → 0.103.24
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 +16 -1
- package/CHANGELOG.md +10 -2
- package/lib/TestComponents/Shadow/ShadowButtonTestSection.d.ts.map +1 -1
- package/lib/TestComponents/Shadow/ShadowButtonTestSection.js +4 -1
- package/lib/TestComponents/Shadow/ShadowButtonTestSection.js.map +1 -1
- package/lib/TestComponents/Shadow/ShadowDepthTestSection.d.ts.map +1 -1
- package/lib/TestComponents/Shadow/ShadowDepthTestSection.js +4 -4
- package/lib/TestComponents/Shadow/ShadowDepthTestSection.js.map +1 -1
- package/lib/TestComponents/Shadow/ShadowTestPageStyles.d.ts +12 -0
- package/lib/TestComponents/Shadow/ShadowTestPageStyles.d.ts.map +1 -0
- package/lib/TestComponents/Shadow/ShadowTestPageStyles.js +18 -0
- package/lib/TestComponents/Shadow/ShadowTestPageStyles.js.map +1 -0
- package/lib/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.d.ts.map +1 -1
- package/lib/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.js +3 -6
- package/lib/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.js.map +1 -1
- package/lib-commonjs/TestComponents/Shadow/ShadowButtonTestSection.d.ts.map +1 -1
- package/lib-commonjs/TestComponents/Shadow/ShadowButtonTestSection.js +4 -1
- package/lib-commonjs/TestComponents/Shadow/ShadowButtonTestSection.js.map +1 -1
- package/lib-commonjs/TestComponents/Shadow/ShadowDepthTestSection.d.ts.map +1 -1
- package/lib-commonjs/TestComponents/Shadow/ShadowDepthTestSection.js +4 -4
- package/lib-commonjs/TestComponents/Shadow/ShadowDepthTestSection.js.map +1 -1
- package/lib-commonjs/TestComponents/Shadow/ShadowTestPageStyles.d.ts +12 -0
- package/lib-commonjs/TestComponents/Shadow/ShadowTestPageStyles.d.ts.map +1 -0
- package/lib-commonjs/TestComponents/Shadow/ShadowTestPageStyles.js +21 -0
- package/lib-commonjs/TestComponents/Shadow/ShadowTestPageStyles.js.map +1 -0
- package/lib-commonjs/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.d.ts.map +1 -1
- package/lib-commonjs/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.js +3 -6
- package/lib-commonjs/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.js.map +1 -1
- package/package.json +1 -1
- package/src/TestComponents/Shadow/ShadowButtonTestSection.tsx +5 -1
- package/src/TestComponents/Shadow/ShadowDepthTestSection.tsx +4 -4
- package/src/TestComponents/Shadow/ShadowTestPageStyles.tsx +21 -0
- package/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx +3 -2
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,22 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/tester",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Tue, 08 Nov 2022
|
|
5
|
+
"date": "Tue, 08 Nov 2022 20:41:38 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/tester_v0.103.24",
|
|
7
|
+
"version": "0.103.24",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "78454019+lyzhan7@users.noreply.github.com",
|
|
12
|
+
"package": "@fluentui-react-native/tester",
|
|
13
|
+
"commit": "4519df076d9b6d7e07b2081a58665e1d22c5f6a7",
|
|
14
|
+
"comment": "Shadow test page background color"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Tue, 08 Nov 2022 19:22:01 GMT",
|
|
6
21
|
"tag": "@fluentui-react-native/tester_v0.103.23",
|
|
7
22
|
"version": "0.103.23",
|
|
8
23
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/tester
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue, 08 Nov 2022
|
|
3
|
+
This log was last generated on Tue, 08 Nov 2022 20:41:38 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.103.24
|
|
8
|
+
|
|
9
|
+
Tue, 08 Nov 2022 20:41:38 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Shadow test page background color (78454019+lyzhan7@users.noreply.github.com)
|
|
14
|
+
|
|
7
15
|
## 0.103.23
|
|
8
16
|
|
|
9
|
-
Tue, 08 Nov 2022 19:
|
|
17
|
+
Tue, 08 Nov 2022 19:22:01 GMT
|
|
10
18
|
|
|
11
19
|
### Patches
|
|
12
20
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShadowButtonTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ShadowButtonTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,iBAkB3C,CAAC"}
|
|
@@ -2,13 +2,16 @@ import * as React from 'react';
|
|
|
2
2
|
import { Platform, View } from 'react-native';
|
|
3
3
|
import { FAB, Text } from '@fluentui/react-native';
|
|
4
4
|
import { commonTestStyles, stackStyle } from '../Common/styles';
|
|
5
|
+
import { shadowTestPageStyles } from './ShadowTestPageStyles';
|
|
6
|
+
import { useFluentTheme } from '@fluentui-react-native/framework';
|
|
5
7
|
var CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
|
|
6
8
|
var CustomFABShadow64 = FAB.customize({
|
|
7
9
|
shadowToken: { ambient: { x: 0, y: 0, blur: 8, color: '#00000033' }, key: { x: 0, y: 32, blur: 64, color: '#0000003d' } },
|
|
8
10
|
});
|
|
9
11
|
export var ShadowButtonTestSection = function () {
|
|
12
|
+
var t = useFluentTheme();
|
|
10
13
|
if (Platform.OS === 'ios') {
|
|
11
|
-
return (React.createElement(View, { style:
|
|
14
|
+
return (React.createElement(View, { style: shadowTestPageStyles(t).backgroundColor },
|
|
12
15
|
React.createElement(FAB, { style: commonTestStyles.vmargin }, "FAB with default shadow"),
|
|
13
16
|
React.createElement(CustomFABShadow64, { style: commonTestStyles.vmargin }, "Custom FAB with shadow64"),
|
|
14
17
|
React.createElement(CustomFABNoShadow, { style: commonTestStyles.vmargin }, "Custom FAB with no shadow")));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShadowButtonTestSection.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"ShadowButtonTestSection.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,IAAM,iBAAiB,GAAG,GAAG,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;AACpE,IAAM,iBAAiB,GAAG,GAAG,CAAC,SAAS,CAAC;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE;CAC1H,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,uBAAuB,GAA4B;IAC9D,IAAM,CAAC,GAAG,cAAc,EAAE,CAAC;IAE3B,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE;QACzB,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC,eAAe;YAClD,oBAAC,GAAG,IAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,8BAA+B;YACnE,oBAAC,iBAAiB,IAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,+BAA8C;YAChG,oBAAC,iBAAiB,IAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,gCAA+C,CAC5F,CACR,CAAC;KACH;SAAM;QACL,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU;YACrB,oBAAC,IAAI,wDAAqD,CACrD,CACR,CAAC;KACH;AACH,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShadowDepthTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ShadowDepthTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmD/B,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,iBAoB1C,CAAC"}
|
|
@@ -5,6 +5,7 @@ import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimen
|
|
|
5
5
|
import { useTheme } from '@fluentui-react-native/theme-types';
|
|
6
6
|
import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
|
|
7
7
|
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
|
|
8
|
+
import { shadowTestPageStyles } from './ShadowTestPageStyles';
|
|
8
9
|
var getThemedStyles = themedStyleSheet(function (t) {
|
|
9
10
|
return {
|
|
10
11
|
shadowTestBox: {
|
|
@@ -15,9 +16,7 @@ var getThemedStyles = themedStyleSheet(function (t) {
|
|
|
15
16
|
marginVertical: 16,
|
|
16
17
|
marginHorizontal: 32,
|
|
17
18
|
},
|
|
18
|
-
defaultBackground:
|
|
19
|
-
backgroundColor: t.colors.background,
|
|
20
|
-
},
|
|
19
|
+
defaultBackground: shadowTestPageStyles(t).backgroundColor,
|
|
21
20
|
brandedBackground: {
|
|
22
21
|
backgroundColor: t.colors.brandedBackground,
|
|
23
22
|
},
|
|
@@ -35,7 +34,8 @@ var ShadowTestBox = function (props) {
|
|
|
35
34
|
};
|
|
36
35
|
export var ShadowDepthTestSection = function () {
|
|
37
36
|
var theme = useFluentTheme();
|
|
38
|
-
|
|
37
|
+
var backgroundViewStyle = shadowTestPageStyles(theme).backgroundColor;
|
|
38
|
+
return (React.createElement(View, { style: backgroundViewStyle },
|
|
39
39
|
React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 2", shadowToken: theme.shadows.shadow2 }),
|
|
40
40
|
React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 4", shadowToken: theme.shadows.shadow4 }),
|
|
41
41
|
React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 8", shadowToken: theme.shadows.shadow8 }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShadowDepthTestSection.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAC5F,OAAO,EAAsB,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;
|
|
1
|
+
{"version":3,"file":"ShadowDepthTestSection.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Theme } from '@fluentui-react-native/theme-types';
|
|
2
|
+
/**
|
|
3
|
+
* The default dark mode iOS background color from the theme is black ('#000000'), which shadows are not visible against.
|
|
4
|
+
* Shadows are also not very visible when placed on a view that is black.
|
|
5
|
+
*
|
|
6
|
+
* For dark mode iOS, returns a dark grey that shadows are visible on. Otherwise, will return either undefined or the default
|
|
7
|
+
* background color from the theme based on whether or not a theme has been provided.
|
|
8
|
+
*/
|
|
9
|
+
export declare const shadowTestPageStyles: (theme: Theme) => import("@fluentui-react-native/themed-stylesheet").NamedStyles<{
|
|
10
|
+
backgroundColor: unknown;
|
|
11
|
+
}>;
|
|
12
|
+
//# sourceMappingURL=ShadowTestPageStyles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ShadowTestPageStyles.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowTestPageStyles.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAG3D;;;;;;GAMG;AAEH,eAAO,MAAM,oBAAoB;;EAQ/B,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Platform } from 'react-native';
|
|
2
|
+
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
|
|
3
|
+
/**
|
|
4
|
+
* The default dark mode iOS background color from the theme is black ('#000000'), which shadows are not visible against.
|
|
5
|
+
* Shadows are also not very visible when placed on a view that is black.
|
|
6
|
+
*
|
|
7
|
+
* For dark mode iOS, returns a dark grey that shadows are visible on. Otherwise, will return either undefined or the default
|
|
8
|
+
* background color from the theme based on whether or not a theme has been provided.
|
|
9
|
+
*/
|
|
10
|
+
export var shadowTestPageStyles = themedStyleSheet(function (t) {
|
|
11
|
+
var useLighterBackgroundColor = Platform.OS === 'ios' && t.host.appearance === 'dark';
|
|
12
|
+
return {
|
|
13
|
+
backgroundColor: {
|
|
14
|
+
backgroundColor: useLighterBackgroundColor ? '#313131' : t.colors.background,
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
});
|
|
18
|
+
//# sourceMappingURL=ShadowTestPageStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ShadowTestPageStyles.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowTestPageStyles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E;;;;;;GAMG;AAEH,MAAM,CAAC,IAAM,oBAAoB,GAAG,gBAAgB,CAAC,UAAC,CAAQ;IAC5D,IAAM,yBAAyB,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC;IAExF,OAAO;QACL,eAAe,EAAE;YACf,eAAe,EAAE,yBAAyB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU;SAC7E;KACF,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShadowWithDifferentPropsTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ShadowWithDifferentPropsTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B,eAAO,MAAM,mCAAmC,EAAE,KAAK,CAAC,iBAgEvD,CAAC"}
|
|
@@ -6,12 +6,9 @@ import { useFluentTheme } from '@fluentui-react-native/framework';
|
|
|
6
6
|
import { View } from 'react-native';
|
|
7
7
|
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
|
|
8
8
|
import { mergeStyles } from '@fluentui-react-native/merge-props';
|
|
9
|
+
import { shadowTestPageStyles } from './ShadowTestPageStyles';
|
|
9
10
|
var getThemedStyles = themedStyleSheet(function (t) {
|
|
10
|
-
var defaultShadowTestBoxPropsWithoutSpacing = {
|
|
11
|
-
maxWidth: 732,
|
|
12
|
-
minHeight: 64,
|
|
13
|
-
backgroundColor: t.colors.background,
|
|
14
|
-
};
|
|
11
|
+
var defaultShadowTestBoxPropsWithoutSpacing = __assign({ maxWidth: 732, minHeight: 64 }, shadowTestPageStyles(t).backgroundColor);
|
|
15
12
|
var marginTestProps = {
|
|
16
13
|
marginVertical: 16,
|
|
17
14
|
marginHorizontal: 32,
|
|
@@ -43,7 +40,7 @@ var getThemedStyles = themedStyleSheet(function (t) {
|
|
|
43
40
|
export var ShadowWithDifferentPropsTestSection = function () {
|
|
44
41
|
var theme = useFluentTheme();
|
|
45
42
|
var themedStyles = getThemedStyles(theme);
|
|
46
|
-
return (React.createElement(View,
|
|
43
|
+
return (React.createElement(View, { style: shadowTestPageStyles(theme).backgroundColor },
|
|
47
44
|
React.createElement(Text, { style: themedStyles.headerTextPadding }, "The following tests have a Shadow16 set on a child view that has some specific props."),
|
|
48
45
|
React.createElement(View, null,
|
|
49
46
|
React.createElement(Shadow, { shadowToken: theme.shadows.shadow16 },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShadowWithDifferentPropsTestSection.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAS,cAAc,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;
|
|
1
|
+
{"version":3,"file":"ShadowWithDifferentPropsTestSection.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShadowButtonTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ShadowButtonTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,iBAkB3C,CAAC"}
|
|
@@ -6,13 +6,16 @@ var React = (0, tslib_1.__importStar)(require("react"));
|
|
|
6
6
|
var react_native_1 = require("react-native");
|
|
7
7
|
var react_native_2 = require("@fluentui/react-native");
|
|
8
8
|
var styles_1 = require("../Common/styles");
|
|
9
|
+
var ShadowTestPageStyles_1 = require("./ShadowTestPageStyles");
|
|
10
|
+
var framework_1 = require("@fluentui-react-native/framework");
|
|
9
11
|
var CustomFABNoShadow = react_native_2.FAB.customize({ shadowToken: undefined });
|
|
10
12
|
var CustomFABShadow64 = react_native_2.FAB.customize({
|
|
11
13
|
shadowToken: { ambient: { x: 0, y: 0, blur: 8, color: '#00000033' }, key: { x: 0, y: 32, blur: 64, color: '#0000003d' } },
|
|
12
14
|
});
|
|
13
15
|
var ShadowButtonTestSection = function () {
|
|
16
|
+
var t = (0, framework_1.useFluentTheme)();
|
|
14
17
|
if (react_native_1.Platform.OS === 'ios') {
|
|
15
|
-
return (React.createElement(react_native_1.View, { style:
|
|
18
|
+
return (React.createElement(react_native_1.View, { style: (0, ShadowTestPageStyles_1.shadowTestPageStyles)(t).backgroundColor },
|
|
16
19
|
React.createElement(react_native_2.FAB, { style: styles_1.commonTestStyles.vmargin }, "FAB with default shadow"),
|
|
17
20
|
React.createElement(CustomFABShadow64, { style: styles_1.commonTestStyles.vmargin }, "Custom FAB with shadow64"),
|
|
18
21
|
React.createElement(CustomFABNoShadow, { style: styles_1.commonTestStyles.vmargin }, "Custom FAB with no shadow")));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShadowButtonTestSection.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAA8C;AAC9C,uDAAmD;AACnD,2CAAgE;
|
|
1
|
+
{"version":3,"file":"ShadowButtonTestSection.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowButtonTestSection.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAA8C;AAC9C,uDAAmD;AACnD,2CAAgE;AAChE,+DAA8D;AAC9D,8DAAkE;AAElE,IAAM,iBAAiB,GAAG,kBAAG,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;AACpE,IAAM,iBAAiB,GAAG,kBAAG,CAAC,SAAS,CAAC;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE;CAC1H,CAAC,CAAC;AAEI,IAAM,uBAAuB,GAA4B;IAC9D,IAAM,CAAC,GAAG,IAAA,0BAAc,GAAE,CAAC;IAE3B,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,EAAE;QACzB,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,IAAA,2CAAoB,EAAC,CAAC,CAAC,CAAC,eAAe;YAClD,oBAAC,kBAAG,IAAC,KAAK,EAAE,yBAAgB,CAAC,OAAO,8BAA+B;YACnE,oBAAC,iBAAiB,IAAC,KAAK,EAAE,yBAAgB,CAAC,OAAO,+BAA8C;YAChG,oBAAC,iBAAiB,IAAC,KAAK,EAAE,yBAAgB,CAAC,OAAO,gCAA+C,CAC5F,CACR,CAAC;KACH;SAAM;QACL,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,mBAAU;YACrB,oBAAC,mBAAI,wDAAqD,CACrD,CACR,CAAC;KACH;AACH,CAAC,CAAC;AAlBW,QAAA,uBAAuB,2BAkBlC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShadowDepthTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ShadowDepthTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmD/B,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,iBAoB1C,CAAC"}
|
|
@@ -9,6 +9,7 @@ var experimental_shadow_1 = require("@fluentui-react-native/experimental-shadow"
|
|
|
9
9
|
var theme_types_1 = require("@fluentui-react-native/theme-types");
|
|
10
10
|
var framework_1 = require("@fluentui-react-native/framework");
|
|
11
11
|
var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
|
|
12
|
+
var ShadowTestPageStyles_1 = require("./ShadowTestPageStyles");
|
|
12
13
|
var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (t) {
|
|
13
14
|
return {
|
|
14
15
|
shadowTestBox: {
|
|
@@ -19,9 +20,7 @@ var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (t) {
|
|
|
19
20
|
marginVertical: 16,
|
|
20
21
|
marginHorizontal: 32,
|
|
21
22
|
},
|
|
22
|
-
defaultBackground:
|
|
23
|
-
backgroundColor: t.colors.background,
|
|
24
|
-
},
|
|
23
|
+
defaultBackground: (0, ShadowTestPageStyles_1.shadowTestPageStyles)(t).backgroundColor,
|
|
25
24
|
brandedBackground: {
|
|
26
25
|
backgroundColor: t.colors.brandedBackground,
|
|
27
26
|
},
|
|
@@ -39,7 +38,8 @@ var ShadowTestBox = function (props) {
|
|
|
39
38
|
};
|
|
40
39
|
var ShadowDepthTestSection = function () {
|
|
41
40
|
var theme = (0, framework_1.useFluentTheme)();
|
|
42
|
-
|
|
41
|
+
var backgroundViewStyle = (0, ShadowTestPageStyles_1.shadowTestPageStyles)(theme).backgroundColor;
|
|
42
|
+
return (React.createElement(react_native_1.View, { style: backgroundViewStyle },
|
|
43
43
|
React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 2", shadowToken: theme.shadows.shadow2 }),
|
|
44
44
|
React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 4", shadowToken: theme.shadows.shadow4 }),
|
|
45
45
|
React.createElement(ShadowTestBox, { shadowDepthText: "Shadow 8", shadowToken: theme.shadows.shadow8 }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShadowDepthTestSection.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAAoC;AACpC,uDAA8C;AAC9C,kFAA4F;AAC5F,kEAAkF;AAClF,8DAA+E;AAC/E,8EAA4E;
|
|
1
|
+
{"version":3,"file":"ShadowDepthTestSection.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowDepthTestSection.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Theme } from '@fluentui-react-native/theme-types';
|
|
2
|
+
/**
|
|
3
|
+
* The default dark mode iOS background color from the theme is black ('#000000'), which shadows are not visible against.
|
|
4
|
+
* Shadows are also not very visible when placed on a view that is black.
|
|
5
|
+
*
|
|
6
|
+
* For dark mode iOS, returns a dark grey that shadows are visible on. Otherwise, will return either undefined or the default
|
|
7
|
+
* background color from the theme based on whether or not a theme has been provided.
|
|
8
|
+
*/
|
|
9
|
+
export declare const shadowTestPageStyles: (theme: Theme) => import("@fluentui-react-native/themed-stylesheet").NamedStyles<{
|
|
10
|
+
backgroundColor: unknown;
|
|
11
|
+
}>;
|
|
12
|
+
//# sourceMappingURL=ShadowTestPageStyles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ShadowTestPageStyles.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowTestPageStyles.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAG3D;;;;;;GAMG;AAEH,eAAO,MAAM,oBAAoB;;EAQ/B,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.shadowTestPageStyles = void 0;
|
|
4
|
+
var react_native_1 = require("react-native");
|
|
5
|
+
var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
|
|
6
|
+
/**
|
|
7
|
+
* The default dark mode iOS background color from the theme is black ('#000000'), which shadows are not visible against.
|
|
8
|
+
* Shadows are also not very visible when placed on a view that is black.
|
|
9
|
+
*
|
|
10
|
+
* For dark mode iOS, returns a dark grey that shadows are visible on. Otherwise, will return either undefined or the default
|
|
11
|
+
* background color from the theme based on whether or not a theme has been provided.
|
|
12
|
+
*/
|
|
13
|
+
exports.shadowTestPageStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (t) {
|
|
14
|
+
var useLighterBackgroundColor = react_native_1.Platform.OS === 'ios' && t.host.appearance === 'dark';
|
|
15
|
+
return {
|
|
16
|
+
backgroundColor: {
|
|
17
|
+
backgroundColor: useLighterBackgroundColor ? '#313131' : t.colors.background,
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
});
|
|
21
|
+
//# sourceMappingURL=ShadowTestPageStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ShadowTestPageStyles.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowTestPageStyles.tsx"],"names":[],"mappings":";;;AAAA,6CAAwC;AAExC,8EAA4E;AAE5E;;;;;;GAMG;AAEU,QAAA,oBAAoB,GAAG,IAAA,oCAAgB,EAAC,UAAC,CAAQ;IAC5D,IAAM,yBAAyB,GAAG,uBAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC;IAExF,OAAO;QACL,eAAe,EAAE;YACf,eAAe,EAAE,yBAAyB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU;SAC7E;KACF,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShadowWithDifferentPropsTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ShadowWithDifferentPropsTestSection.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B,eAAO,MAAM,mCAAmC,EAAE,KAAK,CAAC,iBAgEvD,CAAC"}
|
|
@@ -9,12 +9,9 @@ var framework_1 = require("@fluentui-react-native/framework");
|
|
|
9
9
|
var react_native_2 = require("react-native");
|
|
10
10
|
var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
|
|
11
11
|
var merge_props_1 = require("@fluentui-react-native/merge-props");
|
|
12
|
+
var ShadowTestPageStyles_1 = require("./ShadowTestPageStyles");
|
|
12
13
|
var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (t) {
|
|
13
|
-
var defaultShadowTestBoxPropsWithoutSpacing = {
|
|
14
|
-
maxWidth: 732,
|
|
15
|
-
minHeight: 64,
|
|
16
|
-
backgroundColor: t.colors.background,
|
|
17
|
-
};
|
|
14
|
+
var defaultShadowTestBoxPropsWithoutSpacing = (0, tslib_1.__assign)({ maxWidth: 732, minHeight: 64 }, (0, ShadowTestPageStyles_1.shadowTestPageStyles)(t).backgroundColor);
|
|
18
15
|
var marginTestProps = {
|
|
19
16
|
marginVertical: 16,
|
|
20
17
|
marginHorizontal: 32,
|
|
@@ -46,7 +43,7 @@ var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (t) {
|
|
|
46
43
|
var ShadowWithDifferentPropsTestSection = function () {
|
|
47
44
|
var theme = (0, framework_1.useFluentTheme)();
|
|
48
45
|
var themedStyles = getThemedStyles(theme);
|
|
49
|
-
return (React.createElement(react_native_2.View,
|
|
46
|
+
return (React.createElement(react_native_2.View, { style: (0, ShadowTestPageStyles_1.shadowTestPageStyles)(theme).backgroundColor },
|
|
50
47
|
React.createElement(react_native_1.Text, { style: themedStyles.headerTextPadding }, "The following tests have a Shadow16 set on a child view that has some specific props."),
|
|
51
48
|
React.createElement(react_native_2.View, null,
|
|
52
49
|
React.createElement(experimental_shadow_1.Shadow, { shadowToken: theme.shadows.shadow16 },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShadowWithDifferentPropsTestSection.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,uDAA8C;AAC9C,kFAAoE;AACpE,8DAAyE;AACzE,6CAAoC;AACpC,8EAA4E;AAC5E,kEAAiE;
|
|
1
|
+
{"version":3,"file":"ShadowWithDifferentPropsTestSection.js","sourceRoot":"","sources":["../../../src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -2,6 +2,8 @@ import * as React from 'react';
|
|
|
2
2
|
import { Platform, View } from 'react-native';
|
|
3
3
|
import { FAB, Text } from '@fluentui/react-native';
|
|
4
4
|
import { commonTestStyles, stackStyle } from '../Common/styles';
|
|
5
|
+
import { shadowTestPageStyles } from './ShadowTestPageStyles';
|
|
6
|
+
import { useFluentTheme } from '@fluentui-react-native/framework';
|
|
5
7
|
|
|
6
8
|
const CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
|
|
7
9
|
const CustomFABShadow64 = FAB.customize({
|
|
@@ -9,9 +11,11 @@ const CustomFABShadow64 = FAB.customize({
|
|
|
9
11
|
});
|
|
10
12
|
|
|
11
13
|
export const ShadowButtonTestSection: React.FunctionComponent = () => {
|
|
14
|
+
const t = useFluentTheme();
|
|
15
|
+
|
|
12
16
|
if (Platform.OS === 'ios') {
|
|
13
17
|
return (
|
|
14
|
-
<View style={
|
|
18
|
+
<View style={shadowTestPageStyles(t).backgroundColor}>
|
|
15
19
|
<FAB style={commonTestStyles.vmargin}>FAB with default shadow</FAB>
|
|
16
20
|
<CustomFABShadow64 style={commonTestStyles.vmargin}>Custom FAB with shadow64</CustomFABShadow64>
|
|
17
21
|
<CustomFABNoShadow style={commonTestStyles.vmargin}>Custom FAB with no shadow</CustomFABNoShadow>
|
|
@@ -5,6 +5,7 @@ import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimen
|
|
|
5
5
|
import { ShadowToken, Theme, useTheme } from '@fluentui-react-native/theme-types';
|
|
6
6
|
import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
|
|
7
7
|
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
|
|
8
|
+
import { shadowTestPageStyles } from './ShadowTestPageStyles';
|
|
8
9
|
|
|
9
10
|
const getThemedStyles = themedStyleSheet((t: Theme) => {
|
|
10
11
|
return {
|
|
@@ -16,9 +17,7 @@ const getThemedStyles = themedStyleSheet((t: Theme) => {
|
|
|
16
17
|
marginVertical: 16,
|
|
17
18
|
marginHorizontal: 32,
|
|
18
19
|
},
|
|
19
|
-
defaultBackground:
|
|
20
|
-
backgroundColor: t.colors.background,
|
|
21
|
-
},
|
|
20
|
+
defaultBackground: shadowTestPageStyles(t).backgroundColor,
|
|
22
21
|
brandedBackground: {
|
|
23
22
|
backgroundColor: t.colors.brandedBackground,
|
|
24
23
|
},
|
|
@@ -52,9 +51,10 @@ const ShadowTestBox: React.FunctionComponent<ShadowTestBoxProps> = (props: Shado
|
|
|
52
51
|
|
|
53
52
|
export const ShadowDepthTestSection: React.FunctionComponent = () => {
|
|
54
53
|
const theme = useFluentTheme();
|
|
54
|
+
const backgroundViewStyle = shadowTestPageStyles(theme).backgroundColor;
|
|
55
55
|
|
|
56
56
|
return (
|
|
57
|
-
<View>
|
|
57
|
+
<View style={backgroundViewStyle}>
|
|
58
58
|
<ShadowTestBox shadowDepthText="Shadow 2" shadowToken={theme.shadows.shadow2} />
|
|
59
59
|
<ShadowTestBox shadowDepthText="Shadow 4" shadowToken={theme.shadows.shadow4} />
|
|
60
60
|
<ShadowTestBox shadowDepthText="Shadow 8" shadowToken={theme.shadows.shadow8} />
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Platform } from 'react-native';
|
|
2
|
+
import { Theme } from '@fluentui-react-native/theme-types';
|
|
3
|
+
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* The default dark mode iOS background color from the theme is black ('#000000'), which shadows are not visible against.
|
|
7
|
+
* Shadows are also not very visible when placed on a view that is black.
|
|
8
|
+
*
|
|
9
|
+
* For dark mode iOS, returns a dark grey that shadows are visible on. Otherwise, will return either undefined or the default
|
|
10
|
+
* background color from the theme based on whether or not a theme has been provided.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
export const shadowTestPageStyles = themedStyleSheet((t: Theme) => {
|
|
14
|
+
const useLighterBackgroundColor = Platform.OS === 'ios' && t.host.appearance === 'dark';
|
|
15
|
+
|
|
16
|
+
return {
|
|
17
|
+
backgroundColor: {
|
|
18
|
+
backgroundColor: useLighterBackgroundColor ? '#313131' : t.colors.background,
|
|
19
|
+
},
|
|
20
|
+
};
|
|
21
|
+
});
|
|
@@ -5,12 +5,13 @@ import { Theme, useFluentTheme } from '@fluentui-react-native/framework';
|
|
|
5
5
|
import { View } from 'react-native';
|
|
6
6
|
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
|
|
7
7
|
import { mergeStyles } from '@fluentui-react-native/merge-props';
|
|
8
|
+
import { shadowTestPageStyles } from './ShadowTestPageStyles';
|
|
8
9
|
|
|
9
10
|
const getThemedStyles = themedStyleSheet((t: Theme) => {
|
|
10
11
|
const defaultShadowTestBoxPropsWithoutSpacing = {
|
|
11
12
|
maxWidth: 732,
|
|
12
13
|
minHeight: 64,
|
|
13
|
-
|
|
14
|
+
...shadowTestPageStyles(t).backgroundColor,
|
|
14
15
|
};
|
|
15
16
|
const marginTestProps = {
|
|
16
17
|
marginVertical: 16,
|
|
@@ -51,7 +52,7 @@ export const ShadowWithDifferentPropsTestSection: React.FunctionComponent = () =
|
|
|
51
52
|
const themedStyles = getThemedStyles(theme);
|
|
52
53
|
|
|
53
54
|
return (
|
|
54
|
-
<View>
|
|
55
|
+
<View style={shadowTestPageStyles(theme).backgroundColor}>
|
|
55
56
|
<Text style={themedStyles.headerTextPadding}>
|
|
56
57
|
The following tests have a Shadow16 set on a child view that has some specific props.
|
|
57
58
|
</Text>
|