NavDropdown alignRight does not allow for breakpoints

Describe the bug

I’d like to be able to constrain the alignRight property of NavDropdown’s based on breakpoint, much the same way you can do this with other bootstrap properties (e.g. dropdown-menu-{breakpoint}-right classes).

Related to #4994 and #3310?

To Reproduce

Open https://codesandbox.io/s/naughty-ellis-w4zo1 and play with the drop-down at different page widths.

Notice that when the page is narrow and the Toggle element moves to the left, the alignRight property no longer makes sense.

Expected behavior

Applying something like className="dropdown-menu-sm-right" works with regular Dropdown components, but does not appear to be possible with NavDropdown’s. I tried alignRight="sm", but that doesn’t do anything (other than spit lint errors.)

Screenshots

When the screen is wide, the alignRight makes sense …

But when the screen is narrow, and the dropdown button moves to the left, the dropdown is in the wrong spot…

Environment (please complete the following information)

$ npx envinfo --system --browsers --npmPackages --binaries
npx: installed 1 in 0.859s

  System:
    OS: macOS 11.1
    CPU: (8) x64 Apple M1
    Memory: 29.52 MB / 16.00 GB
    Shell: 5.1.0 - /usr/local/bin/bash
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 88.0
    Safari: 14.0.2
  npmPackages:
    @parcel/babel-plugin-transform-runtime: 2.0.0-nightly.1823 => 2.0.0-nightly.1823
    @types/react-dom: 17.0.3 => 17.0.3
    @types/react-router-dom: 5.1.7 => 5.1.7
    @typescript-eslint/eslint-plugin: 4.20.0 => 4.20.0
    @typescript-eslint/parser: 4.20.0 => 4.20.0
    bootstrap: 4.6.0 => 4.6.0
    eslint: 7.21.0 => 7.21.0
    eslint-config-standard: 16.0.2 => 16.0.2
    eslint-plugin-import: 2.22.1 => 2.22.1
    eslint-plugin-node: 11.1.0 => 11.1.0
    eslint-plugin-promise: 4.3.1 => 4.3.1
    eslint-plugin-react: 7.22.0 => 7.22.0
    fast-levenshtein: 3.0.0 => 3.0.0
    firebase: 8.4.2 => 8.4.2
    firebaseui: 4.8.0 => 4.8.0
    nanoid: 3.1.22 => 3.1.22
    parcel: 2.0.0-beta.1 => 2.0.0-beta.1
    react: ^16.13.1 => 16.14.0
    react-bootstrap: 1.5.2 => 1.5.2
    react-dom: ^16.13.1 => 16.14.0
    react-router-dom: 5.2.0 => 5.2.0
    sass: 1.32.12 => 1.32.12
    typescript: 4.2.3 => 4.2.3

[kyletsang]

@broofa

https://github.com/react-bootstrap/react-bootstrap/releases/tag/v2.0.0-alpha.2

[broofa]

Just tested this and it looks like it’s working. Thank you!

breadcrumb for anyone who might follow: Installing the latest alpha (above) and adding align={{ sm: 'end' }} worked like a charm.