Toasts: Change showing timings and classes to keep toast display:none by default

[GeoSot]

Background:

Toast Component uses hide to force it get a display: none.
This causes some strange attitude on initialized components that doesn't have show class, as ti overlaps page content cause of given opacity. We have also the hide class to use in order to keep the component hidden.

Solution:

We can borrow the Collapse component functionality, and by changing some class timings, we can avoid hide

Fixes #28752

Preview: https://deploy-preview-33610--twbs-bootstrap.netlify.app/docs/5.0/components/toasts/

[patrickhlauke]

Purely from a functional point of view (whether it plays nice with AT, does what it's supposed to, etc), this seems to be working fine on https://deploy-preview-33610--twbs-bootstrap.netlify.app/docs/5.0/components/toasts/

Can't verify if this indeed closes #28752 as even on our current live docs page (without this fix) I'm not seeing the original problem - can somebody replicate the test case from that issue, using the changes from this PR, to verify?

[GeoSot]

@patrickhlauke I may find a working example here #28752 (comment)

[patrickhlauke]

ah yes ... if https://jsbin.com/gugatopiwi/1/edit?html,output is essentially using the same code as proposed here, it seems to address that problem 👍

[mdo]

Is this a breaking change at all?

[XhmikosR]

I'll move this to 5.0.2 so that we get more eyes on this.

BC

[XhmikosR]

Unfortunately, we can't land this even if it doesn't cause any issues. People might be overwriting the CSS selectors.

We can target this to v6.0.0.

[patrickhlauke]

what's the breaking concern? that authors may have used class="show hide" together, and the new CSS selectors (which now do away with .hide) won't kick in correctly?

[XhmikosR]

Yup, exactly. As much as I like a good cleanup, this will break people's overwrites. :/

[GeoSot]

@XhmikosR As an alternative, we can leave the hide class to be toggled for backwards compatibility
(And write on docs that it is deprecated)

this would be ok?

[patrickhlauke]

doubling it up for now with &.hide, &:not(.show) { ... } etc would indeed avoid breakage? i think it's important to fix the bug soon, rather than waiting for 6.0

[GeoSot]

I don't think we have to leave the css functionality on hide class, as it will be handled fine by the others.
Only the js class toggling, in case someone has based styling over its existance

[mdo]

Yeah, as long as we're not removing the class toggle entirely—and only changing the use of it in our CSS—I think we're in the clear.

[GeoSot]

Did the change, added documentation

[ffoodd]

Apart from some wording, it looks great IMHO. CSS gets kind of defensive this way 👍