Experimental Design: Establish padding for breadcrumb component

sterkenburgsara commented 6 months ago

What

Suggestion to establish sitewide padding specifications for breadcrumb component on Desktop and mobile

Purpose

Today, padding is not consistent across the site around this component, which makes it challenging for users to rely on the placement and spacing of it as a navigational component. The consistency needs to be established for two distances:

Padding above the breadcrumb (between the header and the breadcrumb)
Padding below the breadcrumb (between the breadcrumb and the page title/H1)

Usage

This is a sitewide component used globally on a vast majority of pages.

Behavior

Mobile likely shouldn't have as much padding as desktop given the smaller real-estate, but will defer to design system team.

Examples

The forms team seems to have 56px established as a lower breadcrumb padding distance on Desktop (between breadcrumb and page title/H1) and documented in Figma; but this is not a given across the site and is not listed in VADS guidance on the design system website. In the MyHealtheVet space, I noticed that health tool pages are inconsistent, using anywhere between 8px - 47 px for this same measurement. Slack thread here. It would be super helpful to us to have sitewide guidance to lean on!

Accessibility

Have consistent spacing and reliable placement for navigational components would make the breadcrumb component more accessible.

Guidance

Decision around padding for this component should be passed on to CAIA/Drupal pages in the CMS as well if possible.

Research (optional)

N/A

Code (optional)

N/A

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #platform-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.

sterkenburgsara commented 6 months ago

@caw310 async please :-)

jeana-adhoc commented 6 months ago

Adding a note here that the Forms Team has an epic in the backlog to look into how padding/margins are implemented across forms in forms library components/patterns. But it's a tangled web to sort this out.

humancompanion-usds commented 5 months ago

@danbrady to test out what we have in the component today which is 16px padding top and bottom. We'll take a look to see if that is sufficient in different contexts. If it is, then we'll update the guidance. If not, we'll design some recommendations and talk them over.