* Docs: add explanation of the base `.btn` class
and a callout reminding authors to at least define some focus styling if they intend to use it "naked"
* Turn callout into a warning
* Add initial heading
* Tweak callout wording
* Make theme switcher accessible
* set an explicit `aria-label` to the switcher (as the `<span>` is not sufficient, as it can be display:none'd and then the button has no accName)
* make the theme buttons actual `aria-pressed` toggles
* Dynamically update aria-label for theme switcher
* Explicitly reset focus after activating theme
* Use innerText for the constructed dynamic aria-label
this way, if the text ever gets changed in the html, this will adapt appropriately
* Tweak accessible name for the dropdown
* Fixup
* Use `textContent` instead of `innerText`
* Add global variables for box-shadow focus rings
* Update instances of -btn-focus-box-shadow to use -ring-box-shadow, unless it's for buttons or inputs
* fix variable name
* Add CSS variables for global focus styling, document it
* Move to CSS vars section
* Update scss/_nav.scss
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
* Helper and utils
* Fix bundlewatch
* Change 'Focus ring' in sidebar so that the page can be visible
* Minor typo fix
* fix merge
* Revamp some more, improve docs
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
* use scrollspy on docs pages
* Update colors by taking into account new dark mode
* Restyle it
* Update colors once more
* Fix some color contrast issues
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Add .nav-underline modifier class
* Tweak sizing and spacing, add underline on hover
* Rebuild with Sass and CSS variables
* Document CSS vars
* Bump bundlewatch
It's not easy to otherwise correlate the examples with the relevant classes: you'd have to mentally count and correlate them. This obviates that need. Please see the image below to see the usefulness of the above.
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Use aria-labelledby to associate form-text (helper) with input field when it contains mandatory info (e.g. data format)
* Example in input-group needs aria-describedby (or aria-labelledby) too
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Update hero button color
* Fix link color on examples index
* Move .bd-btn-lg to docs buttons partial, move larger border-radius to that class so medium buttons don't look odd
* Undo the markup split
* Round padding up to whole number
* Fix Sass compilation when `$color-mode-type` is set to `media-query`
* Update mixin names, fix docs color modes for using media queries by using mixin
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Instantiate/initialize all non-autoplaying carousels in docs pages
* Rewrite/reorganise carousel docs page
* start with static/non-autoplaying examples
* explicitly mention that carousels currently need to be manually initialized
* split out and explain autoplaying and the weird "autoplay after first interaction" behaviour, as well as the pause on hover/focus
* Add callout about autoplaying and accessibility
* Don't have the dark variant example autoplay
* Add "autoplaying" to cspell custom dictionary
* Tweal wording, move Page Visibility API to autoplay section
* Tweak explanation for methods, add line break in js code for consistency with last code block on the page
* Tweak method descriptions
* Tweak headings (plural "carousels")
* Move some paragraphs out of intro and into basic example, reword the nested and accessibility paragraph
* Tweak warning about `.active` slide
* Tweak callout wording
* Further prose tweaks
move the sentence about not double-initialising autoplaying carousels to the callout right at the top
instead of talking about `data-bs...` attributes, talk about the "option" instead, as authors may be setting these not via data attributes, but at instatiation time with options in the constructor
remove the incorrect statement about pausing when keyboard focus is in the carousel
* Instantiate/initialize all non-autoplaying carousels in docs pages
* Rewrite/reorganise carousel docs page
* start with static/non-autoplaying examples
* explicitly mention that carousels currently need to be manually initialized
* split out and explain autoplaying and the weird "autoplay after first interaction" behaviour, as well as the pause on hover/focus
* Add callout about autoplaying and accessibility
* Don't have the dark variant example autoplay
* Add "autoplaying" to cspell custom dictionary
* Tweal wording, move Page Visibility API to autoplay section
* Tweak explanation for methods, add line break in js code for consistency with last code block on the page
* Tweak method descriptions
* Tweak headings (plural "carousels")
* Move some paragraphs out of intro and into basic example, reword the nested and accessibility paragraph
* Tweak warning about `.active` slide
* Tweak callout wording
* Further prose tweaks
move the sentence about not double-initialising autoplaying carousels to the callout right at the top
instead of talking about `data-bs...` attributes, talk about the "option" instead, as authors may be setting these not via data attributes, but at instatiation time with options in the constructor
remove the incorrect statement about pausing when keyboard focus is in the carousel
* Fix relative link
* Update site/assets/js/snippets.js
Co-authored-by: GeoSot <geo.sotis@gmail.com>
* Fix snippet.js
* Tweak content organisation just a bit
Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Rework progress bar markup and styles
Logically moves the various `role` and `aria-` attributes to the `.progress` element itself, leaving the `.progress-bar` to be used purely for the visual presentation. This fixes the problem #36736 that in certain browser/AT combinations, zero-value/zero-width progress bars are completely ignored and not announced.
For multiple/stacked progress bars, this PR introduces a new wrapper and class `.progress-stacked`, to accommodate for the fact that with the more logical structure above, we need full `.progress` elements with child `.progress-bar` elements, and can't get away with the fudge we had before of having a single `.progress` with multiple `.progress-bar`s.
Note that the old markup structures still work with this change, so this could be considered a non-breaking change - though one we definitely want to highlight as it's more accessible (as it now guarantees that zero-value/zero-width progress bars, whether on their own or as part of a multi/stacked bar, are actually announced)
* Add a note about progress bar change in migration guide
* Add notes with old markup examples and explanation
* Fix bundlewatch
* Update site/content/docs/5.2/components/progress.md
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Reintroduce deleted styles
Turns out they're needed for correct positioning of text inside progress bar
* Move changes in markup to Migrationg guide, link to that from top of progress page, rewrite some content
* Fix typo in callout
* Clarify "Sizing" section
* Remove redundant "now"
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
These classes have existed since 5.1 but weren't previously documented.
Specifically:
* .text-black
* .bg-black
* .bg-black.bg-gradient
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Add dark mode to docs
* Minor fix: missing space indentation
* Minor fix: revert utilities/z-index added-in modification
* Remove prev: and next: from doc because extracted to another PR
* Use .bg-body-tertiary in all Utilities > Overflow examples
* fix example
* Fix up spacing examples
* Update box-shadow Sass variables and utilities to auto-adjust to color modes
* Remove unused docs class
* Refactor form styles to use CSS variable for background images on .form-check and .form-switch
* Fix docs selector
* Rename shortcut for clarity
* Heading consistency
* Reintroduce missing 4th grid item in Utilities > Spacing example
* Fix bundlewatch
* .bd-callout* rendering is OK so removing comments in the code
* Update scss/_utilities.scss
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Fix gutters example styling
* Fix text colors on background utils docs
* redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken
* fix some color utils examples
* Deprecate mixin notice
* Deprecate notice for list-group-item-variant() mixin
* Revamp new link CSS vars
* Use map-keys in some each Sass files
* Remove list-group-item-variant mixin ref in sass loop desc
* Display CSS vars scoped to our built-in dark mode
* Revert previous commit
* Fix list group variant link
* Fix typo
* Remove imports of alert/list-group mixins in scss/_mixins.scss
* Small formatting + comments removal in scss/_content.scss
* Fix alert links colors
* fix dropdown border-radius mixin
* fix link color and underline again, this time using CSS var override for color var and fallback value for the underline
* fix colors on docs navbar for dark mode
* remove two changes
* missing ref
* another link underline fix, just use sass vars for link decoration for now
* missing color bg docs, plus move dropdown override to scss
* more changes from review
* fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin
* Few fixes around type
- Restored CSS variable for color on headings, this time with a fallback value
- In conjunction, restored and wrapped the default CSS var with a null value check
- Split headings and paragraphs docs in Reboot, elaborated on them
* Restyle custom details > summary element in docs
* Rewrite some migration docs
* fix form checks
* Fix up some navbar styling, tweak docs callout
* Fix select images, mostly for validation styling
* Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs
* Update site/content/docs/5.2/components/scrollspy.md
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Apply suggestions from code review
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* mention form control css vars in migration guide
* Tweak grid and flex docs background examples
* clarify some docs
* fix some more things
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
