Formalise form sectioning guidance

Using crud_component as a container

Around a 25% of instances identified were using crud_component to visually separate its contents from other elements on the page.

These instances contained no create, read, update, or delete functionality, and were often used to represent a single item rather than contain a list of similar items.

The container usages can be grouped into the following buckets:

• Collapsable container to reveal more information about a single item.
• Visible form section container.
• Container for a single item with one or more actions.
• Visible container, often on the same page as other CRUD components.

This usage points to needs that are not being met by the design system. It also creates tension with a current design goal to unbox the UI.

There is an urgency to act on this insight as I see increased planned and actual usage of this across the platform. For example the refactored commit list, <strong data-sourcepos="17:267-17:285">agent catalogue</strong>, and workspaces.

We should also recognise previous efforts to codify widgets as a pattern and component which have influenced some of the design decisions. See also: Create design spec for Widget Component (gitlab-org/gitlab-ui#1937 - closed) Create a Widget Component for generic use (gitlab-org&8534)

Visible form section container

There were multiple instances where a form used a crud_component implementation to mark it as separate from other form items.

Sometimes it would contain part of a form, other times the complete form.

This points towards gaps in the design system solutions for forms and form sections.

Implementation using it to wrap a form section and provide user feedback

More examples (click to expand)

More

This also came up in a recent MR review gitlab-org/gitlab!205490 (comment 2767328888)