Merge branch 'next' of github.com:coralproject/talk into auth-views

* 'next' of github.com:coralproject/talk:
  Readd comments not found
  Make readonly and add translations
  Add localization
  Change text
  Add SetViewMutation
  Get view from query + tests
  Styling, refactor + tests
  Add UserBox
  Add auth target

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

@@ -6,7 +6,7 @@
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  border: 1px solid transparent;
+  border: 0px solid transparent;
 
   & > * {
     margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
@@ -154,6 +154,7 @@
 }
 
 .variantOutlined {
+  border: 1px solid transparent;
   &.colorRegular {
     color: var(--palette-grey-main);
     border: 1px solid currentColor;
@@ -220,6 +221,7 @@
 }
 
 .variantGhost {
+  border: 1px solid transparent;
   &.colorRegular {
     color: var(--palette-grey-main);
   }

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

@@ -13,7 +13,7 @@ import Flex from '../Flex'
 
 ## Regular Button
 <Playground>
-  <Flex itemGutter wrap>
+  <Flex itemGutter>
     <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 wrap>
+  <Flex itemGutter>
     <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 wrap>
+  <Flex itemGutter>
     <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 wrap>
+  <Flex itemGutter>
     <Button variant="ghost">Push Me</Button>
     <Button variant="ghost" size="small">Push Me</Button>
     <Button variant="ghost" size="large">Push Me</Button>

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

@@ -1,8 +1,5 @@
 .root {
   display: flex;
-  & > * {
-    flex-shrink: 0;
-  }
 }
 
 .halfItemGutter {
@@ -63,7 +60,7 @@
 
 .wrap,
 .wrapReverse {
-  &.itemGutter {
+  &:not(.directionColumn).itemGutter {
     &:not(:empty) {
       margin-top: calc(-1 * var(--spacing-unit)) !important;
     }
@@ -80,7 +77,7 @@
     }
   }
 
-  &.halfItemGutter {
+  &:not(.directionColumn).halfItemGutter {
     &:not(:empty) {
       margin-top: calc(-0.5 * var(--spacing-unit)) !important;
     }

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

@@ -77,7 +77,16 @@ const Flex: StatelessComponent<InnerProps> = props => {
 
   const classNames: string = cn(classes.root, className, classObject);
 
-  return <div ref={forwardRef} className={classNames} {...rest} />;
+  // The first div is required to support nested `Flex` components with itemGutters.
+  return (
+    <div>
+      <div ref={forwardRef} className={classNames} {...rest} />
+    </div>
+  );
+};
+
+Flex.defaultProps = {
+  wrap: true,
 };
 
 const enhanced = withForwardRef(withStyles(styles)(Flex));

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

@@ -1,51 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div
-  className="Flex-root Flex-justifyCenter Flex-alignCenter Flex-directionRow"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders with halfe item gutter 1`] = `
-<div
-  className="Flex-root Flex-halfItemGutter Flex-alignCenter"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-halfItemGutter Flex-wrap Flex-alignCenter"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders with item gutter 1`] = `
-<div
-  className="Flex-root Flex-itemGutter Flex-alignCenter"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-itemGutter Flex-wrap Flex-alignCenter"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders with wrap 1`] = `
-<div
-  className="Flex-root Flex-wrap Flex-alignCenter"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-wrap Flex-alignCenter"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders with wrap reverse 1`] = `
-<div
-  className="Flex-root Flex-wrapReverse Flex-alignCenter"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-wrapReverse Flex-alignCenter"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;

src/core/client/ui/components/Popup/Popup.ts

@@ -36,6 +36,9 @@ export default class Popup extends Component<PopupProps> {
   }
 
   private setCallbacks() {
+    if (!this.ref) {
+      return;
+    }
     this.ref!.onload = e => {
       if (this.detectCloseInterval) {
         clearInterval(this.detectCloseInterval);

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

@@ -23,6 +23,10 @@
   composes: bodyCopy from "talk-ui/shared/typography.css";
 }
 
+.bodyCopyBold {
+  composes: bodyCopyBold from "talk-ui/shared/typography.css";
+}
+
 .button {
   composes: button from "talk-ui/shared/typography.css";
 }

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

@@ -17,6 +17,7 @@ import Flex from '../Flex'
     <Typography variant="heading3">Heading3</Typography>
     <Typography variant="heading4">Heading4</Typography>
     <Typography variant="bodyCopy">BodyCopy</Typography>
+    <Typography variant="bodyCopyBold">bodyCopyBold</Typography>
     <Typography variant="timestamp">timestamp</Typography>
   </Flex>
 </Playground>

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

@@ -13,7 +13,7 @@ type Variant =
   | "heading3"
   | "heading4"
   | "bodyCopy"
-  | "inputLabel"
+  | "bodyCopyBold"
   | "timestamp";
 
 // Based on Typography Component of Material UI.
@@ -131,7 +131,7 @@ Typography.defaultProps = {
     heading3: "h1",
     heading4: "h1",
     bodyCopy: "p",
-    inputLabel: "label",
+    bodyCopyBold: "p",
     timestamp: "span",
   },
   noWrap: false,