Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] <pf-breadcrumb> element #2688

Open
markcaron opened this issue Jan 24, 2024 · 2 comments
Open

[feat] <pf-breadcrumb> element #2688

markcaron opened this issue Jan 24, 2024 · 2 comments
Labels
1:1 Aligning components with PatternFly v4 feature New feature or request good 1st issue Good for newcomers to the project; requires at least an introductory knowledge of the language new component request red hack day Good issue for Red Hack Day

Comments

@markcaron
Copy link
Contributor

markcaron commented Jan 24, 2024

We need a Breadcrumbs component.
image

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

Design

Dev Notes

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 markcaron added feature New feature or request good 1st issue Good for newcomers to the project; requires at least an introductory knowledge of the language new component request labels Jan 24, 2024
@markcaron
Copy link
Contributor Author

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
Copy link
Contributor Author

Good first issue.

Worth looking at @adamjohnson's PR in RHDS: RedHat-UX/red-hat-design-system#1535

@bennypowers bennypowers added the 1:1 Aligning components with PatternFly v4 label Sep 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1:1 Aligning components with PatternFly v4 feature New feature or request good 1st issue Good for newcomers to the project; requires at least an introductory knowledge of the language new component request red hack day Good issue for Red Hack Day
Projects
None yet
Development

No branches or pull requests

2 participants