[Bug]: Unordered list item markers extend beyond list bounds

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:

.bx--list--unordered>.bx--list__item:before {
    content: "\002013";
    left: -1rem;
    position: absolute;
}

Maybe the list should have some left padding to offset the marker placement?

Screenshots

From live demo page:

Steps to reproduce

• Create an unordered list component with items in it or go to live demo page and set variant selector to Unordered list
• Inspect DOM element layout of list ul.bx--list--unordered element

Code of Conduct

• I agree to follow this project’s Code of Conduct
• I checked the current issues for duplicate problems

[aagonzales]

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.

[tay1orjones]

Seems like this is just a normal bug and not an intended design feature.

With that in mind, I think the original suggestion seems reasonable to explore as a fix:

Maybe the list should have some left padding to offset the marker placement?