From 3dc3e1435af0ab33e0b3055f2914cda915ae968e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 24 Aug 2018 19:11:56 +0200
Subject: [PATCH] Use HorizontalGutter component, simplify Flex

---
 .../stream/components/Comment/Username.tsx    |  2 +-
 .../stream/components/PermalinkView.tsx       |  8 +--
 .../stream/components/PostCommentForm.css     |  2 -
 .../stream/components/PostCommentForm.tsx     | 72 ++++++++++---------
 .../client/stream/components/PoweredBy.tsx    | 14 ++--
 .../client/stream/components/ReplyList.tsx    |  8 +--
 src/core/client/stream/components/Stream.tsx  | 22 +++---
 .../components/UserBoxAuthenticated.tsx       | 47 +++++-------
 .../components/UserBoxUnauthenticated.tsx     |  4 +-
 src/core/client/stream/index.tsx              |  4 +-
 .../client/ui/components/Button/Button.mdx    |  8 +--
 .../client/ui/components/CallOut/CallOut.mdx  |  6 +-
 src/core/client/ui/components/Flex/Flex.css   |  6 +-
 src/core/client/ui/components/Flex/Flex.tsx   | 37 +++++++---
 .../ui/components/FormField/FormField.tsx     | 11 ++-
 .../HorizontalGutter/HorizontalGutter.css     | 27 +++++++
 .../HorizontalGutter/HorizontalGutter.mdx     | 42 +++++++++++
 .../HorizontalGutter/HorizontalGutter.tsx     | 37 ++++++++++
 .../ui/components/HorizontalGutter/index.ts   |  1 +
 .../ui/components/InputLabel/InputLabel.mdx   |  6 +-
 .../ui/components/TextField/TextField.mdx     |  6 +-
 .../ui/components/ToggleShow/ToogleShow.mdx   |  6 +-
 .../ui/components/Typography/Typography.mdx   | 14 ++--
 .../ui/components/Typography/Typography.tsx   | 26 ++++---
 .../ValidationMessage/ValidationMessage.mdx   |  6 +-
 .../ValidationMessage/ValidationMessage.tsx   |  5 +-
 src/core/client/ui/components/index.ts        |  1 +
 src/locales/en-US/stream.ftl                  |  6 ++
 28 files changed, 286 insertions(+), 148 deletions(-)
 create mode 100644 src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css
 create mode 100644 src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx
 create mode 100644 src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx
 create mode 100644 src/core/client/ui/components/HorizontalGutter/index.ts

diff --git a/src/core/client/stream/components/Comment/Username.tsx b/src/core/client/stream/components/Comment/Username.tsx
index f19c23024..728944ea2 100644
--- a/src/core/client/stream/components/Comment/Username.tsx
+++ b/src/core/client/stream/components/Comment/Username.tsx
@@ -16,7 +16,7 @@ const Username: StatelessComponent<UsernameProps> = props => {
         <Typography
           variant={matches ? "heading2" : "heading3"}
           className={styles.root}
-          component="span"
+          container="span"
         >
           {props.children}
         </Typography>
diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx
index 4d3035b8d..362efa562 100644
--- a/src/core/client/stream/components/PermalinkView.tsx
+++ b/src/core/client/stream/components/PermalinkView.tsx
@@ -1,7 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { MouseEvent, StatelessComponent } from "react";
 
-import { Button, Flex, Typography } from "talk-ui/components";
+import { Button, Typography } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import * as styles from "./PermalinkView.css";
@@ -41,11 +41,7 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
           <Typography>Comment not found</Typography>
         </Localized>
       )}
-      {comment && (
-        <Flex direction="column">
-          <CommentContainer data={comment} />
-        </Flex>
-      )}
+      {comment && <CommentContainer data={comment} />}
     </div>
   );
 };
diff --git a/src/core/client/stream/components/PostCommentForm.css b/src/core/client/stream/components/PostCommentForm.css
index 954a4de74..6c6c47b29 100644
--- a/src/core/client/stream/components/PostCommentForm.css
+++ b/src/core/client/stream/components/PostCommentForm.css
@@ -1,6 +1,5 @@
 .root {
   width: 100%;
-  padding-bottom: var(--spacing-unit);
 }
 
 .textarea {
@@ -9,7 +8,6 @@
   height: 150px;
   width: 100%;
   box-sizing: border-box;
-  margin-bottom: var(--spacing-unit);
   padding: var(--spacing-unit);
   border-radius: var(--round-corners);
   resize: vertical;
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index 5493519f5..36e7d8be4 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -3,7 +3,7 @@ import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
-import { Button, Typography } from "talk-ui/components";
+import { Button, Flex, HorizontalGutter, Typography } from "talk-ui/components";
 import * as styles from "./PostCommentForm.css";
 import PoweredBy from "./PoweredBy";
 
@@ -19,38 +19,44 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
   <Form onSubmit={props.onSubmit}>
     {({ handleSubmit, submitting }) => (
       <form autoComplete="off" onSubmit={handleSubmit} className={styles.root}>
-        <Field name="body" validate={required}>
-          {({ input, meta }) => (
-            <div>
-              <textarea
-                className={styles.textarea}
-                name={input.name}
-                onChange={input.onChange}
-                value={input.value}
-                placeholder="Post a comment"
-              />
-              {meta.touched &&
-                (meta.error || meta.submitError) && (
-                  <Typography align="right" color="error" gutterBottom>
-                    {meta.error || meta.submitError}
-                  </Typography>
-                )}
-            </div>
-          )}
-        </Field>
-        <div className={styles.postButtonContainer}>
-          <PoweredBy />
-          <Localized id="comments-postCommentForm-submit">
-            <Button
-              color="primary"
-              variant="filled"
-              disabled={submitting}
-              type="submit"
-            >
-              Submit
-            </Button>
-          </Localized>
-        </div>
+        <HorizontalGutter size="half">
+          <Field name="body" validate={required}>
+            {({ input, meta }) => (
+              <div style={{ width: "100%" }}>
+                <textarea
+                  className={styles.textarea}
+                  name={input.name}
+                  onChange={input.onChange}
+                  value={input.value}
+                  placeholder="Post a comment"
+                />
+                {meta.touched &&
+                  (meta.error || meta.submitError) && (
+                    <Typography align="right" color="error" gutterBottom>
+                      {meta.error || meta.submitError}
+                    </Typography>
+                  )}
+              </div>
+            )}
+          </Field>
+          <Flex
+            direction="row"
+            justifyContent="space-between"
+            alignItems="flex-start"
+          >
+            <PoweredBy />
+            <Localized id="comments-postCommentForm-submit">
+              <Button
+                color="primary"
+                variant="filled"
+                disabled={submitting}
+                type="submit"
+              >
+                Submit
+              </Button>
+            </Localized>
+          </Flex>
+        </HorizontalGutter>
       </form>
     )}
   </Form>
diff --git a/src/core/client/stream/components/PoweredBy.tsx b/src/core/client/stream/components/PoweredBy.tsx
index 5991c837a..ce2eb5563 100644
--- a/src/core/client/stream/components/PoweredBy.tsx
+++ b/src/core/client/stream/components/PoweredBy.tsx
@@ -1,12 +1,16 @@
 import React, { StatelessComponent } from "react";
-import { Flex, Typography } from "talk-ui/components";
+import { Typography } from "talk-ui/components";
 
 const PoweredBy: StatelessComponent = () => {
   return (
-    <Flex itemGutter="half">
-      <Typography variant="bodyCopy">Powered by</Typography>
-      <Typography variant="heading4">The Coral Project</Typography>
-    </Flex>
+    <div>
+      <Typography variant="inputDescription" container="span">
+        Powered by
+      </Typography>{" "}
+      <Typography variant="heading4" container="span">
+        The Coral Project
+      </Typography>
+    </div>
   );
 };
 
diff --git a/src/core/client/stream/components/ReplyList.tsx b/src/core/client/stream/components/ReplyList.tsx
index 6f4380769..c35e0c32c 100644
--- a/src/core/client/stream/components/ReplyList.tsx
+++ b/src/core/client/stream/components/ReplyList.tsx
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Button, Flex } from "talk-ui/components";
+import { Button, HorizontalGutter } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import Indent from "./Indent";
@@ -18,11 +18,9 @@ export interface ReplyListProps {
 const ReplyList: StatelessComponent<ReplyListProps> = props => {
   return (
     <Indent>
-      <Flex
-        direction="column"
+      <HorizontalGutter
         id={`talk-comments-replyList-log--${props.commentID}`}
         role="log"
-        itemGutter
       >
         {props.comments.map(comment => (
           <CommentContainer key={comment.id} data={comment} />
@@ -41,7 +39,7 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
             </Button>
           </Localized>
         )}
-      </Flex>
+      </HorizontalGutter>
     </Indent>
   );
 };
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index 01f584d33..49a2f2cef 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Button, Flex } from "talk-ui/components";
+import { Button, HorizontalGutter } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
@@ -22,21 +22,21 @@ export interface StreamProps {
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <Flex className={styles.root} direction="column" itemGutter>
-      <UserBoxContainer user={props.user} />
-      <PostCommentFormContainer assetID={props.assetID} />
-      <Flex
-        direction="column"
+    <HorizontalGutter className={styles.root}>
+      <HorizontalGutter size="half">
+        <UserBoxContainer user={props.user} />
+        <PostCommentFormContainer assetID={props.assetID} />
+      </HorizontalGutter>
+      <HorizontalGutter
         id="talk-comments-stream-log"
         role="log"
         aria-live="polite"
-        itemGutter
       >
         {props.comments.map(comment => (
-          <Flex direction="column" key={comment.id} itemGutter>
+          <HorizontalGutter key={comment.id}>
             <CommentContainer data={comment} />
             <ReplyListContainer comment={comment} />
-          </Flex>
+          </HorizontalGutter>
         ))}
         {props.hasMore && (
           <Localized id="comments-stream-loadMore">
@@ -52,8 +52,8 @@ const Stream: StatelessComponent<StreamProps> = props => {
             </Button>
           </Localized>
         )}
-      </Flex>
-    </Flex>
+      </HorizontalGutter>
+    </HorizontalGutter>
   );
 };
 
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index f271d80b7..0ed1dc483 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -3,9 +3,6 @@ import React, { StatelessComponent } from "react";
 
 import { Button, Flex, Typography } from "talk-ui/components";
 
-import MatchMedia from "talk-ui/components/MatchMedia";
-import * as styles from "./UserBoxAuthenticated.css";
-
 export interface UserBoxAuthenticatedProps {
   onSignOut: () => void;
   username: string;
@@ -15,36 +12,30 @@ const UserBoxAuthenticated: StatelessComponent<
   UserBoxAuthenticatedProps
 > = props => {
   return (
-    <Flex itemGutter="half">
-      <Flex itemGutter="half" className={styles.child}>
-        <MatchMedia gteWidth="sm">
-          <Localized id="comments-userBoxAuthenticated-signedInAs">
-            <Typography variant="bodyCopy" component="span">
-              Signed in as
-            </Typography>
-          </Localized>
-          <Typography variant="bodyCopyBold" component="span">
-            {props.username}
-          </Typography>
-        </MatchMedia>
-      </Flex>
-      <Flex itemGutter="half" className={styles.child}>
-        <Localized id="comments-userBoxAuthenticated-notYou">
-          <Typography variant="bodyCopy" component="span">
-            Not you?
-          </Typography>
-        </Localized>
-        <Localized id="comments-userBoxAuthenticated-signOut">
+    <Flex itemGutter="half" wrap>
+      <Localized
+        id="comments-userBoxAuthenticated-signedInAs"
+        username={<Typography variant="bodyCopyBold" container="span" />}
+      >
+        <Typography variant="bodyCopy" container="div">
+          {"Signed in as <username>Username</username>."}
+        </Typography>
+      </Localized>
+      <Localized
+        id="comments-userBoxAuthenticated-notYou"
+        button={
           <Button
             color="primary"
             size="small"
             variant="underlined"
             onClick={props.onSignOut}
-          >
-            Sign Out
-          </Button>
-        </Localized>
-      </Flex>
+          />
+        }
+      >
+        <Typography variant="bodyCopy" container={<Flex inline wrap />}>
+          {"Not you? <button>Sign Out</button>"}
+        </Typography>
+      </Localized>
     </Flex>
   );
 };
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index f1a8716ee..f184f76f6 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
@@ -21,12 +21,12 @@ const UserBoxUnauthenticated: StatelessComponent<
           <Typography
             className={styles.joinText}
             variant="bodyCopyBold"
-            component="span"
+            container="span"
           >
             Join the conversation
           </Typography>
         </Localized>
-        <Typography variant="bodyCopyBold" component="span">
+        <Typography variant="bodyCopyBold" container="span">
           |
         </Typography>
       </MatchMedia>
diff --git a/src/core/client/stream/index.tsx b/src/core/client/stream/index.tsx
index 0f88bdf08..31fade961 100644
--- a/src/core/client/stream/index.tsx
+++ b/src/core/client/stream/index.tsx
@@ -40,9 +40,7 @@ async function main() {
   });
 
   const Index: StatelessComponent = () => (
-    <TalkContextProvider
-      value={{ ...context, mediaQueryValues: { width: 640 } }}
-    >
+    <TalkContextProvider value={context}>
       <AppContainer />
     </TalkContextProvider>
   );
diff --git a/src/core/client/ui/components/Button/Button.mdx b/src/core/client/ui/components/Button/Button.mdx
index 4c4a15659..f6d85b6fc 100644
--- a/src/core/client/ui/components/Button/Button.mdx
+++ b/src/core/client/ui/components/Button/Button.mdx
@@ -13,7 +13,7 @@ import Flex from '../Flex'
 
 ## Regular Button
 <Playground>
-  <Flex itemGutter>
+  <Flex itemGutter wrap>
     <Button>Push Me</Button>
     <Button size="small">Push Me</Button>
     <Button size="large">Push Me</Button>
@@ -29,7 +29,7 @@ import Flex from '../Flex'
 
 ## Filled Button
 <Playground>
-  <Flex itemGutter>
+  <Flex itemGutter wrap>
     <Button variant="filled">Push Me</Button>
     <Button variant="filled" size="small">Push Me</Button>
     <Button variant="filled" size="large">Push Me</Button>
@@ -45,7 +45,7 @@ import Flex from '../Flex'
 
 ## Outlined Button
 <Playground>
-  <Flex itemGutter>
+  <Flex itemGutter wrap>
     <Button variant="outlined">Push Me</Button>
     <Button variant="outlined" size="small">Push Me</Button>
     <Button variant="outlined" size="large">Push Me</Button>
@@ -61,7 +61,7 @@ import Flex from '../Flex'
 
 ## Ghost Button
 <Playground>
-  <Flex itemGutter>
+  <Flex itemGutter wrap>
     <Button variant="ghost">Push Me</Button>
     <Button variant="ghost" size="small">Push Me</Button>
     <Button variant="ghost" size="large">Push Me</Button>
diff --git a/src/core/client/ui/components/CallOut/CallOut.mdx b/src/core/client/ui/components/CallOut/CallOut.mdx
index b3977a56a..fb71ea7ee 100644
--- a/src/core/client/ui/components/CallOut/CallOut.mdx
+++ b/src/core/client/ui/components/CallOut/CallOut.mdx
@@ -5,19 +5,19 @@ menu: UI Kit
 
 import { Playground, PropsTable } from 'docz'
 import CallOut from './CallOut'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # CallOut
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <CallOut>This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
     <CallOut color="primary">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
     <CallOut color="error">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
     <CallOut color="error">The email address or password you entered is incorrect. Try again</CallOut>
     <CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 2e6914c7f..26c744a11 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -1,10 +1,12 @@
 .root {
-  width: 100%;
 }
 
 .flex {
   display: flex;
-  width: 100%;
+}
+
+.inline {
+  width: auto;
 }
 
 .halfItemGutter {
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index bf66f9084..2fde17254 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -28,6 +28,7 @@ interface InnerProps {
   itemGutter?: boolean | "half" | "double";
   className?: string;
   wrap?: boolean | "reverse";
+  inline?: boolean;
 
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLDivElement>;
@@ -44,6 +45,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
     wrap,
     forwardRef,
     children,
+    inline,
     ...rest
   } = props;
 
@@ -77,21 +79,40 @@ const Flex: StatelessComponent<InnerProps> = props => {
     classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
   }
 
-  const rootClassNames: string = cn(classes.root, className);
+  const rootClassNames: string = cn(classes.root, className, {
+    [classes.inline]: inline === true,
+  });
   const flexClassNames: string = cn(classes.flex, classObject);
 
-  // The first div is required to support nested `Flex` components with itemGutters.
+  // text nodes can't be modified with css, so replace them with spans.
+  // Readd spaces at the beginning or end of text nodes because
+  // flex removes it.
+  const content = React.Children.map(children, child => {
+    if (typeof child === "string") {
+      return <span>{child.replace(/^ +| +$/g, "\xa0")}</span>;
+    }
+    return child;
+  });
+
+  if (wrap && itemGutter) {
+    // The first div is required to support nested `Flex` components with itemGutters.
+    return (
+      <div ref={forwardRef} className={rootClassNames} {...rest}>
+        <div className={flexClassNames}>{content}</div>
+      </div>
+    );
+  }
   return (
-    <div ref={forwardRef} className={rootClassNames} {...rest}>
-      <div className={flexClassNames}>{children}</div>
+    <div
+      ref={forwardRef}
+      className={cn(rootClassNames, flexClassNames)}
+      {...rest}
+    >
+      {content}
     </div>
   );
 };
 
-Flex.defaultProps = {
-  wrap: true,
-};
-
 const enhanced = withForwardRef(withStyles(styles)(Flex));
 export default enhanced;
 export type FlexProps = PropTypesOf<typeof enhanced>;
diff --git a/src/core/client/ui/components/FormField/FormField.tsx b/src/core/client/ui/components/FormField/FormField.tsx
index 40d2a0d61..64dab3140 100644
--- a/src/core/client/ui/components/FormField/FormField.tsx
+++ b/src/core/client/ui/components/FormField/FormField.tsx
@@ -1,10 +1,10 @@
 import cn from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { StatelessComponent } from "react";
 
 import { withStyles } from "talk-ui/hocs";
 
-import Flex from "../Flex";
+import HorizontalGutter from "../HorizontalGutter";
 import * as styles from "./FormField.css";
 
 interface InnerProps {
@@ -18,14 +18,13 @@ const FormField: StatelessComponent<InnerProps> = props => {
   const { classes, className, children, ...rest } = props;
 
   return (
-    <Flex
-      direction="column"
+    <HorizontalGutter
       className={cn(classes.root, className)}
-      itemGutter="half"
+      size="half"
       {...rest}
     >
       {children}
-    </Flex>
+    </HorizontalGutter>
   );
 };
 
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css
new file mode 100644
index 000000000..aa588d983
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css
@@ -0,0 +1,27 @@
+.root {
+}
+
+.half {
+  & > * {
+    margin: 0 0 calc(0.5 * var(--spacing-unit)) 0 !important;
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+.full {
+  & > * {
+    margin: 0 0 var(--spacing-unit) 0 !important;
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+.double {
+  & > * {
+    margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important;
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx
new file mode 100644
index 000000000..0ce220c50
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx
@@ -0,0 +1,42 @@
+---
+name: HorizontalGutter
+menu: UI Kit
+---
+
+import { Playground } from "docz"
+import HorizontalGutter from "./HorizontalGutter"
+import Button from "../Button"
+
+# Spinner
+
+## Usage
+
+### Full gutter
+
+<Playground>
+  <HorizontalGutter>
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+  </HorizontalGutter>
+</Playground>
+
+### Half gutter
+
+<Playground>
+  <HorizontalGutter size="half">
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+  </HorizontalGutter>
+</Playground>
+
+### Double gutter
+
+<Playground>
+  <HorizontalGutter size="double">
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx
new file mode 100644
index 000000000..5594bd415
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx
@@ -0,0 +1,37 @@
+import cn from "classnames";
+import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
+
+import { withForwardRef, withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
+
+import * as styles from "./HorizontalGutter.css";
+
+interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+
+  size?: "half" | "full" | "double";
+
+  /** The name of the HorizontalGutter to render */
+  children?: React.ReactNode;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLDivElement>;
+}
+
+const HorizontalGutter: StatelessComponent<InnerProps> = props => {
+  const { classes, className, size, forwardRef, ...rest } = props;
+  const rootClassName = cn(classes.root, className, classes[size!]);
+  return <div className={rootClassName} {...rest} ref={forwardRef} />;
+};
+
+HorizontalGutter.defaultProps = {
+  size: "full",
+};
+
+const enhanced = withForwardRef(withStyles(styles)(HorizontalGutter));
+export type HorizontalGutterProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/HorizontalGutter/index.ts b/src/core/client/ui/components/HorizontalGutter/index.ts
new file mode 100644
index 000000000..74ebbbd3c
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/index.ts
@@ -0,0 +1 @@
+export { default, HorizontalGutterProps } from "./HorizontalGutter";
diff --git a/src/core/client/ui/components/InputLabel/InputLabel.mdx b/src/core/client/ui/components/InputLabel/InputLabel.mdx
index 8d7721ba7..57b5156cb 100644
--- a/src/core/client/ui/components/InputLabel/InputLabel.mdx
+++ b/src/core/client/ui/components/InputLabel/InputLabel.mdx
@@ -5,15 +5,15 @@ menu: UI Kit
 
 import { Playground, PropsTable } from 'docz'
 import InputLabel from './InputLabel.tsx'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # InputLabel
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <InputLabel>Well... Hello there.</InputLabel>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 
diff --git a/src/core/client/ui/components/TextField/TextField.mdx b/src/core/client/ui/components/TextField/TextField.mdx
index 7fee8bea9..9f19747f4 100644
--- a/src/core/client/ui/components/TextField/TextField.mdx
+++ b/src/core/client/ui/components/TextField/TextField.mdx
@@ -5,16 +5,16 @@ menu: UI Kit
 
 import { Playground, PropsTable } from 'docz'
 import TextField from './TextField.tsx'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # TextField
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <TextField placeholder="This is a placeholder" />
     <TextField defaultValue="This is an input field" />
     <TextField color="error" defaultValue="A TextField with an error" />
     <TextField color="error" defaultValue="A TextField with an error" fullWidth/>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
diff --git a/src/core/client/ui/components/ToggleShow/ToogleShow.mdx b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
index 05ab31e56..3a7fcdbda 100644
--- a/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
+++ b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
@@ -6,7 +6,7 @@ menu: UI Kit
 import { Playground } from 'docz'
 import ToggleShow from './ToggleShow'
 import Button from '../Button'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # ToggleShow
 A render props component to manage visible state.
@@ -15,12 +15,12 @@ A render props component to manage visible state.
 <Playground>
   <ToggleShow>
     {({ toggleShow, show }) => (
-      <Flex itemGutter direction="column">
+      <HorizontalGutter>
         {show && <div>Hello World!</div>}
         <Button onClick={toggleShow} variant="filled" color="primary">
           Toggle Show
         </Button>
-      </Flex>
+      </HorizontalGutter>
     )}
   </ToggleShow>
 </Playground>
diff --git a/src/core/client/ui/components/Typography/Typography.mdx b/src/core/client/ui/components/Typography/Typography.mdx
index f30f8e6c2..8f265fdfa 100644
--- a/src/core/client/ui/components/Typography/Typography.mdx
+++ b/src/core/client/ui/components/Typography/Typography.mdx
@@ -5,13 +5,13 @@ menu: UI Kit
 
 import { Playground } from 'docz'
 import Typography from './Typography'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # Typography
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <Typography variant="heading1">Heading1</Typography>
     <Typography variant="heading2">Heading2</Typography>
     <Typography variant="heading3">Heading3</Typography>
@@ -19,28 +19,28 @@ import Flex from '../Flex'
     <Typography variant="bodyCopy">BodyCopy</Typography>
     <Typography variant="bodyCopyBold">bodyCopyBold</Typography>
     <Typography variant="timestamp">timestamp</Typography>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 ## Using different colors
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <Typography color="textPrimary">textPrimary</Typography>
     <Typography color="textSecondary">textSecondary</Typography>
     <Typography color="success">success</Typography>
     <Typography color="error">error</Typography>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 ## Set align
 <Playground>
-  <Flex itemGutter direction="column" alignItems="stretch" style={{width: "200px"}}>
+  <HorizontalGutter style={{width: "200px"}}>
     <Typography align="left">left</Typography>
     <Typography align="center">center</Typography>
     <Typography align="right">right</Typography>
     <Typography align="justify"> No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo
   quiera, simplemente porque es el dolor.</Typography>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 ## Cut off long text
diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx
index 92474adec..a6912f04c 100644
--- a/src/core/client/ui/components/Typography/Typography.tsx
+++ b/src/core/client/ui/components/Typography/Typography.tsx
@@ -29,7 +29,7 @@ interface InnerProps extends HTMLAttributes<any> {
   /**
    * The content of the component.
    */
-  children: ReactNode;
+  children?: ReactNode;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -49,11 +49,11 @@ interface InnerProps extends HTMLAttributes<any> {
     | "error"
     | "success";
   /**
-   * The component used for the root node.
-   * Either a string to use a DOM element or a component.
+   * The container used for the root node.
+   * Either a string to use a DOM element, a component, or an element.
    * By default, it maps the variant to a good default headline component.
    */
-  component?: React.ComponentType<any> | string;
+  container?: React.ReactElement<any> | React.ComponentType<any> | string;
   /**
    * If `true`, the text will have a bottom margin.
    */
@@ -87,7 +87,7 @@ const Typography: StatelessComponent<InnerProps> = props => {
     classes,
     className,
     color,
-    component,
+    container,
     gutterBottom,
     headlineMapping,
     noWrap,
@@ -117,10 +117,20 @@ const Typography: StatelessComponent<InnerProps> = props => {
     className
   );
 
-  const Component =
-    component || (paragraph ? "p" : headlineMapping![variant!]) || "span";
+  const Container =
+    container || (paragraph ? "p" : headlineMapping![variant!]) || "span";
 
-  return <Component ref={forwardRef} className={rootClassName} {...rest} />;
+  const innerProps = {
+    ref: forwardRef,
+    className: rootClassName,
+    ...rest,
+  };
+
+  if (React.isValidElement<any>(Container)) {
+    return React.cloneElement(Container, innerProps);
+  } else {
+    return <Container {...innerProps} />;
+  }
 };
 
 Typography.defaultProps = {
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
index 35537e098..c8e7b11ad 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
@@ -5,16 +5,16 @@ menu: UI Kit
 
 import { Playground } from 'docz'
 import ValidationMessage from './ValidationMessage.tsx'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # ValidationMessage
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <ValidationMessage>Invalid characters. Try again</ValidationMessage>
     <ValidationMessage fullWidth>Account with this email address already exists. Try another email. </ValidationMessage>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
index f4c5406f7..0cc781560 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
@@ -1,7 +1,8 @@
 import cn from "classnames";
-import React from "react";
-import { ReactNode, StatelessComponent } from "react";
+import React, { ReactNode, StatelessComponent } from "react";
+
 import { withStyles } from "talk-ui/hocs";
+
 import Icon from "../Icon";
 import * as styles from "./ValidationMessage.css";
 
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 52ebe6a79..5c29b3f1a 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -17,3 +17,4 @@ export { default as Popup } from "./Popup";
 export { default as FormField } from "./FormField";
 export { default as InputDescription } from "./InputDescription";
 export { default as Spinner } from "./Spinner";
+export { default as HorizontalGutter } from "./HorizontalGutter";
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 6e04fcc54..4b7be9a5e 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -15,3 +15,9 @@ comments-permalinkView-commentNotFound = Comment not found
 comments-userBoxUnauthenticated-joinTheConversation = Join the conversation
 comments-userBoxUnauthenticated-signIn = Sign in
 comments-userBoxUnauthenticated-register = Register
+
+comments-userBoxAuthenticated-signedInAs =
+  Signed in as <username>Username</username>.
+
+comments-userBoxAuthenticated-notYou =
+  Not you? <button>Sign Out</button>