Adding MessageIcon

src/core/client/ui/components/Message/Message.mdx

@@ -5,6 +5,7 @@ menu: UI Kit
 
 import { Playground } from 'docz'
 import Message from './Message'
+import MessageIcon from './MessageIcon'
 import HorizontalGutter from '../HorizontalGutter'
 
 # Message
@@ -20,7 +21,7 @@ import HorizontalGutter from '../HorizontalGutter'
 ## Usage with icon
 <Playground>
   <HorizontalGutter>
-    <Message icon="alarm">Edit: 1 min 23 secs Remaining</Message>
+    <Message><MessageIcon size="sm">alarm</MessageIcon>Edit: 1 min 23 secs Remaining</Message>
   </HorizontalGutter>
 </Playground>
 

src/core/client/ui/components/Message/Message.tsx

@@ -24,25 +24,13 @@ export interface MessageProps {
   */
   fullWidth?: boolean;
   /*
-  * Name of the icon, render if provided
-  */
-  icon?: string;
-  /*
   * Name of color, "grey" stays by default - common gray one
   */
   color?: "error" | "grey";
 }
 
 const Message: StatelessComponent<MessageProps> = props => {
-  const {
-    className,
-    classes,
-    fullWidth,
-    children,
-    icon,
-    color,
-    ...rest
-  } = props;
+  const { className, classes, fullWidth, children, color, ...rest } = props;
 
   const rootClassName = cn(
     classes.root,
@@ -56,11 +44,6 @@ const Message: StatelessComponent<MessageProps> = props => {
 
   return (
     <div className={rootClassName} {...rest}>
-      {icon && (
-        <Icon size="md" className={classes.icon}>
-          {icon}
-        </Icon>
-      )}
       {children}
     </div>
   );

src/core/client/ui/components/Message/MessageIcon.css

@@ -0,0 +1,5 @@
+.root {
+  &:first-child {
+    margin-right: calc(0.5 * var(--spacing-unit));
+  }
+}

src/core/client/ui/components/Message/MessageIcon.tsx

@@ -0,0 +1,36 @@
+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 * as styles from "./MessageIcon.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 MessageIcon: StatelessComponent<InnerProps> = props => {
+  const { classes, className, forwardRef, ...rest } = props;
+  const rootClassName = cn(classes.root, className);
+  return <Icon className={rootClassName} {...rest} forwardRef={forwardRef} />;
+};
+
+MessageIcon.defaultProps = {
+  size: "sm",
+};
+
+const enhanced = withForwardRef(withStyles(styles)(MessageIcon));
+export default enhanced;