Allow specifying of selectedButtonStyle in button group (#790)

* Allow specifying of selectedButtonStyle in button group Since we want to allow the overwriting of styles for selected button without the need of custom logic. This commit allows that behavior by introducing a new property - selectedButtonStyle. Also include the change in the docs * Deprecate selectedBackgroundColor in favor of style option in button group
react-native-elements · Dec 24, 2017 · c9ed08b · c9ed08b
1 parent 8d7d2af
commit c9ed08b
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 19 deletions.
diff --git a/docs/API/button_group.md b/docs/API/button_group.md
@@ -77,7 +77,7 @@ render () {
 | component | TouchableHighlight | React Native Component | Choose other button component such as TouchableOpacity (optional) |
 | containerStyle | inherited styling | object (style) | specify styling for main button container (optional) |
 | buttonStyle | inherited styling | object (style) | specify styling for button (optional) |
-| selectedBackgroundColor | white | string | specify color for selected state of button (optional) |
+| selectedButtonStyle | inherited styling | object (style) | specify styling for selected button (optional) |
 | containerBorderRadius | 3 | number | Set's the border radius for the first and last button in the button group |
 | textStyle | inherited styling | object (style) | specify specific styling for text (optional) |
 | selectedTextStyle | inherited styling | object (style) | specify specific styling for text in the selected state (optional)|

diff --git a/src/buttons/ButtonGroup.js b/src/buttons/ButtonGroup.js
@@ -24,7 +24,7 @@ const ButtonGroup = props => {
     buttonStyle,
     textStyle,
     selectedTextStyle,
-    selectedBackgroundColor,
+    selectedButtonStyle,
     underlayColor,
     activeOpacity,
     onHideUnderlay,
@@ -83,23 +83,33 @@ const ButtonGroup = props => {
                 borderBottomLeftRadius: containerRadius,
               },
               selectedIndex === i && {
-                backgroundColor: selectedBackgroundColor || 'white',
+                backgroundColor: 'white',
               },
             ]}
           >
-            <View style={[styles.textContainer, buttonStyle && buttonStyle]}>
-              {button.element
-                ? <button.element />
-                : <Text
-                    style={[
-                      styles.buttonText,
-                      textStyle && textStyle,
-                      selectedIndex === i && { color: colors.grey1 },
-                      selectedIndex === i && selectedTextStyle,
-                    ]}
-                  >
-                    {button}
-                  </Text>}
+            <View
+              style={[
+                styles.textContainer,
+                buttonStyle && buttonStyle,
+                selectedIndex === i &&
+                  selectedButtonStyle &&
+                  selectedButtonStyle,
+              ]}
+            >
+              {button.element ? (
+                <button.element />
+              ) : (
+                <Text
+                  style={[
+                    styles.buttonText,
+                    textStyle && textStyle,
+                    selectedIndex === i && { color: colors.grey1 },
+                    selectedIndex === i && selectedTextStyle,
+                  ]}
+                >
+                  {button}
+                </Text>
+              )}
             </View>
           </Component>
         );
@@ -149,6 +159,7 @@ ButtonGroup.propTypes = {
   containerStyle: ViewPropTypes.style,
   textStyle: NativeText.propTypes.style,
   selectedTextStyle: NativeText.propTypes.style,
+  selectedButtonStyle: ViewPropTypes.style,
   underlayColor: PropTypes.string,
   selectedIndex: PropTypes.number,
   activeOpacity: PropTypes.number,
@@ -164,7 +175,6 @@ ButtonGroup.propTypes = {
     NativeText.propTypes.style,
   ]),
   buttonStyle: ViewPropTypes.style,
-  selectedBackgroundColor: PropTypes.string,
   containerBorderRadius: PropTypes.number,
   disableSelected: PropTypes.bool,
 };

diff --git a/src/buttons/__tests__/ButtonGroup.js b/src/buttons/__tests__/ButtonGroup.js
@@ -34,7 +34,7 @@ describe('ButtonGroup Component', () => {
       <ButtonGroup
         buttons={buttons}
         selectedIndex={1}
-        selectedBackgroundColor="red"
+        selectedButtonStyle={{ backgroundColor: 'red' }}
         selectedTextStyle={{ fontSize: 12 }}
       />
     );

diff --git a/src/buttons/__tests__/__snapshots__/ButtonGroup.js.snap b/src/buttons/__tests__/__snapshots__/ButtonGroup.js.snap
@@ -58,6 +58,7 @@ exports[`ButtonGroup Component should have onPress event 1`] = `
           Object {
             "backgroundColor": "blue",
           },
+          false,
         ]
       }
     >
@@ -114,6 +115,7 @@ exports[`ButtonGroup Component should have onPress event 1`] = `
           Object {
             "backgroundColor": "blue",
           },
+          false,
         ]
       }
     >
@@ -167,6 +169,7 @@ exports[`ButtonGroup Component should have onPress event 1`] = `
           Object {
             "backgroundColor": "blue",
           },
+          false,
         ]
       }
     >
@@ -245,6 +248,7 @@ exports[`ButtonGroup Component should render lastButtonStyle 1`] = `
             "justifyContent": "center",
           },
           undefined,
+          false,
         ]
       }
     >
@@ -299,6 +303,7 @@ exports[`ButtonGroup Component should render lastButtonStyle 1`] = `
             "justifyContent": "center",
           },
           undefined,
+          false,
         ]
       }
     >
@@ -351,6 +356,7 @@ exports[`ButtonGroup Component should render lastButtonStyle 1`] = `
             "justifyContent": "center",
           },
           undefined,
+          false,
         ]
       }
     >
@@ -429,6 +435,7 @@ exports[`ButtonGroup Component should render selectedIndex 1`] = `
             "justifyContent": "center",
           },
           undefined,
+          false,
         ]
       }
     >
@@ -470,7 +477,7 @@ exports[`ButtonGroup Component should render selectedIndex 1`] = `
         false,
         false,
         Object {
-          "backgroundColor": "red",
+          "backgroundColor": "white",
         },
       ]
     }
@@ -485,6 +492,9 @@ exports[`ButtonGroup Component should render selectedIndex 1`] = `
             "justifyContent": "center",
           },
           undefined,
+          Object {
+            "backgroundColor": "red",
+          },
         ]
       }
     >
@@ -540,6 +550,7 @@ exports[`ButtonGroup Component should render selectedIndex 1`] = `
             "justifyContent": "center",
           },
           undefined,
+          false,
         ]
       }
     >
@@ -618,6 +629,7 @@ exports[`ButtonGroup Component should render with button.element 1`] = `
             "justifyContent": "center",
           },
           undefined,
+          false,
         ]
       }
     >
@@ -657,6 +669,7 @@ exports[`ButtonGroup Component should render with button.element 1`] = `
             "justifyContent": "center",
           },
           undefined,
+          false,
         ]
       }
     >
@@ -720,6 +733,7 @@ exports[`ButtonGroup Component should render without issues 1`] = `
             "justifyContent": "center",
           },
           undefined,
+          false,
         ]
       }
     >
@@ -774,6 +788,7 @@ exports[`ButtonGroup Component should render without issues 1`] = `
             "justifyContent": "center",
           },
           undefined,
+          false,
         ]
       }
     >
@@ -825,6 +840,7 @@ exports[`ButtonGroup Component should render without issues 1`] = `
             "justifyContent": "center",
           },
           undefined,
+          false,
         ]
       }
     >