Implement ButtonIcon component

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>

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";

src/core/client/ui/components/Button/ButtonIcon.css

@@ -0,0 +1,8 @@
+.root {
+  &:first-child {
+    margin-left: -4px;
+  }
+  &:last-child {
+    margin-right: -4px;
+  }
+}

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();
+});

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;

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)>
+`;

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";