fix: pass width and height to Surface outer layer

callstack · Mar 9, 2023 · 2b60477 · 2b60477
1 parent 7c7241a
commit 2b60477
Show file tree

Hide file tree

Showing 17 changed files with 213 additions and 65 deletions.
diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx
@@ -229,6 +229,8 @@ const Surface = forwardRef<View, Props>(
       start,
       end,
       flex,
+      width,
+      height,
       ...restStyle
     } = (StyleSheet.flatten(style) || {}) as ViewStyle;
 
@@ -241,11 +243,13 @@ const Surface = forwardRef<View, Props>(
       left,
       start,
       end,
+      width,
+      height,
     };
 
     const sharedStyle = [{ backgroundColor, flex }, restStyle];
 
-    const innerLayerViewStyles = [{ flex }];
+    const innerLayerViewStyles = { flex };
 
     const outerLayerViewStyles = [absoluteStyles, innerLayerViewStyles];
 

diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": 64,
       "left": undefined,
       "position": undefined,
       "right": undefined,
@@ -21,6 +22,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "width": undefined,
     }
   }
   testID="surface-outer-layer"
@@ -49,7 +51,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
           "backgroundColor": "rgba(255, 251, 254, 1)",
           "flex": undefined,
           "flexDirection": "row",
-          "height": 64,
           "paddingBottom": undefined,
           "paddingHorizontal": 4,
           "paddingLeft": undefined,
@@ -67,6 +68,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
             "bottom": undefined,
             "end": undefined,
             "flex": undefined,
+            "height": undefined,
             "left": undefined,
             "position": undefined,
             "right": undefined,
@@ -79,6 +81,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
             "shadowRadius": 0,
             "start": undefined,
             "top": undefined,
+            "width": undefined,
           }
         }
         testID="search-bar-container-outer-layer"
@@ -120,6 +123,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                   "bottom": undefined,
                   "end": undefined,
                   "flex": undefined,
+                  "height": 40,
                   "left": undefined,
                   "position": undefined,
                   "right": undefined,
@@ -132,6 +136,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                   "shadowRadius": 0,
                   "start": undefined,
                   "top": undefined,
+                  "width": 40,
                 }
               }
               testID="icon-button-container-outer-layer"
@@ -162,10 +167,8 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                       "borderWidth": 0,
                       "elevation": 0,
                       "flex": undefined,
-                      "height": 40,
                       "margin": 6,
                       "overflow": "hidden",
-                      "width": 40,
                     }
                   }
                   testID="icon-button-container"
@@ -319,6 +322,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                     "bottom": undefined,
                     "end": undefined,
                     "flex": undefined,
+                    "height": 40,
                     "left": undefined,
                     "position": undefined,
                     "right": undefined,
@@ -331,6 +335,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                     "shadowRadius": 0,
                     "start": undefined,
                     "top": undefined,
+                    "width": 40,
                   }
                 }
                 testID="icon-button-container-outer-layer"
@@ -361,10 +366,8 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                         "borderWidth": 0,
                         "elevation": 0,
                         "flex": undefined,
-                        "height": 40,
                         "margin": 6,
                         "overflow": "hidden",
-                        "width": 40,
                       }
                     }
                     testID="icon-button-container"
@@ -478,6 +481,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": 64,
       "left": undefined,
       "position": undefined,
       "right": undefined,
@@ -490,6 +494,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "width": undefined,
     }
   }
   testID="surface-outer-layer"
@@ -518,7 +523,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
           "backgroundColor": "rgba(255, 251, 254, 1)",
           "flex": undefined,
           "flexDirection": "row",
-          "height": 64,
           "paddingBottom": undefined,
           "paddingHorizontal": 4,
           "paddingLeft": undefined,
@@ -536,6 +540,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             "bottom": undefined,
             "end": undefined,
             "flex": undefined,
+            "height": 40,
             "left": undefined,
             "position": undefined,
             "right": undefined,
@@ -548,6 +553,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             "shadowRadius": 0,
             "start": undefined,
             "top": undefined,
+            "width": 40,
           }
         }
         testID="icon-button-container-outer-layer"
@@ -578,10 +584,8 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                 "borderWidth": 0,
                 "elevation": 0,
                 "flex": undefined,
-                "height": 40,
                 "margin": 6,
                 "overflow": "hidden",
-                "width": 40,
               }
             }
             testID="icon-button-container"
@@ -797,6 +801,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             "bottom": undefined,
             "end": undefined,
             "flex": undefined,
+            "height": 40,
             "left": undefined,
             "position": undefined,
             "right": undefined,
@@ -809,6 +814,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             "shadowRadius": 0,
             "start": undefined,
             "top": undefined,
+            "width": 40,
           }
         }
         testID="icon-button-container-outer-layer"
@@ -839,10 +845,8 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                 "borderWidth": 0,
                 "elevation": 0,
                 "flex": undefined,
-                "height": 40,
                 "margin": 6,
                 "overflow": "hidden",
-                "width": 40,
               }
             }
             testID="icon-button-container"

diff --git a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`Card renders an outlined card 1`] = `
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
       "position": undefined,
       "right": undefined,
@@ -21,6 +22,7 @@ exports[`Card renders an outlined card 1`] = `
       "shadowRadius": 0,
       "start": undefined,
       "top": undefined,
+      "width": undefined,
     }
   }
   testID="card-container-outer-layer"

diff --git a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`renders animated fab 1`] = `
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
       "position": "absolute",
       "right": undefined,
@@ -21,6 +22,7 @@ exports[`renders animated fab 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "width": undefined,
     }
   }
   testID="animated-fab-container-outer-layer"
@@ -306,6 +308,7 @@ exports[`renders animated fab with label on the left 1`] = `
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
       "position": "absolute",
       "right": undefined,
@@ -318,6 +321,7 @@ exports[`renders animated fab with label on the left 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "width": undefined,
     }
   }
   testID="animated-fab-container-outer-layer"
@@ -605,6 +609,7 @@ exports[`renders animated fab with label on the right by default 1`] = `
       "bottom": undefined,
       "end": undefined,
       "flex": undefined,
+      "height": undefined,
       "left": undefined,
       "position": "absolute",
       "right": undefined,
@@ -617,6 +622,7 @@ exports[`renders animated fab with label on the right by default 1`] = `
       "shadowRadius": 8,
       "start": undefined,
       "top": undefined,
+      "width": undefined,
     }
   }
   testID="animated-fab-container-outer-layer"