Bootstrap 5 updates

Gemfile

@@ -57,7 +57,7 @@ gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 
 
 # Custom
-gem 'bootstrap', '~> 4.6.0'
+gem 'bootstrap', '~> 5.0.1'
 gem 'inline_svg', '~> 1.7'
 gem 'jquery-rails'
 gem 'kramdown', '~> 2.3'

Gemfile.lock

@@ -62,14 +62,14 @@ GEM
       zeitwerk (~> 2.3)
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
-    autoprefixer-rails (10.2.0.0)
-      execjs
+    autoprefixer-rails (10.2.5.0)
+      execjs (< 2.8.0)
     bindex (0.8.1)
     bootsnap (1.7.2)
       msgpack (~> 1.0)
-    bootstrap (4.6.0)
+    bootstrap (5.0.1)
       autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.14.3, < 2)
+      popper_js (>= 2.9.2, < 3)
       sassc-rails (>= 2.0.0)
     builder (3.2.4)
     byebug (11.1.3)
@@ -89,7 +89,7 @@ GEM
       nokogiri (>= 1.4.3)
     erubi (1.10.0)
     execjs (2.7.0)
-    ffi (1.14.2)
+    ffi (1.15.0)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
     i18n (1.8.10)
@@ -126,7 +126,7 @@ GEM
       mini_portile2 (~> 2.5.0)
       racc (~> 1.4)
     pg (1.2.3)
-    popper_js (1.16.0)
+    popper_js (2.9.2)
     public_suffix (4.0.6)
     puma (5.3.1)
       nio4r (~> 2.0)
@@ -229,7 +229,7 @@ PLATFORMS
 
 DEPENDENCIES
   bootsnap (>= 1.4.4)
-  bootstrap (~> 4.6.0)
+  bootstrap (~> 5.0.1)
   byebug
   capybara (>= 3.26)
   diffy

app/assets/javascripts/password_controller.js

@@ -1,8 +1,8 @@
 $(document).ready(function() {
   'use strict';
 
-  var $bootstrap = $('#exampleInputPassword').next('.input-group-append');
-  var $simple_form = $('#user_password').next('.input-group-append');
+  var $bootstrap = $("#exampleInputPassword").next(".input-group-text");
+  var $simple_form = $("#user_password").next(".input-group-text");
 
   var $pw_appends = $bootstrap.add($simple_form);
 
@@ -11,10 +11,10 @@ $(document).ready(function() {
     $(this).toggleClass('active');
     if ( $(this).hasClass('active') ) {
       $(this).prev().prop("type", "text");
-      $(this).find('.input-group-text').html("🙈");
+      $(this).text("🙈");
     } else {
       $(this).prev().prop("type", "password");
-      $(this).find('.input-group-text').html("🙊");
+      $(this).text("🙊");
     }
     $(this).prev().focus();
   });

app/assets/javascripts/toggle_controller.js

@@ -2,8 +2,8 @@ $(document).ready(function() {
   'use strict';
 
   var $grid_target = $('[data-target="toggle.grid"]');
-  var $button      = $('[data-toggle="button"]');
-  var $buttons     = $('[data-toggle="buttons"]');
+  var $button      = $('[data-bs-toggle="button"]');
+  var $buttons     = $('[data-bs-toggle="buttons"]');
 
   // init
   if ( $grid_target.length >= 2 ) {
@@ -18,9 +18,9 @@ $(document).ready(function() {
 
   // stack / split view
   $buttons.click(function(event) {
-    event.preventDefault();
-    if ( $(event.target).hasClass("active") ) { return }
-    $grid_target.toggleClass("col-md-12");
+    if ( $(event.target).hasClass("btn") ) { return; }
+    var stack = $buttons.find(":checked").attr("id") === "stack";
+    $grid_target.toggleClass("col-md-12", stack);
   });
 
   // swap by press "s"

app/assets/stylesheets/application.scss

@@ -1,5 +1,56 @@
-$theme-colors: ( "bootstrap": #563d7c, "simpleform": #00617f );
-@import "bootstrap";
+/*
+ * Keep in sync with `assets/stylesheets/_bootstrap.scss` from
+ * `bootstrap-rubygem`.
+ */
+
+@import "bootstrap/functions";
+
+$custom-colors: ( "bootstrap": #563d7c, "simpleform": #00617f );
+
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+@import "bootstrap/utilities";
+
+// Layout & components
+@import "bootstrap/root";
+@import "bootstrap/reboot";
+@import "bootstrap/type";
+@import "bootstrap/images";
+@import "bootstrap/containers";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+@import "bootstrap/transitions";
+@import "bootstrap/dropdown";
+@import "bootstrap/button-group";
+@import "bootstrap/nav";
+@import "bootstrap/navbar";
+@import "bootstrap/card";
+@import "bootstrap/accordion";
+@import "bootstrap/breadcrumb";
+@import "bootstrap/pagination";
+@import "bootstrap/badge";
+@import "bootstrap/alert";
+@import "bootstrap/progress";
+@import "bootstrap/list-group";
+@import "bootstrap/close";
+@import "bootstrap/toasts";
+@import "bootstrap/modal";
+@import "bootstrap/tooltip";
+@import "bootstrap/popover";
+@import "bootstrap/carousel";
+@import "bootstrap/spinners";
+@import "bootstrap/offcanvas";
+
+// Helpers
+@import "bootstrap/helpers";
+
+// Utilities
+@import "bootstrap/utilities/api";
 
 // App sections
 @import "application/breadcrumb";

app/assets/stylesheets/application/_breadcrumb.scss

@@ -1,6 +1,6 @@
 .app-breadcrumb {
-  [data-toggle] {
-    @include media-breakpoint-down(sm) {
+  [data-bs-toggle] {
+    @include media-breakpoint-down(md) {
       & { display: none; }
     }
   }

app/assets/stylesheets/simple_form-bootstrap/_form_collection_label.scss

@@ -7,27 +7,3 @@
     }
   }
 }
-
-// optional custom form spacing
-.custom-control-inline {
-  .custom-control-label {
-    &.collection_check_boxes,
-    &.collection_radio_buttons {
-      margin-right: .265625rem;
-    }
-  }
-}
-
-// required custom form radio button fix
-.form-group.radio_buttons {
-  > .custom-control {
-    @extend .custom-radio;
-  }
-}
-
-// required custom form check box fix
-.form-group.check_boxes {
-  > .custom-control {
-    @extend .custom-checkbox;
-  }
-}

app/assets/stylesheets/simple_form-bootstrap/_form_legend_clear.scss

@@ -0,0 +1,10 @@
+// In bootstrap 5 legend floats left and requires the following element
+// to be cleared. In a radio button or checkbox group the element after
+// the legend will be the automatically generated hidden input; the fix
+// in https://github.com/twbs/bootstrap/pull/30345 applies to the hidden
+// input and has no visual effect. Here we try to fix matters by
+// applying the clear to the div wrapping the first following radio button
+// or checkbox.
+legend ~ div.form-check:first-of-type {
+  clear: left;
+}

app/assets/stylesheets/simple_form-bootstrap/_form_multi_select.scss

@@ -1,17 +1,8 @@
-.custom-select,
-.form-control {
+.form-select {
   &.date,
   &.datetime,
   &.time {
     &:first-of-type { margin-left: 0 !important; }
     &:last-of-type { margin-right: 0 !important; }
   }
 }
-
-.custom-select {
-  &[multiple],
-  &:only-child {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
-}

app/assets/stylesheets/simple_form-bootstrap/_simple_form-bootstrap.scss

@@ -1,5 +1,5 @@
 @import "form_abbr";
 @import "form_button";
 @import "form_collection_label";
-@import "form_floating_labels";
+@import "form_legend_clear";
 @import "form_multi_select";

app/controllers/examples/base_controller.rb

@@ -1,5 +1,5 @@
 class Examples::BaseController < ApplicationController
-  TYPES = [:vertical, :horizontal, :inline, :custom, :input_group, :floating_label]
+  TYPES = [:vertical, :horizontal, :inline, :input_group, :floating_label]
 
   private
 

app/helpers/error_messages_helper.rb

@@ -18,11 +18,13 @@ def error_messages_for(*objects)
     messages = objects.compact.flat_map { |o| o.errors.full_messages }
     unless messages.empty?
       content_tag(:div, class: "alert alert-danger alert-form alert-dismissible") do
-        content_tag(:div, class: "media") do
-          icon_svg("alerts/error.svg", class: "d-flex mr-3 icon icon-3x") +
-          content_tag(:div, class: "media-body") do
+        content_tag(:div, class: "d-flex") do
+          content_tag(:div, class: "flex-shrink-0") do
+            icon_svg("alerts/error.svg", class: "icon icon-3x")
+          end +
+          content_tag(:div, class: "flex-grow-1 ms-3") do
             list_items = messages.map { |msg| content_tag(:li, msg) }
-            content_tag(:a, "×", href: "#", class: "close", data: { dismiss: "alert" }) +
+            content_tag(:a, "×", href: "#", class: "close", data: { "bs-dismiss": "alert" }) +
             content_tag(:h6, options[:template_header], class: "text-uppercase text-reset my-1") +
             content_tag(:p, options[:template_body]) +
             content_tag(:ul, list_items.join.html_safe, class: "mb-0")