@hero-design/rn 7.13.0 → 7.14.1

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

@@ -24,7 +24,7 @@ exports[`ActionGroup has active false 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#ffffff",
+        "backgroundColor": "#292a2b",
         "bottom": 0,
         "left": 0,
         "opacity": 0,
@@ -66,6 +66,7 @@ exports[`ActionGroup has active false 1`] = `
           },
           Array [
             Object {
+              "color": "#ffffff",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 24,
               "lineHeight": 32,
@@ -101,7 +102,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#d1d9fe",
+            "backgroundColor": "#4d6265",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -124,7 +125,12 @@ exports[`ActionGroup has active false 1`] = `
                 "color": "#292a2b",
                 "fontSize": 24,
               },
-              undefined,
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -142,6 +148,7 @@ exports[`ActionGroup has active false 1`] = `
               },
               Array [
                 Object {
+                  "color": "#ffffff",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 14,
                   "lineHeight": 22,
@@ -174,7 +181,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#d1d9fe",
+            "backgroundColor": "#4d6265",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -197,7 +204,12 @@ exports[`ActionGroup has active false 1`] = `
                 "color": "#292a2b",
                 "fontSize": 24,
               },
-              undefined,
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -215,6 +227,7 @@ exports[`ActionGroup has active false 1`] = `
               },
               Array [
                 Object {
+                  "color": "#ffffff",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 14,
                   "lineHeight": 22,
@@ -247,7 +260,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#d1d9fe",
+            "backgroundColor": "#4d6265",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -270,7 +283,12 @@ exports[`ActionGroup has active false 1`] = `
                 "color": "#292a2b",
                 "fontSize": 24,
               },
-              undefined,
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -288,6 +306,7 @@ exports[`ActionGroup has active false 1`] = `
               },
               Array [
                 Object {
+                  "color": "#ffffff",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 14,
                   "lineHeight": 22,
@@ -320,7 +339,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#d1d9fe",
+            "backgroundColor": "#4d6265",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -343,7 +362,12 @@ exports[`ActionGroup has active false 1`] = `
                 "color": "#292a2b",
                 "fontSize": 24,
               },
-              undefined,
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -361,6 +385,7 @@ exports[`ActionGroup has active false 1`] = `
               },
               Array [
                 Object {
+                  "color": "#ffffff",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 14,
                   "lineHeight": 22,
@@ -393,7 +418,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#d1d9fe",
+            "backgroundColor": "#4d6265",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -416,7 +441,12 @@ exports[`ActionGroup has active false 1`] = `
                 "color": "#292a2b",
                 "fontSize": 24,
               },
-              undefined,
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -434,6 +464,7 @@ exports[`ActionGroup has active false 1`] = `
               },
               Array [
                 Object {
+                  "color": "#ffffff",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 14,
                   "lineHeight": 22,
@@ -556,7 +587,7 @@ exports[`ActionGroup has active true 1`] = `
     pointerEvents="auto"
     style={
       Object {
-        "backgroundColor": "#ffffff",
+        "backgroundColor": "#292a2b",
         "bottom": 0,
         "left": 0,
         "opacity": 0.9,
@@ -598,6 +629,7 @@ exports[`ActionGroup has active true 1`] = `
           },
           Array [
             Object {
+              "color": "#ffffff",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 24,
               "lineHeight": 32,
@@ -633,7 +665,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#d1d9fe",
+            "backgroundColor": "#4d6265",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -656,7 +688,12 @@ exports[`ActionGroup has active true 1`] = `
                 "color": "#292a2b",
                 "fontSize": 24,
               },
-              undefined,
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -674,6 +711,7 @@ exports[`ActionGroup has active true 1`] = `
               },
               Array [
                 Object {
+                  "color": "#ffffff",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 14,
                   "lineHeight": 22,
@@ -706,7 +744,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#d1d9fe",
+            "backgroundColor": "#4d6265",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -729,7 +767,12 @@ exports[`ActionGroup has active true 1`] = `
                 "color": "#292a2b",
                 "fontSize": 24,
               },
-              undefined,
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -747,6 +790,7 @@ exports[`ActionGroup has active true 1`] = `
               },
               Array [
                 Object {
+                  "color": "#ffffff",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 14,
                   "lineHeight": 22,
@@ -779,7 +823,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#d1d9fe",
+            "backgroundColor": "#4d6265",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -802,7 +846,12 @@ exports[`ActionGroup has active true 1`] = `
                 "color": "#292a2b",
                 "fontSize": 24,
               },
-              undefined,
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -820,6 +869,7 @@ exports[`ActionGroup has active true 1`] = `
               },
               Array [
                 Object {
+                  "color": "#ffffff",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 14,
                   "lineHeight": 22,
@@ -852,7 +902,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#d1d9fe",
+            "backgroundColor": "#4d6265",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -875,7 +925,12 @@ exports[`ActionGroup has active true 1`] = `
                 "color": "#292a2b",
                 "fontSize": 24,
               },
-              undefined,
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -893,6 +948,7 @@ exports[`ActionGroup has active true 1`] = `
               },
               Array [
                 Object {
+                  "color": "#ffffff",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 14,
                   "lineHeight": 22,
@@ -925,7 +981,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#d1d9fe",
+            "backgroundColor": "#4d6265",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -948,7 +1004,12 @@ exports[`ActionGroup has active true 1`] = `
                 "color": "#292a2b",
                 "fontSize": 24,
               },
-              undefined,
+              Array [
+                Object {
+                  "color": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -966,6 +1027,7 @@ exports[`ActionGroup has active true 1`] = `
               },
               Array [
                 Object {
+                  "color": "#ffffff",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 14,
                   "lineHeight": 22,

package/src/components/FAB/ActionGroup/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, View, StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../../Icon';
 import ActionItem, { ActionItemProps } from './ActionItem';
 import {
   StyledBackdrop,
@@ -45,6 +46,11 @@ export interface ActionGroupProps {
    */
   fabTitle?: string;
 
+  /**
+   * Icon name of the floating action button
+   */
+  fabIcon?: IconName;
+
   /**
    * Additional style.
    */
@@ -69,6 +75,7 @@ const ActionGroup = ({
   items,
   testID,
   fabTitle,
+  fabIcon = 'add',
 }: ActionGroupProps) => {
   const tranlateXAnimation = useRef<Animated.Value>(
     new Animated.Value(active ? 1 : 0)
@@ -126,7 +133,7 @@ const ActionGroup = ({
       </StyledActionGroupContainer>
       <StyledFAB
         testID="fab"
-        icon="add"
+        icon={fabIcon}
         onPress={onPress}
         animated
         active={active}