Sweeping fixes to va-icon and buttons that use icons (#1140)

* Sweeping fixes to va-icon and buttons that use icons * Version bumps * Adding more space between icons and text in buttons with both * Updated va-button.e2e.ts test * Adjustment to core version
department-of-veterans-affairs · May 1, 2024 · 54c94bb · 54c94bb
1 parent dcf7cd0
commit 54c94bb
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 28 deletions.
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/web-components",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

diff --git a/packages/web-components/src/components/va-button-icon/va-button-icon.scss b/packages/web-components/src/components/va-button-icon/va-button-icon.scss
@@ -32,8 +32,5 @@
 
 // Fix to off-centered content when icon present
 :host button.usa-button va-icon {
-    display: inline-block;
-    height: 0;
-    vertical-align: top;
-    margin-right: 4px;
+    margin-right: 8px;
 }
diff --git a/packages/web-components/src/components/va-button/test/va-button.e2e.ts b/packages/web-components/src/components/va-button/test/va-button.e2e.ts
@@ -244,7 +244,7 @@ describe('va-button', () => {
     <va-button back="" class="hydrated" uswds="">
       <mock:shadow-root>
         <button class="usa-button usa-button--outline" type="button" part="button">
-          <va-icon class="hydrated va-button--icon"></va-icon>
+          <va-icon class="hydrated margin-right-8px va-button--icon"></va-icon>
           Back
         </button>
       </mock:shadow-root>
@@ -261,7 +261,7 @@ describe('va-button', () => {
       <mock:shadow-root>
         <button class="usa-button" type="button" part="button">
           Continue
-          <va-icon class="hydrated va-button--icon"></va-icon>
+          <va-icon class="hydrated margin-left-8px va-button--icon"></va-icon>
         </button>
       </mock:shadow-root>
     </va-button>

diff --git a/packages/web-components/src/components/va-button/va-button.scss b/packages/web-components/src/components/va-button/va-button.scss
@@ -17,22 +17,19 @@
 }
 
 // Fix to off-centered content in V3 when icon present
-:host([back]:not([back='false'])), :host([continue]:not([continue='false'])) {
-  button.usa-button {
-    padding-top: 8px;
-  }
-}
 .va-button--icon {
-  display: inline-block;
-  height: 0;
-  vertical-align: text-top;
+  position: relative;
+  top: 0.1em;
+  &.margin-right-8px {
+    margin-right: 8px;
+  }
+  &.margin-left-8px {
+    margin-left: 8px;
+  }
 }
 :host([big]:not([big="false"]):is([back], [continue])) {
-  button.usa-button {
-    padding-top: 12px;
-  }
-  .va-button--icon {
-    vertical-align: sub;
+  .usa-button--big {
+    padding-top: 14px;
   }
 }
 

diff --git a/packages/web-components/src/components/va-button/va-button.tsx b/packages/web-components/src/components/va-button/va-button.tsx
@@ -180,25 +180,23 @@ export class VaButton {
           >
             {back && !_continue && (
               <va-icon
-                class="va-button--icon"
+                class="va-button--icon margin-right-8px"
                 icon="navigate_far_before"
-                size={3}
               ></va-icon>
             )}
             {buttonText}
             {_continue && !back && (
               <va-icon
-                class="va-button--icon"
+                class="va-button--icon margin-left-8px"
                 icon="navigate_far_next"
-                size={3}
               ></va-icon>
             )}
           </button>
           {messageAriaDescribedby && (
-              <span id="button-description" class="usa-sr-only">
-                {messageAriaDescribedby}
-              </span>
-            )}
+            <span id="button-description" class="usa-sr-only">
+              {messageAriaDescribedby}
+            </span>
+          )}
         </Host>
       );
     } else {

diff --git a/packages/web-components/src/components/va-icon/va-icon.scss b/packages/web-components/src/components/va-icon/va-icon.scss
@@ -2,3 +2,9 @@
 @use 'usa-icon/src/styles/_usa-icon.scss';
 
 @import '../../global/formation_overrides';
+
+:host {
+  display: inline-block;
+  line-height: 0;
+  vertical-align: bottom;
+}