fix(b-form-datepicker, b-form-timepicker): fix menu padding in button…

… only mode (fixes #5251) (#5252)
bootstrap-vue · Apr 26, 2020 · d57a643 · d57a643
1 parent 05446f4
commit d57a643
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/src/_custom-controls.scss b/src/_custom-controls.scss
@@ -133,3 +133,10 @@
     }
   }
 }
+
+// Button only mode menu padding overrides
+.b-form-btn-label-control.btn-group {
+  > .dropdown-menu {
+    padding: 0.5rem;
+  }
+}
diff --git a/src/components/form-datepicker/form-datepicker.spec.js b/src/components/form-datepicker/form-datepicker.spec.js
@@ -84,7 +84,7 @@ describe('form-date', () => {
     await waitRAF()
 
     expect(wrapper.classes()).toContain('b-form-datepicker')
-    expect(wrapper.classes()).not.toContain('b-form-btn-label-control')
+    expect(wrapper.classes()).toContain('b-form-btn-label-control')
     expect(wrapper.classes()).not.toContain('form-control')
     expect(wrapper.classes()).toContain('dropdown')
     expect(wrapper.classes()).not.toContain('show')

diff --git a/src/components/form-timepicker/form-timepicker.spec.js b/src/components/form-timepicker/form-timepicker.spec.js
@@ -83,7 +83,7 @@ describe('form-timepicker', () => {
     await waitRAF()
 
     expect(wrapper.classes()).toContain('b-form-timepicker')
-    expect(wrapper.classes()).not.toContain('b-form-btn-label-control')
+    expect(wrapper.classes()).toContain('b-form-btn-label-control')
     expect(wrapper.classes()).not.toContain('form-control')
     expect(wrapper.classes()).toContain('dropdown')
     expect(wrapper.classes()).not.toContain('show')

diff --git a/src/utils/bv-form-btn-label-control.js b/src/utils/bv-form-btn-label-control.js
@@ -284,12 +284,11 @@ export const BVFormBtnLabelControl = /*#__PURE__*/ Vue.extend({
     return h(
       'div',
       {
-        staticClass: 'dropdown',
+        staticClass: 'b-form-btn-label-control dropdown',
         class: [
           this.directionClass,
           {
             'btn-group': buttonOnly,
-            'b-form-btn-label-control': !buttonOnly,
             'form-control': !buttonOnly,
             [`form-control-${size}`]: !!size && !buttonOnly,
             'd-flex': !buttonOnly,