Stream Styling

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

@@ -0,0 +1,2 @@
+.root {
+}

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

@@ -0,0 +1,36 @@
+---
+name: FormField
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import FormField from './FormField'
+import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
+
+# Flex
+
+`FormField` is to be used with Form Components `flexbox`.
+
+## Justify content
+<Playground>
+  <FormField>
+  </FormField>
+</Playground>
+
+## 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>
+  </Flex>
+</Playground>

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

@@ -0,0 +1,43 @@
+import cn from "classnames";
+import React, { ReactNode } from "react";
+import { StatelessComponent } from "react";
+
+import { withStyles } from "talk-ui/hocs";
+
+import * as styles from "./FormField.css";
+
+interface InnerProps {
+  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.
+  return (
+    <div
+      className={cn(
+        classes.root,
+        {
+          [classes.itemGutter]: itemGutter === true,
+          [classes.halfItemGutter]: itemGutter === "half",
+        },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
+
+FormField.defaultProps = {
+  itemGutter: true,
+};
+
+const enhanced = withStyles(styles)(FormField);
+export default enhanced;

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

@@ -0,0 +1 @@
+export { default } from "./InputDescription";