Layout: Grouping/Segmenting controls

I think we need some components/conventions to make it simple to create cohesive clusters and groupings of controls. In the screenshot above, things are arbitrarily spaced using <Spacer />. It works as it follows the grid system, but I feel like it should be even more seamless than that.

Maybe something like this?

<FormGroups title="Dimensions">
  <FormGroup label="Width">
    <TextInput />
  </FormGroup>
  <FormGroup label="Height">
    <TextInput />
  </FormGroup>
</FormGroups>

Similar to how iOS handles clusters (groups) of controls via Tables

https://developer.apple.com/design/human-interface-guidelines/ios/views/tables/

Not only should it handle the typical use-case of Label [ TextInput ], but it should also accommodate custom UI, like a potential color setting (below):

[jasmussen]

As a prototype, I feel like this definitely suggests the “dim adjacent” feels sufficient. Also, that’s a lot of colors in the test, which suggests a scrolling popover — a scrolling popover inside a sidebar that may also be scrolling would be a really bad experience, which I also feel suggests that opening these inline feels right.

[ItsJonQ]

I think I’ve figured out the Component structure API!

The challenge is that this (generic) ListGroup must accommodate varying control types (sliders, switches, text inputs, etc…). There are some common patterns though for ListGroup usage, such as:

• Header (title + potential action)
• Spacing between items (potentially rendering a separator)
• Footer (caption / help text for section)

With how Gutenberg is evolving, controls will most likely need to be enabled or disabled based on configs. Therefore, the layout components must account for this - whether it’s side margins, bottom margin zero’ing, or grid gaps.

Thankfully, we have some of this stuff figured out with Grid, HStack, and VStack.

Demo

Below is a demo for how a mixture of controls can be grouped, sectioned, and enabled/disabled at will. The margin/spacing between controls maintain the “rules” determined by G2’s grid/spacing systems.

Code

Here’s the exciting me (for me at least, haha), check out the code:

<ListGroup>
  <ListGroupHeader>Title</ListGroupHeader>
  <FormGroup label="Some Field">
    <TextInput />
  </FormGroup>
  <FormGroup label="Another Field">
    <TextInput />
  </FormGroup>
</ListGroup>

A cluster using a Grid may look like this:

<ListGroup>
  <ListGroupHeader>Title</ListGroupHeader>
  <Grid>
    <Select prefix={<Icon />} />
    <Select prefix={<Icon />} />
    <FormGroup label="Some Field">
      <Switch />
    </FormGroup>
  </Grid>
</ListGroup>

Here they are combined:

<ListGroups>
  <ListGroup>
    <ListGroupHeader>Title</ListGroupHeader>
    <FormGroup label="Some Field">
      <TextInput />
    </FormGroup>
    <FormGroup label="Another Field">
      <TextInput />
    </FormGroup>
  </ListGroup>

  <ListGroup>
    <ListGroupHeader>Title</ListGroupHeader>
    <Grid>
      <Select prefix={<Icon />} />
      <Select prefix={<Icon />} />
      <FormGroup label="Some Field">
        <Switch />
      </FormGroup>
    </Grid>
  </ListGroup>
</ListGroups>

Notice the ListGroups wrapper

Header + Action

There may be a case where the Header title may be accompanied by an action (right side).

The code to do this is also quite simple!

<ListGroup>
  <ListGroupHeader>
    Title
    <Button size="small">Edit</Button>
  </ListGroupHeader>
  <Grid>
    ...
  </Grid>
</ListGroup>

Context Is King

Certain components that render under ListGroup needed to adjust their behaviour (e.g. spacing). This was all achieved using G2’s Context System, not arbitrary CSS targeting (although the principles are similar).

This is an important distinction.

Components can gain “awareness” based on where they’re placed, and adapt their functionality accordingly.

This is very different compared to CSS where…

HTML elements can gain style rules based on where they’re placed, and adapt their aesthetics accordingly.

A ListGroupHeader knows it’s inside of a ListGroup, and is placed accordingly. If a Grid is rendered as a child within ListGroup, it’s gap spacing is tweaked, (without affecting potential child Grid components).