Breadcrumb — Mobile Enhancements

[ghost]

Is your feature request related to a problem or use case? Please describe.
Design would like enhancements to bread crumb to make it work better on mobile. Things to observe to make mobile enhancements:

• 16 regular and 16 bold instead of 14 reg and 14 bold (for desktop as well)
• 8px margin/padding
• In this example we would need truncated text
• Tiers not shown, should be under the ellipsis.
• Do the size changes in web component as well (setting hitbox="true/false" on hyperlink/breadcrumb)

For Hitboxes..
To do this we should add a hitbox class that adds the hitbox extra element like the css below. And show this on the hyperlink and breadcrumb example- examples and one example without the hitbox.

a.hyperlink.hitbox:after {
  content: '';
  position: absolute;
  border: 1px dashed black;
  height: 44px;
  width: 44px;
  left: 0;
  width: 100%;
  top: -12px;
}

Describe alternatives you've considered
N/A

Additional context
https://jira.infor.com/browse/UXD-2771

[tmcconechy]

We will have to see about the hit boxes and add them in a way that it doesnt too much impact the UI designs or push other elements around. For this component i think it should be doable

[CindyMercadoReyes]

Hello all BDD has been created for this ticket. Thanks, Cindy @ericangele @tmcconechy
BDDStory_github5408.docx
s

[ericangeles]

Adding @maezcruz

[nganotice]

This has been QA tested and passed on v4.57.0-dev.

Font sizes are both in 16px
Breadcrumb in Flex Header

Breadcrumb with Hitbox

Moving this ticket to Done.

Thanks!