Form Design Proposal [feature]

Form Design Proposal

Visual Design

800px by 600px view:

JSX Design

<Frame>
  <Form>
    <FormTitle>FORM</FormTitle>

    <FormGroup>
        <Label>PLANET</Label>
        <TextInput />
    </FormGroup>

    <FormGroup>
        <Label>SYSTEM</Label>
        <TextInput />
    </FormGroup>

    <FormGroup>
        <Label>GALAXY</Label>
        <TextInput />
    </FormGroup>

    <FormGroup>
        <Label>DIMENSION</Label>
        <TextInput />
    </FormGroup>

    <FormButtons>
      <Button onClick={ [some submit code here] }>
        Submit 
      </Button> 
      <Button onClick={ [some redirect to previous route code here]}>
        Cancel
      </Button>
    </FormButtons>
  </Form>
</Frame>

Component style overview

• <FormTitle> is basically a Header but centered
• <FormGroup> is parent of Labels + Inputs, so Label + Inputs fall inline-block
• <Label> has the styles of the Intergalactic Link, highlighted when its sibling <TextInput/> is active
• <Label> also ends with a : by default, and all Labels are justifed to the right, with all : (colons) aligned
• When active, <TextInput/> has the blinking text entry light from the <Words animate show={anim.entered}> animation
• <FormButtons> contains inline-block submit/cancel/etc <Button>s, is a centered div at end of form

Pixel Grid View

[romelperez]

Hi @njwest ! That proposal looks perfect! The plan is to start working on Arwes core components by the fourth quarter of 2019. Soon I’ll start planning tasks so we can keep track of these proposals. Thank you for your contribution!!!

[romelperez]

It looks pretty good!

Here are some thoughs on the plan to work on them.

First, we need to define how the input elements should work. My idea is to start with the most basic form components: <input type="text|email|url|number|search|...">, <input type="checkbox">, and <select>. Here some inspiration:

Inputs and selects: https://robertsspaceindustries.com/enlist For checkboxes: https://codepen.io/aaronchuo/pen/adErn

These components should work with the control color palette, as the <Button> works. The idea is mark them as interactive elements in the application. The animation for the input text you suggest can be tricky to make, but we can research about it 😃 We can play with the animation for the select and the checkboxes to see what is best for them.

It would be awesome to define what kind of sounds to play when the user interacts with the elements. We need to research about this too. The idea is to follow the rhythms or “style” from the current sounds.

Second, we would need to define how the form structure components should work: <FormTitle>, <FormGroup>, <Label>, and <FormButtons>. Since these are more about layout, I think they should be straightforward.

I feel more inclined to have the labels in a different line than the inputs, but we can make components to define the kind of structure we want.