fix(button): Make button line-height a hook assignment in touch CSS (#4598)

Dottenpixel · web-flow · commit 4f35fcb9de31 · 2021-03-18T14:50:18.000-07:00
* make button line height a hook assignment in touch CSS

* add release note

* convert mixin to func
diff --git a/RELEASENOTES.md b/RELEASENOTES.md
@@ -35,6 +35,8 @@
 ### [Buttons](https://www.lightningdesignsystem.com/components/buttons)
 #### Added
 - Added Kinetic styles and demo functionality for Button Base, Brand, Neutral, Inverse, Outline Brand, Destructive and Success
+#### Changed
+- Changed `line-height` assignment in touch styles to use Styling Hook assignment of `--sds-c-button-line-height`.
 
 ### [Drop Zone](https://www.lightningdesignsystem.com/components/drop-zone)
 #### Changed
diff --git a/ui/components/buttons/RELEASENOTES.md b/ui/components/buttons/RELEASENOTES.md
@@ -10,6 +10,10 @@
 
 - Added Kinetic styles and demo functionality for Button Base, Brand, Neutral, Inverse, Outline Brand, Destructive and Success
 
+### Changed
+
+- Changed `line-height` assignment in touch styles to use Styling Hook assignment of `--sds-c-button-line-height`.
+
 ## 2.14.0
 
 ### Added
diff --git a/ui/components/buttons/base/_touch.scss b/ui/components/buttons/base/_touch.scss
@@ -1,4 +1,4 @@
 .slds-button {
-  @include border-box-line-height($height-tappable);
+  --sds-c-button-line-height: #{border-box-line-height($height-tappable)};
   font-weight: $font-weight-bold;
 }
diff --git a/ui/components/checkbox-button-group/base/_touch.scss b/ui/components/checkbox-button-group/base/_touch.scss
@@ -32,5 +32,5 @@
 
 .slds-checkbox_button,
 .slds-checkbox--button {
-  @include border-box-line-height($height-tappable);
+  line-height: border-box-line-height($height-tappable);
 }
diff --git a/ui/components/combobox/base/_touch.scss b/ui/components/combobox/base/_touch.scss
@@ -15,7 +15,7 @@
 
   .slds-listbox__option_plain,
   .slds-listbox__option--plain {
-    @include border-box-line-height($height-tappable, 0);
+    line-height: border-box-line-height($height-tappable, 0);
     padding-top: 0;
     padding-bottom: 0;
     align-items: center;
@@ -54,7 +54,7 @@
 .slds-has-object-switcher {
 
   .slds-combobox__input {
-    @include border-box-line-height($height-tappable, 0, $spacing-xxx-small * 2);
+    line-height: border-box-line-height($height-tappable, 0, $spacing-xxx-small * 2);
     min-height: $height-tappable;
   }
 }
diff --git a/ui/components/input/base/_touch.scss b/ui/components/input/base/_touch.scss
@@ -1,5 +1,5 @@
 .slds-input {
-  @include border-box-line-height($height-tappable);
+  line-height: border-box-line-height($height-tappable);
 
   &[readonly] {
     font-size: $font-size-5;
diff --git a/ui/components/lookups-mobile/combobox/_index.scss b/ui/components/lookups-mobile/combobox/_index.scss
@@ -63,7 +63,7 @@
   // Requirement of project that these properties are statically these
   // mobile/touch values and not scoped to the mobile/touch feature detection
   .slds-input {
-    @include border-box-line-height($height-tappable);
+    line-height: border-box-line-height($height-tappable);
     font-size: $font-size-5;
   }
 }
diff --git a/ui/components/lookups-mobile/listbox/_index.scss b/ui/components/lookups-mobile/listbox/_index.scss
@@ -47,7 +47,7 @@
 }
 
 .slds-mobile-lookup__listbox_trigger {
-  @include border-box-line-height($height-tappable);
+  line-height: border-box-line-height($height-tappable);
   justify-content: unset;
   font-size: $font-size-5;
   font-weight: $font-weight-bold;
diff --git a/ui/components/menus/dropdown/_touch.scss b/ui/components/menus/dropdown/_touch.scss
@@ -5,7 +5,7 @@
   &__item {
 
     > a {
-      @include border-box-line-height($height-tappable, 0);
+      line-height: border-box-line-height($height-tappable, 0);
       padding: 0 $spacing-small;
     }
   }
diff --git a/ui/components/pills/base/_touch.scss b/ui/components/pills/base/_touch.scss
@@ -1,5 +1,5 @@
 .slds-pill {
-  @include border-box-line-height($height-tappable-small);
+  line-height: border-box-line-height($height-tappable-small);
   padding: 0 $spacing-x-small;
 
   + .slds-pill {
diff --git a/ui/dependencies/_functions.scss b/ui/dependencies/_functions.scss
@@ -61,3 +61,24 @@
 
   @return $number;
 }
+
+// Calculate value line-height as if it has box-sizing: border-box behavior
+// Useful for blueprints that rely on line-height for their overall height
+@function border-box-line-height($value, $border: $border-width-thin * 2, $padding: 0) {
+  @if unitless($border) {
+    $border: 0px; // stylelint-disable length-zero-no-unit
+  }
+  $box-model: 0;
+
+  @if comparable($border, $padding) {
+    $box-model: rem($border + $padding);
+  } @else {
+    $box-model: (rem($border) + $padding);
+  }
+
+  @if comparable($value, $box-model) {
+    @return ($value - $box-model);
+  } @else {
+    @return (rem($value) - $box-model);
+  }
+}
diff --git a/ui/dependencies/_layout.scss b/ui/dependencies/_layout.scss
@@ -95,24 +95,3 @@
   top: 50%;
   transform: translateY(-50%);
 }
-
-// Treats line-height as if it has box-sizing: border-box behavior
-// Useful for blueprints that rely on line-height for their overall height
-@mixin border-box-line-height($value, $border: $border-width-thin * 2, $padding: 0) {
-  @if unitless($border) {
-    $border: 0px; // stylelint-disable length-zero-no-unit
-  }
-  $box-model: 0;
-
-  @if comparable($border, $padding) {
-    $box-model: rem($border + $padding);
-  } @else {
-    $box-model: (rem($border) + $padding);
-  }
-
-  @if comparable($value, $box-model) {
-    line-height: ($value - $box-model);
-  } @else {
-    line-height: (rem($value) - $box-model);
-  }
-}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`.slds-button {`
`2`		`- @include border-box-line-height($height-tappable);`
	`2`	`+ --sds-c-button-line-height: #{border-box-line-height($height-tappable)};`
`3`	`3`	`font-weight: $font-weight-bold;`
`4`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -32,5 +32,5 @@`
`32`	`32`
`33`	`33`	`.slds-checkbox_button,`
`34`	`34`	`.slds-checkbox--button {`
`35`		`- @include border-box-line-height($height-tappable);`
	`35`	`+ line-height: border-box-line-height($height-tappable);`
`36`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@`
`63`	`63`	`// Requirement of project that these properties are statically these`
`64`	`64`	`// mobile/touch values and not scoped to the mobile/touch feature detection`
`65`	`65`	`.slds-input {`
`66`		`- @include border-box-line-height($height-tappable);`
	`66`	`+ line-height: border-box-line-height($height-tappable);`
`67`	`67`	`font-size: $font-size-5;`
`68`	`68`	`}`
`69`	`69`	`}`
Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`.slds-mobile-lookup__listbox_trigger {`
`50`		`- @include border-box-line-height($height-tappable);`
	`50`	`+ line-height: border-box-line-height($height-tappable);`
`51`	`51`	`justify-content: unset;`
`52`	`52`	`font-size: $font-size-5;`
`53`	`53`	`font-weight: $font-weight-bold;`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`&__item {`
`6`	`6`
`7`	`7`	`> a {`
`8`		`- @include border-box-line-height($height-tappable, 0);`
	`8`	`+ line-height: border-box-line-height($height-tappable, 0);`
`9`	`9`	`padding: 0 $spacing-small;`
`10`	`10`	`}`
`11`	`11`	`}`