@hero-design/rn 8.35.0 → 8.36.0-alpha.0

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -20,558 +20,968 @@ exports[`ActionGroup has active false 1`] = `
 >
   <View
     collapsable={false}
-    pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#000000",
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-    testID="back-drop"
-  />
-  <View
-    collapsable={false}
-    pointerEvents="none"
-    style={
-      Object {
-        "alignItems": "flex-end",
-        "justifyContent": "flex-end",
-        "opacity": 0,
-        "width": "70%",
+        "opacity": 1,
       }
     }
-    testID="action-group"
   >
     <View
-      collapsable={false}
+      accessible={true}
+      focusable={false}
+      onClick={[Function]}
+      onLayout={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        Object {
-          "transform": Array [
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-start",
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "elevation": 2,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "padding": 20,
+            "shadowColor": "#001f23",
+            "shadowOffset": Object {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.12,
+            "shadowRadius": 8,
+          },
+          Array [
+            Array [
+              Object {
+                "alignSelf": "flex-end",
+                "marginRight": 24,
+                "marginTop": 24,
+              },
+              undefined,
+            ],
             Object {
-              "translateY": 50,
+              "bottom": undefined,
             },
           ],
-        }
+        ]
       }
+      testID="fab"
     >
+      <View
+        style={
+          Array [
+            Object {},
+            Array [
+              Object {
+                "alignItems": "center",
+                "height": 24,
+                "justifyContent": "center",
+                "width": 24,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        <HeroIcon
+          name="add"
+          style={
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontSize": 16,
+              },
+              Array [
+                Object {
+                  "color": "#ffffff",
+                  "lineHeight": 24,
+                  "textAlign": "center",
+                  "textAlignVertical": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="styled-fab-icon"
+          themeIntent="text"
+          themeSize="xsmall"
+        />
+      </View>
       <Text
         allowFontScaling={false}
         style={
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-SemiBold",
-              "fontSize": 24,
-              "letterSpacing": 0,
-              "lineHeight": 32,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
             },
             Array [
               Object {
-                "color": "#001f23",
-                "marginBottom": 24,
-                "marginRight": 24,
-                "textAlign": "right",
+                "color": "#ffffff",
+                "marginHorizontal": 8,
+                "textAlign": "center",
+                "textAlignVertical": "center",
               },
               undefined,
             ],
           ]
         }
-        testID="header-text"
         themeIntent="body"
-        themeLevel="h4"
         themeTypeface="neutral"
+        themeVariant="regular"
       >
-        What would you like to create?
+        Shout out
       </Text>
     </View>
+  </View>
+  <Modal
+    animationType="fade"
+    hardwareAccelerated={false}
+    statusBarTranslucent={true}
+    transparent={true}
+    visible={false}
+  />
+</View>
+`;
+
+exports[`ActionGroup has active true 1`] = `
+<View
+  pointerEvents="box-none"
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-end",
+        "bottom": 0,
+        "justifyContent": "flex-end",
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "opacity": 0,
+      }
+    }
+  >
     <View
+      accessible={true}
+      focusable={false}
+      onClick={[Function]}
+      onLayout={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         Array [
-          Object {},
+          Object {
+            "alignItems": "center",
+            "alignSelf": "flex-start",
+            "backgroundColor": "#33144d",
+            "borderRadius": 999,
+            "elevation": 2,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "padding": 20,
+            "shadowColor": "#001f23",
+            "shadowOffset": Object {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.12,
+            "shadowRadius": 8,
+          },
           Array [
-            undefined,
+            Array [
+              Object {
+                "alignSelf": "flex-end",
+                "marginRight": 24,
+                "marginTop": 24,
+              },
+              undefined,
+            ],
             Object {
-              "paddingBottom": 0,
+              "bottom": undefined,
             },
           ],
         ]
       }
+      testID="fab"
     >
       <View
-        collapsable={false}
         style={
-          Object {
-            "transform": Array [
+          Array [
+            Object {},
+            Array [
               Object {
-                "translateY": 50,
+                "alignItems": "center",
+                "height": 24,
+                "justifyContent": "center",
+                "width": 24,
               },
+              undefined,
             ],
-          }
+          ]
         }
       >
         <View
-          accessible={true}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+          collapsable={false}
           style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "alignSelf": "flex-end",
-                "backgroundColor": "#795e90",
-                "borderRadius": 999,
-                "flexDirection": "row",
-                "margin": 8,
-                "marginRight": 24,
-                "overflow": "hidden",
-                "padding": 12,
-              },
-              undefined,
-            ]
+            Object {
+              "transform": Array [
+                Object {
+                  "rotate": "-45deg",
+                },
+              ],
+            }
           }
-          testID="speaker-action-item"
         >
-          <View
+          <HeroIcon
+            name="add"
             style={
               Array [
-                Object {},
+                Object {
+                  "color": "#001f23",
+                  "fontSize": 16,
+                },
                 Array [
                   Object {
-                    "alignItems": "center",
-                    "height": 24,
-                    "justifyContent": "center",
-                    "width": 24,
+                    "color": "#ffffff",
+                    "lineHeight": 24,
+                    "textAlign": "center",
+                    "textAlignVertical": "center",
                   },
-                  undefined,
+                  Object {},
                 ],
               ]
             }
-          >
-            <HeroIcon
-              name="speaker"
-              style={
-                Array [
-                  Object {
-                    "color": "#001f23",
-                    "fontSize": 16,
-                  },
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                    },
-                    undefined,
-                  ],
-                ]
-              }
-              themeIntent="text"
-              themeSize="xsmall"
-            />
-          </View>
+            testID="animated-fab-icon"
+            themeIntent="text"
+            themeSize="xsmall"
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+  <Modal
+    animationType="fade"
+    hardwareAccelerated={false}
+    statusBarTranslucent={true}
+    transparent={true}
+    visible={true}
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-end",
+            "bottom": 0,
+            "justifyContent": "flex-end",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          Array [
+            undefined,
+          ],
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "backgroundColor": "#000000",
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0.25,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+        testID="back-drop"
+      />
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "alignItems": "flex-end",
+            "justifyContent": "flex-end",
+            "opacity": 1,
+            "width": "70%",
+          }
+        }
+        testID="action-group"
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "transform": Array [
+                Object {
+                  "translateY": 50,
+                },
+              ],
+            }
+          }
+        >
           <Text
             allowFontScaling={false}
             style={
               Array [
                 Object {
                   "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 24,
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 24,
+                  "letterSpacing": 0,
+                  "lineHeight": 32,
                 },
                 Array [
                   Object {
-                    "color": "#ffffff",
+                    "color": "#001f23",
+                    "marginBottom": 24,
+                    "marginRight": 24,
+                    "textAlign": "right",
                   },
                   undefined,
                 ],
               ]
             }
+            testID="header-text"
             themeIntent="body"
+            themeLevel="h4"
             themeTypeface="neutral"
-            themeVariant="regular"
           >
-            Give shout out
+            What would you like to create?
           </Text>
         </View>
-      </View>
-      <View
-        collapsable={false}
-        style={
-          Object {
-            "transform": Array [
-              Object {
-                "translateY": 50,
-              },
-            ],
-          }
-        }
-      >
         <View
-          accessible={true}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
             Array [
-              Object {
-                "alignItems": "center",
-                "alignSelf": "flex-end",
-                "backgroundColor": "#795e90",
-                "borderRadius": 999,
-                "flexDirection": "row",
-                "margin": 8,
-                "marginRight": 24,
-                "overflow": "hidden",
-                "padding": 12,
-              },
-              undefined,
+              Object {},
+              Array [
+                undefined,
+                Object {
+                  "paddingBottom": 0,
+                },
+              ],
             ]
           }
-          testID="target-action-item"
         >
           <View
+            collapsable={false}
             style={
-              Array [
-                Object {},
-                Array [
+              Object {
+                "transform": Array [
                   Object {
-                    "alignItems": "center",
-                    "height": 24,
-                    "justifyContent": "center",
-                    "width": 24,
+                    "translateY": 50,
                   },
-                  undefined,
                 ],
-              ]
+              }
             }
           >
-            <HeroIcon
-              name="target"
+            <View
+              accessible={true}
+              focusable={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 Array [
                   Object {
-                    "color": "#001f23",
-                    "fontSize": 16,
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "backgroundColor": "#795e90",
+                    "borderRadius": 999,
+                    "flexDirection": "row",
+                    "margin": 8,
+                    "marginRight": 24,
+                    "overflow": "hidden",
+                    "padding": 12,
                   },
+                  undefined,
+                ]
+              }
+              testID="speaker-action-item"
+            >
+              <View
+                style={
+                  Array [
+                    Object {},
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "height": 24,
+                        "justifyContent": "center",
+                        "width": 24,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+              >
+                <HeroIcon
+                  name="speaker"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#001f23",
+                        "fontSize": 16,
+                      },
+                      Array [
+                        Object {
+                          "color": "#ffffff",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                  themeIntent="text"
+                  themeSize="xsmall"
+                />
+              </View>
+              <Text
+                allowFontScaling={false}
+                style={
                   Array [
                     Object {
-                      "color": "#ffffff",
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
                     },
-                    undefined,
-                  ],
-                ]
-              }
-              themeIntent="text"
-              themeSize="xsmall"
-            />
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Give shout out
+              </Text>
+            </View>
           </View>
-          <Text
-            allowFontScaling={false}
+          <View
+            collapsable={false}
             style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 24,
-                },
-                Array [
+              Object {
+                "transform": Array [
                   Object {
-                    "color": "#ffffff",
+                    "translateY": 50,
                   },
-                  undefined,
                 ],
-              ]
+              }
             }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="regular"
           >
-            Goal
-          </Text>
-        </View>
-      </View>
-      <View
-        collapsable={false}
-        style={
-          Object {
-            "transform": Array [
-              Object {
-                "translateY": 50,
-              },
-            ],
-          }
-        }
-      >
-        <View
-          accessible={true}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "alignSelf": "flex-end",
-                "backgroundColor": "#795e90",
-                "borderRadius": 999,
-                "flexDirection": "row",
-                "margin": 8,
-                "marginRight": 24,
-                "overflow": "hidden",
-                "padding": 12,
-              },
-              undefined,
-            ]
-          }
-          testID="plane-action-item"
-        >
-          <View
-            style={
-              Array [
-                Object {},
+            <View
+              accessible={true}
+              focusable={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
                 Array [
                   Object {
                     "alignItems": "center",
-                    "height": 24,
-                    "justifyContent": "center",
-                    "width": 24,
+                    "alignSelf": "flex-end",
+                    "backgroundColor": "#795e90",
+                    "borderRadius": 999,
+                    "flexDirection": "row",
+                    "margin": 8,
+                    "marginRight": 24,
+                    "overflow": "hidden",
+                    "padding": 12,
                   },
                   undefined,
+                ]
+              }
+              testID="target-action-item"
+            >
+              <View
+                style={
+                  Array [
+                    Object {},
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "height": 24,
+                        "justifyContent": "center",
+                        "width": 24,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+              >
+                <HeroIcon
+                  name="target"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#001f23",
+                        "fontSize": 16,
+                      },
+                      Array [
+                        Object {
+                          "color": "#ffffff",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                  themeIntent="text"
+                  themeSize="xsmall"
+                />
+              </View>
+              <Text
+                allowFontScaling={false}
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Goal
+              </Text>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "transform": Array [
+                  Object {
+                    "translateY": 50,
+                  },
                 ],
-              ]
+              }
             }
           >
-            <HeroIcon
-              name="plane"
+            <View
+              accessible={true}
+              focusable={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 Array [
                   Object {
-                    "color": "#001f23",
-                    "fontSize": 16,
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "backgroundColor": "#795e90",
+                    "borderRadius": 999,
+                    "flexDirection": "row",
+                    "margin": 8,
+                    "marginRight": 24,
+                    "overflow": "hidden",
+                    "padding": 12,
                   },
+                  undefined,
+                ]
+              }
+              testID="plane-action-item"
+            >
+              <View
+                style={
+                  Array [
+                    Object {},
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "height": 24,
+                        "justifyContent": "center",
+                        "width": 24,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+              >
+                <HeroIcon
+                  name="plane"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#001f23",
+                        "fontSize": 16,
+                      },
+                      Array [
+                        Object {
+                          "color": "#ffffff",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                  themeIntent="text"
+                  themeSize="xsmall"
+                />
+              </View>
+              <Text
+                allowFontScaling={false}
+                style={
                   Array [
                     Object {
-                      "color": "#ffffff",
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
                     },
-                    undefined,
-                  ],
-                ]
-              }
-              themeIntent="text"
-              themeSize="xsmall"
-            />
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Leave request
+              </Text>
+            </View>
           </View>
-          <Text
-            allowFontScaling={false}
+          <View
+            collapsable={false}
             style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 24,
-                },
-                Array [
+              Object {
+                "transform": Array [
                   Object {
-                    "color": "#ffffff",
+                    "translateY": 50,
                   },
-                  undefined,
                 ],
-              ]
+              }
             }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="regular"
           >
-            Leave request
-          </Text>
-        </View>
-      </View>
-      <View
-        collapsable={false}
-        style={
-          Object {
-            "transform": Array [
-              Object {
-                "translateY": 50,
-              },
-            ],
-          }
-        }
-      >
-        <View
-          accessible={true}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "alignSelf": "flex-end",
-                "backgroundColor": "#795e90",
-                "borderRadius": 999,
-                "flexDirection": "row",
-                "margin": 8,
-                "marginRight": 24,
-                "overflow": "hidden",
-                "padding": 12,
-              },
-              undefined,
-            ]
-          }
-          testID="health-bag-action-item"
-        >
-          <View
-            style={
-              Array [
-                Object {},
+            <View
+              accessible={true}
+              focusable={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
                 Array [
                   Object {
                     "alignItems": "center",
-                    "height": 24,
-                    "justifyContent": "center",
-                    "width": 24,
+                    "alignSelf": "flex-end",
+                    "backgroundColor": "#795e90",
+                    "borderRadius": 999,
+                    "flexDirection": "row",
+                    "margin": 8,
+                    "marginRight": 24,
+                    "overflow": "hidden",
+                    "padding": 12,
                   },
                   undefined,
+                ]
+              }
+              testID="health-bag-action-item"
+            >
+              <View
+                style={
+                  Array [
+                    Object {},
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "height": 24,
+                        "justifyContent": "center",
+                        "width": 24,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+              >
+                <HeroIcon
+                  name="health-bag"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#001f23",
+                        "fontSize": 16,
+                      },
+                      Array [
+                        Object {
+                          "color": "#ffffff",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                  themeIntent="text"
+                  themeSize="xsmall"
+                />
+              </View>
+              <Text
+                allowFontScaling={false}
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Safety incident
+              </Text>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "transform": Array [
+                  Object {
+                    "translateY": 50,
+                  },
                 ],
-              ]
+              }
             }
           >
-            <HeroIcon
-              name="health-bag"
+            <View
+              accessible={true}
+              focusable={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 Array [
                   Object {
-                    "color": "#001f23",
-                    "fontSize": 16,
+                    "alignItems": "center",
+                    "alignSelf": "flex-end",
+                    "backgroundColor": "#795e90",
+                    "borderRadius": 999,
+                    "flexDirection": "row",
+                    "margin": 8,
+                    "marginRight": 24,
+                    "overflow": "hidden",
+                    "padding": 12,
                   },
+                  undefined,
+                ]
+              }
+              testID="clock-action-item"
+            >
+              <View
+                style={
+                  Array [
+                    Object {},
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "height": 24,
+                        "justifyContent": "center",
+                        "width": 24,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+              >
+                <HeroIcon
+                  name="clock"
+                  style={
+                    Array [
+                      Object {
+                        "color": "#001f23",
+                        "fontSize": 16,
+                      },
+                      Array [
+                        Object {
+                          "color": "#ffffff",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                  themeIntent="text"
+                  themeSize="xsmall"
+                />
+              </View>
+              <Text
+                allowFontScaling={false}
+                style={
                   Array [
                     Object {
-                      "color": "#ffffff",
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
                     },
-                    undefined,
-                  ],
-                ]
-              }
-              themeIntent="text"
-              themeSize="xsmall"
-            />
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Timesheets
+              </Text>
+            </View>
           </View>
-          <Text
-            allowFontScaling={false}
-            style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 24,
-                },
-                Array [
-                  Object {
-                    "color": "#ffffff",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="regular"
-          >
-            Safety incident
-          </Text>
         </View>
       </View>
       <View
-        collapsable={false}
+        accessible={true}
+        focusable={false}
+        onClick={[Function]}
+        onLayout={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "transform": Array [
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "flex-start",
+              "backgroundColor": "#33144d",
+              "borderRadius": 999,
+              "elevation": 2,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "padding": 20,
+              "shadowColor": "#001f23",
+              "shadowOffset": Object {
+                "height": 2,
+                "width": 0,
+              },
+              "shadowOpacity": 0.12,
+              "shadowRadius": 8,
+            },
+            Array [
+              Array [
+                Object {
+                  "alignSelf": "flex-end",
+                  "marginRight": 24,
+                  "marginTop": 24,
+                },
+                undefined,
+              ],
               Object {
-                "translateY": 50,
+                "bottom": undefined,
               },
             ],
-          }
+          ]
         }
+        testID="fab-in-portal"
       >
         <View
-          accessible={true}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
             Array [
-              Object {
-                "alignItems": "center",
-                "alignSelf": "flex-end",
-                "backgroundColor": "#795e90",
-                "borderRadius": 999,
-                "flexDirection": "row",
-                "margin": 8,
-                "marginRight": 24,
-                "overflow": "hidden",
-                "padding": 12,
-              },
-              undefined,
+              Object {},
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": 24,
+                  "justifyContent": "center",
+                  "width": 24,
+                },
+                undefined,
+              ],
             ]
           }
-          testID="clock-action-item"
         >
           <View
+            collapsable={false}
             style={
-              Array [
-                Object {},
-                Array [
+              Object {
+                "transform": Array [
                   Object {
-                    "alignItems": "center",
-                    "height": 24,
-                    "justifyContent": "center",
-                    "width": 24,
+                    "rotate": "-45deg",
                   },
-                  undefined,
                 ],
-              ]
+              }
             }
           >
             <HeroIcon
-              name="clock"
+              name="add"
               style={
                 Array [
                   Object {
@@ -581,882 +991,22 @@ exports[`ActionGroup has active false 1`] = `
                   Array [
                     Object {
                       "color": "#ffffff",
+                      "lineHeight": 24,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
                     },
-                    undefined,
+                    Object {},
                   ],
                 ]
               }
+              testID="animated-fab-icon"
               themeIntent="text"
               themeSize="xsmall"
             />
           </View>
-          <Text
-            allowFontScaling={false}
-            style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 24,
-                },
-                Array [
-                  Object {
-                    "color": "#ffffff",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="regular"
-          >
-            Timesheets
-          </Text>
         </View>
       </View>
     </View>
-  </View>
-  <View
-    accessible={true}
-    focusable={false}
-    onClick={[Function]}
-    onLayout={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "elevation": 2,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "padding": 20,
-          "shadowColor": "#001f23",
-          "shadowOffset": Object {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 0.12,
-          "shadowRadius": 8,
-        },
-        Array [
-          Array [
-            Object {
-              "alignSelf": "flex-end",
-              "marginRight": 24,
-              "marginTop": 24,
-            },
-            undefined,
-          ],
-          Object {
-            "bottom": undefined,
-          },
-        ],
-      ]
-    }
-    testID="fab"
-  >
-    <View
-      style={
-        Array [
-          Object {},
-          Array [
-            Object {
-              "alignItems": "center",
-              "height": 24,
-              "justifyContent": "center",
-              "width": 24,
-            },
-            undefined,
-          ],
-        ]
-      }
-    >
-      <HeroIcon
-        name="add"
-        style={
-          Array [
-            Object {
-              "color": "#001f23",
-              "fontSize": 16,
-            },
-            Array [
-              Object {
-                "color": "#ffffff",
-                "lineHeight": 24,
-                "textAlign": "center",
-                "textAlignVertical": "center",
-              },
-              undefined,
-            ],
-          ]
-        }
-        testID="styled-fab-icon"
-        themeIntent="text"
-        themeSize="xsmall"
-      />
-    </View>
-    <Text
-      allowFontScaling={false}
-      style={
-        Array [
-          Object {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
-            "letterSpacing": 0.48,
-            "lineHeight": 24,
-          },
-          Array [
-            Object {
-              "color": "#ffffff",
-              "marginHorizontal": 8,
-              "textAlign": "center",
-              "textAlignVertical": "center",
-            },
-            undefined,
-          ],
-        ]
-      }
-      themeIntent="body"
-      themeTypeface="neutral"
-      themeVariant="regular"
-    >
-      Shout out
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`ActionGroup has active true 1`] = `
-<View
-  pointerEvents="box-none"
-  style={
-    Array [
-      Object {
-        "alignItems": "flex-end",
-        "bottom": 0,
-        "justifyContent": "flex-end",
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      },
-      undefined,
-    ]
-  }
->
-  <View
-    collapsable={false}
-    pointerEvents="auto"
-    style={
-      Object {
-        "backgroundColor": "#000000",
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0.25,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-    testID="back-drop"
-  />
-  <View
-    collapsable={false}
-    pointerEvents="auto"
-    style={
-      Object {
-        "alignItems": "flex-end",
-        "justifyContent": "flex-end",
-        "opacity": 1,
-        "width": "70%",
-      }
-    }
-    testID="action-group"
-  >
-    <View
-      collapsable={false}
-      style={
-        Object {
-          "transform": Array [
-            Object {
-              "translateY": 50,
-            },
-          ],
-        }
-      }
-    >
-      <Text
-        allowFontScaling={false}
-        style={
-          Array [
-            Object {
-              "color": "#001f23",
-              "fontFamily": "BeVietnamPro-SemiBold",
-              "fontSize": 24,
-              "letterSpacing": 0,
-              "lineHeight": 32,
-            },
-            Array [
-              Object {
-                "color": "#001f23",
-                "marginBottom": 24,
-                "marginRight": 24,
-                "textAlign": "right",
-              },
-              undefined,
-            ],
-          ]
-        }
-        testID="header-text"
-        themeIntent="body"
-        themeLevel="h4"
-        themeTypeface="neutral"
-      >
-        What would you like to create?
-      </Text>
-    </View>
-    <View
-      style={
-        Array [
-          Object {},
-          Array [
-            undefined,
-            Object {
-              "paddingBottom": 0,
-            },
-          ],
-        ]
-      }
-    >
-      <View
-        collapsable={false}
-        style={
-          Object {
-            "transform": Array [
-              Object {
-                "translateY": 50,
-              },
-            ],
-          }
-        }
-      >
-        <View
-          accessible={true}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "alignSelf": "flex-end",
-                "backgroundColor": "#795e90",
-                "borderRadius": 999,
-                "flexDirection": "row",
-                "margin": 8,
-                "marginRight": 24,
-                "overflow": "hidden",
-                "padding": 12,
-              },
-              undefined,
-            ]
-          }
-          testID="speaker-action-item"
-        >
-          <View
-            style={
-              Array [
-                Object {},
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "height": 24,
-                    "justifyContent": "center",
-                    "width": 24,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-          >
-            <HeroIcon
-              name="speaker"
-              style={
-                Array [
-                  Object {
-                    "color": "#001f23",
-                    "fontSize": 16,
-                  },
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                    },
-                    undefined,
-                  ],
-                ]
-              }
-              themeIntent="text"
-              themeSize="xsmall"
-            />
-          </View>
-          <Text
-            allowFontScaling={false}
-            style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 24,
-                },
-                Array [
-                  Object {
-                    "color": "#ffffff",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="regular"
-          >
-            Give shout out
-          </Text>
-        </View>
-      </View>
-      <View
-        collapsable={false}
-        style={
-          Object {
-            "transform": Array [
-              Object {
-                "translateY": 50,
-              },
-            ],
-          }
-        }
-      >
-        <View
-          accessible={true}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "alignSelf": "flex-end",
-                "backgroundColor": "#795e90",
-                "borderRadius": 999,
-                "flexDirection": "row",
-                "margin": 8,
-                "marginRight": 24,
-                "overflow": "hidden",
-                "padding": 12,
-              },
-              undefined,
-            ]
-          }
-          testID="target-action-item"
-        >
-          <View
-            style={
-              Array [
-                Object {},
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "height": 24,
-                    "justifyContent": "center",
-                    "width": 24,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-          >
-            <HeroIcon
-              name="target"
-              style={
-                Array [
-                  Object {
-                    "color": "#001f23",
-                    "fontSize": 16,
-                  },
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                    },
-                    undefined,
-                  ],
-                ]
-              }
-              themeIntent="text"
-              themeSize="xsmall"
-            />
-          </View>
-          <Text
-            allowFontScaling={false}
-            style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 24,
-                },
-                Array [
-                  Object {
-                    "color": "#ffffff",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="regular"
-          >
-            Goal
-          </Text>
-        </View>
-      </View>
-      <View
-        collapsable={false}
-        style={
-          Object {
-            "transform": Array [
-              Object {
-                "translateY": 50,
-              },
-            ],
-          }
-        }
-      >
-        <View
-          accessible={true}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "alignSelf": "flex-end",
-                "backgroundColor": "#795e90",
-                "borderRadius": 999,
-                "flexDirection": "row",
-                "margin": 8,
-                "marginRight": 24,
-                "overflow": "hidden",
-                "padding": 12,
-              },
-              undefined,
-            ]
-          }
-          testID="plane-action-item"
-        >
-          <View
-            style={
-              Array [
-                Object {},
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "height": 24,
-                    "justifyContent": "center",
-                    "width": 24,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-          >
-            <HeroIcon
-              name="plane"
-              style={
-                Array [
-                  Object {
-                    "color": "#001f23",
-                    "fontSize": 16,
-                  },
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                    },
-                    undefined,
-                  ],
-                ]
-              }
-              themeIntent="text"
-              themeSize="xsmall"
-            />
-          </View>
-          <Text
-            allowFontScaling={false}
-            style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 24,
-                },
-                Array [
-                  Object {
-                    "color": "#ffffff",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="regular"
-          >
-            Leave request
-          </Text>
-        </View>
-      </View>
-      <View
-        collapsable={false}
-        style={
-          Object {
-            "transform": Array [
-              Object {
-                "translateY": 50,
-              },
-            ],
-          }
-        }
-      >
-        <View
-          accessible={true}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "alignSelf": "flex-end",
-                "backgroundColor": "#795e90",
-                "borderRadius": 999,
-                "flexDirection": "row",
-                "margin": 8,
-                "marginRight": 24,
-                "overflow": "hidden",
-                "padding": 12,
-              },
-              undefined,
-            ]
-          }
-          testID="health-bag-action-item"
-        >
-          <View
-            style={
-              Array [
-                Object {},
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "height": 24,
-                    "justifyContent": "center",
-                    "width": 24,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-          >
-            <HeroIcon
-              name="health-bag"
-              style={
-                Array [
-                  Object {
-                    "color": "#001f23",
-                    "fontSize": 16,
-                  },
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                    },
-                    undefined,
-                  ],
-                ]
-              }
-              themeIntent="text"
-              themeSize="xsmall"
-            />
-          </View>
-          <Text
-            allowFontScaling={false}
-            style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 24,
-                },
-                Array [
-                  Object {
-                    "color": "#ffffff",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="regular"
-          >
-            Safety incident
-          </Text>
-        </View>
-      </View>
-      <View
-        collapsable={false}
-        style={
-          Object {
-            "transform": Array [
-              Object {
-                "translateY": 50,
-              },
-            ],
-          }
-        }
-      >
-        <View
-          accessible={true}
-          focusable={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "alignSelf": "flex-end",
-                "backgroundColor": "#795e90",
-                "borderRadius": 999,
-                "flexDirection": "row",
-                "margin": 8,
-                "marginRight": 24,
-                "overflow": "hidden",
-                "padding": 12,
-              },
-              undefined,
-            ]
-          }
-          testID="clock-action-item"
-        >
-          <View
-            style={
-              Array [
-                Object {},
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "height": 24,
-                    "justifyContent": "center",
-                    "width": 24,
-                  },
-                  undefined,
-                ],
-              ]
-            }
-          >
-            <HeroIcon
-              name="clock"
-              style={
-                Array [
-                  Object {
-                    "color": "#001f23",
-                    "fontSize": 16,
-                  },
-                  Array [
-                    Object {
-                      "color": "#ffffff",
-                    },
-                    undefined,
-                  ],
-                ]
-              }
-              themeIntent="text"
-              themeSize="xsmall"
-            />
-          </View>
-          <Text
-            allowFontScaling={false}
-            style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 24,
-                },
-                Array [
-                  Object {
-                    "color": "#ffffff",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            themeIntent="body"
-            themeTypeface="neutral"
-            themeVariant="regular"
-          >
-            Timesheets
-          </Text>
-        </View>
-      </View>
-    </View>
-  </View>
-  <View
-    accessible={true}
-    focusable={false}
-    onClick={[Function]}
-    onLayout={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "backgroundColor": "#33144d",
-          "borderRadius": 999,
-          "elevation": 2,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "padding": 20,
-          "shadowColor": "#001f23",
-          "shadowOffset": Object {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 0.12,
-          "shadowRadius": 8,
-        },
-        Array [
-          Array [
-            Object {
-              "alignSelf": "flex-end",
-              "marginRight": 24,
-              "marginTop": 24,
-            },
-            undefined,
-          ],
-          Object {
-            "bottom": undefined,
-          },
-        ],
-      ]
-    }
-    testID="fab"
-  >
-    <View
-      style={
-        Array [
-          Object {},
-          Array [
-            Object {
-              "alignItems": "center",
-              "height": 24,
-              "justifyContent": "center",
-              "width": 24,
-            },
-            undefined,
-          ],
-        ]
-      }
-    >
-      <View
-        collapsable={false}
-        style={
-          Object {
-            "transform": Array [
-              Object {
-                "rotate": "-45deg",
-              },
-            ],
-          }
-        }
-      >
-        <HeroIcon
-          name="add"
-          style={
-            Array [
-              Object {
-                "color": "#001f23",
-                "fontSize": 16,
-              },
-              Array [
-                Object {
-                  "color": "#ffffff",
-                  "lineHeight": 24,
-                  "textAlign": "center",
-                  "textAlignVertical": "center",
-                },
-                Object {},
-              ],
-            ]
-          }
-          testID="animated-fab-icon"
-          themeIntent="text"
-          themeSize="xsmall"
-        />
-      </View>
-    </View>
-  </View>
+  </Modal>
 </View>
 `;