@fluentui-react-native/experimental-shadow 0.2.31 → 0.2.33

package/CHANGELOG.json

@@ -2,7 +2,37 @@
   "name": "@fluentui-react-native/experimental-shadow",
   "entries": [
     {
-      "date": "Tue, 18 Oct 2022 04:04:58 GMT",
+      "date": "Thu, 20 Oct 2022 23:15:22 GMT",
+      "tag": "@fluentui-react-native/experimental-shadow_v0.2.33",
+      "version": "0.2.33",
+      "comments": {
+        "patch": [
+          {
+            "author": "78454019+lyzhan7@users.noreply.github.com",
+            "package": "@fluentui-react-native/experimental-shadow",
+            "commit": "919157eea517674033ee0226391eda0eb1626642",
+            "comment": "Update spec: why shadow component is different"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 20 Oct 2022 18:30:02 GMT",
+      "tag": "@fluentui-react-native/experimental-shadow_v0.2.32",
+      "version": "0.2.32",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-shadow",
+            "comment": "Bump @fluentui-react-native/pressable to v0.9.23",
+            "commit": "9e827dde137238cae829145564cbc880bbdc5a90"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 18 Oct 2022 04:06:27 GMT",
       "tag": "@fluentui-react-native/experimental-shadow_v0.2.31",
       "version": "0.2.31",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @fluentui-react-native/experimental-shadow
 
-This log was last generated on Tue, 18 Oct 2022 04:04:58 GMT and should not be manually modified.
+This log was last generated on Thu, 20 Oct 2022 23:15:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.2.33
+
+Thu, 20 Oct 2022 23:15:22 GMT
+
+### Patches
+
+- Update spec: why shadow component is different (78454019+lyzhan7@users.noreply.github.com)
+
+## 0.2.32
+
+Thu, 20 Oct 2022 18:30:02 GMT
+
+### Patches
+
+- Bump @fluentui-react-native/pressable to v0.9.23
+
 ## 0.2.31
 
-Tue, 18 Oct 2022 04:04:58 GMT
+Tue, 18 Oct 2022 04:06:27 GMT
 
 ### Patches
 

package/SPEC.md

@@ -6,6 +6,8 @@ A `Shadow` is a component that can be used to add Fluent shadows to other compon
 
 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.
 
+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.
+
 ## Shadow Depth Ramp
 
 These are the current `Shadow` variants:
@@ -17,17 +19,17 @@ These are the current `Shadow` variants:
 
 ## Sample Code
 
-Examples adding some Shadows to some text:
+Examples adding some Shadows to a Button:
 
 ```tsx
 <Shadow shadowToken={theme.shadows.shadow8}>
-  <Text>Text box with shadow8</Text>
+  <Button>Text box with shadow8</Button>
 </Shadow>
 ```
 
 ```tsx
 <Shadow shadowToken={theme.shadows.shadow8brand}>
-  <Text>Text box with shadow8brand</Text>
+  <Button>Text box with shadow8brand</Button>
 </Shadow>
 ```
 
@@ -44,6 +46,11 @@ If `undefined` is passed into the `shadowToken` prop, no shadow will be rendered
 
 `Shadow` must take exactly one child, which must be of type View.
 
+## Implementation details
+
+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.)
+
 ## Notes
 
 - 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.
+- 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

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-shadow",
-  "version": "0.2.31",
+  "version": "0.2.33",
   "description": "A cross-platform Shadow component using the Fluent Design System",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@fluentui-react-native/framework": "0.8.12",
-    "@fluentui-react-native/pressable": "0.9.22",
+    "@fluentui-react-native/pressable": "0.9.23",
     "@fluentui-react-native/theme-types": "0.22.0"
   },
   "devDependencies": {