Adding InputDescription Component

src/core/client/auth/components/SignUp.tsx

@@ -16,6 +16,7 @@ import {
   Button,
   Flex,
   FormField,
+  InputDescription,
   InputLabel,
   TextField,
   Typography,
@@ -36,7 +37,7 @@ export interface SignUpForm {
 const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitting }) => (
+      {({ handleSubmit, submitting, invalid }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <Flex itemGutter direction="column" className={styles.root}>
             <Flex direction="column">
@@ -74,10 +75,10 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 {({ input, meta }) => (
                   <FormField>
                     <InputLabel>Username</InputLabel>
-                    <Typography variant="inputDescription">
+                    <InputDescription>
                       A unique identifier displayed on your comments. You may
                       use “_” and “.”
-                    </Typography>
+                    </InputDescription>
                     <TextField
                       name={input.name}
                       onChange={input.onChange}
@@ -101,9 +102,9 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 {({ input, meta }) => (
                   <FormField>
                     <InputLabel>Password</InputLabel>
-                    <Typography variant="inputDescription">
+                    <InputDescription>
                       Must be at least 8 characters
-                    </Typography>
+                    </InputDescription>
                     <TextField
                       name={input.name}
                       onChange={input.onChange}
@@ -132,9 +133,9 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 {({ input, meta }) => (
                   <FormField>
                     <InputLabel>Confirm Password</InputLabel>
-                    <Typography variant="inputDescription">
+                    <InputDescription>
                       Must be at least 8 characters
-                    </Typography>
+                    </InputDescription>
                     <TextField
                       name={input.name}
                       onChange={input.onChange}

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

@@ -1,13 +1,11 @@
 import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
-import PoweredBy from "./PoweredBy";
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
-import PoweredBy from "talk-stream/components/PoweredBy";
 import { Button, Typography } from "talk-ui/components";
 import * as styles from "./PostCommentForm.css";
+import PoweredBy from "./PoweredBy";
 
 interface FormProps {
   body: string;
@@ -58,7 +56,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
             fullWidth
             size="large"
           >
-            Sign In and join the conversation
+            Sign in and join the conversation
           </Button>
         )}
       </form>

src/core/client/stream/components/PoweredBy.css

@@ -1,3 +0,0 @@
-.text {
-  font-size: calc(14rem / var(--rem-base));
-}

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

@@ -1,36 +1,18 @@
 ---
-name: FormField
+name: InputDescription
 menu: UI Kit
 ---
 
 import { Playground, PropsTable } from 'docz'
-import FormField from './FormField'
-import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
+import { InputDescription } from '../core/client/ui/components'
 
 # Flex
 
-`FormField` is to be used with Form Components `flexbox`.
-
-## Justify content
-<Playground>
-  <FormField>
-  </FormField>
-</Playground>
+`InputDescription` is to be used with Form Components.
 
 ## Align items
 <Playground>
   <Flex alignItems="center" itemGutter>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled" size="small">Push Me</Button>
-    <Button variant="filled" size="large">Push Me</Button>
-  </Flex>
-</Playground>
-
-## Direction
-<Playground>
-  <Flex direction="column" itemGutter>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled">Push Me</Button>
+    <InputDescription>This is a description</Button>
   </Flex>
 </Playground>

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

@@ -1,43 +1,24 @@
-import cn from "classnames";
-import React, { ReactNode } from "react";
-import { StatelessComponent } from "react";
+import React, { ReactNode, StatelessComponent } from "react";
+import { Typography } from "talk-ui/components";
 
-import { withStyles } from "talk-ui/hocs";
-
-import * as styles from "./FormField.css";
-
-interface InnerProps {
+interface InputDescriptionProps {
   children: ReactNode;
-  classes: typeof styles;
   id?: string;
   className?: string;
-  itemGutter?: boolean | "half";
 }
 
-const FormField: StatelessComponent<InnerProps> = props => {
-  const { classes, className, children, itemGutter, ...rest } = props;
-
-  // TODO (bc): Use flex component once the extra div issue is solved.
+const InputDescription: StatelessComponent<InputDescriptionProps> = props => {
+  const { className, children, ...rest } = props;
   return (
-    <div
-      className={cn(
-        classes.root,
-        {
-          [classes.itemGutter]: itemGutter === true,
-          [classes.halfItemGutter]: itemGutter === "half",
-        },
-        className
-      )}
+    <Typography
+      variant="inputDescription"
+      color="textSecondary"
+      className={className}
       {...rest}
     >
       {children}
-    </div>
+    </Typography>
   );
 };
 
-FormField.defaultProps = {
-  itemGutter: true,
-};
-
-const enhanced = withStyles(styles)(FormField);
-export default enhanced;
+export default InputDescription;

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

@@ -15,3 +15,4 @@ export { default as CallOut } from "./CallOut";
 export { default as ClickOutside } from "./ClickOutside";
 export { default as Popup } from "./Popup";
 export { default as FormField } from "./FormField";
+export { default as InputDescription } from "./InputDescription";

src/core/client/ui/shared/typography.css

@@ -137,9 +137,9 @@
   color: var(--palette-common-black);
   font-family: var(--font-family-sans-serif);
   font-weight: var(--font-weight-medium);
-  font-size: calc(16rem / var(--rem-base));
-  line-height: calc(16em / 16);
-  letter-spacing: calc(-0.1em / 16);
+  font-size: calc(14rem / var(--rem-base));
+  line-height: calc(20em / 16);
+  letter-spacing: calc(0.2em / 16);
 }
 
 .inputText {
@@ -163,7 +163,7 @@
 .inputDescription {
   font-size: calc(14rem / var(--rem-base));
   font-weight: var(--font-weight-regular);
-  font-family: var(--font-family);
+  font-family: var(--font-family-sans-serif);
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);
   color: var(--palette-text-secondary);