Component/pattern proposal: FieldGrid

Description

WIP. Please @munthank if you have questions.

This pattern provides a compact way to present a single row of tabular data in a grid layout.

Each column of data is presented in column header: cell value form, with decoration for the column header.

The pattern is composed using these new component proposals:

  1. FieldGrid
  2. Field [Horizontal/Vertical]
  3. IconLabel (Name clashes with existing Label component)

What problem does this solve?

Dense information needs to be scannable and space-efficient without overwhelming users.

Information density

FieldGrid packs lots of data into limited screen real estate while maintaining readability.

The key-value structure creates a predictable rhythm that's easy to scan and parse.

Works well in vertical layouts (e.g., Mobile, Responsive panels)

  • Requires less horizontal space than a table
  • Reduces need for horizontal scrolling
  • Touch-friendly

Provides visual structure for unstructured data

For cases where a table is too cumbersome, but a 'Heading Label' presentation is also messy (see Vulnerability Report example).

What's it good for?

  • Metadata
  • Specifications/attributes
  • Profile information
  • Summary sections
  • Configuration display
  • Read-only form data

Examples

Area Before After

Runner Details

runner-details-before.png

runner-details-after.png

Vulnerability Report

vulnerability-report-before.png

vulnerability-report-after.png

Merge Request metadata

MR-metadata-before.png

MR-metadata-after.png

Commits list

(Epic)

 —

commits-list-after.jpg

DAP Agent Workflow list

 —

DAP workflow list.png

Workspaces list

(Epic)

workspaces-list-before.png

workspaces-list-after.png

Figma file

[WIP] FieldGrid Component →

Checklist

Make sure the following are completed before closing the issue:

  1. Assign the correct component label to this issue.
  2. Create an MR with the additions or updates needed.
  3. Be sure to get your MR reviewed by a FE/UX Foundations designer.
  4. When applicable, create an MR in Pajamas to update the demos. If you do not have capacity to complete the demos, create an issue in Pajamas and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
  5. When applicable, create an MR in Pajamas to update the component status.
  6. When applicable, create an issue in Pajamas using the "Component Documentation" issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  7. When applicable, create an issue in Pajamas using the "Figma update" issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  8. When introducing a major or breaking change, communicate the changes within the Engineering Week in Review.
  9. 🎉 Congrats, you made it! You can now close this issue.

Todo:

  1. Add image that illustrates the "single row of data" concept
  2. Add image that illustrates the component atoms
  3. Illustrate the direction of the grid (column order)
  4. Add child tasks for the components
  5. Describe the problem being solved
  6. Demonstrate 3+ places in the product that use it / can use it today
    1. Runner Details
    2. Vulnerability Report
    3. Merge Request Metadata
    4. Commits list (Alyssa)
    5. Taylor's usage: DAP Agent Workflow List
    6. Workspaces List
  7. Share confidence on how users respond to it (anecdote, data, other places this is used)
Edited by Mark Unthank