How to consolidate card layouts in Settings and the rest of the Admin

[johanstromqvist]

Card layouts in Settings and across the rest of the admin are somewhat similar, but have the opportunity to be consolidated further. Consolidated patterns are easier to maintain, easier for builders to use, and more familiar to merchants.

General guiding principle:

• Consolidate solutions that share purpose and problem
• Retain niche solutions for meaningful differences
• Document both general defaults and niche differences to make card layout easy for builders
• Start small, move in a positive trajectory

Opportunities:

• Shared spacing rules (using the same spacing for the same reasons, visual harmony across the admin)
• Shared composition best practices (when and how to use padding, stacks, bleed, margins, etc)
• Shared rationale for action placements (which type of actions typically go where in cards)
• Shared visual language for callouts and annotations (use the same visual treatments to make it easier for builders to learn)
• ...

The first few steps to consolidate might be

• Review Polaris guidelines to make sure there are no conflicting rules or conventions that could confuse builders
• Include examples from Settings in Polaris guidelines
  • Stacks using space-300 (12px) gaps
  • Placement of list actions and list item actions
• Identify idiomatic patterns: solutions that are purposefully different to meet niche merchant needs in various admin contexts
• ...

Further opportunities to consolidate

• Cards across the admin consume the same Lists and Indexes where applicable
• ...

[davidlng]

Thoughts from a settings system POV:

Spacing

• Settings spacing system i slightly different when it comes to separating items/sections. We lean more towards using 1.5x the spacing between sections instead 2x to create the hierarchy. However, we utilize typographic treatments to aid with differentiation at 1.5x (i.e font weight/size/colour). This markets page is a good reference for the 1.5x spacing.
• The spacing here should be consolidated though imo, so it might be worth to mock up basic examples of both variations to see.

Composition

• This should be the same all around the admin. Settings is prepared to make any changes necessary to be in alignment here.

Action placements

• Action placements are dependant on the card and page context. Will have more decisive opinions on placements after a thorough audit.
• Need to audit the usage and the relationship of each instance.

Visual language

• Are we talking about the visual language in the docs and guidelines? or design language of the components?