Updated API

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

@@ -8,16 +8,22 @@
   box-sizing: border-box;
   border-radius: var(--round-corners);
   border-width: 1px;
-  border-left-width: calc(0.8 * var(--spacing-unit));
   border-style: solid;
+  border-left-width: calc(0.8 * var(--spacing-unit));
 }
 
-.color {
+.colorInfo {
   background-color: var(--palette-common-white);
   border-color: var(--palette-grey-main);
   color: var(--palette-grey-main);
 }
 
+.colorValidation {
+  background-color: var(--palette-error-light);
+  border-color: var(--palette-error-darkest);
+  color: var(--palette-common-white);
+}
+
 .fullWidth {
   display: flex;
   width: 100%;
@@ -25,5 +31,4 @@
 
 .icon {
   margin-right: calc(0.8 * var(--spacing-unit));
-  color: var(--palette-grey-main);
 }

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

@@ -27,15 +27,28 @@ export interface MessageProps {
   * Name of the icon, render if provided
   */
   icon?: string;
+  /*
+  * Name of color, "info" stays by default - common gray one
+  */
+  color?: "validation" | "info";
 }
 
 const Message: StatelessComponent<MessageProps> = props => {
-  const { className, classes, fullWidth, children, icon, ...rest } = props;
+  const {
+    className,
+    classes,
+    fullWidth,
+    children,
+    icon,
+    color,
+    ...rest
+  } = props;
 
   const rootClassName = cn(
     classes.root,
-    classes.color,
     {
+      [classes.colorInfo]: color === "info",
+      [classes.colorValidation]: color === "validation",
       [classes.fullWidth]: fullWidth,
     },
     className
@@ -54,6 +67,7 @@ const Message: StatelessComponent<MessageProps> = props => {
 };
 
 Message.defaultProps = {
+  color: "info",
   fullWidth: false,
 };
 

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

@@ -1,27 +0,0 @@
-.root {
-  composes: alertMessage from "talk-ui/shared/typography.css";
-  position: relative;
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit);
-  box-sizing: border-box;
-  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-color: var(--palette-error-darkest);
-  color: var(--palette-common-white);
-}
-
-.fullWidth {
-  display: flex;
-  width: 100%;
-}
-
-.icon {
-  margin-right: var(--spacing-unit);
-}

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

@@ -4,7 +4,7 @@ menu: UI Kit
 ---
 
 import { Playground } from 'docz'
-import ValidationMessage from './ValidationMessage.tsx'
+import ValidationMessage from './ValidationMessage'
 import HorizontalGutter from '../HorizontalGutter'
 
 # ValidationMessage

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

@@ -1,10 +1,5 @@
-import cn from "classnames";
 import React, { ReactNode, StatelessComponent } from "react";
-
-import { withStyles } from "talk-ui/hocs";
-
-import Icon from "../Icon";
-import * as styles from "./ValidationMessage.css";
+import Message from "../Message";
 
 export interface ValidationMessageProps {
   /**
@@ -16,34 +11,18 @@ export interface ValidationMessageProps {
    */
   className?: string;
   /**
-   * Override or extend the styles applied to the component.
+   * If set renders a full width message
    */
-  classes: typeof styles;
-  /*
-  * If set renders a full width message
-  */
   fullWidth?: boolean;
 }
 
 const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
-  const { className, classes, fullWidth, children, ...rest } = props;
-
-  const rootClassName = cn(
-    classes.root,
-    classes.colorError,
-    {
-      [classes.fullWidth]: fullWidth,
-    },
-    className
-  );
+  const { className, fullWidth, children, ...rest } = props;
 
   return (
-    <div className={rootClassName} {...rest}>
-      <Icon size="sm" className={classes.icon}>
-        warning
-      </Icon>
+    <Message color="validation" icon="warning" className={className} {...rest}>
       {children}
-    </div>
+    </Message>
   );
 };
 
@@ -51,5 +30,4 @@ ValidationMessage.defaultProps = {
   fullWidth: false,
 };
 
-const enhanced = withStyles(styles)(ValidationMessage);
-export default enhanced;
+export default ValidationMessage;