@fluentui-react-native/experimental-shadow 0.2.32 → 0.2.33
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 +17 -2
- package/CHANGELOG.md +10 -2
- package/SPEC.md +10 -3
- package/package.json +1 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,22 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/experimental-shadow",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Thu, 20 Oct 2022
|
|
5
|
+
"date": "Thu, 20 Oct 2022 23:15:22 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/experimental-shadow_v0.2.33",
|
|
7
|
+
"version": "0.2.33",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "78454019+lyzhan7@users.noreply.github.com",
|
|
12
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
13
|
+
"commit": "919157eea517674033ee0226391eda0eb1626642",
|
|
14
|
+
"comment": "Update spec: why shadow component is different"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Thu, 20 Oct 2022 18:30:02 GMT",
|
|
6
21
|
"tag": "@fluentui-react-native/experimental-shadow_v0.2.32",
|
|
7
22
|
"version": "0.2.32",
|
|
8
23
|
"comments": {
|
|
@@ -11,7 +26,7 @@
|
|
|
11
26
|
"author": "beachball",
|
|
12
27
|
"package": "@fluentui-react-native/experimental-shadow",
|
|
13
28
|
"comment": "Bump @fluentui-react-native/pressable to v0.9.23",
|
|
14
|
-
"commit": "
|
|
29
|
+
"commit": "9e827dde137238cae829145564cbc880bbdc5a90"
|
|
15
30
|
}
|
|
16
31
|
]
|
|
17
32
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/experimental-shadow
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu, 20 Oct 2022
|
|
3
|
+
This log was last generated on Thu, 20 Oct 2022 23:15:22 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.2.33
|
|
8
|
+
|
|
9
|
+
Thu, 20 Oct 2022 23:15:22 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Update spec: why shadow component is different (78454019+lyzhan7@users.noreply.github.com)
|
|
14
|
+
|
|
7
15
|
## 0.2.32
|
|
8
16
|
|
|
9
|
-
Thu, 20 Oct 2022 18:
|
|
17
|
+
Thu, 20 Oct 2022 18:30:02 GMT
|
|
10
18
|
|
|
11
19
|
### Patches
|
|
12
20
|
|
package/SPEC.md
CHANGED
|
@@ -6,6 +6,8 @@ A `Shadow` is a component that can be used to add Fluent shadows to other compon
|
|
|
6
6
|
|
|
7
7
|
Shadows defined in the Fluent design system are actually comprised of two shadows. The **key shadow** is used to create a feeling of distance, and the **ambient shadow** is used to define the edges of the shape.
|
|
8
8
|
|
|
9
|
+
The `Shadow` component is different from other components in that it was created to address limitations with React Native - Views in React Native can only have one Shadow set at a time. This component provides an easy way to add a Fluent shadow to another component.
|
|
10
|
+
|
|
9
11
|
## Shadow Depth Ramp
|
|
10
12
|
|
|
11
13
|
These are the current `Shadow` variants:
|
|
@@ -17,17 +19,17 @@ These are the current `Shadow` variants:
|
|
|
17
19
|
|
|
18
20
|
## Sample Code
|
|
19
21
|
|
|
20
|
-
Examples adding some Shadows to
|
|
22
|
+
Examples adding some Shadows to a Button:
|
|
21
23
|
|
|
22
24
|
```tsx
|
|
23
25
|
<Shadow shadowToken={theme.shadows.shadow8}>
|
|
24
|
-
<
|
|
26
|
+
<Button>Text box with shadow8</Button>
|
|
25
27
|
</Shadow>
|
|
26
28
|
```
|
|
27
29
|
|
|
28
30
|
```tsx
|
|
29
31
|
<Shadow shadowToken={theme.shadows.shadow8brand}>
|
|
30
|
-
<
|
|
32
|
+
<Button>Text box with shadow8brand</Button>
|
|
31
33
|
</Shadow>
|
|
32
34
|
```
|
|
33
35
|
|
|
@@ -44,6 +46,11 @@ If `undefined` is passed into the `shadowToken` prop, no shadow will be rendered
|
|
|
44
46
|
|
|
45
47
|
`Shadow` must take exactly one child, which must be of type View.
|
|
46
48
|
|
|
49
|
+
## Implementation details
|
|
50
|
+
|
|
51
|
+
In order to get around the React Native restriction of one Shadow per View, the Shadow component adds an extra View around the original View. One of the shadows is placed on the original View and the other is placed on the extra View. The Shadow component smartly extracts the original View's style props so that the extra View isn't noticable (ex. will always be the same size as the original View, padding/margins are set correctly, etc.)
|
|
52
|
+
|
|
47
53
|
## Notes
|
|
48
54
|
|
|
49
55
|
- Known issue: there may be some slight rounding discrepancies due to hex to decimal rounding errors, ex. opacity 0.24 may end up at 0.25.
|
|
56
|
+
- One additional adjustment that was needed on Apple platforms was to divide the blur radius token value by 2. This was needed because shadow blur/radius looks different across platforms - more information here: https://github.com/microsoft/apple-ux-guide/blob/gh-pages/Shadows.md
|
package/package.json
CHANGED