-
Notifications
You must be signed in to change notification settings - Fork 1.9k
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
[Bug]: Unordered list item markers extend beyond list bounds #10181
Comments
Hi @brunnerh thanks for opening this issue. This was done intentionally. The list components (both ordered and unordered) are meant to align the text on the grid, not the marker, as you can see here: Is there a design or a11y reason you think this is wrong? |
@jnm2377 I think this makes too many assumptions about layout to work. The components will not necessarily be directly in a grid (otherwise the usefulness of the component is severely limited), nor does it always work in the grid itself, which has responsive breakpoints which cause the markers to be cut off at small screen sizes. |
@carbon-design-system/design do y'all have any input in terms of the layout? |
This one is interesting because I'm not really sure why the bounding box was intentionally excluding the dashes from a design perspective. I don't think it's a grid thing. In the original duo spec the dashes and numbers are aligned to the paragraph and title next not the list text like suggested. So im not sure where the weird indenting came from. Might need to check some old issues. Even on the grid the dashes shouldn't be hanging in the gutter. That's not typographically correct and I don't think design would have recommended that. The dash or numbers are considered typographic elements and therefor aligning them to the other type is correct. You also need the intend for proper typographic hierarchy between a list and header or body copy. Seems like this is just a normal bug and not an intended design feature. |
here’s a good live sample |
With that in mind, I think the original suggestion seems reasonable to explore as a fix:
|
The middle one looks good to me. |
Package
carbon-components
Browser
Chrome
Package version
v10.47.1
Description
The top level elements of an unordered list have
–
markers that end up outside the bounding box of the list.The marker is added via
:before
:Maybe the list should have some left padding to offset the marker placement?
Screenshots
From live demo page:
Steps to reproduce
Unordered list
ul.bx--list--unordered
elementCode of Conduct
The text was updated successfully, but these errors were encountered: