Problem/Motivation

Bootstrap 5.3.0 stable was released on May 30, 2023 by XhmikosR
https://github.com/twbs/bootstrap/releases/tag/v5.3.0


Thank you, Bootstrap 5 team!!!

Bootstrap variables dark.

Needs to be imported before compiling Bootstrap 5.3.0

Now the application with Bootstrap 5.3.0 lives as follows:

:root,
[data-bs-theme=light] {

https://github.com/twbs/bootstrap/blob/v5.3.0/dist/css/bootstrap.css#L7C...

[data-bs-theme=dark] {

https://github.com/twbs/bootstrap/blob/v5.3.0/dist/css/bootstrap.css#L12...
It will be in the final dist compiled css files.

Proposed resolution

  • Change bootstrap to ~5.3.0 in the package.json file
  • Add @import "../node_modules/bootstrap/scss/variables-dark"; // Bootstrap variables dark. in the global defaults components/_default.scss file.
  • Run yarn install to update the yarn.lock file.
  • Run yarn components:build
  • #3366299: Update Bootstrap 5 from ~5.2.0 to ~5.3.0 in Vartheme BS5

Have the following in the _defaults.scss Global Defaults file

// Global Varbase Components defaults.
// -----------------------------------------------------------

// Custom default path for the location of the node_modules
// Custom default path for the location of custom SCSS source files
// from within "./components/{component_type}/{component_name}".

@import "../scss/bootstrap-variables";                   // Override Bootstrap 5 variables.
@import "../scss/vartheme-variables";                    // Vartheme custom variables.
@import "../scss/vartheme-mixins";                       // Vartheme custom mixins.
@import "../node_modules/bootstrap/scss/functions";      // Bootstrap functions.
@import "../node_modules/bootstrap/scss/variables";      // Bootstrap variables.
@import "../node_modules/bootstrap/scss/variables-dark"; // Bootstrap variables dark.
@import "../node_modules/bootstrap/scss/maps";           // Bootstrap maps.
@import "../node_modules/bootstrap/scss/mixins";         // Bootstrap mixins.
@import "../node_modules/bootstrap/scss/utilities";      // Bootstrap utilities.

Then have @import "../defaults"; // Global defaults. in needed Bootstrap 5.3.0 custom SDC component SCSS files.

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ✅ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ✅ Accessibility and Readability
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes and Update Helper on new feature change/addition
  • ✅ Release Varbase 10.0.0-beta1, varbase_components-2.0.0-alpha6

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Issue #3366298: Updated Bootstrap 5 from ~5.2.0 to ~5.3.0 in Varbase Components

Comments

Rajab Natshah created an issue. See original summary.

rajab natshah’s picture

rajab natshah’s picture

Issue summary: View changes

  • Rajab Natshah committed d2a4008e on 2.0.x
    Issue #3366298: Update Bootstrap 5 from ~5.2.0 to ~5.3.0 in Varbase...
rajab natshah’s picture

rajab natshah’s picture

Status: Active » Needs review
rajab natshah’s picture

Assigned: mohammed j. razem » Unassigned
Status: Needs review » Fixed
rajab natshah’s picture

Issue summary: View changes

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

rajab natshah’s picture

Issue summary: View changes

Now the application with Bootstrap 5.3.0 lives as follows:

:root,
[data-bs-theme=light] {

https://github.com/twbs/bootstrap/blob/v5.3.0/dist/css/bootstrap.css#L7C...

[data-bs-theme=dark] {

https://github.com/twbs/bootstrap/blob/v5.3.0/dist/css/bootstrap.css#L12...
It will be in the final dist compiled css files.

rajab natshah’s picture

Issue summary: View changes

Have the following in the _defaults.scss Global Defaults file

// Global Varbase Components defaults.
// -----------------------------------------------------------

// Custom default path for the location of the node_modules
// Custom default path for the location of custom SCSS source files
// from within "./components/{component_type}/{component_name}".

@import "../scss/bootstrap-variables";                   // Override Bootstrap 5 variables.
@import "../scss/vartheme-variables";                    // Vartheme custom variables.
@import "../scss/vartheme-mixins";                       // Vartheme custom mixins.
@import "../node_modules/bootstrap/scss/functions";      // Bootstrap functions.
@import "../node_modules/bootstrap/scss/variables";      // Bootstrap variables.
@import "../node_modules/bootstrap/scss/variables-dark"; // Bootstrap variables dark.
@import "../node_modules/bootstrap/scss/maps";           // Bootstrap maps.
@import "../node_modules/bootstrap/scss/mixins";         // Bootstrap mixins.
@import "../node_modules/bootstrap/scss/utilities";      // Bootstrap utilities.

Then have @import "../defaults"; // Global defaults. in needed Bootstrap 5.3.0 custom SDC component SCSS files.

rajab natshah’s picture

Issue summary: View changes