From b2e2e3e75dc60c0f4f040bd541645fe8e16b4aa3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 20 Jul 2018 12:24:03 -0300
Subject: [PATCH] Styling fixes

---
 .../Comment/__snapshots__/TopBar.spec.tsx.snap |  2 +-
 .../stream/components/PostCommentForm.tsx      |  2 +-
 .../test/__snapshots__/loadMore.spec.tsx.snap  | 18 +++++++++---------
 .../__snapshots__/renderReplies.spec.tsx.snap  | 10 +++++-----
 .../__snapshots__/renderStream.spec.tsx.snap   |  8 ++++----
 .../__snapshots__/showAllReplies.spec.tsx.snap | 16 ++++++++--------
 src/core/client/ui/components/Flex/Flex.tsx    | 15 +++++++++------
 7 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
index 9253404bd..02f3c7726 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly on big screens 1`] = `
 <div
-  className="Flex-root TopBar-root Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+  className="Flex-root TopBar-root Flex-itemGutter Flex-alignCenter Flex-directionRow"
 >
   <div>
     Hello World
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index a05afb73a..badcbaca8 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -41,7 +41,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
         </Field>
         <div className={styles.postButtonContainer}>
           <Localized id="comments-postCommentForm-post">
-            <Button color="primary" disabled={submitting}>
+            <Button color="primary" variant="filled" disabled={submitting}>
               Post
             </Button>
           </Localized>
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 83651f7d6..065e376b5 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -28,7 +28,7 @@ exports[`loads more comments 1`] = `
         className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -43,12 +43,12 @@ exports[`loads more comments 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
       >
         <div
           role="article"
@@ -77,7 +77,7 @@ exports[`loads more comments 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
       >
         <div
           role="article"
@@ -106,7 +106,7 @@ exports[`loads more comments 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
       >
         <div
           role="article"
@@ -167,7 +167,7 @@ exports[`renders comment stream 1`] = `
         className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -182,12 +182,12 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
       >
         <div
           role="article"
@@ -216,7 +216,7 @@ exports[`renders comment stream 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
       >
         <div
           role="article"
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index e0ae72400..290be7545 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -28,7 +28,7 @@ exports[`renders comment stream 1`] = `
         className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -43,12 +43,12 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
       >
         <div
           role="article"
@@ -77,7 +77,7 @@ exports[`renders comment stream 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
       >
         <div
           role="article"
@@ -108,7 +108,7 @@ exports[`renders comment stream 1`] = `
           className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+            className="Flex-root Flex-itemGutter Flex-directionColumn"
             id="talk-comments-replyList-log--comment-with-replies"
             role="log"
           >
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index ec9d09a32..0290e7f21 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -28,7 +28,7 @@ exports[`renders comment stream 1`] = `
         className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -43,12 +43,12 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
       >
         <div
           role="article"
@@ -77,7 +77,7 @@ exports[`renders comment stream 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
       >
         <div
           role="article"
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index d904af123..3fcf31abb 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -28,7 +28,7 @@ exports[`renders comment stream 1`] = `
         className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -43,12 +43,12 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
       >
         <div
           role="article"
@@ -79,7 +79,7 @@ exports[`renders comment stream 1`] = `
           className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+            className="Flex-root Flex-itemGutter Flex-directionColumn"
             id="talk-comments-replyList-log--comment-0"
             role="log"
           >
@@ -159,7 +159,7 @@ exports[`show all replies 1`] = `
         className="PostCommentForm-postButtonContainer"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -174,12 +174,12 @@ exports[`show all replies 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
       >
         <div
           role="article"
@@ -210,7 +210,7 @@ exports[`show all replies 1`] = `
           className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-root Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+            className="Flex-root Flex-itemGutter Flex-directionColumn"
             id="talk-comments-replyList-log--comment-0"
             role="log"
           >
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index 2824c4ac7..240e13f9e 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -46,6 +46,11 @@ const Flex: StatelessComponent<InnerProps> = props => {
     ...rest
   } = props;
 
+  let alignItemsWithDefault = alignItems;
+  if (!direction || !direction.startsWith("column")) {
+    alignItemsWithDefault = "center";
+  }
+
   const classObject: Record<string, boolean> = {
     [classes.itemGutter]: itemGutter === true,
     [classes.halfItemGutter]: itemGutter === "half",
@@ -59,8 +64,10 @@ const Flex: StatelessComponent<InnerProps> = props => {
     ] = true;
   }
 
-  if (alignItems) {
-    classObject[(classes as any)[`align${pascalCase(alignItems)}`]] = true;
+  if (alignItemsWithDefault) {
+    classObject[
+      (classes as any)[`align${pascalCase(alignItemsWithDefault)}`]
+    ] = true;
   }
 
   if (direction) {
@@ -72,10 +79,6 @@ const Flex: StatelessComponent<InnerProps> = props => {
   return <div ref={forwardRef} className={classNames} {...rest} />;
 };
 
-Flex.defaultProps = {
-  alignItems: "center",
-};
-
 const enhanced = withForwardRef(withStyles(styles)(Flex));
 export default enhanced;
 export type FlexProps = PropTypesOf<typeof enhanced>;