Why hide the numbers in an ordered list?

[galaxyblur]

I tried looking for an explanation or another issue that addresses this, but I didn't find anything.

What's the reasoning behind hiding the numbers or default list item style for an ordered list? There's no visual difference that I can see when using an ordered list vs. unordered list, which defeats the purpose of having this useful distinction.

[patrickhlauke]

in a particular component? do you have an example of where this happens?

[galaxyblur]

In vanilla Bootstrap 4, if you make an ordered list using the list-group classes, there are no numbers. This is because the list items have display:block, not display:list-item.

https://jsfiddle.net/6txzb45y/1/

[patrickhlauke]

just changing the display won't quite fix this, will need further work. but in answer to your "What's the reasoning", the answer is likely "that pattern didn't come up, so was not tested/considered when devising the styles"

[galaxyblur]

Thanks for the response, but if that's really the case, I find it worrisome that any HTML element, let alone <ol />, wasn't tested or looked at with Bootstrap 4.

Edit: Maybe the "pattern" you're referring to is using list-group with ordered lists, which I could see as an oversight but it'd be nice to have Bootstrap styling options for ordered lists.

[patrickhlauke]

Maybe the "pattern" you're referring to ...

yes (see http://getbootstrap.com/docs/4.0/content/reboot/#lists ... we're not completely stupid ;) )

[galaxyblur]

None of us are completely stupid! 😄

Thanks. Maybe one improvement would be to mention in the docs for list-group to avoid using for <ol />. As far as I can tell they aren't mentioned, and I think I might not be alone in assuming that the list styles are universal (list-group vs. unordered-list-group).

[patrickhlauke]

it's a valid use case, so left this open here because we may want to fix it at source and make it work...

[mdo]

I don't think we need to adjust the list groups to show numbers from ordered lists. We don't do it for bullets with unordered lists. These are custom components, not browser defaults. In many cases it's relevant to use an order, and reflect that semantically in our HTML, but less so in the visual/layout sense with our CSS.

At most I'd say a docs mention could be added, but I don't think that's even necessary tbh.

[galaxyblur]

As an end user of Bootstrap, I respectfully disagree. Bullets with unordered lists serve an entirely different purpose, and you are able to compensate for their removal with other styling options.

Being able to have those same styling options for ordered lists—while also including numbering, et al.—would be very helpful.

These are custom components, not browser defaults.

I'm not asking for new browser defaults, but by extending the existing list-group styles, more custom components. Please consider it a feature request.

In many cases it's relevant to use an order, and reflect that semantically in our HTML, but less so in the visual/layout sense with our CSS.

I can't think of a case when I'd want a semantic order in the markup but not display that to the user. This is the entire point of having separate ul and ol elements, in my opinion.

At most I'd say a docs mention could be added, but I don't think that's even necessary tbh.

Again, as an end user, I was confused enough by the docs to open an issue. I may not be the only one to encounter this. The concept of "necessary" isn't really the point. Even if you think my reading comprehension is poor (I don't think it is), adding a sentence to help people like me would be appreciated and do nothing but make things clearer for everyone.

I don't like being so critical of FOSS like Bootstrap, because the bottom line is that its existence is a net positive for the community. So thanks to everyone who's contributed.

[jrd-lewis]

Instead of changing the list group component's styling directly, you could simply make a utility class to add the display: list-item property and then apply it to the li elements.

As an example: https://codepen.io/anon/pen/dmwOBr

[LarryAzevedo]

I agree with @mdo and @jslewis90. If it's something you really need, you could always overwrite it.

[LarryAzevedo]

To build off of the example @jslewis90 provided. If you needed the bullet points or numbers to be inside, you would just do it like this:

.d-list-item {
  display: list-item;
  list-style-position: inside
}

[galaxyblur]

I just want to make sure my point is clear (after a bit of discussion here with @patrickhlauke):

I think there are improvements to make in that:

1. When using list-groupwith ol, the numbers are hidden, which defeats the purpose of using ol.
2. If the intent of list-group is to only be used with ul, then the class name is a misnomer and confusing for the end-user.

[LarryAzevedo]

OK so after some thought I think he makes a valid point because we should be anticipating desired outcomes. That said, if someone made it a point to create the list groups using an ordered list, then we should anticipate that they want to show numbers.

[XhmikosR]

@patrickhlauke how do we proceed with this?

[LarryAzevedo]

As I'm sure most of you know, using an <ol> means something special and explicit to the user agent (other than just displaying numbers). It says, "Hey, the order of my items are very important". This is especially true for those using a screen reader. That said, I think if the author used an <ol>, displaying numbers is probably the way to go. Here's a common scenario:

A step wizard:

It's worth mentioning that authors should use aria-current if appropriate. So in the case of the above example, using something like <ol class="list-group" aria-current="step"> might be recommended. Here's more info on that attribute if you want to read up on it.

[patrickhlauke]

@patrickhlauke how do we proceed with this?

fundamentally I agree we want to show the numbers when they're <ol>, but of course not showing bullets when it's <ul>. but depends how we want to proceed.

the simplest would be modifying the list-group css styles to special-case if they're applied to <ol> rather than <ul>...something like

ol.list-group > .list-group-item {
  display: list-item;
  list-style-position: inside;
}

but i know we've been keen to avoid modifying the styles of bootstrap's classes based on which element they've been applied to. so...do we instead propose a whole separate set of styles? .list-group-ordered ? which replicates all the styles of .list-group, but then overrides this aspect?

.list-group-ordered > .list-group-item {
  display: list-item;
  list-style-position: inside;
}

or do we do a modifier hanging off of .list-group-item? .list-group-item-ordered? to be used perhaps in conjunction with .list-group-item, so you'd end up with lengthy constructs like <li class="list-group-item list-group-item-ordered"> ?

.list-group-item-ordered {
  display: list-item;
  list-style-position: inside;
}

basically, there's variations on how we want to get to it. depends on the philosophical approach you want to take (purity of the CSS no referencing elements/special casing based on markup? a whole new set of classes? a modifier?)

@twbs/css-review any thoughts?

[ffoodd]

Does this only concern our list groups?

[MartijnCuppens]

I'm ok with adding something like this:

ol > .list-group-item {
  display: list-item;
  list-style-position: inside;
}

If you really choose ol over ul, it sounds obvious to add the numbers.

[LarryAzevedo]

@MartijnCuppens I think the direction they may go in is to use a class name. As the documentation says (https://getbootstrap.com/docs/4.4/extend/approach/#flexible-html) “Thus we focus on single classes in our CSS selectors and try to avoid immediate children selectors (>).”

[patrickhlauke]

FWIW @MartijnCuppens is one of those shady "they" and so am I ;)

[LarryAzevedo]

Does this only concern our list groups?

I went through all the components and I would say yes, it only concerns list groups.

Technically, you could make the case for it in the pagination component but that’s a little more complex and possibly not worth it.

[patrickhlauke]

Does this only concern our list groups?

list groups is one of the only obvious ones I can think of.

[MartijnCuppens]

Aight, feel free to open a PR

[patrickhlauke]

Filed #32244 ... let's see how we go then