Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create <Form /> component #55

Open
tko22 opened this issue May 15, 2020 · 0 comments
Open

Create <Form /> component #55

tko22 opened this issue May 15, 2020 · 0 comments
Labels
component for component dev issues effort: high

Comments

@tko22
Copy link
Member

tko22 commented May 15, 2020

there's probably some that i missed and overlooked but here are my initial thoughts. A

component encompasses a group of input elements - this includes everything in #31 . Check out ant.design for inspiration.

There are multiple types of form layouts.. we'll focus on vertical ones. Within vertical forms, you need to account for either

1. 
Label Name [ your choice of input ] 

2. 
Label Name
[ your choise of input ] 

The design system spec only accounts for the 2nd choice. We should add the 1st choice as well.

inline forms (e.g. two text inputs side by side) can be done with Flexbox by dev

Components

  • just include top parent form level styling like typography
  • <Form.Item> an item that includes a label name and the input
  • <Form.Label> the label for the Form Item
  • <Form.Text> helper text (below input)

<Form.Item />

props

  • row: bool - if true, this would choose choice 1, defaults to choice 2
  • disabled? idk how you would put disabled props into children
  • required? idk how you would put disabled props
  • optional? idk how you would put disabled props

<Form.Label/>

  • for - the id of the input (look at reactstrap)
  • required
  • optional

<Form.Text>

props

  • color

Example

<Form>
    <Form.Item row>
       <Form.Label required> Favorite Color </Form.Label>
       <TextArea />
       <Form.Text>some description </Form.Text>
    </Form.Item>
     // inline
   <Flex>
        <Box flex={1}>
           <Form.Label required> Favorite Car </Form.Label>
           <Dropownd asdfasdf />
           <Form.Text>some description </Form.Text>
        </Box>
        <Box flex={1}>
           <Form.Label required> Favorite shoe </Form.Label>
           <TextField />
           <Form.Text>some description </Form.Text>
        </Box>
   <Flex>
   <Form.Item>
       <Button>Submit</Button>
   <Form.Item>
</Form>
@tko22 tko22 added component for component dev issues effort: high labels May 15, 2020
@tko22 tko22 mentioned this issue May 15, 2020
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component for component dev issues effort: high
Projects
None yet
Development

No branches or pull requests

1 participant