feat: Styling of labels in FAB.Group (#2894)

callstack · Nov 3, 2021 · 656d652 · 656d652
1 parent 50ccce0
commit 656d652
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx
@@ -23,16 +23,20 @@ type Props = {
    * - `label`: optional label text
    * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified
    * - `color`: custom icon color of the action item
+   * - `labelTextColor`: custom label text color of the action item
    * - `style`: pass additional styles for the fab item, for example, `backgroundColor`
+   * - `labelStyle`: pass additional styles for the fab item label, for example, `backgroundColor`
    * - `small`: boolean describing whether small or normal sized FAB is rendered. Defaults to `true`
    * - `onPress`: callback that is called when `FAB` is pressed (required)
    */
   actions: Array<{
     icon: IconSource;
     label?: string;
     color?: string;
+    labelTextColor?: string;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<ViewStyle>;
     small?: boolean;
     onPress: () => void;
     testID?: string;
@@ -292,6 +296,7 @@ const FABGroup = ({
                           transform: [{ scale: scales[i] }],
                           opacity: opacities[i],
                         },
+                        it.labelStyle,
                       ] as StyleProp<ViewStyle>
                     }
                     onPress={() => {
@@ -308,7 +313,9 @@ const FABGroup = ({
                     accessibilityComponentType="button"
                     accessibilityRole="button"
                   >
-                    <Text style={{ color: labelColor }}>{it.label}</Text>
+                    <Text style={{ color: it.labelTextColor ?? labelColor }}>
+                      {it.label}
+                    </Text>
                   </Card>
                 </View>
               )}