form-grid.md

Forms + Grids

Proposal 0: DIY

Orbit isn't necessarily concerned with how components are laid out by engineers, but we can help them by providing good examples/recipes for how to accomplish common usecases when a prop or component doesn't make sense to add to orbit. In this proposal, we suggest dev's roll their own styles, but can write examples for them to show them our recommendations.

Code

<o-form @submit.prevent>
	<div class="wrapper">
		<o-form-item class="wrapper__input">
			<o-input />
		</o-form-item>
		<o-form-item class="wrapper__input">
			<o-input />
		</o-form-item>
	</div>
	<o-form-item>
		<o-input />
	</o-form-item>
	<o-form-item>
		<o-input />
	</o-form-item>
</o-form>

...

.wrapper {
	display: flex;
	justify-content: space-between
}

.wrapper__input,
.wrapper__input {
	width: calc(50% - 8px);
}

Proposal 1: Change Margin styles

Change margin-bottom: 24px to:

.FormItem + .FormItem { margin-top: 16px; }
.FormItem + .FormItem.hasLabel { margin-top: 24px; }

Code

<o-form>
	<o-grid :span="[6, 6, 12, 12]">
		<o-form-item slot="grid-item" label="Label Text">
			<o-input />
		</o-form-item>
  		<o-form-item slot="grid-item" label="Label Text">
			<o-input />
		</o-form-item>
		<o-form-item slot="grid-item" label="Label Text">
			<o-input />
		</o-form-item>
  		<o-form-item slot="grid-item" label="Label Text">
			<o-input />
		</o-form-item>
	</o-grid>
</o-form>

Pros:

• Simple solution. No prop or change in markup required by engineers.
• Turns off margins when we don’t want them, but allows us to keep them when we need them.
• Solves the same problem FormItemGroup was trying to solve (o-form-items with no labels will automatically be closer together. No grid required.)

Cons

• Grids have 16px gutters but design wants 24px gutters between these form items, so this fix is insufficient if 24px space is desired. Unsure if this is a discrepancy in ODS.
• Might be visually breaking if an engineer was relying on a bottom margin for when a o-form-item was next to something other than a o-form-item. This is easy to correct though, and is perhaps a better practice on our end.

Proposal 2: Condensed Prop

In this solution, we add a prop condensed to o-form-item which removes the margin bottom. condensed can also be added as a prop to an o-form and would set all o-form-item components inside to condensed.

Code

<o-form condensed>
	<o-grid :span="[6, 6, 12, 12]">
		<o-form-item slot="grid-item" label="Label Text">
			<o-input />
		</o-form-item>
  		<o-form-item slot="grid-item" label="Label Text">
			<o-input />
		</o-form-item>
		<o-form-item slot="grid-item" label="Label Text">
			<o-input />
		</o-form-item>
  		<o-form-item slot="grid-item" label="Label Text">
			<o-input />
		</o-form-item>
	</o-grid>
</o-form>

Pros:

• Only one prop needed.
• Allows us to turn off margins when we don’t want them, but allows us to keep them when we need them.
• Solves the same problem FormItemGroup was trying to solve, though in this case it requires the engineer to add an o-grid to the form to do so.

Cons

• Grids have 16px gutters not 24px gutters, so this fix is insufficient if 24px space is desired. Unsure if this is a discrepancy in ODS or not.

Proposal 3: Leverage FormItemGroup

In this proposal, we add a new o-form-item component. This component makes the o-form-item elements inside it spaced closer together. It can also be given a horizontal option to lay the items out in a single row.

Code

<o-form>
	<o-form-item-group horizontal>
		<o-form-item label="Label Text">
			<o-input />
		</o-form-item>
  		<o-form-item label="Label Text">
			<o-input />
		</o-form-item>
	</o-form-item-group>
	<o-form-item label="Label Text">
		<o-input />
	</o-form-item>
  	<o-form-item label="Label Text">
		<o-input />
	</o-form-item>
</o-form>

Pros

• Unlike 1 and 2, this solution allows us to get 24px vertical spacing and 16px horizontal spacing
• Allows for use cases that do not adhere to a grid, such as a credit card or address form where there might be several different inputs arranged side by side at arbitrary widths

Cons

• Introduces a new component isn’t as simple an approach as the other two
• We’re sort of re-implementing a grid in a way, albeit a simpler and more constrained type of grid. Really, we're just trying to write some css for them.
• How would we handle responsive?

Proposal 4: Grid Prop

Add props to grid for changing the gutter. gutter changes all gutters. gutter-vertical changes vertical gutters. gutter-horizontal changes horizontal gutters.

Code

<o-form>
	<o-grid :span="[6, 6, 12, 12]" :gutter-vertical="0">
		<o-form-item slot="grid-item" label="Label Text">
			<o-input />
		</o-form-item>
  		<o-form-item slot="grid-item" label="Label Text">
			<o-input />
		</o-form-item>
		<o-form-item slot="grid-item" label="Label Text">
			<o-input />
		</o-form-item>
  		<o-form-item slot="grid-item" label="Label Text">
			<o-input />
		</o-form-item>
	</o-grid>
</o-form>

Pros

• Requires one prop
• Has potential future applications
• Unlike 1 and 2, this solution allows us to get 24px vertical spacing and 16px horizontal spacing

Cons

• Is this something we really want grid to do?
• Could introduce inconsistency in the product