From 8114dd658f7c40670c50570f9260758a510890bb Mon Sep 17 00:00:00 2001 From: Justin Anastos Date: Wed, 28 Aug 2019 17:06:21 -0400 Subject: [PATCH] docs(TextField): write new docs for TextField --- src/TextField/TextField.stories.mdx | 104 ++++++++++++ src/TextField/TextField.story.tsx | 241 ---------------------------- 2 files changed, 104 insertions(+), 241 deletions(-) create mode 100644 src/TextField/TextField.stories.mdx delete mode 100644 src/TextField/TextField.story.tsx diff --git a/src/TextField/TextField.stories.mdx b/src/TextField/TextField.stories.mdx new file mode 100644 index 00000000..22220840 --- /dev/null +++ b/src/TextField/TextField.stories.mdx @@ -0,0 +1,104 @@ +import { TextField } from "./TextField"; +import { + Description, + Meta, + Story, + Props, + Preview, +} from "@storybook/addon-docs/blocks"; +import { IconShip2 } from "../icons/IconShip2"; +import { colors } from "../colors"; + +export const SampleIcon = () => ( + +); + + + +# TextField + + + +## Sizes + + + + + + + + + + + + + +## Customizing Segments + +You can override the `input` render by providing a `React.ReactElement`. Props added by `TextField` will be merged with the props you provide and `className`s will be merged. You can use this to add any custom props you want passed to the `input` element. + + + + } + /> + + + +## Input states + +Inputs automatically handle their input states + + + + + + + } /> + + + } /> + + + } + value="Focused and typing" + /> + + + + + + +## Anatomy + +Anatomy of a complete form field. A label is required (or at the very least, it should be very clear why a label might not be needed). Description, placeholder text, and helper text are all optional. + + + + + + + + + + +## Props + + diff --git a/src/TextField/TextField.story.tsx b/src/TextField/TextField.story.tsx deleted file mode 100644 index a34c9697..00000000 --- a/src/TextField/TextField.story.tsx +++ /dev/null @@ -1,241 +0,0 @@ -/** @jsx jsx */ -import { jsx, ClassNames } from "@emotion/core"; -import { storiesOf } from "@storybook/react"; -import { TextField } from "./TextField"; -import { DemoSection, DemoGroup, DemoGroupProps } from "../shared/DemoSection"; -import React, { ComponentProps } from "react"; -import { colors } from "../colors"; -import { IconSearch } from "../icons/IconSearch"; - -const VerticalTextFieldGroup: React.FC< - { - inputProps?: Partial, "children">>; - children: JSX.Element | JSX.Element[]; - } & DemoGroupProps -> = ({ children, ...otherProps }) => ( - - {React.Children.map(children, child => ( -
{child}
- ))} - -); - -storiesOf("TextField", module) - .addParameters({ component: TextField }) - .add("Catalog", () => ( - - - - - - - - - - - - - - - - {({ cx, css }) => ( - - } - placeholder="Placeholder text" - label="Blue border input" - /> - )} - - - - - - - - - - - - - - - - - - - - - {/** TODO: add input masking when it works (if it works?) */} - - - - - } - placeholder="Placeholder text" - label="Resting" - /> - - } - /> - - } - placeholder="Placeholder text" - label="Focused" - data-force-focus-state - /> - - } - /> - - } - /> - - - - ));