docz

src/core/client/stream/components/Comment/Comment.tsx

@@ -23,7 +23,9 @@ const Comment: StatelessComponent<CommentProps> = props => {
         <Timestamp>{props.createdAt}</Timestamp>
       </TopBar>
       <Typography>{props.body}</Typography>
-      <ValidationMessage color="error">Hello</ValidationMessage>
+      <ValidationMessage color="error">
+        Invalid characters. Try again
+      </ValidationMessage>
     </div>
   );
 };

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

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

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

@@ -1,6 +1,11 @@
 .root {
   composes: validationMessage from "talk-ui/shared/typography.css";
-  padding: 4px;
+  position: relative;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 7px 10px;
+  box-sizing: border-box;
 }
 
 .colorRegular {
@@ -18,6 +23,12 @@
   color: var(--palette-common-white);
 }
 
+.fullWidth {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .icon {
   margin-right: 8px;
 }

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

@@ -14,6 +14,7 @@ import
     <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>Invalid characters. Try again</ValidationMessage>z
   </Flex>
 </Playground>
 

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

@@ -22,16 +22,21 @@ interface InnerProps {
    * Color of the ValidationMessage
    */
   color?: "regular" | "error";
+  /*
+  * If set renders a full width button
+  */
+  fullWidth?: boolean;
 }
 
 const ValidationMessage: StatelessComponent<InnerProps> = props => {
-  const { className, classes, color, children, ...rest } = props;
+  const { className, classes, color, fullWidth, children, ...rest } = props;
 
   const rootClassName = cn(
     classes.root,
     {
       [classes.colorRegular]: color === "regular",
       [classes.colorError]: color === "error",
+      [classes.fullWidth]: fullWidth,
     },
     className
   );
@@ -39,7 +44,7 @@ const ValidationMessage: StatelessComponent<InnerProps> = props => {
   return (
     <div className={rootClassName} {...rest}>
       {color === "error" && (
-        <Icon size="sm" className={classes.icon}>
+        <Icon size="xsm" className={classes.icon}>
           warning
         </Icon>
       )}
@@ -50,6 +55,7 @@ const ValidationMessage: StatelessComponent<InnerProps> = props => {
 
 ValidationMessage.defaultProps = {
   color: "regular",
+  fullWidth: false,
 };
 
 const enhanced = withStyles(styles)(ValidationMessage);