updates

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

@@ -8,7 +8,7 @@ export interface CallOutProps {
   /**
    * The content of the component.
    */
-  children: string | ReactNode;
+  children: ReactNode;
   /**
    * Convenient prop to override the root styling.
    */

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

@@ -1,6 +1,3 @@
 .root {
-  composes: inputLabel from "talk-ui/shared/typography.css";
-  position: relative;
   display: block;
-  box-sizing: border-box;
 }

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

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React from "react";
+import React, { ReactNode } from "react";
 import { StatelessComponent } from "react";
 import { withStyles } from "talk-ui/hocs";
 import Typography from "../Typography";
@@ -9,7 +9,7 @@ export interface InputLabelProps {
   /**
    * The content of the component.
    */
-  children?: string;
+  children?: ReactNode;
   /**
    * Convenient prop to override the root styling.
    */
@@ -26,7 +26,7 @@ const InputLabelProps: StatelessComponent<InputLabelProps> = props => {
   const rootClassName = cn(classes.root, className);
 
   return (
-    <Typography className={rootClassName} {...rest}>
+    <Typography className={rootClassName} variant="inputLabel" {...rest}>
       {children}
     </Typography>
   );

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

@@ -31,6 +31,10 @@
   composes: buttonLarge from "talk-ui/shared/typography.css";
 }
 
+.inputLabel {
+  composes: inputLabel from "talk-ui/shared/typography.css";
+}
+
 .timestamp {
   composes: timestamp from "talk-ui/shared/typography.css";
 }

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

@@ -13,6 +13,7 @@ type Variant =
   | "heading3"
   | "heading4"
   | "bodyCopy"
+  | "inputLabel"
   | "timestamp";
 
 // Based on Typography Component of Material UI.
@@ -130,6 +131,7 @@ Typography.defaultProps = {
     heading3: "h1",
     heading4: "h1",
     bodyCopy: "p",
+    inputLabel: "label",
     timestamp: "span",
   },
   noWrap: false,

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

@@ -4,23 +4,16 @@
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
-  padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit)
+  padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit);
   box-sizing: border-box;
-}
-
-.colorRegular {
-  background-color: transparent;
-  border: none;
-  color: var(--palette-common-black);
-  padding-left: 40px;
+  border-radius: var(--round-corners);
+  border-left-width: calc(0.5 * var(--spacing-unit));
+  border-left-style: solid;
 }
 
 .colorError {
   background-color: var(--palette-error-light);
-  border-radius: 1px;
   border-color: var(--palette-error-darkest);
-  border-left-width: calc(0.5 * var(--spacing-unit));
-  border-left-style: solid;
   color: var(--palette-common-white);
 }
 
@@ -30,5 +23,5 @@
 }
 
 .icon {
-  margin-right: calc(0.5 * var(--spacing-unit));
+  margin-right: var(--spacing-unit);
 }

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

@@ -3,20 +3,17 @@ name: ValidationMessage
 menu: UI Kit
 ---
 
-import { Playground, PropsTable } from 'docz'
+import { Playground } from 'docz'
 import ValidationMessage from './ValidationMessage.tsx'
 import Flex from '../Flex'
 
 # ValidationMessage
-<PropsTable of={ValidationMessage} />
 
 ## Basic Use
 <Playground>
   <Flex itemGutter direction="column">
-    <ValidationMessage>Account with this email address already exists. Try another email</ValidationMessage>
-    <ValidationMessage>Please enter a valid email address</ValidationMessage>
-    <ValidationMessage color="error">Invalid characters. Try again</ValidationMessage>
-    <ValidationMessage color="error" fullWidth>Account with this email address already exists. Try another email. </ValidationMessage>
+    <ValidationMessage>Invalid characters. Try again</ValidationMessage>
+    <ValidationMessage fullWidth>Account with this email address already exists. Try another email. </ValidationMessage>
   </Flex>
 </Playground>
 

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

@@ -9,7 +9,7 @@ export interface ValidationMessageProps {
   /**
    * The content of the component.
    */
-  children: string | ReactNode;
+  children: ReactNode;
   /**
    * Convenient prop to override the root styling.
    */
@@ -18,10 +18,6 @@ export interface ValidationMessageProps {
    * Override or extend the styles applied to the component.
    */
   classes: typeof styles;
-  /**
-   * Color of the ValidationMessage
-   */
-  color?: "regular" | "error";
   /*
   * If set renders a full width message
   */
@@ -29,13 +25,12 @@ export interface ValidationMessageProps {
 }
 
 const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
-  const { className, classes, color, fullWidth, children, ...rest } = props;
+  const { className, classes, fullWidth, children, ...rest } = props;
 
   const rootClassName = cn(
     classes.root,
+    classes.colorError,
     {
-      [classes.colorRegular]: color === "regular",
-      [classes.colorError]: color === "error",
       [classes.fullWidth]: fullWidth,
     },
     className
@@ -43,18 +38,15 @@ const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
 
   return (
     <div className={rootClassName} {...rest}>
-      {color === "error" && (
-        <Icon size="sm" className={classes.icon}>
-          warning
-        </Icon>
-      )}
+      <Icon size="sm" className={classes.icon}>
+        warning
+      </Icon>
       {children}
     </div>
   );
 };
 
 ValidationMessage.defaultProps = {
-  color: "regular",
   fullWidth: false,
 };