Add horizontal collapse support

[mdo]

Thanks @vanillajonathan for the demo at #17496!

This PR finally implements this longstanding request for a horizontal collapse. We already have the JS support, so we were missing the CSS for .width.collapsing and a child element with a fixed width.

Fixes #17496.

Preview: https://deploy-preview-34253--twbs-bootstrap.netlify.app/docs/5.0/components/collapse/#horizontal

[GeoSot]

As .width is very generic as class name, maybe we can use a more scoped class ex: collapse-horizontal etc?
If I am not wrong, is about one line change on js code (collapse.js line:269)

[mdo]

I think since folks may have been using this already (in both v4 and v5), we're stuck with .width. I've searched around and this class has come up a couple times. I agree though and would love to change it in v6.

[voltaek]

From what I can see, .width isn't in Bootstrap v4 or v5, so why do we need to support a markedly bad class name when it's never been in the codebase? Your other attempt at implementing this was already using .collapse-horizontal, anyways.

[mdo]

These lines are what makes .width functional right now:

bootstrap/js/src/collapse.js

Line 54 in 2b2183a

const WIDTH = 'width'

bootstrap/js/src/collapse.js

Lines 268 to 270 in 2b2183a

	_getDimension() {
	return this._element.classList.contains(WIDTH) ? WIDTH : HEIGHT
	}

Switching to any other class would require changing some JS. Arguably no one should be using .width because it's completely undocumented and unsupported, so I'm in favor of changing it, but wanted to raise that it could be a breaking change to someone out there.

[alpadev]

cough #31681 (comment) Not sure if I should feel ignored.. :P

[mdo]

cough #31681 (comment) Not sure if I should feel ignored.. :P

Lol, nooo, I feel so bad. Sorry for not seeing that! 😅

[mdo]

Renamed the class from .width to .collapse-horizontal.

Note that if we want to backport this to v4, we'd likely have to use .width still as the examples I found used that class and it's so far along in v4's life that we wouldn't want to change IMO. Still not 100% for sure we should change it here even though it's not the best :).

[ffoodd]

Very elegant, a great example of collaborative work! ❤️

[ffoodd]

Maybe promote our width utilities here, and a link to how-to add utilities?

[ffoodd]

Just wondering if contains and will-change could help here? Can't play with this right now, but something to keep in mind for improving v5 regarding repaint / reflow and animation.