Merge pull request #127 from ASU/uds-345

fix(bootstrap4-theme): Centered exit icon in close button

Author: msingh45

packages/bootstrap4-theme/src/scss/design-tokens/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 29 Jan 2021 16:27:51 GMT
+// Generated on Tue, 02 Mar 2021 19:26:48 GMT
 
 $uds-asset-font-icon-name: "FontAwesome";
 $uds-asset-font-icon-ttf: "assets/fontawesome/webfonts/fa-regular-400.ttf";
@@ -177,6 +177,8 @@ $uds-component-button-badge-height: 1.375rem; // Magic number: 22px not a multip
 $uds-component-button-close-height: 2rem;
 $uds-component-button-close-opacity: 50%;
 $uds-component-button-close-width: 2rem;
+$uds-component-button-close-padding-top: 0;
+$uds-component-button-close-padding-bottom: 0.125rem;
 $uds-component-button-close-disabled-opacity: 100%;
 $uds-component-button-close-white-background-color: #ffffff;
 $uds-component-button-close-gray-background-color: #bfbfbf;

packages/bootstrap4-theme/src/scss/extends/_alerts.scss

@@ -18,6 +18,13 @@
   }
   .alert-close {
     flex: 1;
+
+    // Edits close button content (i.e. "X" inside bubble)
+    .close
+    {
+      padding-top: $btn-close-padding-top;
+      padding-bottom: $btn-close-padding-bottom;
+    }
   }
 }
 

packages/bootstrap4-theme/src/scss/extends/_banners.scss

@@ -36,6 +36,13 @@
     flex: 2;
     margin-top: -$uds-size-spacing-2;
     margin-right: -$uds-size-spacing-2;
+
+    // Edits close button content (i.e. "X" inside bubble)
+    .close
+    {
+      padding-top: $btn-close-padding-top;
+      padding-bottom: $btn-close-padding-bottom;
+    }
   }
 }
 

packages/bootstrap4-theme/src/scss/variables/_buttons.scss

@@ -9,6 +9,8 @@ $btn-padding-x:$uds-component-button-padding-x;
 $btn-disabled-opacity:$uds-component-button-disabled-opacity;
 $btn-line-height:$uds-component-button-line-height;
 $btn-transition: $uds-component-button-transition;
+$btn-close-padding-top: $uds-component-button-close-padding-top;
+$btn-close-padding-bottom: $uds-component-button-close-padding-bottom;
 
 // Bootstrap variable overrides for badges
 $badge-border-radius: $uds-component-button-border-radius;

packages/design-tokens/components/button.json

@@ -98,6 +98,12 @@
         "width": {
           "value": "2"
         },
+        "padding-top": {
+          "value": "0"
+        },
+        "padding-bottom": {
+          "value": "0.125rem"
+        },
         "disabled": {
           "opacity": {
             "value": "100%"