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

[brunnerh]

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

[jnm2377]

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:

https://codesandbox.io/s/list-example-gfh2v?file=/index.js

Is there a design or a11y reason you think this is wrong?

[brunnerh]

@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.

[jnm2377]

@carbon-design-system/design do y'all have any input in terms of the layout?

[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.

[mjabbink]

here’s a good live sample
https://www.ibm.com/design/language/philosophy/principles

[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?

[alisonjoseph]

I did a few quick explorations on a fix for this, and it gets a little tricky when it comes to ordered list. If we only add the spacing to the unordered list then it is no longer in alignment with ordered list. If we add it to both, then ordered list gets a little wonky with the number placement, however the text aligns.

As-is	UL only Spacing	UL/OL Spacing

@carbon-design-system/design what would design prefer, leave as is, or add the left spacing?

[mjabbink]

The middle one looks good to me.