fix(popover): custom popover customizable paddings (#2031)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Jun 27, 2023 · fb6b94d · fb6b94d
1 parent 9cda576
commit fb6b94d
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 23 deletions.
diff --git a/scss/_popover.scss b/scss/_popover.scss
@@ -4,22 +4,25 @@
   --#{$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-font-weight: #{$popover-font-weight}; // Boosted mod
   --#{$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}; // 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-x: #{$popover-header-padding-x};
+  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
+  --#{$prefix}popover-header-padding-top: #{$popover-header-padding-top}; // Boosted mod
   --#{$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};
   --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
+  --#{$prefix}popover-body-padding-top: #{$popover-body-padding-top}; // Boosted mod
+  --#{$prefix}popover-body-padding-bottom: #{$popover-body-padding-bottom}; // Boosted mod
   --#{$prefix}popover-body-color: #{$popover-body-color};
   --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
   --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
@@ -29,7 +32,6 @@
   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();
@@ -187,7 +189,7 @@
 
 // Offset the popover to account for the popover arrow
 .popover-header {
-  // Boosted mod: no `padding`
+  padding: var(--#{$prefix}popover-header-padding-y, var(--#{$prefix}popover-header-padding-top)) var(--#{$prefix}popover-header-padding-x) var(--#{$prefix}popover-header-padding-y, var(--#{$prefix}popover-header-padding-bottom)); // Boosted mod: instead of `var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x)`
   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
@@ -203,15 +205,15 @@
   &: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 {
-  // Boosted mod: no `padding`
+  padding: var(--#{$prefix}popover-body-padding-y, var(--#{$prefix}popover-body-padding-top)) var(--#{$prefix}popover-body-padding-x) var(--#{$prefix}popover-body-padding-y, var(--#{$prefix}popover-body-padding-bottom)); // Boosted mod: instead of padding: `var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);`
   color: var(--#{$prefix}popover-body-color);
 }
+
+// Boosted mod
+:not(.popover-header) + .popover-body {
+  --#{$prefix}popover-body-padding-y: #{$popover-padding-y}; // Reset value to the defaut y padding popover one when there's only a body
+}
+// End mod
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1779,6 +1779,7 @@ $popover-line-height:               1.5 !default; // Boosted mod
 $popover-font-weight:               $font-weight-bold !default; // Boosted mod
 $popover-bg:                        var(--#{$prefix}body-bg) !default;
 $popover-max-width:                 $spacer * 19 !default; // Boosted mod: instead of `276px`
+$popover-padding-y:                 $spacer !default; // Boosted mod
 $popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
 $popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
@@ -1789,24 +1790,25 @@ $popover-header-font-size:          $font-size-lg !default; // Boosted mod: inst
 $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-top:        $popover-padding-y !default; // Boosted mod
 $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-y:          initial !default; // Boosted mod: instead of `.5rem`
 $popover-header-padding-x:          $spacer * .9 !default; // Boosted mod: instead of `$spacer`
 
 $popover-body-color:                var(--#{$prefix}body-color) !default;
-$popover-body-padding-y:            $spacer !default;
-$popover-body-padding-x:            $popover-header-padding-x !default;
+$popover-body-padding-top:          0 !default; // Boosted mod
+$popover-body-padding-bottom:       $popover-padding-y !default; // Boosted mod
+$popover-body-padding-y:            initial !default; // Boosted mod: instead of `$spacer`
+$popover-body-padding-x:            $popover-header-padding-x !default; // Boosted mod: instead of `$spacer`
 
 $popover-arrow-width:               $spacer !default; // Boosted mod: instead of `1rem`
-$popover-arrow-height:              $popover-arrow-width * .5 !default;
+$popover-arrow-height:              $popover-arrow-width * .5 !default; // Boosted mod: instead of `.5rem`
 // scss-docs-end popover-variables
 
 // fusv-disable
 // 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
+$popover-arrow-outer-color:         $popover-border-color !default; // Boosted mod: instead of `var(--#{$prefix}border-color-translucent)`
 // fusv-enable
 
 // Toasts

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -228,8 +228,9 @@
 .custom-popover {
   --bs-popover-max-width: 12.5rem;
   --bs-popover-border-color: var(--bs-primary);
+  --bs-popover-header-padding-y: .5rem; // Boosted mod
   --bs-popover-header-bg: var(--bs-primary);
-  --bs-popover-header-color: var(--bs-black); // Boosted mod: text-dark on primary
+  --bs-popover-header-color: var(--bs-black); // Boosted mod: instead of `var(--bs-white)`
   --bs-popover-body-padding-x: 1rem;
   --bs-popover-body-padding-y: .5rem;
 }

diff --git a/site/content/docs/5.3/components/popovers.md b/site/content/docs/5.3/components/popovers.md
@@ -154,6 +154,8 @@ As part of Boosted's evolving CSS variables approach, popovers now use local CSS
 
 {{< scss-docs name="popover-css-vars" file="scss/_popover.scss" >}}
 
+Note that `--bs-popover-body-padding-y` and `--bs-popover-header-padding-y` have priority over `--bs-popover-body-padding-bottom` and `--bs-popover-body-padding-top`, and `--bs-popover-header-padding-bottom` and `--bs-popover-header-padding-top`, respectively.
+
 ### Sass variables
 
 {{< scss-docs name="popover-variables" file="scss/_variables.scss" >}}

diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
@@ -271,8 +271,6 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
     <ul>
       <li><code>--bs-border-radius-2xl</code></li>
       <li><code>--bs-offcanvas-transition-duration</code></li>
-      <li><code>--bs-popover-header-padding-x</code></li>
-      <li><code>--bs-popover-header-padding-y</code></li>
     </ul>
   </details>
 
@@ -289,7 +287,6 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
       <li><code>$link-hover-color-dark</code></li>
       <li><code>$mark-bg-dark</code></li>
       <li><code>$mark-color-dark</code></li>
-      <li><code>$popover-header-padding-y</code></li>
       <li><code>$pre-color-dark</code></li>
       <li><code>$table-caption-color-dark</code></li>
     </ul>
@@ -359,8 +356,11 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
       <li><code>--bs-nav-underline-link-padding-x</code></li>
       <li><code>--bs-modal-footer-margin-top</code></li>
       <li><code>--bs-offcanvas-transition</code></li>
+      <li><code>--bs-popover-body-padding-bottom</code></li>
+      <li><code>--bs-popover-body-padding-top</code></li>
       <li><code>--bs-popover-header-line-height</code></li>
       <li><code>--bs-popover-header-padding-bottom</code></li>
+      <li><code>--bs-popover-header-padding-top</code></li>
       <li><code>--bs-popover-line-height</code></li>
       <li><code>--bs-primary-bg-subtle</code></li>
       <li><code>--bs-primary-border-subtle</code></li>
@@ -493,9 +493,13 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
       <li><code>$modal-footer-margin-top</code></li>
       <li><code>$modal-footer-margin-top-sm</code></li>
       <li><code>$modal-scrollable-footer-margin-top</code></li>
+      <li><code>$popover-body-padding-bottom</code></li>
+      <li><code>$popover-body-padding-top</code></li>
       <li><code>$popover-header-line-height</code></li>
       <li><code>$popover-header-padding-bottom</code></li>
+      <li><code>$popover-header-padding-top</code></li>
       <li><code>$popover-line-height</code></li>
+      <li><code>$popover-padding-y</code></li>
       <li><code>$pre-color-inverted</code></li>
       <li><code>$primary-bg-subtle-dark</code></li>
       <li><code>$primary-bg-subtle</code></li>