[BPK-1043] Remove selected button state

And also examples of buttons with both text and icon.

changelog.md

@@ -2,7 +2,9 @@
 
 ## UNRELEASED
 
-_Nothing yet..._
+**Breaking:**
+- react-native-bpk-component-button
+ - The `selected` state has been removed. Buttons using `selected` will fall back and become standard buttons.
 
 ## 2017-10-10 - React Native button components can now be themed
 

native/packages/react-native-bpk-component-button/readme.md

@@ -44,11 +44,9 @@ export default class App extends Component {
       <View style={styles.container}>
         <BpkButton type="primary" title={translationHelper.translate('BOOK_FLIGHT')} onPress={() => {}} />
         <BpkButton type="featured" title={translationHelper.translate('BOOK_FLIGHT')} onPress={() => {}} />
-        <BpkButton selected type="secondary" title={translationHelper.translate('BOOK_FLIGHT')} onPress={() => {}} />
         <BpkButton disabled type="destructive" title={translationHelper.translate('BOOK_FLIGHT')} onPress={() => {}} />
         <BpkButton large type="primary" title={translationHelper.translate('BOOK_FLIGHT')} onPress={() => {}} />
 
-        <BpkButton type="primary" title={translationHelper.translate('BOOK_FLIGHT')} icon={ArrowImage} onPress={() => {}} />
         <BpkButton type="featured" title={translationHelper.translate('BOOK_FLIGHT')} icon={ArrowImage} iconOnly onPress={() => {}} />
       </View>
     );
@@ -67,5 +65,4 @@ export default class App extends Component {
 | icon                  | element                                                   | false    | null          |
 | iconOnly              | bool                                                      | false    | false         |
 | large                 | bool                                                      | false    | false         |
-| selected              | bool                                                      | false    | false         |
 | type                  | oneOf('primary', 'featured', 'secondary', 'destructive')  | false    | null          |

native/packages/react-native-bpk-component-button/src/BpkButton-styles.js

@@ -116,14 +116,6 @@ const modifiers = {
       paddingRight: tokens.spacingBase - buttonBorderWidth,
     },
   }),
-  selected: StyleSheet.create({
-    text: {
-      color: tokens.colorWhite,
-    },
-    button: {
-      borderColor: 'transparent',
-    },
-  }),
   disabled: StyleSheet.create({
     button: {
       borderColor: 'transparent',
@@ -165,7 +157,6 @@ const gradientColors = {
   featured: ['rgb(250, 72, 138)', 'rgb(217, 43, 107)'], // TODO [tokens.colorPink500, tokens.colorPink600]
   destructive: [tokens.colorWhite, tokens.colorWhite],
   secondary: [tokens.colorWhite, tokens.colorWhite],
-  selected: [tokens.colorBlue600, tokens.colorBlue700],
   disabled: [tokens.colorGray100, tokens.colorGray100],
 };
 

native/packages/react-native-bpk-component-button/src/BpkButton-test.common.js

@@ -49,12 +49,6 @@ const commonTests = () => {
       expect(tree).toMatchSnapshot();
     });
 
-    it('should support the "selected" property', () => {
-      const tree = renderer.create(
-        <BpkButton selected title="Lorem ipsum" onPress={onPressFn} />,
-      ).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
     it('should support the "iconOnly" and "large" property', () => {
       const tree = renderer.create(
         <BpkButton iconOnly large icon title="Lorem ipsum" onPress={onPressFn} />,

native/packages/react-native-bpk-component-button/src/BpkButton.js

@@ -45,7 +45,7 @@
  };
  const THEMEABLE_TYPES = Object.keys(REQUIRED_THEME_ATTRIBUTES);
 
- const getStyleForElement = (elementType, { type, title, icon, iconOnly, selected, large, disabled }) => {
+ const getStyleForElement = (elementType, { type, title, icon, iconOnly, large, disabled }) => {
    // Start with base style.
    const styleForElement = [styles.base[elementType]];
 
@@ -62,9 +62,7 @@
      }
      styleForElement.push(styles.modifiers[largeModifier][elementType]);
    }
-   if (selected) {
-     styleForElement.push(styles.modifiers.selected[elementType]);
-   }
+
    if (disabled) {
      styleForElement.push(styles.modifiers.disabled[elementType]);
    }
@@ -79,9 +77,9 @@
    return styleForElement;
  };
 
- const getThemingForElement = (elementType, theme, { type, selected, disabled }) => {
+ const getThemingForElement = (elementType, theme, { type, disabled }) => {
    const themeForElement = {};
-   if (theme && !selected && !disabled && styles.themeMappings[elementType]) {
+   if (theme && !disabled && styles.themeMappings[elementType]) {
      Object.keys(styles.themeMappings[elementType]).forEach((key) => {
        const values = styles.themeMappings[elementType][key];
        if (values[type]) {
@@ -92,17 +90,14 @@
    return themeForElement;
  };
 
- const getGradientColors = (theme, { type, disabled, selected }) => {
+ const getGradientColors = (theme, { type, disabled }) => {
    let gradientColors = styles.gradientColors[type];
 
    if (theme) {
      const gradientThemeProps = styles.themeMappings.gradient[type];
      gradientColors = [theme[gradientThemeProps.startColor], theme[gradientThemeProps.endColor]];
    }
 
-   if (selected) {
-     gradientColors = styles.gradientColors.selected;
-   }
    if (disabled) {
      gradientColors = styles.gradientColors.disabled;
    }
@@ -144,7 +139,6 @@
      onPress,
      large,
      disabled,
-     selected,
      accessibilityLabel,
      style,
      ...rest
@@ -179,7 +173,6 @@
        <TouchableHighlight
          style={[getStyleForElement('button', props), getThemingForElement('button', theme, props)]}
          disabled={disabled}
-         selected={selected}
          onPress={onPress}
          underlayColor={styles.underlayColor}
          accessibilityComponentType="button"
@@ -212,7 +205,6 @@
    type: PropTypes.oneOf(BUTTON_TYPES),
    large: PropTypes.bool,
    disabled: PropTypes.bool,
-   selected: PropTypes.bool,
    accessibilityLabel: PropTypes.string,
    style: View.propTypes.style,
    theme: themePropType,
@@ -226,7 +218,6 @@
    type: 'primary',
    large: false,
    disabled: false,
-   selected: false,
    accessibilityLabel: null,
    style: null,
    theme: null,

native/packages/react-native-bpk-component-button/src/__snapshots__/BpkButton-test.android.js.snap

@@ -1545,129 +1545,6 @@ exports[`Android BpkButton should support the "large" property 1`] = `
 </BVLinearGradient>
 `;
 
-exports[`Android BpkButton should support the "selected" property 1`] = `
-<BVLinearGradient
-  colors={
-    Array [
-      -16736835,
-      -16741208,
-    ]
-  }
-  end={undefined}
-  locations={null}
-  start={undefined}
-  style={
-    Array [
-      Array [
-        Object {
-          "borderRadius": 40,
-          "height": 32,
-        },
-        undefined,
-      ],
-      null,
-    ]
-  }
->
-  <View
-    accessibilityComponentType="button"
-    accessibilityLabel="Lorem ipsum"
-    accessibilityTraits={
-      Array [
-        "button",
-      ]
-    }
-    accessible={true}
-    hasTVPreferredFocus={undefined}
-    hitSlop={undefined}
-    isTVSelectable={true}
-    nativeID={undefined}
-    onLayout={undefined}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Array [
-        Object {
-          "backgroundColor": "transparent",
-        },
-        Array [
-          Array [
-            Object {
-              "borderRadius": 40,
-              "height": 32,
-              "paddingBottom": 8,
-              "paddingLeft": 12,
-              "paddingRight": 12,
-              "paddingTop": 8,
-            },
-            Object {
-              "borderColor": "transparent",
-            },
-          ],
-          Object {},
-        ],
-      ]
-    }
-    testID={undefined}
-    tvParallaxProperties={undefined}
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "center",
-            "flex": 1,
-            "flexDirection": "row",
-            "justifyContent": "center",
-          },
-          undefined,
-        ]
-      }
-    >
-      <Text
-        accessible={true}
-        allowFontScaling={true}
-        disabled={false}
-        ellipsizeMode="tail"
-        style={
-          Array [
-            Object {
-              "color": "rgb(82, 76, 97)",
-              "fontFamily": "sans-serif",
-              "fontSize": 14,
-              "fontWeight": "400",
-              "lineHeight": 20,
-            },
-            Object {
-              "fontFamily": "sans-serif-medium",
-              "fontWeight": "500",
-            },
-            Array [
-              Array [
-                Object {
-                  "backgroundColor": "transparent",
-                  "color": "rgb(255, 255, 255)",
-                },
-                Object {
-                  "color": "rgb(255, 255, 255)",
-                },
-              ],
-              Object {},
-            ],
-          ]
-        }
-      >
-        Lorem ipsum
-      </Text>
-    </View>
-  </View>
-</BVLinearGradient>
-`;
-
 exports[`Android BpkButtonThemed should render correctly 1`] = `
 <BVLinearGradient
   colors={