[feat] `<pf-breadcrumb>` element

patternfly / patternfly-elements

PatternFly Elements. A set of community-created web components based on PatternFly design.

https://patternflyelements.org/

MIT License

375 stars 89 forks source link

[feat] `<pf-breadcrumb>` element #2688

Open markcaron opened 5 months ago

markcaron commented 5 months ago

We need a Breadcrumbs component.

Note: not sure why it's singular ("breadcrumb") and not plural ("breadcrumbs").

Design

PF spec

Dev Notes

Proper WAI pattern (which PF follows)

Deviations from PF 1:1

Worth noting that PF uses SVGs for the chevron dividers, when it would be incredibly easy (as well as more efficient) to just use a pseudo-element and CSS for the chevron. There's just no need to pass an SVG through for this symbol (see following comment)

markcaron commented 5 months ago

CSS chevron on a pseudo-element

This should get it roughly the same size as PF's design, though modify as needed:

a::after {
    content: "";
    position: relative;
    top: 0.75em;
    right: 0;
    display: inline-block;
    margin: 0 0.5em;
    width: 1.05em;
    height: 1.05em;
    box-shadow: inset 0.25rem 0.25rem 0 0.0625rem #151515;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: translateY(-0.5em) rotate(135deg) scale(.5);
}

markcaron commented 3 weeks ago

Good first issue.

Worth looking at @adamjohnson's PR in RHDS: https://github.com/RedHat-UX/red-hat-design-system/pull/1535