Rewrite alert component page with CSS-only patterns and new variants#42105
Open
anvme wants to merge 4 commits intotwbs:v6-devfrom
Open
Rewrite alert component page with CSS-only patterns and new variants#42105anvme wants to merge 4 commits intotwbs:v6-devfrom
anvme wants to merge 4 commits intotwbs:v6-devfrom
Conversation
Member
julien-deramond
left a comment
julien-deramond
left a comment
There was a problem hiding this comment.
Thanks for the PR @anvme
I haven’t reviewed the main content of the PR, but here are a few comments on secondary elements in the docs that I noticed while quickly scanning the changes.
| You can also import JavaScript plugins individually as needed to keep bundle sizes down: | ||
|
|
||
| ```js | ||
| import Alert from 'bootstrap/js/dist/alert' |
Member
There was a problem hiding this comment.
If this PR is accepted, we may want to keep an example of this kind of import. Instead of removing this one, we could provide an additional example following the import [...] from 'bootstrap/js/dist/[...] import.
Member
There was a problem hiding this comment.
Sorry, I forgot to mention that the same modification should be applied to the Vite and Webpack guides as well.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Rewrite the alert component to use CSS-only patterns, removing all JavaScript dependency
Motivation & Context
Bootstrap v6 is moving toward reducing JavaScript where native HTML/CSS solutions exist
Type of changes
Remove alert.js plugin, its unit tests, and all Alert JS references from entry points (index.esm.js, index.umd.js), guide pages (Vite, Webpack, Parcel), and getting-started docs
Remove live alert JS snippet from snippets.js
CSS-only dismiss via hidden inside a — :has(.alert-dismiss:checked) hides the alert. Supports instant and animated (.fade.show) dismiss
Proxy focus ring from hidden checkbox to visible close button via :has(input:focus-visible)
New reusable accent-border mixin (scss/mixins/_accent-border.scss)
New variants: accent borders (.alert-accent-start/top/bottom), callout, compact, expandable details, split layout, progress bars (countdown/countup/indeterminate/stepped), live toggle
Update cheatsheet examples (LTR + RTL) to CSS-only dismiss pattern
Expand documentation and visual test page with demos for all new variants
Checklist
npm run lint)Live previews
Related issues
CSS-only dismiss replaces alert.js — faster, no JS dependency
Adds new variants