feat(popovers/tooltips): update rendering according to UI Kit v5 (#1803)

Co-authored-by: Julien Déramond <[email protected]>
Orange-OpenSource · Mar 27, 2023 · c8fb697 · c8fb697
1 parent c50465a
commit c8fb697
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 36 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "42.25 kB"
+      "maxSize": "42.5 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "39.0 kB"
+      "maxSize": "39.25 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

diff --git a/js/src/popover.js b/js/src/popover.js
@@ -20,7 +20,7 @@ const SELECTOR_CONTENT = '.popover-body'
 const Default = {
   ...Tooltip.Default,
   content: '',
-  offset: [0, 8],
+  offset: [0, 15], // Boosted mod: instead of `offset: [0, 8],`
   placement: 'right',
   template: '<div class="popover" role="tooltip">' +
               '<div class="popover-arrow"></div>' +

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
@@ -62,7 +62,7 @@ const Default = {
   delay: 0,
   fallbackPlacements: ['top', 'right', 'bottom', 'left'],
   html: false,
-  offset: [0, 0],
+  offset: [0, 5], // Boosted mod: instead of `offset: [0, 0],`
   placement: 'top',
   popperConfig: null,
   sanitize: true,

diff --git a/scss/_popover.scss b/scss/_popover.scss
@@ -3,16 +3,19 @@
   --#{$prefix}popover-zindex: #{$zindex-popover};
   --#{$prefix}popover-max-width: #{$popover-max-width};
   @include rfs($popover-font-size, --#{$prefix}popover-font-size);
+  --#{$prefix}popover-line-height: #{$popover-line-height}; // Boosted mod
   --#{$prefix}popover-font-weight: #{$popover-font-weight}; // Boosted mod: extra CSS variable
   --#{$prefix}popover-bg: #{$popover-bg};
   --#{$prefix}popover-border-width: #{$popover-border-width};
   --#{$prefix}popover-border-color: #{$popover-border-color};
   --#{$prefix}popover-border-radius: #{$popover-border-radius};
   --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
   --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
-  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
-  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
+  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x}; // Boosted mod: deprecated in v5.3.0
+  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y}; // Boosted mod: deprecated in v5.3.0
+  --#{$prefix}popover-header-padding-bottom: #{$popover-header-padding-bottom}; // Boosted mod
   @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
+  --#{$prefix}popover-header-line-height: #{$popover-header-line-height}; // Boosted mod
   --#{$prefix}popover-header-color: #{$popover-header-color};
   --#{$prefix}popover-header-bg: #{$popover-header-bg};
   --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
@@ -26,11 +29,12 @@
   z-index: var(--#{$prefix}popover-zindex);
   display: block;
   max-width: var(--#{$prefix}popover-max-width);
+  padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x); // Boosted mod
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
   @include font-size(var(--#{$prefix}popover-font-size));
-  font-weight: var(--#{$prefix}popover-font-weight); // Boosted mod
+  line-height: var(--#{$prefix}popover-line-height); // Boosted mod
   // Allow breaking very long words so they don't overflow the popover's bounds
   word-wrap: break-word;
   background-color: var(--#{$prefix}popover-bg);
@@ -58,7 +62,7 @@
 
 .bs-popover-top {
   > .popover-arrow {
-    bottom: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+    bottom: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); /* stylelint-disable-line function-disallowed-list */
 
     &::before,
     &::after {
@@ -80,7 +84,7 @@
 /* rtl:begin:ignore */
 .bs-popover-end {
   > .popover-arrow {
-    left: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+    left: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); /* stylelint-disable-line function-disallowed-list */
     width: var(--#{$prefix}popover-arrow-height);
     height: var(--#{$prefix}popover-arrow-width);
 
@@ -105,7 +109,7 @@
 
 .bs-popover-bottom {
   > .popover-arrow {
-    top: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+    top: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); /* stylelint-disable-line function-disallowed-list */
 
     &::before,
     &::after {
@@ -139,7 +143,7 @@
 /* rtl:begin:ignore */
 .bs-popover-start {
   > .popover-arrow {
-    right: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+    right: calc((-1 * var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); /* stylelint-disable-line function-disallowed-list */
     width: var(--#{$prefix}popover-arrow-height);
     height: var(--#{$prefix}popover-arrow-width);
 
@@ -179,23 +183,31 @@
 
 // Offset the popover to account for the popover arrow
 .popover-header {
-  padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
+  // Boosted mod: no `padding`
   margin-bottom: 0; // Reset the default from Reboot
+  font-weight: var(--#{$prefix}popover-font-weight); // Boosted mod
+  line-height: var(--#{$prefix}popover-header-line-height); // Boosted mod
   @include font-size(var(--#{$prefix}popover-header-font-size));
   color: var(--#{$prefix}popover-header-color);
 
   /* rtl:remove */
   letter-spacing: unset; // Boosted mod
   background-color: var(--#{$prefix}popover-header-bg);
-  border-bottom: var(--#{$prefix}popover-border-width) solid shade-color($popover-header-bg, 10%); // Boosted mod
+  // Boosted mod: no `border-bottom`
   @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
 
   &:empty {
     display: none;
   }
+
+  // Boosted mod: popover body special padding when following a popover header
+  + .popover-body {
+    padding-top: var(--#{$prefix}popover-header-padding-bottom);
+  }
+  // End mod
 }
 
 .popover-body {
-  padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
+  // Boosted mod: no `padding`
   color: var(--#{$prefix}popover-body-color);
 }
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
@@ -8,12 +8,16 @@
   --#{$prefix}tooltip-margin: #{$tooltip-margin};
   @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
   --#{$prefix}tooltip-font-weight: #{$tooltip-font-weight}; // Boosted mod: extra CSS variable
+  --#{$prefix}tooltip-line-height: #{$tooltip-line-height}; // Boosted mod
   --#{$prefix}tooltip-color: #{$tooltip-color};
   --#{$prefix}tooltip-bg: #{$tooltip-bg};
+  --#{$prefix}tooltip-border-width: #{$tooltip-border-width}; // Boosted mod
+  --#{$prefix}tooltip-border-color: #{$tooltip-border-color}; // Boosted mod
   --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
   --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
   --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
   --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+  --#{$prefix}tooltip-arrow-border: var(--#{$prefix}tooltip-border-color); // Boosted mod
   // scss-docs-end tooltip-css-vars
 
   z-index: var(--#{$prefix}tooltip-zindex);
@@ -26,6 +30,7 @@
   @include reset-text();
   @include font-size(var(--#{$prefix}tooltip-font-size));
   font-weight: var(--#{$prefix}tooltip-font-weight); // Boosted mod
+  line-height: var(--#{$prefix}--#{$prefix}tooltip-line-height); // Boosted mod
   // Allow breaking very long words so they don't overflow the tooltip's bounds
   word-wrap: break-word;
   opacity: 0;
@@ -37,21 +42,34 @@
     width: var(--#{$prefix}tooltip-arrow-width);
     height: var(--#{$prefix}tooltip-arrow-height);
 
-    &::before {
+    &::before,
+    &::after { // Boosted mod
       position: absolute;
+      display: block; // Boosted mod
       content: "";
       border-color: transparent;
       border-style: solid;
+      border-width: 0; // Boosted mod
     }
   }
 }
 
+// Boosted mod: needed to generate a border with a different color
 .bs-tooltip-top .tooltip-arrow {
   bottom: 0;
 
-  &::before {
-    top: -1px;
+  &::before,
+  &::after {
     border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+  }
+
+  &::before {
+    bottom: 0;
+    border-top-color: var(--#{$prefix}--#{$prefix}tooltip-arrow-border);
+  }
+
+  &::after {
+    bottom: var(--#{$prefix}tooltip-border-width);
     border-top-color: var(--#{$prefix}tooltip-bg);
   }
 }
@@ -62,9 +80,18 @@
   width: var(--#{$prefix}tooltip-arrow-height);
   height: var(--#{$prefix}tooltip-arrow-width);
 
-  &::before {
-    right: -1px;
+  &::before,
+  &::after {
     border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+  }
+
+  &::before {
+    left: 0;
+    border-right-color: var(--#{$prefix}tooltip-arrow-border);
+  }
+
+  &::after {
+    left: var(--#{$prefix}tooltip-border-width);
     border-right-color: var(--#{$prefix}tooltip-bg);
   }
 }
@@ -74,9 +101,18 @@
 .bs-tooltip-bottom .tooltip-arrow {
   top: 0;
 
-  &::before {
-    bottom: -1px;
+  &::before,
+  &::after {
     border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+  }
+
+  &::before {
+    top: 0;
+    border-bottom-color: var(--#{$prefix}tooltip-arrow-border);
+  }
+
+  &::after {
+    top: var(--#{$prefix}tooltip-border-width);
     border-bottom-color: var(--#{$prefix}tooltip-bg);
   }
 }
@@ -87,14 +123,24 @@
   width: var(--#{$prefix}tooltip-arrow-height);
   height: var(--#{$prefix}tooltip-arrow-width);
 
-  &::before {
-    left: -1px;
+  &::before,
+  &::after {
     border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+  }
+
+  &::before {
+    right: 0;
+    border-left-color: var(--#{$prefix}tooltip-arrow-border);
+  }
+
+  &::after {
+    right: var(--#{$prefix}tooltip-border-width);
     border-left-color: var(--#{$prefix}tooltip-bg);
   }
 }
 
 /* rtl:end:ignore */
+// End mod
 
 .bs-tooltip-auto {
   &[data-popper-placement^="top"] {
@@ -118,5 +164,6 @@
   color: var(--#{$prefix}tooltip-color);
   // Boosted mod: no `text-align: center`
   background-color: var(--#{$prefix}tooltip-bg);
+  border: var(--#{$prefix}tooltip-border-width) solid var(--#{$prefix}tooltip-border-color); // Boosted mod
   @include border-radius(var(--#{$prefix}tooltip-border-radius));
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1738,9 +1738,12 @@ $accordion-dark-button-active-color:      $brand-orange !default; // Boosted mod
 // scss-docs-start tooltip-variables
 $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-font-weight:               $font-weight-bold !default; // Boosted mod
+$tooltip-line-height:               $line-height-sm !default; // Boosted mod
 $tooltip-max-width:                 $spacer * 10 !default;
-$tooltip-color:                     $black !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
-$tooltip-bg:                        $gray-400 !default; // Boosted mod: instead of `var(--#{$prefix}emphasis-color)`
+$tooltip-color:                     var(--#{$prefix}body-color) !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
+$tooltip-bg:                        var(--#{$prefix}body-bg) !default; // Boosted mod: instead of `var(--#{$prefix}emphasis-color)`
+$tooltip-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; /* stylelint-disable-line function-disallowed-list */ // Boosted mod
+$tooltip-border-color:              var(--#{$prefix}emphasis-color) !default; // Boosted mod
 $tooltip-border-radius:             var(--#{$prefix}border-radius) !default;
 $tooltip-opacity:                   1 !default;
 $tooltip-padding-y:                 $spacer * .5 !default;
@@ -1760,32 +1763,37 @@ $tooltip-arrow-color:               null !default; // Deprecated in Boosted 5.2.
 // Popovers
 
 // scss-docs-start popover-variables
-$popover-font-size:                 $font-size-sm !default;
+$popover-font-size:                 $font-size-base !default; // Boosted mod: instead of `$font-size-sm`
+$popover-line-height:               1.5 !default; // Boosted mod
 $popover-font-weight:               $font-weight-bold !default; // Boosted mod
-$popover-bg:                        $gray-400 !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
-$popover-max-width:                 17.25rem !default;
+$popover-bg:                        var(--#{$prefix}body-bg) !default;
+$popover-max-width:                 $spacer * 19 !default; // Boosted mod: instead of `276px`
 $popover-border-width:              var(--#{$prefix}border-width) !default;
-$popover-border-color:              $popover-bg !default; // Boosted mod
+$popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
 $popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
 $popover-inner-border-radius:       calc($popover-border-radius - $popover-border-width) !default; // stylelint-disable-line function-disallowed-list
-$popover-box-shadow:                null !default;
+$popover-box-shadow:                $box-shadow !default;
 
-$popover-header-font-size:          $font-size-base !default;
+$popover-header-font-size:          $font-size-lg !default; // Boosted mod: instead of `$font-size-base`
+$popover-header-line-height:        1.11 !default; // Boosted mod
 $popover-header-bg:                 $popover-bg !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
 $popover-header-color:              $headings-color !default;
-$popover-header-padding-y:          $spacer * .5 !default;
-$popover-header-padding-x:          $spacer * .5 !default;
+$popover-header-padding-bottom:     map-get($spacers, 2) !default; // Boosted mod
+// fusv-disable
+$popover-header-padding-y:          $spacer * .5 !default; // Boosted mod: deprecated in v5.3.0 replaced by `$popover-header-padding-top` and `$popover-header-padding-bottom`
+// fusv-enable
+$popover-header-padding-x:          $spacer * .9 !default; // Boosted mod: instead of `$spacer`
 
 $popover-body-color:                var(--#{$prefix}body-color) !default;
-$popover-body-padding-y:            $popover-header-padding-y !default;
+$popover-body-padding-y:            $spacer !default;
 $popover-body-padding-x:            $popover-header-padding-x !default;
 
-$popover-arrow-width:               $spacer * .5 !default;
+$popover-arrow-width:               $spacer !default; // Boosted mod: instead of `1rem`
 $popover-arrow-height:              $popover-arrow-width * .5 !default;
 // scss-docs-end popover-variables
 
 // fusv-disable
-// Deprecated in Boosted 5.2.0 for CSS variables
+// Deprecated in Bootstrap 5.2.0 for CSS variables
 $popover-arrow-color:               $popover-bg !default;
 $popover-arrow-outer-color:         $popover-border-color !default; // Boosted mod
 // fusv-enable