Updated tests

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

@@ -16,12 +16,8 @@ it("renders correctly", () => {
 });
 
 it("renders icon", () => {
-  const props: PropTypesOf<typeof Message> = {
-    className: "custom",
-  };
-
   const renderer = TestRenderer.create(
-    <Message {...props}>
+    <Message>
       <MessageIcon>alert</MessageIcon>Alert Message
     </Message>
   );

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

@@ -1,9 +1,6 @@
 import cn from "classnames";
 import React, { ReactNode, StatelessComponent } from "react";
-
 import { withStyles } from "talk-ui/hocs";
-
-import Icon from "../Icon";
 import * as styles from "./Message.css";
 
 export interface MessageProps {

src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap

@@ -10,7 +10,7 @@ exports[`renders correctly 1`] = `
 
 exports[`renders icon 1`] = `
 <div
-  className="Message-root Message-colorGrey custom"
+  className="Message-root Message-colorGrey"
 >
   <span
     aria-hidden="true"

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

@@ -1,5 +1,6 @@
 import React, { ReactNode, StatelessComponent } from "react";
 import Message from "../Message";
+import MessageIcon from "../Message/MessageIcon";
 
 export interface ValidationMessageProps {
   /**
@@ -24,12 +25,8 @@ const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
   const { className, fullWidth, children, icon, ...rest } = props;
 
   return (
-    <Message
-      color="validation"
-      icon={icon ? icon : "warning"}
-      className={className}
-      {...rest}
-    >
+    <Message color="error" className={className} {...rest}>
+      <MessageIcon>warning</MessageIcon>
       {children}
     </Message>
   );

src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap

@@ -2,9 +2,14 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="Message-root custom"
-  icon="warning"
+  className="Message-root Message-colorError custom"
 >
+  <span
+    aria-hidden="true"
+    className="Icon-root MessageIcon-root Icon-sm"
+  >
+    warning
+  </span>
   Hello World
 </div>
 `;