Issue #3278240 by Grimreaper: Bootstrap 5: update code. Add some utilities.

css/carousel_example.css → assets/css/carousel_example.css

@@ -17,21 +17,14 @@ body {
 }
 /* Since positioning the image, we need to help out the caption */
 .carousel-caption {
-  z-index: 10;
   bottom: 3rem;
+  z-index: 10;
 }
 
 /* Declare heights because of positioning of img element */
 .carousel-item {
   height: 32rem;
 }
-.carousel-item > img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  min-width: 100%;
-  height: 32rem;
-}
 
 /* MARKETING CONTENT
 -------------------------------------------------- */
@@ -41,13 +34,12 @@ body {
   margin-bottom: 1.5rem;
   text-align: center;
 }
-.marketing h2 {
-  font-weight: 400;
-}
+/* rtl:begin:ignore */
 .marketing .col-lg-4 p {
-  margin-right: 0.75rem;
-  margin-left: 0.75rem;
+  margin-right: .75rem;
+  margin-left: .75rem;
 }
+/* rtl:end:ignore */
 
 /* Featurettes
 ------------------------- */
@@ -57,12 +49,13 @@ body {
 }
 
 /* Thin out the marketing headings */
+/* rtl:begin:remove */
 .featurette-heading {
-  letter-spacing: -0.05rem;
-  font-weight: 300;
-  line-height: 1;
+  letter-spacing: -.05rem;
 }
 
+/* rtl:end:remove */
+
 /* RESPONSIVE CSS
 -------------------------------------------------- */
 

assets/images/example-carousel.svg

+<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"></rect></svg>

css/album.css

-footer {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-
-footer p {
-  margin-bottom: 0.25rem;
-}

css/blog_example.css

-/* stylelint-disable selector-list-comma-newline-after */
-
-.blog-header {
-  border-bottom: 1px solid #e5e5e5;
-  line-height: 1;
-}
-
-.blog-header-logo {
-  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
-  font-size: 2.25rem;
-}
-
-.blog-header-logo:hover {
-  text-decoration: none;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
-}
-
-.display-4 {
-  font-size: 2.5rem;
-}
-
-@media (min-width: 768px) {
-  .display-4 {
-    font-size: 3rem;
-  }
-}
-
-.nav-scroller {
-  position: relative;
-  z-index: 2;
-  overflow-y: hidden;
-  height: 2.75rem;
-}
-
-.nav-scroller .nav {
-  display: -ms-flexbox;
-  display: flex;
-  overflow-x: auto;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  margin-top: -1px;
-  padding-bottom: 1rem;
-  text-align: center;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-}
-
-.nav-scroller .nav-link {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  font-size: 0.875rem;
-}
-
-.card-img-right {
-  height: 100%;
-  border-radius: 0 3px 3px 0;
-}
-
-.flex-auto {
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-}
-
-.h-250 {
-  height: 250px;
-}
-
-@media (min-width: 768px) {
-  .h-md-250 {
-    height: 250px;
-  }
-}
-
-/*
- * Blog name and description
- */
-.blog-title {
-  margin-bottom: 0;
-  font-size: 2rem;
-  font-weight: 400;
-}
-.blog-description {
-  color: #999;
-  font-size: 1.1rem;
-}
-
-@media (min-width: 40em) {
-  .blog-title {
-    font-size: 3.5rem;
-  }
-}
-
-/* Pagination */
-.blog-pagination {
-  margin-bottom: 4rem;
-}
-.blog-pagination > .btn {
-  border-radius: 2rem;
-}
-
-/*
- * Blog posts
- */
-.blog-post {
-  margin-bottom: 4rem;
-}
-.blog-post-title {
-  margin-bottom: 0.25rem;
-  font-size: 2.5rem;
-}
-.blog-post-meta {
-  margin-bottom: 1.25rem;
-  color: #999;
-}
-
-/*
- * Footer
- */
-.blog-footer {
-  padding: 2.5rem 0;
-  text-align: center;
-  color: #999;
-  border-top: 0.05rem solid #e5e5e5;
-  background-color: #f9f9f9;
-}
-.blog-footer p:last-child {
-  margin-bottom: 0;
-}

css/pricing_example.css

-html {
-  font-size: 14px;
-}
-
-@media (min-width: 768px) {
-  html {
-    font-size: 16px;
-  }
-}
-
-.container {
-  max-width: 960px;
-}
-
-.pricing-header {
-  max-width: 700px;
-}
-
-.card-deck .card {
-  min-width: 220px;
-}

templates/overrides/system/status-messages.html.twig

@@ -34,7 +34,8 @@
     {{ pattern('alert', {
       'variant': variant,
       'attributes': attributes,
-      'message': message
+      'message': message,
+      'dismissible': true
     }) }}
   {% endfor %}
 

templates/overrides/ui_patterns_library/patterns-meta-information.html.twig

@@ -15,13 +15,13 @@
   {% if pattern.fields or pattern.additional.settings %}
   <table class="pattern-preview__fields table">
     <thead>
-    <tr>
-      <td></td>
-      <th>{{ "Name"|t }}</th>
-      <th>{{ "Label"|t }}</th>
-      <th>{{ "Type"|t }}</th>
-      <th>{{ "Description"|t }} / {{ "Options"|t }}</th>
-    </tr>
+      <tr>
+        <td></td>
+        <th>{{ "Name"|t }}</th>
+        <th>{{ "Label"|t }}</th>
+        <th>{{ "Type"|t }}</th>
+        <th>{{ "Description"|t }} / {{ "Options"|t }}</th>
+      </tr>
     </thead>
     <tbody>
     {% for field in pattern.fields %}

templates/overrides/ui_patterns_library/patterns-overview-page.html.twig

@@ -7,26 +7,21 @@
 
 {% if patterns is not empty %}
 <div class="row">
-<div class="col-lg-2">
-  <h2 class="hidden">{{ "Available patterns"|t }}</h2>
-
-  {# List of available patterns with anchor links. #}
-  <ul class="list-unstyled">
+  <div class="col-lg-2">
+    <h2 class="visually-hidden">{{ "Available patterns"|t }}</h2>
+    {# List of available patterns with anchor links. #}
+    <ul class="list-unstyled">
     {% for pattern_name, pattern in patterns %}
       <li>
         <a href="#{{ pattern_name }}">{{ pattern.label }}</a>
       </li>
     {% endfor %}
-  </ul>
-
-</div>
-<div class="col-lg-10">
+    </ul>
+  </div>
 
-  {% for pattern_name, pattern in patterns %}
-
-    <div class="pattern-preview pattern-preview__{{ pattern.definition.id }}">
-      {# Pattern name and description. #}
-      <a name="{{ pattern_name }}"></a>
+  <div class="col-lg-10">
+    {% for pattern_name, pattern in patterns %}
+    <div class="pattern-preview pattern-preview__{{ pattern.definition.id }}" id="{{ pattern_name }}">
       {{ pattern.meta }}
 
       {# Link to standalone pattern preview page.#}
@@ -38,15 +33,10 @@
 
       {# Rendered pattern preview. #}
       {{ pattern.rendered }}
-
     </div>
 
     <hr class="my-5">
-  {% endfor %}
-
+    {% endfor %}
+  </div>
 </div>
-
 {% endif %}
-
-
-

templates/overrides/ui_styles_library/ui-styles-overview-page.html.twig

@@ -7,21 +7,19 @@
 
 {% if styles is not empty %}
 <div class="row">
-<div class="col-lg-2">
-  <h2 class="hidden">{{ "Available styles"|t }}</h2>
-
-  {# List of available styles with anchor links. #}
-  <ul class="list-unstyled">
+  <div class="col-lg-2">
+    <h2 class="visually-hidden">{{ "Available styles"|t }}</h2>
+    {# List of available styles with anchor links. #}
+    <ul class="list-unstyled">
     {% for style in styles %}
       <li>
         <a href="#{{ style.id }}">{{ style.label }}</a>
       </li>
     {% endfor %}
-  </ul>
-
-</div>
-<div class="col-lg-10">
+    </ul>
+  </div>
 
+  <div class="col-lg-10">
   {% for style in styles %}
     <h3 id="{{ style.id }}" class="display-3">{{ style.label }}</h3>
     {% if style.description %}
@@ -33,8 +31,6 @@
     {% endfor %}
     <hr>
   {% endfor %}
-{% endif %}
-
-</div>
+  </div>
 </diV>
-
+{% endif %}

templates/patterns/alert/alert.ui_patterns.yml

 alert:
-  label: Alert
-  description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. https://getbootstrap.com/docs/5.2/components/alerts/
+  label: "Alert"
+  description: "Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. https://getbootstrap.com/docs/5.2/components/alerts/"
   variants:
     primary:
-      label: Primary
+      label: "Primary"
     secondary:
-      label: Secondary
+      label: "Secondary"
     success:
-      label: Success
+      label: "Success"
     danger:
-      label: Danger
+      label: "Danger"
     warning:
-      label: Warning
+      label: "Warning"
     info:
-      label: Info
+      label: "Info"
     light:
-      label: Light
+      label: "Light"
     dark:
-      label: Dark
+      label: "Dark"
   settings:
     dismissible:
-      type: boolean
-      label: Dismissible?
-      description: It’s possible to dismiss any alert inline
+      type: "boolean"
+      label: "Dismissible?"
+      description: "It is possible to dismiss any alert inline."
       preview: True
   fields:
     heading:
-      type: text
-      label: Heading
-      description: The alert heading. Optional.
-      preview: Well done!
+      type: "text"
+      label: "Heading"
+      description: "The alert heading. Optional."
+      preview: "Well done!"
     message:
-      type: render
-      label: Message
-      description: The alert message.
-      preview: " A simple alert—check it out! "
+      type: "render"
+      label: "Message"
+      description: "The alert message."
+      preview: "A simple alert. Check it out!"

templates/patterns/alert/pattern-alert.html.twig

@@ -15,11 +15,6 @@
   {% endif %}
   {{ message }}
   {% if dismissible %}
-    <button type="button" class="close" data-dismiss="alert" aria-label="{{ 'Close'|t }}">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{ 'Close'|t }}"></button>
   {% endif %}
 </div>
-
-
-

templates/patterns/badge/badge.ui_patterns.yml

 badge:
-  label: Badge
-  description: A small count and labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and em units. https://getbootstrap.com/docs/5.2/components/badge/
+  label: "Badge"
+  description: "A small count and labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and em units. https://getbootstrap.com/docs/5.2/components/badge/"
   variants:
-    primary:
-      label: Primary
-    secondary:
-      label: Secondary
-    success:
-      label: Success
-    danger:
-      label: Danger
-    warning:
-      label: Warning
-    info:
-      label: Info
-    light:
-      label: Light
-    dark:
-      label: Dark
-    pill__primary:
-      label: Pill Primary
-    pill___secondary:
-      label: Pill Secondary
-    pill__success:
-      label: Pill Success
-    pill__danger:
-      label: Pill Danger
-    pill__warning:
-      label: Pill Warning
-    pill__info:
-      label: Pill Info
-    pill__light:
-      label: Pill Light
-    pill__dark:
-      label: Pill Dark
-    link__primary:
-      label: Link Primary
+    default:
+      label: "Default"
   fields:
     label:
-      type: text
-      label: Label
-      description: The badge label
-      preview: New
-    url:
-      type: text
-      label: URL
-      description: The badge URL. Optional.
-      preview: ""
+      type: "text"
+      label: "Label"
+      description: "The badge's label."
+      preview: "New"

templates/patterns/badge/pattern-badge--preview.html.twig

+{#
+/**
+ * For preview, to avoid warnings due to preview value transformed as markup
+ * object.
+ */
+#}
+{% set attributes = attributes.addClass('bg-primary') %}
+{{ include('@ui_suite_bootstrap/patterns/badge/pattern-badge.html.twig') }}

templates/patterns/badge/pattern-badge.html.twig

-{% if variant != '' and variant|lower != 'default' %}
-  {% set variants = variant|split('__') %}
-  {% for variant in variants %}
-    {% set attributes = attributes.addClass('badge-' ~ variant|lower|replace({'_': '-'})) %}
-  {% endfor %}
-{% endif %}
+{% set attributes = attributes.addClass('badge') %}
 
 {% if url or attributes.href %}
   {% set url = url ?: attributes.href %}
-  <a {{ attributes.addClass('badge').setAttribute('href', url) }}>{{ label }}</a>
+  <a {{ attributes.setAttribute('href', url) }}>{{ label }}</a>
 {% else %}
-  <span {{ attributes.addClass('badge') }}>{{ label }}</span>
+  <span {{ attributes }}>{{ label }}</span>
 {% endif %}

templates/patterns/blockquote/blockquote.ui_patterns.yml

@@ -3,32 +3,25 @@ blockquote:
   description: "For quoting blocks of content from another source within your document. https://getbootstrap.com/docs/5.2/content/typography/#blockquotes"
   variants:
     default:
-      label: Default
-    fluid:
-      label: Fluid
-      description: This is a modified jumbotron that occupies the entire horizontal space of its parent, and without rounded corners.
+      label: "Default"
   fields:
     content:
       type: "render"
       label: "Content"
-      description: "The quote"
+      description: "The quote."
       preview:
-        - type: html_tag
-          tag: p
-          value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
-          attributes:
-            class:
-              - "mb-0"
+        - type: "html_tag"
+          tag: "p"
+          value: "A well-known quote, contained in a blockquote element."
     footer:
       type: "render"
       label: "Footer"
       description: "For identifying the source. Wrap the name of the source work in <cite>."
       preview:
-        - type: html_tag
-          tag: span
-          value: "Someone famous in "
-        - type: html_tag
-          tag: cite
+        - type: "markup"
+          markup: "Someone famous in "
+        - type: "html_tag"
+          tag: "cite"
           value: "Source Title"
           attributes:
             title:

templates/patterns/blockquote/pattern-blockquote.html.twig

-<blockquote{{ attributes.addClass('blockquote') }}>
-  {{ content }}
-  <footer class="blockquote-footer">{{ footer }}</footer>
-</blockquote>
+{% if footer %}
+  <figure {{ attributes }}>
+    <blockquote class="blockquote">
+      {{ content }}
+    </blockquote>
+    <figcaption class="blockquote-footer">
+      {{ footer }}
+    </figcaption>
+  </figure>
+{% else %}
+  <blockquote {{ attributes.addClass('blockquote') }}>
+    {{ content }}
+  </blockquote>
+{% endif %}