@fluentui-react-native/experimental-shadow 0.2.11 → 0.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +16 -1
- package/CHANGELOG.md +10 -2
- package/SPEC.md +45 -1
- 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": "Mon, 15 Aug 2022
|
|
5
|
+
"date": "Mon, 15 Aug 2022 23:28:33 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/experimental-shadow_v0.2.12",
|
|
7
|
+
"version": "0.2.12",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "78454019+lyzhan7@users.noreply.github.com",
|
|
12
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
13
|
+
"commit": "0f96f121a70581779472908ff4e00a914dcd1bf0",
|
|
14
|
+
"comment": "Initial SPEC.md for shadows"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Mon, 15 Aug 2022 22:12:03 GMT",
|
|
6
21
|
"tag": "@fluentui-react-native/experimental-shadow_v0.2.11",
|
|
7
22
|
"version": "0.2.11",
|
|
8
23
|
"comments": {
|
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 Mon, 15 Aug 2022
|
|
3
|
+
This log was last generated on Mon, 15 Aug 2022 23:28:33 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.2.12
|
|
8
|
+
|
|
9
|
+
Mon, 15 Aug 2022 23:28:33 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Initial SPEC.md for shadows (78454019+lyzhan7@users.noreply.github.com)
|
|
14
|
+
|
|
7
15
|
## 0.2.11
|
|
8
16
|
|
|
9
|
-
Mon, 15 Aug 2022 22:
|
|
17
|
+
Mon, 15 Aug 2022 22:12:03 GMT
|
|
10
18
|
|
|
11
19
|
### Patches
|
|
12
20
|
|
package/SPEC.md
CHANGED
|
@@ -2,4 +2,48 @@
|
|
|
2
2
|
|
|
3
3
|
## Background
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
A `Shadow` is a component that can be used to add Fluent shadows to other components.
|
|
6
|
+
|
|
7
|
+
Shadows defined in the Fluent design system are actually comprised of two shadows. The **key shadow** is used to create a feeling of distance, and the **ambient shadow** is used to define the edges of the shape.
|
|
8
|
+
|
|
9
|
+
## Shadow Depth Ramp
|
|
10
|
+
|
|
11
|
+
These are the current `Shadow` variants:
|
|
12
|
+
|
|
13
|
+
| | Light mode | Dark mode |
|
|
14
|
+
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
15
|
+
| Regular shadows | <img width="801" alt="Screen Shot 2022-08-12 at 10 46 45 AM" src="https://user-images.githubusercontent.com/78454019/184426272-fe23d23f-3c60-4811-82d8-16ae8dc501d9.png"> | <img width="788" alt="Screen Shot 2022-08-12 at 12 08 56 PM" src="https://user-images.githubusercontent.com/78454019/184427236-0b93d797-fdde-4367-9caa-751bcf335eea.png"> |
|
|
16
|
+
| Brand shadows | <img width="802" alt="Screen Shot 2022-08-12 at 12 09 15 PM" src="https://user-images.githubusercontent.com/78454019/184427300-06dacedc-5f39-4dc1-b07b-536186115d2e.png"> | <img width="789" alt="Screen Shot 2022-08-12 at 12 09 03 PM" src="https://user-images.githubusercontent.com/78454019/184427338-c322d223-4719-4593-a550-8360c45aa2e5.png"> |
|
|
17
|
+
|
|
18
|
+
## Sample Code
|
|
19
|
+
|
|
20
|
+
Examples adding some Shadows to some text:
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
<Shadow shadowToken={theme.shadows.shadow8}>
|
|
24
|
+
<Text>Text box with shadow8</Text>
|
|
25
|
+
</Shadow>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
<Shadow shadowToken={theme.shadows.shadow8brand}>
|
|
30
|
+
<Text>Text box with shadow8brand</Text>
|
|
31
|
+
</Shadow>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
For more examples of using Shadow, please see the [ShadowTest test page](https://github.com/microsoft/fluentui-react-native/tree/main/apps/fluent-tester/src/TestComponents/Shadow) in the [Fluent Tester app](https://github.com/microsoft/fluentui-react-native/blob/main/apps/fluent-tester/README.md).
|
|
35
|
+
|
|
36
|
+
For an example of adding a Shadow as a slot to a Fluent component, please see the [FAB component](https://github.com/microsoft/fluentui-react-native/tree/main/packages/components/Button/src/FAB) - this component exists on both iOS and Android, but currently only the iOS version uses the Shadow component. The [Notification component](https://github.com/microsoft/fluentui-react-native/tree/main/packages/components/Notification) is another example that uses the Shadow component.
|
|
37
|
+
|
|
38
|
+
## API
|
|
39
|
+
|
|
40
|
+
### Props
|
|
41
|
+
|
|
42
|
+
The `Shadow` component takes in one prop called `ShadowToken`. The variants of ShadowToken are all defined in the theme.
|
|
43
|
+
If `undefined` is passed into the `shadowToken` prop, no shadow will be rendered.
|
|
44
|
+
|
|
45
|
+
`Shadow` must take exactly one child, which must support a style that derives from ViewStyle (ex. View, Text)
|
|
46
|
+
|
|
47
|
+
## Notes
|
|
48
|
+
|
|
49
|
+
- Known issue: there may be some slight rounding discrepancies due to hex to decimal rounding errors, ex. opacity 0.24 may end up at 0.25.
|
package/package.json
CHANGED