feat(carousel): integrate pause/play button within the carousel (#1763)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Mar 1, 2023 · c125971 · c125971
1 parent c850564
commit c125971
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 27 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "42.0 kB"
+      "maxSize": "42.25 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",

diff --git a/js/src/carousel.js b/js/src/carousel.js
@@ -160,7 +160,7 @@ class Carousel extends BaseComponent {
     }
     // End mod
 
-    // Boosted mod: if a play-pause button is present, set the button to play on mouseenter
+    // Boosted mod: if a play-pause button is present, set the button to play
     if (this._playPauseButton !== null && this._playPauseButton.classList.contains('pause')) {
       this._playPauseButton.classList.remove('pause')
       this._playPauseButton.classList.add('play')
@@ -191,7 +191,7 @@ class Carousel extends BaseComponent {
     }
     // End mod
 
-    // Boosted mod: if a play-pause button is present, reset the button to pause on mouseleave
+    // Boosted mod: if a play-pause button is present, reset the button to pause
     if (this._playPauseButton !== null && this._playPauseButton.classList.contains('play')) {
       this._playPauseButton.classList.remove('play')
       this._playPauseButton.classList.add('pause')

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
@@ -187,7 +187,7 @@
   display: flex;
   justify-content: center;
   padding: $carousel-indicators-padding-y 0; // Boosted mod
-  margin-bottom: $spacer; // Boosted mod
+  margin-bottom: $carousel-indicators-margin-bottom; // Boosted mod
   list-style: none;
   background: rgba($carousel-indicator-active-bg, .5); // Boosted mod
   transform: translateX(-50%); // Boosted mod
@@ -302,8 +302,47 @@
 }
 
 /* rtl:end:ignore */
-// End mod
 
+.carousel-action-bar {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  z-index: 2;
+  display: flex;
+  transform: translateX(-50%);
+
+  .carousel-control-play-pause {
+    margin-bottom: $carousel-indicators-margin-bottom;
+    background: rgba($carousel-indicator-active-bg, .5);
+    border: 0;
+    @include border-radius($spacer, $spacer);
+
+    &.pause {
+      @include button-icon($carousel-control-pause-icon, $carousel-control-pause-button-size, $size: $carousel-control-pause-icon-size, $pseudo: "after");
+    }
+
+    &.play {
+      @include button-icon($carousel-control-play-icon, $carousel-control-pause-button-size, $size: $carousel-control-pause-icon-size, $pseudo: "after");
+
+      &::after {
+        transform: translateX(1px);
+      }
+    }
+
+    &:hover {
+      color: color-contrast($carousel-control-color);
+      background-color: #{color-contrast($carousel-indicator-active-bg)};
+      opacity: $carousel-control-hover-opacity;
+    }
+  }
+
+  .carousel-indicators {
+    position: initial;
+    margin-left: $carousel-control-pause-indicators-spacing;
+    transform: none;
+  }
+}
+// End mod
 
 // Optional captions
 //
@@ -321,13 +360,3 @@
 
 // Boosted mod: no dark carousel nor carousel in dark mode since Boosted doesn't have any dark mode for now
 
-// Boosted mod: play/pause button
-.carousel-control-play-pause {
-  &.pause {
-    @include button-icon($carousel-control-pause-icon, $size: $carousel-control-pause-icon-size, $pseudo: "after");
-  }
-  &.play {
-    @include button-icon($carousel-control-play-icon, $size: $carousel-control-pause-icon-size, $pseudo: "after");
-  }
-}
-// End mod
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -2046,6 +2046,7 @@ $carousel-indicator-active-radius:      0 100% 100% 0 / 50% !default;
 $carousel-indicator-animation-duration: 5000ms !default;
 $carousel-indicator-animation-interval: var(--carousel-interval, #{$carousel-indicator-animation-duration}) !default;
 $carousel-indicators-padding-y:         $spacer * .5 !default;
+$carousel-indicators-margin-bottom:     $spacer !default;
 // End mod
 
 $carousel-caption-width:             70% !default;
@@ -2060,9 +2061,11 @@ $carousel-control-icon-size:         1rem 1.5rem !default;
 $carousel-control-icon-bg:           var(--#{$boosted-prefix}chevron-icon) !default;
 $carousel-control-icon-active-bg:    $component-active-bg !default;
 
-$carousel-control-pause-icon:        $pause-icon !default;
-$carousel-control-play-icon:         $play-icon !default;
-$carousel-control-pause-icon-size:   1.25rem 1.25rem !default;
+$carousel-control-pause-indicators-spacing: 10px !default;
+$carousel-control-pause-icon:               $pause-icon !default;
+$carousel-control-play-icon:                $play-icon !default;
+$carousel-control-pause-button-size:        .75rem !default;
+$carousel-control-pause-icon-size:          .75rem .75rem !default;
 // End mod
 
 $carousel-transition-duration:       .6s !default;

diff --git a/site/content/docs/5.3/components/carousel.md b/site/content/docs/5.3/components/carousel.md
@@ -105,16 +105,28 @@ Carousel progress indicator is paused under multiple conditions:
 {{< added-in "5.2.0" >}}
 
 Adding a pause and play button is recommended to setup an accessible carousel.
-This `button` must immediately follow your carousel and have the custom `data-bs-control="play-button"` attribute. In addition, it must also have a `data-bs-target` attribute that matches the `id` of the `.carousel` element.
+When using this button, do not forget to turn off the pause on hover by adding `data-bs-pause="false"` to your carousel.
+
+The `button` must have the custom `data-bs-control="play-button"` attribute and must be included inside a `.carousel-action-bar` alongside the `.carousel-indicators`. In addition, it must also have a `data-bs-target` attribute that matches the `id` of the `.carousel` element.
 
 'Play' and 'Pause' texts can be changed by modifying `data-bs-play-text` and `data-bs-pause-text` custom attributes.
 
+{{< callout warning >}}
+For Orange users we recommend using the pause/play button for better accessibility.
+Pausing the carousel by hovering one slide should not be used.
+{{< /callout >}}
+
 {{< example >}}
-<div id="carouselExamplePause" class="carousel slide" data-bs-ride="carousel">
-  <div class="carousel-indicators">
-    <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-    <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="1" aria-label="Slide 2"></button>
-    <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="2" aria-label="Slide 3"></button>
+<div id="carouselExamplePause" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false">
+  <div class="carousel-action-bar">
+    <button type="button" class="btn btn-icon carousel-control-play-pause pause" data-bs-target="#carouselExamplePause" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
+      <span class="visually-hidden">Pause Carousel</span>
+    </button>
+    <div class="carousel-indicators">
+      <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="1" aria-label="Slide 2"></button>
+      <button type="button" data-bs-target="#carouselExamplePause" data-bs-slide-to="2" aria-label="Slide 3"></button>
+    </div>
   </div>
   <div class="carousel-inner">
     <div class="carousel-item active">
@@ -136,9 +148,6 @@ This `button` must immediately follow your carousel and have the custom `data-bs
     <span class="visually-hidden">Next</span>
   </button>
 </div>
-<button type="button" class="btn btn-icon btn-secondary carousel-control-play-pause pause mt-1" data-bs-target="#carouselExamplePause" data-bs-play-text="Play Carousel" data-bs-pause-text="Pause Carousel" title="Pause Carousel">
-  <span class="visually-hidden">Pause Carousel</span>
-</button>
 {{< /example >}}
 <!-- End mod -->
 

diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
@@ -126,6 +126,9 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
     </div>
     ```
 
+- **Carousel**
+  - <span class="badge text-danger-emphasis bg-danger">Breaking</span> The pause/play button is now included within the carousel for a better rendering but still respecting accessibility guidelines; it is now placed on the left-hand side of the indicators. The HTML markup has changed, please use this new version on your websites.
+
 ### Forms
 
 - `.form-control` is now styled with CSS variables to support color modes. This includes the addition of two new root CSS variables for the default and disabled form control backgrounds.
@@ -339,6 +342,9 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
       <li><code>$border-radius-xxl</code></li>
       <li><code>$card-subtitle-color</code></li>
       <li><code>$card-title-color</code></li>
+      <li><code>$carousel-control-pause-button-size</code></li>
+      <li><code>$carousel-control-pause-indicators-spacing</code></li>
+      <li><code>$carousel-indicators-margin-bottom</code></li>
       <li><code>$code-color-dark</code></li>
       <li><code>$code-color-inverted</code></li>
       <li><code>$color-mode-type</code></li>