Skip to content

Formalise a collapsable container where existing options aren't meeting team needs

Finding from crud_component investigation findings and recom... (#2965 - closed)

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="19:267-19: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)

Collapsable container to reveal more information about a single item

During the audit, I noticed increased planned and actual usage of this across the platform. For example:

This usage points to needs that are not being met by the design system.

image.png

The new runner creation flow uses stacked crud_component as accordions to separate information.