Skip to content

Breadcrumbs not following guidance #3635

Open
@Mottie

Description

@Mottie

Bug Report

  • I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

In the newly released usability guidance for breadcrumbs, it states that breadcrumbs should have 20px above and 48px below the component. This is correctly set on the <nav> inside the va-breadcrumbs

dev tools inspection of the breadcrumb nav inside the shadow dom with 20 pixels of padding above and 48 pixels of padding below

But, if you inspect the actual `va-breadcrumbs`, you'll note an extra 16px of padding above and below the breadcrumbs

dev tools inspection of outer va-breadcrumbs wrapper showing 16 pixels of padding on all sides of the component

This `1em` of padding is defined by `.va-nav-breadcrumbs` within the `m-breadcrumbs.css` file within the css-library

.va-nav-breadcrumbs {
  background: #ffffff;
  color: #005ea2;
  font-size: inherit;
  padding: 1em 0; /* <-- this definition */
}

What I expected to happen

The extra 16px of top and bottom padding on the va-breadcrumb should be removed

Reproducing

  • Formation version: All
  • Device: (e.g. iPhone 8, Macbook) All
  • Browser: (e.g. Firefox, IE 11) All

Steps to reproduce:

  1. Go to a form introduction page with breadcrumbs; Note that form 526 doesn't have this issue. I don't see the .va-nav-breadcrumbs definition
  2. Inspect the va-breadcrumbs element
  3. Look at the style definitions

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

  • This bug is blocking work currently in progress
  • This bug is affecting work currently in progress but we have a workaround
  • This bug is blocking work planned within the next few sprints
  • This bug is not blocking any work
  • Other

Details

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions