sign in view

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

@@ -0,0 +1,5 @@
+.root {
+  display: block;
+  margin-bottom: var(--spacing-unit);
+  width: 100%;
+}

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

@@ -0,0 +1,33 @@
+import cn from "classnames";
+import React, { ReactNode } from "react";
+import { StatelessComponent } from "react";
+
+import { withStyles } from "talk-ui/hocs";
+import Flex from "../Flex";
+
+import * as styles from "./FormField.css";
+
+interface InnerProps {
+  children: ReactNode;
+  classes: typeof styles;
+  id?: string;
+  className?: string;
+}
+
+const FormField: StatelessComponent<InnerProps> = props => {
+  const { classes, className, children, ...rest } = props;
+
+  return (
+    <Flex
+      direction="column"
+      itemGutter="half"
+      className={cn(classes.root, className)}
+      {...rest}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+const enhanced = withStyles(styles)(FormField);
+export default enhanced;

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

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

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

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