fix(deps): update dependency bootstrap to v5#1740
Conversation
|
Netlify Deployments: |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
| Device | URL |
|---|---|
| mobile | https://ocw-hugo-themes-www-pr-1740--ocw-next.netlify.app/ |
| Device | URL |
|---|---|
| mobile | https://ocw-hugo-themes-www-pr-1740--ocw-next.netlify.app/search/ |
| Device | URL |
|---|---|
| mobile | https://ocw-hugo-themes-course-v2-pr-1740--ocw-next.netlify.app/ |
| Device | URL |
|---|---|
| mobile | https://ocw-hugo-themes-course-v3-pr-1740--ocw-next.netlify.app/ |
Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead
renovate
bot
force-pushed
the
renovate/bootstrap-5.x
branch
from
46a68f9 to
2ab975e
Compare
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
| @@ -49,7 +49,7 @@ | |||
| "@sentry/browser": "^10.0.0", | |||
| "@tanstack/react-query": "^5.66.0", | |||
There was a problem hiding this comment.
Bug: The upgrade to Bootstrap 5 is incomplete. Old data-toggle and data-target attributes were not migrated to the new data-bs-* format, which will break UI components.
Severity: CRITICAL
Suggested Fix
Globally search and replace all legacy Bootstrap 4 data attributes with their new Bootstrap 5 equivalents. For example, update data-toggle="modal" to data-bs-toggle="modal", data-dismiss="modal" to data-bs-dismiss="modal", and data-target="#foo" to data-bs-target="#foo". This change must be applied to all HTML templates and components that use Bootstrap's JavaScript plugins.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: package.json#L50
Potential issue: The upgrade to Bootstrap 5.0.0 requires migrating HTML data attributes,
but this has not been done. The codebase contains numerous instances of Bootstrap 4
attributes like `data-toggle`, `data-dismiss`, and `data-target`. Bootstrap 5 does not
support these legacy attributes and instead requires the `data-bs-*` prefix (e.g.,
`data-bs-toggle`). As a result, UI components that rely on these attributes for
functionality—such as modals, dropdown menus, and collapsible navigation elements—will
fail to work. Users will be unable to open or close modals, expand menus, or toggle
navigation, leading to widespread broken UI functionality.
Did we get this right? 👍 / 👎 to inform future reviews.
renovate
bot
force-pushed
the
renovate/bootstrap-5.x
branch
from
2ab975e to
61d6c02
Compare
| "bootstrap": "^4.3.1", | ||
| "bootstrap": "^5.0.0", | ||
| "casual": "^1.6.2", | ||
| "core-js": "^3.38.1", |
There was a problem hiding this comment.
Bug: The offcanvas-bootstrap package and its data-toggle attributes are incompatible with Bootstrap 5's native offcanvas component, which expects data-bs-toggle attributes, breaking mobile navigation.
Severity: CRITICAL
Suggested Fix
Remove the offcanvas-bootstrap dependency. Update all HTML to use Bootstrap 5's native offcanvas attributes, such as data-bs-toggle="offcanvas" and data-bs-target. Replace custom event triggers like offcanvas.close with the corresponding Bootstrap 5 native events, such as hidden.bs.offcanvas.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: package.json#L54
Potential issue: The application uses the `offcanvas-bootstrap` library for mobile
navigation drawers. However, the upgrade to Bootstrap 5 introduces a native offcanvas
component that conflicts with this library. The HTML uses `data-toggle="offcanvas"`
attributes, which are not recognized by Bootstrap 5's JavaScript, causing the mobile
navigation toggle buttons to fail. Additionally, JavaScript code triggers a custom event
`offcanvas.close`, which is specific to the old library and will not work with Bootstrap
5's native component. This will break the mobile course menu functionality.
61d6c02 to
89f85b1
Compare
This PR contains the following updates:
^4.3.1→^5.0.0Release Notes
twbs/bootstrap (bootstrap)
v5.3.8Compare Source
What's Changed
.bd-exampleclass by @julien-deramond in #41556color-contrast()function for WCAG 2.1 compliance by @julien-deramond in #41585<Example>is used, not just<Code>by @louismaximepiton in #41582Dependencies
New Contributors
Full Changelog: twbs/bootstrap@v5.3.7...v5.3.8
v5.3.7Compare Source
📚 Documentation
<head>content generated by the "Download examples" buttonintegrityandcrossoriginattributes in introduction pageplaceholderusage description🎨 Sass
'none'values in thebox-shadowSass mixin for cleaner output🤖 JavaScript
trigger: "hover click"configuration🤝 Contributions
v5.3.6Compare Source
Highlights
.visually-hiddenoverflowing children to become focusable.card-groupselectors to immediate children to fix some inheritance issuesChanges
npm installandnpm run distin CONTRIBUTING.md by @mdo in #41340.card-groupto immediate children to fixborder-radiusbug by @mscdex in #41298devDependenciesby @julien-deramond in #41383image-sizefrom 1.0.2 to 2.0.2 by @julien-deramond in #41384.mdand.mdxfiles. by @Jason3S in #41398filesconfiguration from.cspell.jsonby @julien-deramond in #41400// Privatecomment and method by @MohamadSalman11 in #41218New Contributors
Full Changelog: twbs/bootstrap@v5.3.5...v5.3.6
v5.3.5Compare Source
Hot fix for a regression from upstream in Autoprefixer.
What's Changed
Full Changelog: twbs/bootstrap@v5.3.4...v5.3.5
v5.3.4Compare Source
Changes
🚀 Features
util.jsin migration guide<article>element for example cards.gridwhere it shouldn't be used.order-*classes in 'Layout > Columns'.justify-content-startclass in homepage.bi-exclamation-triangle-fillclassborder-radiusrule🎨 CSS
max-widthandbackground-colorbtn-group-verticalby using same rules asbtn-groupborder-radiusrule☕️ JavaScript
📖 Docs
util.jsin migration guide<article>element for example cards.ordervalues in the migration guide.gridwhere it shouldn't be used.order-*classes in 'Layout > Columns'.justify-content-startclass in homepage$enable-css-grid→$enable-cssgridin 'Customize > Options'$enable-css-gridin options.mdaria-hidden="true"to decorative SVGsaria-hidden='true'to decorative SVGs.bi-exclamation-triangle-fillclassdata-bs-theme="light"in navbars color schemes markupimageConfigurls.JoinPathin more placesrel="noopener" target="_blank"data-bs-scroll="true"from navbarhugo.IsProduction🛠 Examples
🌎 Accessibility
<article>element for example cardsaria-hidden="true"to decorative SVGsaria-hidden='true'to decorative SVGs📦 Dependencies
v5.3.3Compare Source
Highlights
variables-dark.scsswhen building Bootstrap with Sass. Now,_variables.scsswill automatically import_variables-dark.scss. If you were already importing_variables-dark.scssmanually, you should keep doing it as it won't break anything and will be the way to go in v6.Color modes
.text-bg-*text utilities to be certain that the text is always readable (especially when the customized colors are different in light and dark modes).color-modes.jsscript to handle the case where the OS is set to light mode and the auto color mode is used on the website. If you copied the script from our docs, you should apply this change to your own script.color-scheme()only acceptlightanddarkvalues as parameters.Miscellaneous
<dl>,<dt>and<dd>in the sanitizer.🎨 CSS
--bs-accordion-btn-focus-border-colorand deprecate$accordion-button-focus-border-colorConfiguration
📅 Schedule: Branch creation - "every weekend" in timezone US/Eastern, Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR was generated by Mend Renovate. View the repository job log.