fix(#2704): icon shift (#3903)

epicmaxco · Sep 27, 2023 · aa3752e · aa3752e
1 parent ae98e29
commit aa3752e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/packages/ui/src/components/va-button/VaButton.stories.ts b/packages/ui/src/components/va-button/VaButton.stories.ts
@@ -1,12 +1,24 @@
 import { defineComponent } from 'vue'
-import VaButton from './VaButton.demo.vue'
+import VaButton from './VaButton.vue'
+import VaButtonDemo from './VaButton.demo.vue'
 
 export default {
   title: 'VaButton',
   component: VaButton,
 }
 
-export const Default = defineComponent({
-  components: { VaButton },
+export const Default = () => defineComponent({
+  components: { VaButton: VaButtonDemo },
   template: '<VaButton/>',
 })
+
+// See: https://github.com/epicmaxco/vuestic-ui/issues/2704
+export const RightShift = () => ({
+  components: { VaButton },
+  template: `
+    <div>
+      <VaButton>Text</VaButton>
+      <VaButton icon="phone">Text2</VaButton>
+    </div>
+  `,
+})
diff --git a/packages/ui/src/components/va-button/VaButton.vue b/packages/ui/src/components/va-button/VaButton.vue
@@ -220,6 +220,7 @@ export default defineComponent({
   box-sizing: border-box;
   cursor: var(--va-button-cursor);
   z-index: 0;
+  vertical-align: top;
 
   &::after,
   &::before {
@@ -439,6 +440,10 @@ export default defineComponent({
       margin-left: 0;
       margin-right: 0;
     }
+
+    .va-button__content {
+      padding: 0;
+    }
   }
 
   @include keyboard-focus-outline;