Merge pull request #637 from chiragg928/feat(button)

feat(button): add icon with text
ticketmaster · Dec 20, 2019 · 1f67777 · 1f67777
2 parents a7fd1d1 + d7648b2
commit 1f67777
Show file tree

Hide file tree

Showing 11 changed files with 454 additions and 59 deletions.
diff --git a/catalog/pages/buttons/index.js b/catalog/pages/buttons/index.js
@@ -5,7 +5,7 @@ import { Container, Row, Column } from "../../../src/components/Grid";
 import Spacing from "../../../src/components/Spacing";
 import { Button, Badge, RatingBadge } from "../../../src/components/Button";
 import ButtonWithLoading from "../../../src/components/ButtonWithLoading";
-import { ChevronIcon, StarIcon } from "../../../src/components/Icons";
+import { ChevronIcon, HomeIcon, StarIcon } from "../../../src/components/Icons";
 import { colors, themes } from "../../../src/theme";
 
 const starIconStyles = { marginRight: "2px" };
@@ -18,6 +18,7 @@ export default {
     ButtonWithLoading,
     Badge,
     ChevronIcon,
+    HomeIcon,
     StarIcon,
     RatingBadge,
     colors,

diff --git a/catalog/pages/buttons/index.md b/catalog/pages/buttons/index.md
@@ -18,6 +18,10 @@ rows:
   - Prop: href
     Type: string
     Notes: Determines wether underlying HTML element should be an `a`
+  - Prop: icon
+    Type: node
+    Default: null
+    Notes: Render as an icon with Button's children. Icon of height `16px` works best with `regular` sized button
   - Prop: children
     Type: node
     Default:
@@ -114,7 +118,7 @@ rows:
             <Column small={6}>
                 <Button variant="outlineGray" size="small">My cool button</Button>
                 <Spacing top={{small: "moderate"}}>
-                    <Button variant="outlineGray">My cool button</Button>
+                    <Button variant="outlineGray" icon={<HomeIcon size="small" />}>Button with icon</Button>
                 </Spacing>
                 <Spacing top={{small: "moderate"}}>
                     <Button variant="outlineGray" size="large">My cool button</Button>

diff --git a/src/components/Button/Base.styles.tsx b/src/components/Button/Base.styles.tsx
@@ -1,7 +1,7 @@
 import styled, { StyledComponent } from "styled-components";
 
 import { SPECIAL, Size, ButtonVariant } from "../constants";
-import { typography, constants } from "../../theme";
+import { typography, constants, spacing } from "../../theme";
 import { getThemeValue } from "../../utils";
 
 const colorVariants = {
@@ -139,10 +139,16 @@ export const StyledButton = styled.button<StyledButtonProps>`
       variant === SPECIAL ? "opacity: 0.4;" : "opacity: 0.2;"};
   }
 
-
   &.noFocus:focus {
     box-shadow: none;
   }
+
+  &.iconed svg{
+    position: relative;
+    display: inline-block;
+    vertical-align: text-top;
+    margin-right: ${spacing.cozy};
+  }
 `;
 
 StyledButton.defaultProps = {

diff --git a/src/components/Button/Base.tsx b/src/components/Button/Base.tsx
@@ -17,6 +17,7 @@ export interface ButtonProps {
   readonly className?: string;
   readonly variant: ButtonVariant;
   readonly size: Size;
+  readonly icon: any;
 }
 
 export interface ButtonLinkProps extends ButtonProps {
@@ -35,12 +36,14 @@ class Button extends Component<ButtonProps> {
   static propTypes: ValidationMap<PropsWithChildren<ButtonProps>> = {
     variant: PropTypes.oneOf(BUTTON_VARIANTS),
     size: PropTypes.oneOf(SIZES),
+    icon: PropTypes.node,
     children: PropTypes.node.isRequired
   };
 
   static defaultProps: ButtonProps = {
     size: REGULAR,
-    variant: STANDARD
+    variant: STANDARD,
+    icon: null
   };
 
   componentDidMount() {
@@ -76,7 +79,7 @@ class Button extends Component<ButtonProps> {
   button = React.createRef<HTMLButtonElement>();
 
   render() {
-    const { variant, size, children, ...rest } = this.props;
+    const { variant, size, icon, children, ...rest } = this.props;
 
     if (isButtonLinkProps(this.props)) {
       const { rel, target } = this.props;
@@ -88,8 +91,10 @@ class Button extends Component<ButtonProps> {
           size={size}
           rel={validatedRel}
           as="a"
+          className={`${icon ? "iconed" : ""}`}
           {...rest}
         >
+          {icon}
           {children}
         </StyledButtonLink>
       );
@@ -100,9 +105,10 @@ class Button extends Component<ButtonProps> {
         variant={variant}
         size={size}
         {...rest}
-        className={`${rest.className || ""} noFocus`}
+        className={`${rest.className || ""} ${icon ? "iconed" : ""} noFocus`}
         ref={this.button}
       >
+        {icon}
         {children}
       </StyledButton>
     );