* Update docs to use new .show behavior and clarify some copy for first example
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add updated Jumbotron example made from utilities
* Update starter template example with new design and links
* Update some existing examples and their screenshots
* Add four new snippet-based examples
* Update layout to improve things a bit
* WIP
* Add d-block to images
* Fix horizontal scroll
* move d-block to the anchor
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Accept data-bs-body option in the configuration object as well
Tweak jqueryInterface, add some more tests
* Fix Markdown table formatting and tweak the wording on backdrop
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add a new offcanvas component
* offcanvas.js: switch to string constants and `event.key`
* Remove unneeded code
* Sass optimizations
* Fixes
Make sure the element is hidden and not offscreen when inactive
fix close icon negative margins
Add content in right & bottom examples
Re-fix bottom offcanvas height not to cover all viewport
* Wording tweaks
* update tests and offcanvas class
* separate scrollbar functionality and use it in offcanvas
* Update .bundlewatch.config.json
* fix focus
* update btn-close / fix focus on close
* add aria-modal and role
return focus on trigger when offcanvas is closed
change body scrolling timings
* move common code to reusable functions
* add aria-labelledby
* Replace lorem ipsum text
* fix focus when offcanvas is closed
* updates
* revert modal, add tests for scrollbar
* show backdrop by default
* Update offcanvas.md
* Update offcanvas CSS to better match modals
- Add background-clip for borders
- Move from outline to border (less clever, more consistent)
- Add scss-docs in vars
* Revamp offcanvas docs
- Add static example to show and explain the components
- Split live examples and rename them
- Simplify example content
- Expand docs notes elsewhere
- Add sass docs
* Add .offcanvas-title instead of .modal-title
* Rename offcanvas example to offcanvas-navbar to reflect it's purpose
* labelledby references title and not header
* Add default shadow to offcanvas
* enable offcanvas-body to fill all the remaining wrapper area
* Be more descriptive, on Accessibility area
* remove redundant classes
* ensure in case of an already open offcanvas, not to open another one
* bring back backdrop|scroll combinations
* bring back toggling class
* refactor scrollbar method, plus tests
* add check if element is not full-width, according to #30621
* revert all in modal
* use documentElement innerWidth
* Rename classes to -start and -end
Also copyedit some docs wording
* omit some things on scrollbar
* PASS BrowserStack tests
-- IOS devices, Android devices and Browsers on Mac, hide scrollbar by default and appear it, only while scrolling.
* Rename '_handleClosing' to '_addEventListeners'
* change pipe usage to comma
* change Data.getData to Data.get
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Add an example of v4's media component in the flex utils docs
* Link to new example from Migration guide
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* docs(carousel): double-spaces out there
* docs(toasts): missing word, ins't it?
* docs(cheatsheet): use buttons for carousels and tabs ion cheatsheets too
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* WIP: Mention variables, mixins, and loops in docs
* Add Sass sections to component pages
* add sass docs for forms and content
* Update buttons.md
* Remove empty mixins sections
* Massive update to utilities and some consistency changes
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Our current trick works great for headings or landmarks `:target`ed by links activation, however it still allows focus to be hidden under the sticky header.
1. Go to any docs page,
2. use a TOC link to scroll down the page,
3. then `Shift`+`Tab` to navigate backward using keyboard.
You should see on some browsers (mainly Firefox from my tests, but it used to do the same in Chrome) that focused elements isn't visible, hidden by our sticky header.
Applying `scroll-padding-top` to the `:root` solves this without any side-effect—but it requires to drop `scroll-margin-top` for anchors to prevent doubling the offset.
FWIW based on my test, Edgium and Chromium don't really care since they seem to have a new heuristic for such cases, making the focused element scroll to the center of the view.
* Add function type for `popperConfig` option
* Update .bundlewatch.config.json
* copy edits
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
- Removes the &[style] selector that was used for resetting Popper styles
- Separate Popper-based alignment from static alignment with `data-bs-popover` attribute that separates the --bs-position and custom right/left properties
Co-Authored-By: Rohit Sharma <rohit2sharma95@gmail.com>
* Dynamic tabs: use buttons rather than links
- change docs
- add mention that tabs should be <button> elements
- tweak styles to neutralise border and background
* Update js unit and visual test accordingly
- replace links with buttons
- make one specific test that uses links instead of buttons, as we still want to support it despite it being non-semantically appropriate
- Leaving a couple of tests for now. The test for removed tabs should be redone so that tabs are removed programmatically (as the approach of having that close button inside the link is invalid and broken markup). The test for dropdowns should be removed together we actually ripping out the handling for dropdowns in the tab.js code (arguably a breaking change, though we discouraged this for a few versions and effectively "deprecated" it)
* Add isolation:isolate to prevent focus being overlapped
https://github.com/twbs/bootstrap/pull/32630#issuecomment-756015766
