From 521af6f0aabd960ac4248f3580d32703dc1e9815 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 19 Jul 2018 19:58:55 -0300
Subject: [PATCH] Implement ButtonIcon component

---
 .../client/ui/components/Button/Button.mdx    |  9 +++--
 .../client/ui/components/Button/Button.tsx    |  2 +-
 .../ui/components/Button/ButtonIcon.css       |  8 ++++
 .../ui/components/Button/ButtonIcon.spec.tsx  | 30 +++++++++++++++
 .../ui/components/Button/ButtonIcon.tsx       | 38 +++++++++++++++++++
 .../__snapshots__/ButtonIcon.spec.tsx.snap    | 20 ++++++++++
 src/core/client/ui/components/Button/index.ts |  3 +-
 7 files changed, 104 insertions(+), 6 deletions(-)
 create mode 100644 src/core/client/ui/components/Button/ButtonIcon.css
 create mode 100644 src/core/client/ui/components/Button/ButtonIcon.spec.tsx
 create mode 100644 src/core/client/ui/components/Button/ButtonIcon.tsx
 create mode 100644 src/core/client/ui/components/Button/__snapshots__/ButtonIcon.spec.tsx.snap

diff --git a/src/core/client/ui/components/Button/Button.mdx b/src/core/client/ui/components/Button/Button.mdx
index e3a3156a5..9160ed7da 100644
--- a/src/core/client/ui/components/Button/Button.mdx
+++ b/src/core/client/ui/components/Button/Button.mdx
@@ -5,6 +5,7 @@ menu: UI Kit
 
 import { Playground } from 'docz'
 import Button from './Button'
+import ButtonIcon from './ButtonIcon'
 import Icon from '../Icon'
 import Flex from '../Flex'
 
@@ -20,7 +21,7 @@ import Flex from '../Flex'
     <Button color="error">Push Me</Button>
     <Button color="success">Push Me</Button>
     <Button disabled>Push Me</Button>
-    <Button><Icon>face</Icon><span>Push Me</span></Button>
+    <Button><ButtonIcon>face</ButtonIcon><span>Push Me</span></Button>
     <Button fullWidth>Push Me</Button>
   </Flex>
 </Playground>
@@ -35,7 +36,7 @@ import Flex from '../Flex'
     <Button variant="filled" color="error">Push Me</Button>
     <Button variant="filled" color="success">Push Me</Button>
     <Button variant="filled" disabled>Push Me</Button>
-    <Button variant="filled"><Icon>face</Icon><span>Push Me</span></Button>
+    <Button variant="filled"><ButtonIcon>face</ButtonIcon><span>Push Me</span></Button>
     <Button variant="filled" fullWidth>Push Me</Button>
   </Flex>
 </Playground>
@@ -50,7 +51,7 @@ import Flex from '../Flex'
     <Button variant="outlined" color="error">Push Me</Button>
     <Button variant="outlined" color="success">Push Me</Button>
     <Button variant="outlined" disabled>Push Me</Button>
-    <Button variant="outlined"><Icon>face</Icon><span>Push Me</span></Button>
+    <Button variant="outlined"><ButtonIcon>face</ButtonIcon><span>Push Me</span></Button>
     <Button variant="outlined" fullWidth>Push Me</Button>
   </Flex>
 </Playground>
@@ -65,7 +66,7 @@ import Flex from '../Flex'
     <Button variant="ghost" color="error">Push Me</Button>
     <Button variant="ghost" color="success">Push Me</Button>
     <Button variant="ghost" disabled>Push Me</Button>
-    <Button variant="ghost"><Icon>face</Icon><span>Push Me</span></Button>
+    <Button variant="ghost"><ButtonIcon>face</ButtonIcon><span>Push Me</span></Button>
     <Button variant="ghost" fullWidth>Push Me</Button>
   </Flex>
 </Playground>
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index c22e72c40..60a8aeeb4 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -15,7 +15,7 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    * This prop can be used to add custom classnames.
    * It is handled by the `withStyles `HOC.
    */
-  classes: typeof styles & Partial<BaseButtonProps["classes"]>;
+  classes: typeof styles & BaseButtonProps["classes"];
 
   /** Size of the button */
   size?: "small" | "regular" | "large";
diff --git a/src/core/client/ui/components/Button/ButtonIcon.css b/src/core/client/ui/components/Button/ButtonIcon.css
new file mode 100644
index 000000000..424b6db73
--- /dev/null
+++ b/src/core/client/ui/components/Button/ButtonIcon.css
@@ -0,0 +1,8 @@
+.root {
+  &:first-child {
+    margin-left: -4px;
+  }
+  &:last-child {
+    margin-right: -4px;
+  }
+}
diff --git a/src/core/client/ui/components/Button/ButtonIcon.spec.tsx b/src/core/client/ui/components/Button/ButtonIcon.spec.tsx
new file mode 100644
index 000000000..10c25db30
--- /dev/null
+++ b/src/core/client/ui/components/Button/ButtonIcon.spec.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import ShallowRenderer from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { ButtonIcon } from "./ButtonIcon";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ButtonIcon> = {
+    classes: {
+      root: "root",
+    } as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<ButtonIcon {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("forwards ref", () => {
+  const props: PropTypesOf<typeof ButtonIcon> = {
+    // tslint:disable-next-line:no-empty
+    forwardRef: () => {},
+    classes: {} as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<ButtonIcon {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Button/ButtonIcon.tsx b/src/core/client/ui/components/Button/ButtonIcon.tsx
new file mode 100644
index 000000000..963808a7b
--- /dev/null
+++ b/src/core/client/ui/components/Button/ButtonIcon.tsx
@@ -0,0 +1,38 @@
+import cn from "classnames";
+import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
+
+import Icon, { IconProps } from "talk-ui/components/Icon";
+import { withForwardRef, withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
+
+import * as styles from "./ButtonIcon.css";
+
+interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles & IconProps["classes"];
+
+  size?: IconProps["size"];
+
+  /** The name of the icon to render */
+  children: string;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLSpanElement>;
+}
+
+export const ButtonIcon: StatelessComponent<InnerProps> = props => {
+  const { classes, className, forwardRef, ...rest } = props;
+  const rootClassName = cn(classes.root, className);
+  return <Icon className={rootClassName} {...rest} forwardRef={forwardRef} />;
+};
+
+ButtonIcon.defaultProps = {
+  size: "sm",
+};
+
+const enhanced = withForwardRef(withStyles(styles)(ButtonIcon));
+export type ButtonIconProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/Button/__snapshots__/ButtonIcon.spec.tsx.snap b/src/core/client/ui/components/Button/__snapshots__/ButtonIcon.spec.tsx.snap
new file mode 100644
index 000000000..753cfbaf5
--- /dev/null
+++ b/src/core/client/ui/components/Button/__snapshots__/ButtonIcon.spec.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`forwards ref 1`] = `
+<withPropsOnChange(Icon)
+  className=""
+  forwardRef={[Function]}
+  size="sm"
+>
+  Push me
+</withPropsOnChange(Icon)>
+`;
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Icon)
+  className="root"
+  size="sm"
+>
+  Push me
+</withPropsOnChange(Icon)>
+`;
diff --git a/src/core/client/ui/components/Button/index.ts b/src/core/client/ui/components/Button/index.ts
index 045d8c3e2..e17fab004 100644
--- a/src/core/client/ui/components/Button/index.ts
+++ b/src/core/client/ui/components/Button/index.ts
@@ -1 +1,2 @@
-export { default, ButtonProps } from "./Button";
+export { default, default as Button, ButtonProps } from "./Button";
+export { default as ButtonIcon, ButtonIconProps } from "./ButtonIcon";