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

Default Styling for this <Breadcrumb /> Class Puts it Way Off Screen #2993

Open
greenteaisgreat opened this issue Aug 3, 2024 · 0 comments

Comments

@greenteaisgreat
Copy link

greenteaisgreat commented Aug 3, 2024

ReactUSWDS Version & USWDS Version:

React USWDS: 9.0.0
USWDS: 2.14.0

Describe the bug

The default styling for the ".usa-breadcrumb__list-item" class (as it stands in my project) is this:

breadcrumb-styling

Would y'all know why it's defaulting to an absolute position with a left property that will never appear within the viewport?

To Reproduce the Bug

Import the <Breadcrumb /> component and its relative counterparts (<BreadcrumbBar />, etc.) and label the breadcrumb link with some text; the text will overflow far off to the left, as the absolute positioning is set to left: -999rem

Expected behavior

I would expect that styling to not be set to something that won't ever appear in the window.

Screenshots

This is how I'm implementing the breadcrumb component
breadcrumb

Additional context

Here's the closest source I could find to its implementation in Trussworks' code:

https://github.com/trussworks/react-uswds/blame/9e3bea7ead5042b0cda4cd3f3d9d7bb325f87c07/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx#L16

This could also be an issue within USWDS, as I'm sure y'all are just drawing from their styles and packaging them up into importable components. Any and all information would be greatly appreciated!

@greenteaisgreat greenteaisgreat changed the title Default Styling for this Breadcrumb Class Puts it Way Off Screen Default Styling for this <BreadcrumbLink /> Class Puts it Way Off Screen Aug 3, 2024
@greenteaisgreat greenteaisgreat changed the title Default Styling for this <BreadcrumbLink /> Class Puts it Way Off Screen Default Styling for this <Breadcrumb /> Class Puts it Way Off Screen Aug 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant