primer/design

A component to view configurations in a compact key-value style

mperrotti opened this issue · 1 comments

mperrotti commented

Add a component to Primer that can show a lot of configuration data in a compact (but still easy to parse) format. There should be buttons to add or edit data. To maintain simplicity, this should not allow inline editing.

This component should handle:

  • A single configuration object
  • A group of configurations
  • Controls to edit each item in a configuration object

Design WIP

🎨 Figma

Wireframe of a group of configurations

Wireframe showing details of an individual configuration

Demo

2 configurations

A collection of configurations with different amounts of defined data

Hierarchically grouped configurations

Component API

  • ConfigurationMapGroup
    • ConfigurationMapGroup.Title
    • ConfigurationMapGroup.Description
  • ConfigurationMap
    • ConfigurationMap.Title
    • ConfigurationMap.Description
    • ConfigurationMap.Action
    • ConfigurationMap.Section
    • ConfigurationMap.Item
    • ConfigurationMap.Label
    • ConfigurationMap.Value
    • ConfigurationMap.ItemAction
mperrotti commented

Filed in wrong repo