Dropdown menu alignment fixes

[mdo]

This does a couple things in an attempt to resolve, at least temporarily, our dropdown menu alignment issues.

1. Removes the &[style] { ... } override @MartijnCuppens added. This alone resolves Dropdown menu not positioned correctly with .dropstart #32484, but this caused other issues with the menu alignment classes on static dropdowns.

2. So, to fix that, now the menu alignment classes .dropdown-menu-start and .dropdown-menu-end are positioned via Popper and use the --bs-position CSS variable. I've removed the left and right properties for those.

3. And, in combination, I've scoped those left and right properties to instances of the -start and -end classes that are used with data-bs-display="static". It's not the best, but it resolves the alignment near as I can tell for all dropdown menus, static or otherwise.

In the docs, I've added a temporary set of all the dropdown alignment options at the top of the page so I can quickly check things. I'll migrate this to the cheatsheet pages I think before merging, but didn't want to do that until getting some eyes on this.

Whatcha think—good enough for solving our woes ahead of Beta 2?

/cc @ffoodd @XhmikosR

TODO:

• clean up squash any patches manually
• needs tests

[rohit2sharma95]

This would restrict the user to use the the display static option only via data attributes. User can create the static dropdown via JavaScript as well.

[mdo]

This would restrict the user to use the the display static option only via data attributes. User can create the static dropdown via JavaScript as well.

@rohit2sharma95 Gah, forgot about that. Any ideas for how we could do something programmatically in our JS to better handle this then?

[rohit2sharma95]

This is now stable fix IMO 🙂
Let me know your thoughts @mdo

[XhmikosR]

@rohit2sharma95 can you add some tests please? Also, can you explain why we the last patch of yours?

[rohit2sharma95]

Because these data attributes are being added just for the styling of the dropdown menu, so instead of adding the attributes on the button element it would be good to add them on the dropdown menu directly.

[rohit2sharma95]

Since now there is a data attribute available to be sure about the usage of the Popper in the dropdown, the following code can be changed by using data-bs-popper:

bootstrap/scss/_dropdown.scss

Lines 187 to 189 in 22d8e34

	&:not([data-popper-placement]) {
	margin-top: $dropdown-spacer;
	}

[mdo]

Awesome, if this looks good to y'all @XhmikosR and @rohit2sharma95, we can merge and then review #33003 and possibly merge that before Beta 2. Fine to wait until Beta 3 though if that's better!

[ffoodd]

There's something missing for RTL, as you can see in this PR RTL Cheatsheet: not quite sure about what to do however.

[mdo]

@ffoodd Do you mean we're missing an example in the RTL cheatsheet, or we're missing a bug?

[rohit2sharma95]

Popper cannot bear the right style on the popper elements 😄

[ffoodd]

Oh sorry @mdo, yeah it's buggy in RTL since dropdown menu it's not right aligned until playing around with devtools.

[rohit2sharma95]

Now seems fixed @ffoodd
https://deploy-preview-32986--twbs-bootstrap.netlify.app/docs/5.0/examples/cheatsheet-rtl/#dropdowns

[ffoodd]

Indeed, thanks @rohit2sharma95! 🚀