Merge pull request #681 from rubygems/bootstrap-5.1.3-673

Bump Bootstrap from 4.6.1 to 5.1.3

assets/javascripts/application.js

@@ -1,8 +1,3 @@
-import 'bootstrap/js/dist/button'
-import 'bootstrap/js/dist/tooltip'
-import 'bootstrap/js/dist/popover'
-import 'bootstrap/js/dist/dropdown'
-import 'bootstrap/js/dist/collapse'
 import './search'
 import './search_arrows'
 import AnchorJS from 'anchor-js';

assets/javascripts/search.js

@@ -1,4 +1,5 @@
 import $ from 'jquery'
+import { Popover } from 'bootstrap';
 import lunr from 'lunr'
 
 var lunrIndex = null;
@@ -41,17 +42,24 @@ $(document).ready(function() {
     };
 
     this.initializePopover = function() {
-      this.popover = this.searchInput.popover(this.POPOVER_OPTIONS).data('bs.popover');
+      this.popover = new Popover(this.searchInput, this.POPOVER_OPTIONS);
     };
 
     this.hidePopover = function() {
-      this.searchInput.popover('hide');
+      const popover = Popover.getInstance(this.searchInput);
+      popover && popover.hide();
       this.searchArrows.destroy();
     };
 
     this.showPopover = function(text) {
       this.popoverContent = this.generatePopoverContent(text);
-      this.searchInput.popover('show');
+      const popover = Popover.getInstance(this.searchInput);
+      popover.show();
+      document.querySelector(".popover-body").innerHTML = this.popoverContent;
+
+      this.popoverHandler = $(self.POPOVER_CLASS);
+      this.popoverHandler.click(function(e) { e.stopPropagation() });
+      this.searchArrows.init();
     };
 
     this.generatePopoverContent = function(text) {
@@ -111,11 +119,6 @@ $(document).ready(function() {
 
         self.showPopover(text);
       });
-      this.searchInput.on('shown.bs.popover', function()  {
-        self.popoverHandler = $(self.POPOVER_CLASS);
-        self.popoverHandler.click(function(e) { e.stopPropagation() });
-        self.searchArrows.init();
-      });
       this.searchInput.click(function(e) { e.stopPropagation() });
       $(window).click(function() { self.hidePopover() });
     }

assets/stylesheets/_bootstrap-overrides.scss

@@ -1,8 +1,6 @@
-$theme-colors: (
-  // for .btn-primary. This color is applied to $link-color so tweak is followed.
-  // - Discussion: https://github.com/rubygems/bundler-site/pull/644#issuecomment-1178722939
-  "primary": #12AEE2
-);
+// for .btn-primary. This color is applied to $link-color so tweak is followed.
+// - Discussion: https://github.com/rubygems/bundler-site/pull/644#issuecomment-1178722939
+$primary: #12AEE2;
 
 // navbar
 $navbar-padding-y: 0;
@@ -34,3 +32,19 @@ $card-border-width: 0;
 // Transition workaround for unifying link color and button (btn-primary) in Boostrap 4.6.1
 $link-color: #337ab7;
 // /Transition workaround
+
+// Transition workaround for text-decoration: underline only for a:hover in Boostrap 5.0
+$link-decoration: none;
+$link-hover-decoration: underline;
+// /Transition workaround
+
+// Bootstrap 5 would suggest `color:#000` for `.btn-primary`/`.btn-primary:hover`
+// by default when `$primary: #12AEE2;` as it violates "WCAG 2.1 text color
+// contrast ratio of 4.5:1" if it is `color: #fff`.
+// https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=12AEE2 (2.56:1) (.btn-primary)
+// https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=0F94C0 (3.48:1) (.btn-primary:hover)
+//
+// Upstream change: https://github.com/twbs/bootstrap/pull/30168
+//
+// cf. https://stackoverflow.com/questions/65170317/sass-scss-bootstrap-5-color-functions-not-working-well
+$min-contrast-ratio: 2.55;

assets/stylesheets/_guide.scss

@@ -8,9 +8,3 @@
     margin-bottom: 20px;
   }
 }
-
-#guide-container {
-  .container {
-    width: auto !important;
-  }
-}

assets/stylesheets/_opacity.scss

@@ -1,12 +1,4 @@
 // https://getbootstrap.com/docs/5.1/utilities/colors/#opacity
-// See also
-// https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_utilities.scss#L27-L39
-// https://github.com/twbs/bootstrap/blob/v5.1.3/scss/mixins/_utilities.scss#L64-L72
-.text-opacity-50 {
-  --bs-text-opacity: 0.5;
-  color: rgba($body-color, var(--bs-text-opacity));
-}
-
 // Transition workaround for skipping improvement from Bootstrap 3.4.1 to Bootstrap 4.6.1
 // - Discussion: https://github.com/rubygems/bundler-site/pull/644#issuecomment-1178722939
 .text-opacity-40 {

assets/stylesheets/application.css.scss

@@ -8,6 +8,9 @@ $navbar-height: 50px;
   src: url('fonts/SancoaleSlabNormRegular.otf') format("opentype");
 }
 
+// Boostrap 5 customization
+// Document: https://getbootstrap.com/docs/5.2/customize/sass/#importing
+// List of SCSS to load: https://github.com/twbs/bootstrap/blob/v5.1.3/scss/bootstrap.scss
 @import "~bootstrap/scss/functions";
 
 pre {
@@ -23,34 +26,36 @@ $pre-color: #fff;
 
 $icon-font-path: '~bootstrap/assets/fonts/bootstrap/';
 
-// Core variables and mixins
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
-// Reset and dependencies
+@import "~bootstrap/scss/utilities";
+
+// Layout & components
+// Note: tables, dropdown, button-group, accordion, breadcrumb, pagination,
+// badge, alert, progress, list-group, close, toasts, modal, tooltip, carousel,
+// spinners, offcanvas, and placeholders were excluded as they are not used as
+// of Bootstrap 5.1.3
+@import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
-// Core CSS
 @import "~bootstrap/scss/type";
-@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
 @import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/tables";
 @import "~bootstrap/scss/forms";
 @import "~bootstrap/scss/buttons";
 @import "~bootstrap/scss/transitions";
-// Components
-@import "~bootstrap/scss/dropdown";
 @import "~bootstrap/scss/nav";
 @import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/media";
-@import "~bootstrap/scss/code";
-@import "~bootstrap/scss/images";
-// Utility classes
-@import "~bootstrap/scss/utilities";
-
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/card";
 @import "~bootstrap/scss/popover";
 
+// Helpers
+@import "~bootstrap/scss/helpers";
+
+// Utilities
+@import "~bootstrap/scss/utilities/api";
+// end of Boostrap 5 customization
+
 @import "navbar";
 @import "docs";
 @import "blog";
@@ -61,7 +66,7 @@ $icon-font-path: '~bootstrap/assets/fonts/bootstrap/';
 @import "anchorjs";
 @import "search";
 
-// Utilities from Bootstrap 5.x
+// More various utilities extended from Bootstrap 5.1
 @import "opacity";
 
 .row:after {
@@ -98,9 +103,6 @@ $icon-font-path: '~bootstrap/assets/fonts/bootstrap/';
     float: none !important;
   }
 
-  .center-on-xs {
-    text-align: center;
-  }
 }
 
 .content-padding {

package.json

@@ -34,8 +34,9 @@
     "webpack-cli": "^4.10.0"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.5",
     "anchor-js": "^4.3.1",
-    "bootstrap": "^4.6.1",
+    "bootstrap": "^5.1.3",
     "jquery": "^3.6.0",
     "lunr": "^0.7.0"
   }

source/contributors.html.haml

@@ -2,7 +2,7 @@
 title: Contributors
 ---
 
-.row.bg-light-blue.header
+.bg-light-blue.header
   = image_tag '/images/team_header_transparent_bg.png',
     srcset: '/images/team_header_transparent_bg.png 1x, /images/[email protected] 2x, /images/[email protected] 3x',
     class: 'img-fluid header-padding',

source/layouts/_navbar.haml

@@ -1,14 +1,15 @@
 %link{rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css", integrity: "sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==", crossorigin: "anonymous", referrerpolicy: "no-referrer"}
-%nav.navbar.navbar-expand-md.navbar-light.container-md.justify-content-between
-  = link_to 'Bundler', '/', class: "navbar-brand mr-auto font-weight-bold"
-  %button.navbar-toggler{type: "button", "data-toggle": "collapse", "data-target": "#bs-navbar-collapse", "aria-controls": "bs-navbar-collapse", "aria-expanded": "false", "aria-label": "Toggle navigation"}
-    %span.navbar-toggler-icon
-  .collapse.navbar-collapse.flex-grow-0#bs-navbar-collapse
-    %ul.nav.navbar-nav
-      %li.nav-item
-        %input#input-search.input-search.my-1.pl-1.pt-1{type: :text, placeholder: t('search.placeholder')}
-        %i.fa.fa-search.text-opacity-40.px-1.py-2
-      %li.nav-item= link_to t('navbar.docs'), '/docs.html', class: "nav-link"
-      %li.nav-item= link_to t('navbar.team'), '/contributors.html', class: "nav-link"
-      %li.nav-item= link_to t('navbar.blog'), '/blog', class: "nav-link"
-      %li.nav-item= link_to t('navbar.repository'), 'https://github.com/rubygems/rubygems/tree/master/bundler', target: '_blank', rel: 'noopener noreferrer', class: "nav-link"
+%nav.navbar.navbar-expand-md.navbar-light
+  .container-md
+    = link_to 'Bundler', '/', class: "navbar-brand me-auto fw-bold"
+    %button.navbar-toggler{type: "button", "data-bs-toggle": "collapse", "data-bs-target": "#bs-navbar-collapse", "aria-controls": "bs-navbar-collapse", "aria-expanded": "false", "aria-label": "Toggle navigation"}
+      %span.navbar-toggler-icon
+    .collapse.navbar-collapse.flex-grow-0#bs-navbar-collapse
+      %ul.navbar-nav
+        %li.nav-item
+          %input#input-search.input-search.my-1.ps-1.pt-1{type: :text, placeholder: t('search.placeholder')}
+          %i.fa.fa-search.text-opacity-40.px-1.py-2
+        %li.nav-item= link_to t('navbar.docs'), '/docs.html', class: "nav-link"
+        %li.nav-item= link_to t('navbar.team'), '/contributors.html', class: "nav-link"
+        %li.nav-item= link_to t('navbar.blog'), '/blog', class: "nav-link"
+        %li.nav-item= link_to t('navbar.repository'), 'https://github.com/rubygems/rubygems/tree/master/bundler', target: '_blank', rel: 'noopener noreferrer', class: "nav-link"

source/layouts/base.haml

@@ -24,10 +24,9 @@
   %body{class: current_page.data.page_classes || ''}
     = partial 'layouts/navbar'
 
-    .main-wrapper.container-fluid
-      ~ yield
+    ~ yield
 
-      = yield_content :tail
+    = yield_content :tail
 
     .footer
       = partial 'layouts/footer'

source/layouts/commands_layout.haml

@@ -3,13 +3,13 @@
 
 ~ wrap_layout :base do
   - content_for :tail do
-    .row.bg-light-blue
+    .bg-light-blue
       .container
         .contents
           .edit-on-github.text-center
             = link_to_editable_version
 
-  .row.bg-light-blue.header
+  .bg-light-blue.header
     = image_tag '/images/docs_header_transparent_bg.png',
       srcset: '/images/docs_header_transparent_bg.png 1x, /images/[email protected] 2x, /images/[email protected] 3x',
       class: 'img-fluid header-padding',

source/layouts/guides_layout.haml

@@ -2,20 +2,20 @@
 
 ~ wrap_layout :base do
   - content_for :tail do
-    .row.bg-light-blue
+    .bg-light-blue
       .container
         .contents
           .edit-on-github.text-center
             = link_to_editable_version
 
-  .row.bg-light-blue.header
+  .bg-light-blue.header
     = image_tag '/images/docs_header_transparent_bg.png',
       srcset: '/images/docs_header_transparent_bg.png 1x, /images/[email protected] 2x, /images/[email protected] 3x',
       class: 'img-fluid header-padding',
       style: 'max-width: 400px;'
-  .row
-    #guide-container.container
-      .col-md-12
+  .container
+    .row
+      .col-12
         ~ yield
 
   = javascript_include_tag 'anchors.min'