Bump bootstrap from 4.6.2 to 5.0.0 #244

dependabot · 2024-10-04T19:39:25Z

Bumps bootstrap from 4.6.2 to 5.0.0.

Release notes

v5.0.0

Highlights

#32155: Updated make-col() mixin to generate equal columns when no size is specified #32763: Added new color-scheme() mixin #33389: Dropdown menus now have option become clickable #33453: Added new docs footer #33548: Offcanvas header components are now vertically aligned #33549: Added offcanvas-top modifier #33634: Added support for .dropdown-items wrapped in <li>s #33626: Fix v5 regressions in tab dropdown functionality

🚀 Features

#32763: Add color-scheme mixin

#33389: Dropdown — Add option to make the dropdown menu clickable

#33549: Add offcanvas-top modifier

🎨 CSS

#32155: Add equal column mixin

#32763: Add color-scheme mixin

#33292: Make accordion icon rotation more natural

#33411: Fix validation feedback icon in select multiple

#33478: Make .nav-link color consistent when using buttons

#33482: Dropdown — Apply positioning only when Popper is not used

#33548: Vertically align offcanvas header components

#33549: Add offcanvas-top modifier

#33550: Spinner alignment changes

#33598: Hide validation icons from multiple selects

#33600: Have $form-check-input-border's default derive from $black

#33607: Reduce color-scheme complexity

#33642: use :read-only css selector instead [readonly] for consistency

#33658: fix: use list-group variable instead of alert

#33736: accordion: fix border-top on Firefox

☕️ JavaScript

#32439: Decouple BackDrop from modal

#33245: Decouple Modal's scrollbar functionality

#33249: Simplify Modal Config

#33250: Simplify ScrollSpy config

#33310: fix: make EventHandler better handle mouseenter/mouseleave events

#33389: Dropdown — Add option to make the dropdown menu clickable

#33429: Remove element event listeners through base component

#33451: Add missing things in hide method of dropdown

#33456: Use our isDisabled util on dropdown

#33466: Refactor dropdown's hide functionality

#33479: Fix dropdown escape propagation

#33496: Use cached noop function

... (truncated)

Commits

bf09367 Release v5.0.0 (#33647)
48ae5a7 Rewrite migration guide (#33834)
f086572 refactor(docs): Added form file input variables (#33833)
1a54286 Fix doc typo and Bootstrap Icons link (#33832)
e2df73f Update migration guide for some v5 changes (#33829)
1e6356a Neutralise more words from placeholder text (#33731)
6633845 Bump eslint-config-xo from 0.35.0 to 0.36.0 (#33646)
cb38744 Tweak toast docs (#33810)
c2ff225 Bump rollup from 2.46.0 to 2.47.0 (#33818)
c090ea2 Bump @babel/preset-env from 7.14.0 to 7.14.1 (#33819)
Additional commits viewable in compare view

You can trigger a rebase of this PR by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the Security Alerts page.

Note
Automatic rebases have been disabled on this pull request as it has been open for over 30 days.

janbrasna · 2024-10-04T19:42:06Z

This is a breaking change, IIRC known not to be compatible with the codebase.

(Trying an update in the past for abs() or calc() changes/deprecations seemed like a lot of manual work to make the forms and layout all work with this version. TBC.)

Will need a more thorough investigation, and perhaps some refactoring:(

The security content is not relevant to our usage: (no carousel component)

Merging this pull request would fix 1 Dependabot alert: bootstrap (npm)
GHSA-vc8w-jr9v-vj7f

Affected versions: >= 4.0.0, <= 4.6.2
Patched version: 5.0.0

"A vulnerability has been identified in Bootstrap that exposes users to Cross-Site Scripting (XSS) attacks. The issue is present in the carousel component, where the data-slide and data-slide-to attributes can be exploited through the href attribute of an tag due to inadequate sanitization. This vulnerability could potentially enable attackers to execute arbitrary JavaScript within the victim's browser."

gstrauss · 2024-10-04T19:43:38Z

Dependabot is adding dependency on "node_modules/@popperjs/core"

https://github.com/floating-ui/floating-ui

Popper is now Floating UI! For Popper v2, visit its dedicated branch and its documentation. For help on migrating, check out the Migration Guide.

@janbrasna: ackn and agreed.

janbrasna · 2024-10-04T19:50:59Z

The effort to migrate to v5 might as well be spent on something like https://github.com/thednp/bootstrap.native to drop the jQuery and Popper dependency.

FWIW PopperJS is only ever used on the "copy to clipboard" affordance so that should be easy to replace/remove.

FYI: The Mozilla brand is going to be refreshed soon, with a new typography and general guidelines too, so any updates to the layout can be made along with some framework bumps when that time comes…

Bumps [bootstrap](https://github.com/twbs/bootstrap) from 4.6.2 to 5.0.0. - [Release notes](https://github.com/twbs/bootstrap/releases) - [Commits](twbs/bootstrap@v4.6.2...v5.0.0) --- updated-dependencies: - dependency-name: bootstrap dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com>

gstrauss · 2024-11-23T04:24:35Z

Applying this patch in a test environment worked for me (Firefox on Linux), but I did not test on other platforms/browsers. Do we know of specific platform/browser combinations that have issues when bootstrap is updated?

npm audit fix updated other packages, and in a test environment worked for me (Firefox on Linux)

npm update resulted in a table layout issue in my test environment (Firefox on Linux), but I did not look into it further.

janbrasna · 2024-11-30T01:45:27Z

(Both this update and the audit fix esp. around postcss loader versions/deps moved node support beyond what was otherwise compatible last year; should not be an issue these days with uptodate webpack etc.)

This still breaks for me, webkit & gecko, both stable and nightly. (Haven't looked into why, changelog doesn't hint at why this should be an issue, but I see the grids/columns not working, and even basic form and anchor styling not reliably applied, with JS also broken.)

@gstrauss Make sure to rm -rf node_modules && npm ci to be sure you're not including old components. (Or doing the npm i bootstrap yourself, instead of just checking out the manifest and running the app with already installed deps from other branches…)

This is how a clean build looks like:

5.0.0 still triggers deprecation warnings, even more so than 4.x — npm i bootstrap to ^5.3.3 is a safer way to get builds without warnings.

FYI this also increases the entrypoint bundle (both on JS and CSS sides — may need some tree shaking esp. of unused bootstrap components…)

gstrauss · 2024-12-02T19:35:05Z

Yes, the (full) CSS is heavier in bootstrap 5. There are a number of changes which change the look of the ssl-config-generator, and I have not tracked them all down. There must be missing or different font use, font size, button styling, and more in the main page, as well as link underlining in the footer. Regarding the layout difference in the post above: that is due to missing .form-row from the bootstrap 5 CSS, which can be fixed by adding the following to src/css/_boostrap.scss

.form-row{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}
.form-row>.col,.form-row>[class*=col-]{padding-right:5px;padding-left:5px}
.form-row>.col>.valid-tooltip,.form-row>[class*=col-]>.valid-tooltip{left:5px}
.form-row>.col>.invalid-tooltip,.form-row>[class*=col-]>.invalid-tooltip{left:5px}

An alternative solution -- which I have successfully tested -- might be to snapshot and prune the bootstrap 4.6.2 CSS to preserve existing behavior, and include it locally in the ssl-config-generator repo.

gstrauss · 2024-12-02T20:20:33Z

The effort to migrate to v5 might as well be spent on something like https://github.com/thednp/bootstrap.native to drop the jQuery and Popper dependency.

ssl-config-generator uses bootstrap CSS, which is not provided by bootstrap.native, so the CSS dependency will have to be addressed if bootstrap.native is considered.

Similarly, besides the bootstrap CSS, ssl-config-generator could use basic JS to replace bootstrap, jquery, and popperjs.

retain css from bootstrap, generated and pruned as src/css/bs-4.6.2.css x-ref: mozilla#244

gstrauss · 2024-12-02T23:54:26Z

I submitted #283 to use basic javascript to replace bootstrap, jquery, and popper, keeping only a pruned version of CSS from bootstrap 4.6.2.

local copy of CSS from bootstrap 4, generated and pruned as src/css/bs-4.6.2.css x-ref: mozilla#244

gstrauss · 2024-12-06T08:24:01Z

#283 was reverted.

#288 uses bootstrap.native for tooltip for Copy button.

@dependabot rebase

dependabot · 2024-12-06T08:25:00Z

Looks like bootstrap is no longer a dependency, so this is no longer needed.

bugfix: avoid repeated calls to state() for single change x-ref: mozilla#244 mozilla#283 mozilla#288

bugfix: avoid repeated calls to state() for single change x-ref: mozilla#244 mozilla#283 mozilla#288 mozilla#289 mozilla#290

dependabot bot added the dependencies Pull requests that update a dependency file label Oct 4, 2024

janbrasna added help wanted Extra attention is needed compatibility Warnings, deprecations or incompatibilities to tackle blocked Something has to happen first elsewhere labels Oct 5, 2024

This comment was marked as outdated.

Sign in to view

dependabot bot force-pushed the dependabot/npm_and_yarn/bootstrap-5.0.0 branch from dc4d3df to a24dee4 Compare November 22, 2024 19:45

gstrauss added a commit to gstrauss/ssl-config-generator that referenced this pull request Dec 2, 2024

use js to replace jquery and bootstrap; keep css

e0e57f8

retain css from bootstrap, generated and pruned as src/css/bs-4.6.2.css x-ref: mozilla#244

gstrauss added a commit to gstrauss/ssl-config-generator that referenced this pull request Dec 6, 2024

local copy of CSS from bootstrap 4

80bc11b

local copy of CSS from bootstrap 4, generated and pruned as src/css/bs-4.6.2.css x-ref: mozilla#244

dependabot bot closed this Dec 6, 2024

dependabot bot deleted the dependabot/npm_and_yarn/bootstrap-5.0.0 branch December 6, 2024 08:25

gstrauss added a commit to gstrauss/ssl-config-generator that referenced this pull request Dec 6, 2024

use js to replace jquery

918ebaa

bugfix: avoid repeated calls to state() for single change x-ref: mozilla#244 mozilla#283 mozilla#288

gstrauss mentioned this pull request Dec 6, 2024

use plain javascript to replace jquery #289

Merged

gstrauss added a commit to gstrauss/ssl-config-generator that referenced this pull request Dec 6, 2024

use js to replace jquery

d3bbf74

bugfix: avoid repeated calls to state() for single change x-ref: mozilla#244 mozilla#283 mozilla#288 mozilla#289 mozilla#290

gstrauss mentioned this pull request Dec 6, 2024

use plain javascript to replace jquery #292

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Bump bootstrap from 4.6.2 to 5.0.0 #244

Bump bootstrap from 4.6.2 to 5.0.0 #244

Uh oh!

dependabot bot commented on behalf of github Oct 4, 2024 •

edited

Loading

Uh oh!

janbrasna commented Oct 4, 2024 •

edited

Loading

Uh oh!

gstrauss commented Oct 4, 2024

Uh oh!

janbrasna commented Oct 4, 2024

Uh oh!

This comment was marked as outdated.

gstrauss commented Nov 23, 2024

Uh oh!

janbrasna commented Nov 30, 2024

Uh oh!

gstrauss commented Dec 2, 2024

Uh oh!

gstrauss commented Dec 2, 2024

Uh oh!

gstrauss commented Dec 2, 2024

Uh oh!

gstrauss commented Dec 6, 2024

Uh oh!

dependabot bot commented on behalf of github Dec 6, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Bump bootstrap from 4.6.2 to 5.0.0 #244

Bump bootstrap from 4.6.2 to 5.0.0 #244

Uh oh!

Conversation

dependabot bot commented on behalf of github Oct 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

v5.0.0

Highlights

🚀 Features

🎨 CSS

☕️ JavaScript

Uh oh!

janbrasna commented Oct 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gstrauss commented Oct 4, 2024

Uh oh!

janbrasna commented Oct 4, 2024

Uh oh!

This comment was marked as outdated.

gstrauss commented Nov 23, 2024

Uh oh!

janbrasna commented Nov 30, 2024

Uh oh!

gstrauss commented Dec 2, 2024

Uh oh!

gstrauss commented Dec 2, 2024

Uh oh!

gstrauss commented Dec 2, 2024

Uh oh!

gstrauss commented Dec 6, 2024

Uh oh!

dependabot bot commented on behalf of github Dec 6, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dependabot bot commented on behalf of github Oct 4, 2024 •

edited

Loading

janbrasna commented Oct 4, 2024 •

edited

Loading