Bootstrap 5 updates (#329)

* Update bootstrap dependency to 5.0.0.beta2

* .custom-* styles merged in to native ones

* Use map-merge to add custom colors to theme

* Update header markup

* Breadcrumbs have no padding now

* data-toggle and data-target get 'bs-' prefix

* data-placement gets 'bs-' prefix; drop data-trigger

* Drop top margin; update horizontal margin

* Rework stack/split button group

* Hide toggle buttons below medium breakpoint

* data-dismiss gets 'bs-' prefix on modal

* Use bootstrap's close button on modal

* .form-text now subsumes <small> and .text-muted

* Drop .form-group-{invalid,valid}

They aren't used by bootstrap and .form-group has gone in v5
as well.

* verticals: .form-group -> .mb-3

* verticals: labels need .form-label

* verticals: .form-control-file -> .form-control

* verticals: .form-control -> .form-select

Also add :vertical_select wrapper for `<select>` lists used for
associations. Without this, the select elements would use the
default :vertical_form wrapper and get the .form-control class.

* verticals: .form-control-range -> .form-range

* verticals: address layout issue with boolean

When a boolean is rendered as radio buttons a hidden `<input>`
element is added between the `<legend>` and first `<div>`
wrapping a radio button. Bootstrap's styling floats the legend
left and needs the following element to be cleared, but this
does not work if the following element is not displayed. We add
an additional rule to target the first following wrapper `<div>`.

* Rework event handling for stack/split toggle

.active has gone; check for .btn so we only process events
from the input elements, not the labels.

Don't preventDefault() on the event, so the radio button will
toggle.

* Get stack/split state from radio buttons

* horizontals: .form-group -> .mb-3

* horizontals: .form-control-file -> .form-control

* horizontals: .form-control -> .form-select

As for horizontals, add :horizontal_select wrapper for `<select>`
lists used for associations. Without this, the select elements
would use the default :horizontal_form wrapper and get the
.form-control class.

* horizontals: .form-control-range -> .form-range

* horizontals: better range label/input alignment

* horizontals: remove duplicate label on boolean

* horizontals: fix margin at bottom of form

* inlines: .sr-only -> .visually-hidden

* inlines: .form-inline replaced with grid

* .custom-* form styles have been dropped

* input_groups: .form-group -> .mb-3

* input_groups: labels need .form-label

* input_groups: prepend/append wrapper div dropped

* input_groups: fix password js

Needs updating as .input-group-append wrapper div isn't used
any more.

* floating_labels: built in with v5

* floating_labels: remove `<select multiple>` example

Not supported by Bootstrap 5's floating labels implementation.

* floating_labels: .custom-select -> .form-select

* floating_labels: docs recommend against rows=""

* input_groups: add .has-validation, move feedback

New .has-validation class was added so validation feedback can move
inside input-group. This works ok for simple_form, but the plain
HTML version with both .valid-feedback and .invalid-feedback divs
loses the rounded end on the input group.

See twbs/bootstrap#25110

* remove .d-block where it is not needed

* fix inclusion of stylesheets in documentation

* Update version number on home page

* Replace .media and .media-body

* `div` is the default for `tag` in wrappers

* Update bootstrap dependency to 5.0.0

* Add `offcanvas` to `application.scss`

* Bump bootstrap rubygem to v5.0.1

Co-authored-by: m5o <m5o@gmx.com>

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")