Chore/merge main@a805330

js/src/collapse.js

@@ -256,12 +256,12 @@ class Collapse extends BaseComponent {
 
   // Static
   static jQueryInterface(config) {
-    return this.each(function () {
-      const _config = {}
-      if (typeof config === 'string' && /show|hide/.test(config)) {
-        _config.toggle = false
-      }
+    const _config = {}
+    if (typeof config === 'string' && /show|hide/.test(config)) {
+      _config.toggle = false
+    }
 
+    return this.each(function () {
       const data = Collapse.getOrCreateInstance(this, _config)
 
       if (typeof config === 'string') {

package.json

@@ -21,6 +21,18 @@
   "contributors": [
     "Orange SA"
   ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues"
+  },
+  "main": "dist/js/boosted.js",
+  "module": "dist/js/boosted.esm.js",
+  "sass": "scss/boosted.scss",
+  "style": "dist/css/boosted.css",
   "scripts": {
     "start": "npm-run-all --parallel watch docs-serve",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
@@ -85,18 +97,6 @@
     "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
     "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\""
   },
-  "style": "dist/css/boosted.css",
-  "sass": "scss/boosted.scss",
-  "main": "dist/js/boosted.js",
-  "module": "dist/js/boosted.esm.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues"
-  },
-  "license": "MIT",
   "peerDependencies": {
     "@popperjs/core": "^2.11.2"
   },

scss/_utilities.scss

@@ -243,12 +243,6 @@ $utilities: map-merge(
       class: flex,
       values: wrap nowrap wrap-reverse
     ),
-    "gap": (
-      responsive: true,
-      property: gap,
-      class: gap,
-      values: $spacers
-    ),
     "justify-content": (
       responsive: true,
       property: justify-content,
@@ -441,6 +435,13 @@ $utilities: map-merge(
       class: ps,
       values: $spacers
     ),
+    // Gap utility
+    "gap": (
+      responsive: true,
+      property: gap,
+      class: gap,
+      values: $spacers
+    ),
     // scss-docs-end utils-spacing
     // Text
     // scss-docs-start utils-text

scss/_variables.scss

@@ -775,6 +775,8 @@ $table-border-factor:         .4 !default;
 $table-border-width:          $border-width * .5 !default;
 $table-border-color:          $gray-500 !default;
 
+// Boosted mod: no $table-striped-*
+
 $table-group-separator-color: currentColor !default;
 
 $table-caption-color:         $black !default;

scss/forms/_form-check.scss

@@ -105,6 +105,7 @@
   &:disabled {
     ~ .form-check-label {
       color: $form-label-disabled-color; // Boosted mod
+      cursor: default;
       opacity: $form-check-label-disabled-opacity;
     }
   }

site/assets/js/application.js

@@ -120,15 +120,16 @@
   }
 
   // Insert copy to clipboard button before .highlight
-  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn btn-sm btn-secondary btn-clipboard" title="Copy to clipboard">Copy</button></div>'
+  var btnTitle = 'Copy to clipboard'
+  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn btn-sm btn-secondary btn-clipboard">Copy</button></div>'
   document.querySelectorAll('div.highlight')
     .forEach(function (element) {
       element.insertAdjacentHTML('beforebegin', btnHtml)
     })
 
   document.querySelectorAll('.btn-clipboard')
     .forEach(function (btn) {
-      var tooltipBtn = new boosted.Tooltip(btn)
+      var tooltipBtn = new boosted.Tooltip(btn, { title: btnTitle })
 
       btn.addEventListener('mouseleave', function () {
         // Explicitly hide tooltip, since after clicking it remains
@@ -146,11 +147,10 @@
 
   clipboard.on('success', function (event) {
     var tooltipBtn = boosted.Tooltip.getInstance(event.trigger)
-    var originalTitle = event.trigger.getAttribute('title')
 
     tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
     event.trigger.addEventListener('hidden.bs.tooltip', function () {
-      tooltipBtn.setContent({ '.tooltip-inner': originalTitle })
+      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
     }, { once: true })
     event.clearSelection()
   })
@@ -159,11 +159,10 @@
     var modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
     var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
     var tooltipBtn = boosted.Tooltip.getInstance(event.trigger)
-    var originalTitle = event.trigger.getAttribute('title')
 
     tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg })
     event.trigger.addEventListener('hidden.bs.tooltip', function () {
-      tooltipBtn.setContent({ '.tooltip-inner': originalTitle })
+      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
     }, { once: true })
   })
 

site/content/docs/5.1/components/breadcrumb.md

@@ -54,8 +54,15 @@ $breadcrumb-divider: quote(">");
 
 It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable.
 
+
+{{< callout info >}}
+### Using embedded SVG
+
+Inlining SVG as data URI requires to URL escape a few characters, most notably `<`, `>` and `#`. That's why the `$breadcrumb-divider` variable is passed through our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When using the CSS custom property, you need to URL escape your SVG on your own. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for detailed information on what to escape.
+{{< /callout >}}
+
 {{< example >}}
-<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
+<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%23000000'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
   <ol class="breadcrumb">
     <li class="breadcrumb-item"><a href="#">Home</a></li>
     <li class="breadcrumb-item active" aria-current="page">Library</li>
@@ -64,7 +71,7 @@ It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom
 {{< /example >}}
 
 ```scss
-$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
+$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");
 ```
 
 You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.

site/content/docs/5.1/components/dropdowns.md

@@ -922,10 +922,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
         <p>Configure the auto close behavior of the dropdown:</p>
         <ul>
           <li><code>true</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.</li>
-          <li><code>false</code> - the dropdown will be closed by clicking the toggle button and manually calling <code>hide</code> or <code>toggle</code> method. (Also will not be closed by pressing <kbd>esc</kbd> key)</li>
+          <li><code>false</code> - the dropdown will be closed by clicking the toggle button and manually calling <code>hide</code> or <code>toggle</code> method.</li>
           <li><code>'inside'</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.</li>
           <li><code>'outside'</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</li>
         </ul>
+        <p>The dropdown can always be closed with the <kbd>ESC</kbd> key.</p>
       </td>
     </tr>
     <tr>

site/content/docs/5.1/forms/validation.md

@@ -165,7 +165,7 @@ We recommend using client-side validation, but in case you require server-side v
 
 For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby` (noting that this attribute allows more than one `id` to be referenced, in case the field already points to additional form text).
 
-To fix [issues with border radii](https://github.com/twbs/bootstrap/issues/25110), input groups require an additional `.has-validation` class.
+To fix [issues with border radius](https://github.com/twbs/bootstrap/issues/25110), input groups require an additional `.has-validation` class.
 
 {{< example >}}
 <form class="row g-3">