Merge branch 'main-mlh-story-buttons' of https://github.com/Orange-Op…

…enSource/Orange-Boosted-Bootstrap into main-mlh-story-buttons
Orange-OpenSource · Feb 8, 2023 · 2f89909 · 2f89909
2 parents b0cfce5 + 527f9ea
commit 2f89909
Show file tree

Hide file tree

Showing 14 changed files with 318 additions and 249 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -105,7 +105,7 @@
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.20.2",
     "@babel/preset-env": "^7.20.2",
-    "@percy/cli": "^1.17.0",
+    "@percy/cli": "^1.18.0",
     "@popperjs/core": "^2.11.6",
     "@rollup/plugin-babel": "^6.0.2",
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -155,7 +155,7 @@
     "npm-run-all": "^4.1.5",
     "ods-storybook-theme": "^0.1.0",
     "pa11y-ci": "^3.0.1",
-    "pa11y-ci-reporter-html": "^5.0.2",
+    "pa11y-ci-reporter-html": "^5.0.3",
     "postcss": "^8.4.19",
     "postcss-cli": "^10.0.0",
     "rollup": "^3.4.0",
@@ -167,7 +167,7 @@
     "sirv-cli": "^2.0.2",
     "stylelint": "^14.15.0",
     "stylelint-config-twbs-bootstrap": "^7.0.0",
-    "tarteaucitronjs": "^1.9.9",
+    "tarteaucitronjs": "^1.10.0",
     "terser": "^5.15.1",
     "vnu-jar": "^22.9.29"
   },

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
@@ -87,7 +87,7 @@
   // Boosted mod
   .btn-group:not(.dropstart) &,
   .dropstart & ~ .btn {
-    &:not(:hover):not(:focus):not(:active) {
+    &:not(:hover):not(:focus):not(:active):not(.show) {
       border-left-color: transparent;
 
       &::before {

diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -65,6 +65,7 @@ $utilities-colors: $theme-colors-rgb !default;
 $utilities-text: (
   "primary": to-rgb($accessible-orange),
   "light": to-rgb($gray-500),
+  "black": to-rgb($black),
   "white": to-rgb($white),
   "body": to-rgb($body-color),
 ) !default;

diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -22,14 +22,15 @@
 }
 
 .nav-link {
-  display: flex; // Boosted mod
+  display: flex; // Boosted mod: instead of `block`
   align-items: center; // Boosted mod
   padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
   @include font-size(var(--#{$prefix}nav-link-font-size));
   font-weight: var(--#{$prefix}nav-link-font-weight);
   color: var(--#{$prefix}nav-link-color);
   text-decoration: if($link-decoration == none, null, none);
-  background: none; // Boosted mod: Prevent dropdown's background to interfere
+  background: none;
+  border: 0;
   @include transition($nav-link-transition);
 
   // Boosted mod: no focus

diff --git a/scss/_progress.scss b/scss/_progress.scss
@@ -8,7 +8,8 @@
 }
 // scss-docs-end progress-keyframes
 
-.progress {
+.progress,
+.progress-stacked {
   // scss-docs-start progress-css-vars
   --#{$prefix}progress-height: #{$progress-height};
   @include rfs($progress-font-size, --#{$prefix}progress-font-size);
@@ -63,6 +64,14 @@
   background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
 }
 
+.progress-stacked > .progress {
+  overflow: visible;
+}
+
+.progress-stacked > .progress > .progress-bar {
+  width: 100%;
+}
+
 @if $enable-transitions {
   .progress-bar-animated {
     animation: $progress-bar-animation-timing progress-bar-stripes;

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1156,7 +1156,7 @@ $form-star-focus-box-shadow:      $input-btn-focus-box-shadow !default; // Depre
 // scss-docs-start form-switch-variables
 // Boosted mod: no $form-switch-color
 $form-switch-width:               $spacer * 3 !default; // Boosted mod
-$form-switch-padding-start:       $form-switch-width + .5rem !default;
+$form-switch-padding-start:       $form-switch-width + .625rem !default; // Boosted mod
 $form-switch-bg-image:            var(--#{$boosted-prefix}close-icon) !default;  // Boosted mod
 $form-switch-bg-position:         right .5rem top 50% !default;  // Boosted mod
 $form-switch-bg-size:             .75rem !default;  // Boosted mod

diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
@@ -118,6 +118,8 @@
                     $value: $white;
                   } @else if $color-name == "body-color" {
                     $value: $black;
+                  } @else if $color-name == "black" {
+                    background: var(--bs-white);
                   }
                 }
               }

diff --git a/site/content/docs/5.2/components/dropdowns.md b/site/content/docs/5.2/components/dropdowns.md
@@ -248,7 +248,7 @@ And putting it to use in a navbar:
     <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
       <ul class="navbar-nav">
         <li class="nav-item dropdown">
-          <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+          <button class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
             Dropdown
           </button>
           <ul class="dropdown-menu dropdown-menu-dark">

diff --git a/site/content/docs/5.2/components/progress.md b/site/content/docs/5.2/components/progress.md
@@ -8,56 +8,55 @@ aliases:
 toc: true
 ---
 
+{{< callout info >}}
+**New markup in v5.3.0 —** We've deprecated the previous HTML structure for progress bars and replaced it with a more accessible one. The previous structure will continue to work until v6. [See what's changed in our migration guide.]({{< docsref "/migration#progress-bars" >}})
+{{< /callout >}}
+
 ## How it works
 
 Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.
 
 - We use the `.progress` as a wrapper to indicate the max value of the progress bar.
-- We use the inner `.progress-bar` to indicate the progress so far.
-- The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width.
-- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar).
+- The `.progress` wrapper also requires a `role="progress"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar).
+- We use the inner `.progress-bar` purely for the visual bar and label.
+- The `.progress-bar` requires an inline style, utility class, or custom CSS to set its width.
+- We provide a special `.progress-stacked` class to create multiple/stacked progress bars.- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar).
 
 Put that all together, and you have the following examples.
 
 {{< example >}}
-<div class="progress">
-  <div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 0%"></div>
 </div>
-<div class="progress">
-  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 25%"></div>
 </div>
-<div class="progress">
-  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 50%"></div>
 </div>
-<div class="progress">
-  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 75%"></div>
 </div>
-<div class="progress">
-  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 100%"></div>
 </div>
 {{< /example >}}
 
-Boosted provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring progress.
-
-{{< example >}}
-<div class="progress">
-  <div class="progress-bar w-75" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-{{< /example >}}
+## Bar sizing
 
-## Labels
+### Width
 
-Add labels to your progress bars by placing text within the `.progress-bar`.
+Boosted provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring progress.
 
 {{< example >}}
-<div class="progress">
-  <div class="progress-bar" role="progressbar"  aria-label="Example with label" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar w-75"></div>
 </div>
 {{< /example >}}
 
-## Height
+### Height
 
-We only set a `height` value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly.
+You only set a `height` value on the `.progress` container, so if you change that value, the inner `.progress-bar` will automatically resize accordingly.
 
 {{< ods-incompatibility-alert >}}
 The **1px height** variant should not be used because it does not respect the Orange Design System specifications.
@@ -66,11 +65,21 @@ Please refer to the [Progress indicators](https://system.design.orange.com/0c1af
 {{< /ods-incompatibility-alert >}}
 
 {{< example >}}
-<div class="progress" style="height: 1px;">
-  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress"  role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
+  <div class="progress-bar" style="width: 25%"></div>
+</div>
+<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
+  <div class="progress-bar" style="width: 25%"></div>
 </div>
-<div class="progress" style="height: 20px;">
-  <div class="progress-bar" role="progressbar" aria-label="Example 20px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+{{< /example >}}
+
+## Labels
+
+Add labels to your progress bars by placing text within the `.progress-bar`.
+
+{{< example >}}
+<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 25%">25%</div>
 </div>
 {{< /example >}}
 
@@ -80,11 +89,11 @@ Please refer to the [Progress indicators](https://system.design.orange.com/0c1af
 Boosted also provides size variants for progress bar: simply add `.progress-xs` or `.progress-sm`.
 
 {{< example >}}
-<div class="progress progress-xs">
-  <div class="progress-bar" role="progressbar" aria-label="Extra small example" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress progress-xs" role="progressbar" aria-label="Extra small example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 25%"></div>
 </div>
-<div class="progress progress-sm">
-  <div class="progress-bar" role="progressbar" aria-label="Small example" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress progress-sm" role="progressbar" aria-label="Small example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 25%"></div>
 </div>
 {{< /example >}}
 <!-- End mod -->
@@ -100,17 +109,17 @@ Please refer to the [Progress indicators](https://system.design.orange.com/0c1af
 {{< /ods-incompatibility-alert >}}
 
 {{< example >}}
-<div class="progress">
-  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-success" style="width: 25%"></div>
 </div>
-<div class="progress">
-  <div class="progress-bar bg-info" role="progressbar" aria-label="Info example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-info" style="width: 50%"></div>
 </div>
-<div class="progress">
-  <div class="progress-bar bg-warning" role="progressbar" aria-label="Warning example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-warning" style="width: 75%"></div>
 </div>
-<div class="progress">
-  <div class="progress-bar bg-danger" role="progressbar" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-danger" style="width: 100%"></div>
 </div>
 {{< /example >}}
 
@@ -120,13 +129,19 @@ Please refer to the [Progress indicators](https://system.design.orange.com/0c1af
 
 ## Multiple bars
 
-Include multiple progress bars in a progress component if you need.
+You can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s.
 
 {{< example >}}
-<div class="progress">
-  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
-  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
-  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress-stacked">
+  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
+    <div class="progress-bar"></div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
+    <div class="progress-bar bg-success"></div>
+  </div>
+  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+    <div class="progress-bar bg-info"></div>
+  </div>
 </div>
 {{< /example >}}
 
@@ -141,20 +156,20 @@ Please refer to the [Progress indicators](https://system.design.orange.com/0c1af
 {{< /ods-incompatibility-alert >}}
 
 {{< example >}}
-<div class="progress">
-  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
 </div>
-<div class="progress">
-  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-label="Success striped example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
 </div>
-<div class="progress">
-  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-label="Info striped example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
 </div>
-<div class="progress">
-  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-label="Warning striped example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
 </div>
-<div class="progress">
-  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-label="Danger striped example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
 </div>
 {{< /example >}}
 
@@ -169,8 +184,8 @@ Please refer to the [Progress indicators](https://system.design.orange.com/0c1af
 {{< /ods-incompatibility-alert >}}
 
 {{< example >}}
-<div class="progress">
-  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
+<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
 </div>
 {{< /example >}}
 

diff --git a/site/content/docs/5.2/customize/color-modes.md b/site/content/docs/5.2/customize/color-modes.md
@@ -79,8 +79,8 @@ For example, despite using `data-bs-theme="dark"` on a random `<div>`, the `<div
 
   <p>This should be shown in a <strong>dark</strong> theme at all times.</p>
 
-  <div class="progress mb-4">
-    <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress mb-4" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar" style="width: 25%"></div>
   </div>
 
   <div class="dropdown mb-4">
@@ -108,8 +108,8 @@ For example, despite using `data-bs-theme="dark"` on a random `<div>`, the `<div
 
     <p>This should be shown in a <strong>light</strong> theme at all times.</p>
 
-    <div class="progress mb-4">
-      <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+    <div class="progress mb-4" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+      <div class="progress-bar" style="width: 25%"></div>
     </div>
 
     <div class="dropdown">