Split CSS vars for padding values (#35921)

* Split CSS vars for padding values

Make these few components consistent with where we're heading with other components. Had to add some new Sass variables to handle the dropdown-header element, but not a huge deal. This ensures we can drop the combined variable in v6 when we're ready.

* Update scss/_dropdown.scss

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

* Deprecate dropdown-header-padding var

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>

4 files changed, 20 insertions, 11 deletions

diff --git a/scss/_alert.scss b/scss/_alert.scss
index c8275e8d29..316f3c5ad0 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -5,7 +5,8 @@
 .alert {
   // scss-docs-start alert-css-vars
   --#{$variable-prefix}alert-bg: transparent;
-  --#{$variable-prefix}alert-padding: #{$alert-padding-y $alert-padding-x};
+  --#{$variable-prefix}alert-padding-x: #{$alert-padding-x};
+  --#{$variable-prefix}alert-padding-y: #{$alert-padding-y};
   --#{$variable-prefix}alert-margin-bottom: #{$alert-margin-bottom};
   --#{$variable-prefix}alert-color: inherit;
   --#{$variable-prefix}alert-border-color: transparent;
@@ -14,7 +15,7 @@
   // scss-docs-end alert-css-vars
 
   position: relative;
-  padding: var(--#{$variable-prefix}alert-padding);
+  padding: var(--#{$variable-prefix}alert-padding-y) var(--#{$variable-prefix}alert-padding-x);
   margin-bottom: var(--#{$variable-prefix}alert-margin-bottom);
   color: var(--#{$variable-prefix}alert-color);
   background-color: var(--#{$variable-prefix}alert-bg);
diff --git a/scss/_badge.scss b/scss/_badge.scss
index c097535b1d..3e9fef14c7 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -7,7 +7,8 @@
 
 .badge {
   // scss-docs-start badge-css-vars
-  --#{$variable-prefix}badge-padding: #{$badge-padding-y $badge-padding-x};
+  --#{$variable-prefix}badge-padding-x: #{$badge-padding-x};
+  --#{$variable-prefix}badge-padding-y: #{$badge-padding-y};
   @include rfs($badge-font-size, --#{$variable-prefix}badge-font-size);
   --#{$variable-prefix}badge-font-weight: #{$badge-font-weight};
   --#{$variable-prefix}badge-color: #{$badge-color};
@@ -15,7 +16,7 @@
   // scss-docs-end badge-css-vars
 
   display: inline-block;
-  padding: var(--#{$variable-prefix}badge-padding);
+  padding: var(--#{$variable-prefix}badge-padding-y) var(--#{$variable-prefix}badge-padding-x);
   font-size: var(--#{$variable-prefix}badge-font-size);
   font-weight: var(--#{$variable-prefix}badge-font-weight);
   line-height: 1;
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 1695de90c6..6f8acc1aa4 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -19,7 +19,8 @@
 .dropdown-menu {
   // scss-docs-start dropdown-css-vars
   --#{$variable-prefix}dropdown-min-width: #{$dropdown-min-width};
-  --#{$variable-prefix}dropdown-padding: #{$dropdown-padding-y $dropdown-padding-x};
+  --#{$variable-prefix}dropdown-padding-x: #{$dropdown-padding-x};
+  --#{$variable-prefix}dropdown-padding-y: #{$dropdown-padding-y};
   --#{$variable-prefix}dropdown-spacer: #{$dropdown-spacer};
   @include rfs($dropdown-font-size, --#{$variable-prefix}dropdown-font-size);
   --#{$variable-prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before
@@ -37,16 +38,18 @@
   --#{$variable-prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
   --#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
   --#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
-  --#{$variable-prefix}dropdown-item-padding: #{$dropdown-item-padding-y $dropdown-item-padding-x};
+  --#{$variable-prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
+  --#{$variable-prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
   --#{$variable-prefix}dropdown-header-color: #{$dropdown-header-color};
-  --#{$variable-prefix}dropdown-header-padding: #{$dropdown-header-padding};
+  --#{$variable-prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
+  --#{$variable-prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
   // scss-docs-end dropdown-css-vars
 
   position: absolute;
   z-index: $zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   min-width: var(--#{$variable-prefix}dropdown-min-width);
-  padding: var(--#{$variable-prefix}dropdown-padding);
+  padding: var(--#{$variable-prefix}dropdown-padding-y) var(--#{$variable-prefix}dropdown-padding-x);
   margin: 0; // Override default margin of ul
   @include font-size(var(#{$variable-prefix}dropdown-font-size));
   color: var(--#{$variable-prefix}dropdown-color);
@@ -158,7 +161,7 @@
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s
-  padding: var(--#{$variable-prefix}dropdown-item-padding);
+  padding: var(--#{$variable-prefix}dropdown-item-padding-y) var(--#{$variable-prefix}dropdown-item-padding-x);
   clear: both;
   font-weight: $font-weight-normal;
   color: var(--#{$variable-prefix}dropdown-link-color);
@@ -211,7 +214,7 @@
 // Dropdown section headers
 .dropdown-header {
   display: block;
-  padding: var(--#{$variable-prefix}dropdown-header-padding);
+  padding: var(--#{$variable-prefix}dropdown-header-padding-y) var(--#{$variable-prefix}dropdown-header-padding-x);
   margin-bottom: 0; // for use with heading elements
   @include font-size($font-size-sm);
   color: var(--#{$variable-prefix}dropdown-header-color);
diff --git a/scss/_variables.scss b/scss/_variables.scss
index ce41aa945b..11b5cffacb 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1150,7 +1150,11 @@ $dropdown-item-padding-y:           $spacer * .25 !default;
 $dropdown-item-padding-x:           $spacer !default;
 
 $dropdown-header-color:             $gray-600 !default;
-$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
+$dropdown-header-padding-x:         $dropdown-item-padding-x !default;
+$dropdown-header-padding-y:         $dropdown-padding-y !default;
+// fusv-disable
+$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
+// fusv-enable
 // scss-docs-end dropdown-variables
 
 // scss-docs-start dropdown-dark-variables