[#2190] Fix VaButtonDropdown dropdown appearance and alignment for …

…`split` and `left-icon` (#2201) * fix: add prevent-overflow * fix: set vertical-align to middle
epicmaxco · Aug 4, 2022 · 9aed667 · 9aed667
1 parent 88ffbc3
commit 9aed667
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 0 deletions.
diff --git a/packages/docs/src/page-configs/ui-elements/button-dropdown/examples/Colors.vue b/packages/docs/src/page-configs/ui-elements/button-dropdown/examples/Colors.vue
@@ -16,6 +16,7 @@
     Content
   </va-button-dropdown>
   <va-button-dropdown
+    class="mr-2 mb-2"
     color="#525252"
     label="#525252"
     split

diff --git a/packages/docs/src/page-configs/ui-elements/button-dropdown/examples/Disabled.vue b/packages/docs/src/page-configs/ui-elements/button-dropdown/examples/Disabled.vue
@@ -15,6 +15,7 @@
     Content
   </va-button-dropdown>
   <va-button-dropdown
+    class="mr-2 mb-2"
     split
     disable-dropdown
     label="disable-dropdown"

diff --git a/packages/docs/src/page-configs/ui-elements/button-dropdown/examples/Events.vue b/packages/docs/src/page-configs/ui-elements/button-dropdown/examples/Events.vue
@@ -7,6 +7,7 @@
     Content
   </va-button-dropdown>
   <va-button-dropdown
+    class="mr-2 mb-2"
     @main-button-click="mainButtonClick"
     @click="click"
     split

diff --git a/packages/docs/src/page-configs/ui-elements/button-dropdown/examples/Icons.vue b/packages/docs/src/page-configs/ui-elements/button-dropdown/examples/Icons.vue
@@ -21,6 +21,7 @@
     Content
   </va-button-dropdown>
   <va-button-dropdown
+    class="mr-2 mb-2"
     label="custom icon && icon-open"
     icon="info"
     opened-icon="check_circle"

diff --git a/packages/ui/src/components/va-button-dropdown/VaButtonDropdown.vue b/packages/ui/src/components/va-button-dropdown/VaButtonDropdown.vue
@@ -50,6 +50,8 @@
         :placement="$props.placement"
         :offset="$props.offset"
         :stateful="$props.stateful"
+        :close-on-content-click="$props.closeOnContentClick"
+        prevent-overflow
         v-model="valueComputed"
       >
         <template #anchor>
@@ -208,6 +210,7 @@ export default defineComponent({
 .va-button-dropdown {
   display: inline-block;
   font-family: var(--va-font-family);
+  vertical-align: middle;
 
   .va-button {
     margin: var(--va-button-dropdown-button-margin);