updates

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,
 };