wip

package.json

@@ -100,7 +100,7 @@
     "cross-env": "^5.2.0",
     "cross-spawn": "^6.0.5",
     "css-loader": "^0.28.11",
-    "docz": "^0.5.8",
+    "docz": "^0.5.9",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.4",

src/core/client/ui/components/Icon/Icon.css

@@ -36,7 +36,7 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.xsm {
+.xs {
   font-size: 14px;
   width: 14px;
 }

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

@@ -13,7 +13,7 @@ interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
    */
   classes: typeof styles;
 
-  size?: "xsm" | "sm" | "md" | "lg" | "xl";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
 
   /** The name of the icon to render */
   children: string;

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

@@ -3,11 +3,11 @@ name: ValidationMessage
 menu: UI Kit
 ---
 
-import { Playground, PropsTable} from 'docz'
-import ValidationMessage from './ValidationMessage'
+import { Playground, PropsTable } from 'docz'
+import ValidationMessage from './ValidationMessage.tsx'
 import Flex from '../Flex'
 
-# ValidationMessage
+## ValidationMessage
 <PropsTable of={ValidationMessage} />
 
 ## Basic Use

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

@@ -5,7 +5,7 @@ import { withStyles } from "talk-ui/hocs";
 import Icon from "../Icon";
 import * as styles from "./ValidationMessage.css";
 
-interface InnerProps {
+export interface ValidationMessageProps {
   /**
    * The content of the component.
    */
@@ -28,7 +28,7 @@ interface InnerProps {
   fullWidth?: boolean;
 }
 
-const ValidationMessage: StatelessComponent<InnerProps> = props => {
+const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
   const { className, classes, color, fullWidth, children, ...rest } = props;
 
   const rootClassName = cn(
@@ -44,7 +44,7 @@ const ValidationMessage: StatelessComponent<InnerProps> = props => {
   return (
     <div className={rootClassName} {...rest}>
       {color === "error" && (
-        <Icon size="xsm" className={classes.icon}>
+        <Icon size="xs" className={classes.icon}>
           warning
         </Icon>
       )}

src/core/client/ui/components/ValidationMessage/index.ts

@@ -1 +1 @@
-export { default } from "./ValidationMessage";
+export { default, ValidationMessageProps } from "./ValidationMessage";