Problem/Motivation

https://blog.getbootstrap.com/2023/05/30/bootstrap-5-3-0/

https://getbootstrap.com/docs/5.3/migration/

CommentFileSizeAuthor
#12 Peek 19-06-2023 10-38.gif51.03 KBgrimreaper

Issue fork ui_suite_bootstrap-3351580

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

Grimreaper created an issue. See original summary.

mademo’s picture

mademo commented
Assigned: Unassigned » mademo

Grimreaper opened merge request !96

mademo’s picture

mademo commented
Status: Active » Needs review
mademo’s picture

mademo commented
Assigned: mademo » Unassigned
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: Unassigned » grimreaper
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Status: Needs review » Needs work
mademo’s picture

mademo commented
Assigned: grimreaper » mademo
Status: Needs work » Active
mademo’s picture

mademo commented


What’s new on Bootstrap 5.3.0 :

- Dark mode:
Bootstrap’s core has been rewritten to provide first-class support for dark mode. Moreover, Bootstrap now supports any number of color modes, allowing you to build your own custom themes or more nuanced color modes.

- Refreshed color palette and new variables:
https://getbootstrap.com/docs/5.3/customize/color/#colors
https://getbootstrap.com/docs/5.3/customize/css-variables/

- New link helpers and utilities

- New nav underline

- New focus ring helper

- Deprecated the .text-muted utility and $text-muted Sass variable.

mademo’s picture

mademo commented
Assigned: mademo » Unassigned
Status: Active » Needs review
mademo’s picture

mademo commented
Assigned: Unassigned » mademo
Status: Needs review » Active
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
StatusFileSize
new Peek 19-06-2023 10-38.gif51.03 KB

Hi,

I encountered a regression on the floating labels. See attached gif.

I found the root and it is from https://github.com/twbs/bootstrap/blob/main/scss/forms/_floating-labels....

      &::after {
        position: absolute;

And the blame points to this commit https://github.com/twbs/bootstrap/commit/3aabfc70c38db03e77229a49f4f8c7e....

I do not have the time to create an issue in the upstream, and also I am not sure if they would be interested in having a bug fix because Bootstrap does not provide required mark, this is purely a Drupal addition.

I currently made a workaround in a project with the following SASS code:

// Bootstrap 5.3 bug workaround.
body {
  .form-floating {
    > .form-control:focus,
    > .form-control:not(:placeholder-shown),
    > .form-control-plaintext,
    > .form-select {
      ~ label {
        &::after {
          position: unset;
        }
      }
    }
  }
}

I would like to discuss if we should/could put it in ui_suite_bootstrap theme or in the starterkit?

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: mademo » grimreaper
Status: Active » Needs review

Grimreaper opened merge request !110

Grimreaper closed merge request !96

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Issue summary: View changes

  • Grimreaper committed 0b6b1792 on 5.0.x 
    Issue #3351580 by mademo, Grimreaper: Bootstrap 5.3 update

- Add new...
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » Unassigned
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

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

adrianabadsimon changed the visibility of the branch 3351580-rebased to hidden.