Button - add hyperlink (#1671)

* Button - add hyperlink

* link to isLink

Author: M-i-k-e-l

demo/src/screens/componentScreens/ButtonsScreen.tsx

@@ -383,6 +383,12 @@ export default class ButtonsScreen extends Component {
               style={{marginBottom: ButtonSpace}}
             />
 
+            <Button
+              label="hyperlink button"
+              hyperlink
+              style={{marginBottom: ButtonSpace}}
+            />
+
             <Button label="Icon on right" iconSource={plusIcon} iconOnRight />
           </View>
 

generatedTypes/src/components/button/ButtonTypes.d.ts

@@ -80,7 +80,11 @@ export declare type ButtonProps = TouchableOpacityProps & TypographyModifiers &
      */
     link?: boolean;
     /**
-     * label color for when it's displayed as link
+     * Button will look like a hyperlink
+     */
+    hyperlink?: boolean;
+    /**
+     * label color for when it's displayed as link or hyperlink
      */
     linkColor?: string;
     /**

generatedTypes/src/components/button/index.d.ts

@@ -156,6 +156,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
     componentDidUpdate(prevProps: Props): void;
     onLayout: (event: LayoutChangeEvent) => void;
     get isOutline(): boolean;
+    get isLink(): boolean | undefined;
     get isFilled(): boolean;
     get isIconButton(): boolean | 0 | undefined;
     getBackgroundColor(): any;

src/components/button/ButtonTypes.tsx

@@ -95,7 +95,11 @@ export type ButtonProps = TouchableOpacityProps &
      */
     link?: boolean;
     /**
-     * label color for when it's displayed as link
+     * Button will look like a hyperlink
+     */
+    hyperlink?: boolean;
+    /**
+     * label color for when it's displayed as link or hyperlink
      */
     linkColor?: string;
     /**

src/components/button/__tests__/__snapshots__/index.spec.js.snap

@@ -1697,6 +1697,78 @@ exports[`Button container size should return style for xSmall button 2`] = `
 </View>
 `;
 
+exports[`Button hyperlink should render button as a hyperlink 1`] = `
+<View
+  accessibilityRole="button"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onLayout={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "transparent",
+      "borderRadius": 0,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minWidth": undefined,
+      "opacity": 1,
+      "paddingHorizontal": undefined,
+      "paddingVertical": undefined,
+    }
+  }
+>
+  <Text
+    numberOfLines={1}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "textAlign": "left",
+        },
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        Object {},
+        undefined,
+        undefined,
+        Object {
+          "textDecorationLine": "underline",
+        },
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "flex": 0,
+            "flexDirection": "row",
+            "fontFamily": "System",
+            "fontSize": 16,
+            "fontWeight": "400",
+            "lineHeight": 24,
+          },
+          Object {
+            "color": "#5A48F5",
+          },
+          Object {},
+          Object {},
+          undefined,
+        ],
+      ]
+    }
+  >
+    Button
+  </Text>
+</View>
+`;
+
 exports[`Button icon should apply color on icon 1`] = `
 <View
   accessibilityRole="button"

src/components/button/__tests__/index.spec.js

@@ -56,6 +56,13 @@ describe('Button', () => {
     });
   });
 
+  describe('hyperlink', () => {
+    it('should render button as a hyperlink', () => {
+      const tree = renderer.create(<Button label="Button" hyperlink/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
   describe('backgroundColor', () => {
     it('should return defined theme backgroundColor', () => {
       ThemeManager.setComponentTheme('Button', {

src/components/button/button.api.json

@@ -38,7 +38,8 @@
     {"name": "outlineColor", "type": "string", "description": "The outline color"},
     {"name": "outlineWidth", "type": "number", "description": "The outline width"},
     {"name": "link", "type": "boolean", "description": "Button will look like a link"},
-    {"name": "linkColor", "type": "string", "description": "label color for when it's displayed as link"},
+    {"name": "hyperlink", "type": "boolean", "description": "Button will look like a hyperlink"},
+    {"name": "linkColor", "type": "string", "description": "label color for when it's displayed as link or hyperlink"},
     {"name": "labelStyle", "type": "TextStyle", "description": "Additional styles for label text"},
     {"name": "labelProps", "type": "TextProps", "description": "Props that will be passed to the button's Text label."},
     {

src/components/button/index.tsx

@@ -63,9 +63,13 @@ class Button extends PureComponent<Props, ButtonState> {
     return Boolean(outline || outlineColor);
   }
 
+  get isLink() {
+    const {link, hyperlink} = this.props;
+    return link || hyperlink;
+  }
+
   get isFilled() {
-    const {link} = this.props;
-    return !this.isOutline && !link;
+    return !this.isOutline && !this.isLink;
   }
 
   get isIconButton() {
@@ -75,10 +79,10 @@ class Button extends PureComponent<Props, ButtonState> {
 
   getBackgroundColor() {
     const {backgroundColor: themeBackgroundColor, modifiers} = this.props;
-    const {disabled, outline, link, disabledBackgroundColor, backgroundColor: propsBackgroundColor} = this.props;
+    const {disabled, outline, disabledBackgroundColor, backgroundColor: propsBackgroundColor} = this.props;
     const {backgroundColor: stateBackgroundColor} = modifiers;
 
-    if (!outline && !link) {
+    if (!outline && !this.isLink) {
       if (disabled) {
         return disabledBackgroundColor || DISABLED_COLOR;
       }
@@ -97,18 +101,19 @@ class Button extends PureComponent<Props, ButtonState> {
   }
 
   getLabelColor() {
-    const {link, linkColor, outline, outlineColor, disabled, color: propsColor} = this.props;
+    const {linkColor, outline, outlineColor, disabled, color: propsColor} = this.props;
+    const isLink = this.isLink;
 
     let color: string | undefined = Colors.white;
-    if (link) {
+    if (isLink) {
       color = linkColor || Colors.primary;
     } else if (outline) {
       color = outlineColor || Colors.primary;
     } else if (this.isIconButton) {
       color = undefined; // Colors.grey10;
     }
 
-    if (disabled && (link || outline)) {
+    if (disabled && (isLink || outline)) {
       return DISABLED_COLOR;
     }
 
@@ -130,7 +135,7 @@ class Button extends PureComponent<Props, ButtonState> {
   }
 
   getContainerSizeStyle() {
-    const {outline, link, avoidMinWidth, avoidInnerPadding, round} = this.props;
+    const {outline, avoidMinWidth, avoidInnerPadding, round} = this.props;
     const size = this.props.size || DEFAULT_SIZE;
     const outlineWidth = this.props.outlineWidth || 1;
 
@@ -177,7 +182,7 @@ class Button extends PureComponent<Props, ButtonState> {
 
     const containerSizeStyle = CONTAINER_STYLE_BY_SIZE[size];
 
-    if (link || (this.isIconButton && !round)) {
+    if (this.isLink || (this.isIconButton && !round)) {
       containerSizeStyle.paddingVertical = undefined;
       containerSizeStyle.paddingHorizontal = undefined;
       containerSizeStyle.minWidth = undefined;
@@ -196,10 +201,10 @@ class Button extends PureComponent<Props, ButtonState> {
   }
 
   getOutlineStyle() {
-    const {outline, outlineColor, outlineWidth, link, disabled} = this.props;
+    const {outline, outlineColor, outlineWidth, disabled} = this.props;
 
     let outlineStyle;
-    if ((outline || outlineColor) && !link) {
+    if ((outline || outlineColor) && !this.isLink) {
       outlineStyle = {
         borderWidth: outlineWidth || 1,
         borderColor: outlineColor || Colors.primary
@@ -213,9 +218,9 @@ class Button extends PureComponent<Props, ButtonState> {
   }
 
   getBorderRadiusStyle() {
-    const {link, fullWidth, borderRadius: borderRadiusFromProps, modifiers} = this.props;
+    const {fullWidth, borderRadius: borderRadiusFromProps, modifiers} = this.props;
 
-    if (link || fullWidth || borderRadiusFromProps === 0) {
+    if (this.isLink || fullWidth || borderRadiusFromProps === 0) {
       return {borderRadius: 0};
     }
 
@@ -290,7 +295,7 @@ class Button extends PureComponent<Props, ButtonState> {
   }
 
   renderLabel() {
-    const {label, labelStyle, labelProps} = this.props;
+    const {label, labelStyle, labelProps, hyperlink} = this.props;
     const typography = extractTypographyValue(this.props);
     const color = this.getLabelColor();
     const labelSizeStyle = this.getLabelSizeStyle();
@@ -299,6 +304,7 @@ class Button extends PureComponent<Props, ButtonState> {
       return (
         <Text
           style={[this.styles.text, !!color && {color}, labelSizeStyle, {...typography}, labelStyle]}
+          underline={hyperlink}
           numberOfLines={1}
           {...labelProps}
         >
@@ -310,7 +316,7 @@ class Button extends PureComponent<Props, ButtonState> {
   }
 
   render() {
-    const {onPress, disabled, link, style, testID, animateLayout, modifiers, forwardedRef, ...others} = this.props;
+    const {onPress, disabled, style, testID, animateLayout, modifiers, forwardedRef, ...others} = this.props;
     const shadowStyle = this.getShadowStyle();
     const {margins} = modifiers;
     const backgroundColor = this.getBackgroundColor();
@@ -326,7 +332,7 @@ class Button extends PureComponent<Props, ButtonState> {
           this.styles.container,
           animateLayout && this.getAnimationDirectionStyle(),
           containerSizeStyle,
-          link && this.styles.innerContainerLink,
+          this.isLink && this.styles.innerContainerLink,
           shadowStyle,
           margins,
           backgroundColor && {backgroundColor},