Offcanvas as component

[GeoSot]

I did a first approach on an offcanvas component.
Αll of us, have used custom solutions, but maybe an official version, would be more stable.

Do you find it interesting? May I continue on this?

Preview: https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/components/offcanvas/

TODO:

• we need to see if we can stop body scroll
• maybe blur the bg if it doesn't have any performance hit
• tweak blur, the current blur is too much IMO (XhmikosR)
• Remove height from bottom offcanvas
• Provide some default theming (white background, maybe a border or shadow like the modals)
• Disable body scrolling by default.
• measure FPS when blurring the bg (@XhmikosR i need guidance)
• update offcanvas example to use this (also move it away from the experimental category)
• reindent and fix missing end tags in the doc examples
• switch to event.key
• add more content in right, bottom examples
• <div class="h4"> should be changed to h4 or similar?
• Make sure the element is hidden and not offscreen when inactive
• enforce focus, only on open element
• Enable blur by default?
• Revert the scrollbar decoupling
• Consistent behavior of modals and offcanvas (eg. same way of setting a backdrop) Decouple BackDrop from modal #32439
• non-text elements inside button related issue v5: Bootstrap tooltips don't appear after numbers of focusing #32372, Bootstrap 5 Tooltip with inline SVG #31646
• Make sure all data attributes and any CSS vars are prefixed
• Bring back the backdrop option, but keep it enabled by default
• Make sure we aren't using any recently changed mr, etc classes
• Should the backdrop transition be the same as the offcanvas one? Right now, backdrop shows instantly but finishes hiding after the offcanvas is closed .(GeoSot: it will be changed when Decouple BackDrop from modal #32439 is merged)
• Decide about the name: offcanvas, off-canvas etc
• Maybe rename the classes to consider RTL? Not sure if it's needed
• Fix BrowserStack tests
• spell checking from a native English speaker (@mdo?)
• check accessibility (@patrickhlauke)
• clean up/squash patches manually

Fixes #27033, fixes #24718.

---

mdo's TODO:

• Finish and merge this PR
  • Undo the Offcanvas example change for now (we'll replace that later)
• Close any other PRs
• Iterate on the docs a bit more
• Detach and de-dupe the backdrop in Decouple BackDrop from modal #32439

[Johann-S]

Hi @GeoSot it's very interesting thanks! 👍
We are totally interested in this plugin

BTW you'll have to add unit tests

[mdo]

Awesome! Haven’t dived into the code yet m, but obviously there’s a huge need for this. Can we ensure we have support for left, right, and bottom slide-in? Can we also make sure to stop the body scroll behind the sidebar?

[patrickhlauke]

a crucial aspect of a properly working off-canvas is that focus should move to the offcanvas, remain trapped inside it until it's closed, and ideally the underlying document should be hidden via aria-hidden="true"

[patrickhlauke]

keyboard and assistive technology behavior must be addressed before this can be considered. conceptually, the off-canvas behaves pretty much like a dialog.

[GeoSot]

Hello Guys.

I really love this framework, and I want to contribute.

As you can see, I am a bit slower than the requested changes, and really I don't have any experience on unit testing.
So I would appreciate any help

[Johann-S]

@GeoSot you should first focus on request changes and after I'll help you for the unit tests don't worry 😉

[MartijnCuppens]

I don't have any experience on unit testing

Just have a look at the existing tests (js/tests/unit) and try to figure out how it works (for me, that worked 😛)

Other concerns:

• I wouldn't nest the selectors (like &-right), we don't do that either for our modals. The full classname also makes searching for classes easier.
• I would provide some default theming (like a default background) and create a theming section on the page with the colored components.
• I spotted some inline styles like style="z-index: 1072;", we should avoid that.
• Accessibility wise I would like to close the drawer when I press ESC key.

[GeoSot]

*I would provide some default theming (like a default background) and create a theming section on the page with the colored components.

I preferred to keep it simple and focus on functionality and minimalism. If it succeed to be merged we can add some styling

* I spotted some inline styles like `style="z-index: 1072;"`, we should avoid that.

Only because the docs header has 1071 z-index. It can be transferred to docs.css

[Johann-S]

Hi @GeoSot, do not hesitate to hit me up if you're stuck somewhere or if you did everything you planed to 😉

[GeoSot]

Thank u @Johann-S

You may have a look on Js code and leave me some feedback. (Feel free to change things)

[Johann-S]

@GeoSot we switched from QUnit to Jasmine, so you'll have to update your branch and use Jasmine to write your unit tests, do not hesitate to take a look at other plugins

[Johann-S]

Hi @GeoSot, I improved your unit tests, so the JavaScript part should be ok 👍 now we have to check the docs and maybe the SCSS ? @twbs/css-review

[MartijnCuppens]

I preferred to keep it simple and focus on functionality and minimalism. If it succeed to be merged we can add some styling

Our other components also work out of the box without additional utilities for backgrounds (like the modal). For consistency, I would also like to see this here.

We should also ditch the heights for the bottom variant. Also there's some visible outline when the component is focused which need to be removed, like we do with the modals.

This PR also needs an approval from @patrickhlauke, to make sure everything is accessible.

[XhmikosR]

Also, we need to see if we can stop body scroll like @mdo said above #29017 (comment)

And maybe blur the bg if it doesn't have any performance hit.

[XhmikosR]

All right, this is pretty hard to rebase to clean up the patches into less commits, so I'll have to squash it into one patch.

Huge thanks to @GeoSot for sticking with us after all this time, to everyone else who contributed to the branch and to those who helped reviewing the PR!

We'll need to make some refactoring later to deduplicate some stuff, tweak doc examples, add a navbar offcanvas example, etc, but at least this should help a lot of people.

[mdo]

Took us long enough 😆 ❤️

[rohit2sharma95]

Thank you George for the hard work ❤️💙 and for debugging BrowserStack tests 😄

[GeoSot]

Thank you all for your support on this MR. Thanks @XhmikosR for your patience