feat(b-dropdown & b-nav-item-dropdown): pass optional scope to default slot & fixes keyboard nav with dropdown forms (bootstrap-vue#3242)

tmorehouse · web-flow · commit 3d1d7775dbf4 · 2019-05-05T22:33:19.000-03:00
diff --git a/src/components/dropdown/README.md b/src/components/dropdown/README.md
@@ -572,6 +572,16 @@ export default {
 Refer to the [Events](/docs/components/dropdown#component-reference) section of documentation for
 the full list of events.
 
+## Optionally scoped default slot
+
+<span class="badge badge-info small">NEW in 2.0.0-rc.20</span>
+
+The default slot is optionally scoped with the following scope available:
+
+| Property or Method | Description                                                                                                                      |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
+| `hide()`           | Can be used to close the dropdown menu. Accepts an optional boolean argument, which if `true` returns focus to the toggle button |
+
 ## Accessibility
 
 Providing a unique `id` prop ensures ARIA compliance by automatically adding the appropriate
diff --git a/src/components/dropdown/_dropdown-form.scss b/src/components/dropdown/_dropdown-form.scss
@@ -6,19 +6,35 @@ $bv-dropdown-form-defined: false !default;
 
   // Custom styles for <b-dropdown-form>
   // Based on class `.dropdown-item`
-  .b-dropdown-form {
-    display: inline-block;
-    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-    width: 100%;
-    clear: both;
-    font-weight: $font-weight-normal;
+  .dropdown.b-dropdown {
+    .b-dropdown-form {
+      display: inline-block;
+      padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+      width: 100%;
+      clear: both;
+      font-weight: $font-weight-normal;
 
-    &:first-child {
-      @include border-top-radius($dropdown-inner-border-radius);
-    }
+      &:focus {
+        // From https://github.com/twbs/bootstrap/blob/master/scss/_reboot.scss
+        // mimicking button:focus styling.
+        // We add important here as anything with tabindex `-1` and focused will not
+        // have a focus ring due to reboot.scss and it's `!important` override.
+        // Needed for keyboard navigation high-lighting
+        outline: 1px dotted !important;
+        outline: 5px auto -webkit-focus-ring-color !important;
+      }
 
-    &:last-child {
-      @include border-bottom-radius($dropdown-inner-border-radius);
+      &.disabled,
+      &:disabled {
+        outline: 0 !important;
+        color: $dropdown-link-disabled-color;
+        pointer-events: none;
+        // background-color: transparent;
+        // Remove CSS gradients if they're enabled
+        // @if $enable-gradients {
+        //   background-image: none;
+        // }
+      }
     }
   }
 }
diff --git a/src/components/dropdown/_dropdown-text.scss b/src/components/dropdown/_dropdown-text.scss
@@ -13,13 +13,5 @@ $bv-dropdown-text-defined: false !default;
     width: 100%;
     clear: both;
     font-weight: $font-weight-lighter;
-
-    &:first-child {
-      @include border-top-radius($dropdown-inner-border-radius);
-    }
-
-    &:last-child {
-      @include border-bottom-radius($dropdown-inner-border-radius);
-    }
   }
 }
diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss
@@ -24,5 +24,28 @@ $bv-dropdown-defined: false !default;
         }
       }
     }
+
+    // Prevent dropdown background overflow if there's no padding
+    // See https://github.com/twbs/bootstrap/pull/27703
+    // Added here to address <li> wrapping of items
+    @if $dropdown-padding-y == 0 {
+      .dropdown-menu {
+        > :first-child {
+          .dropdown-item,
+          .dropdown-form,
+          .dropdown-text {
+            @include border-top-radius($dropdown-inner-border-radius);
+          }
+        }
+
+        > :last-child {
+          .dropdown-item,
+          .dropdown-form,
+          .dropdown-text {
+            @include border-bottom-radius($dropdown-inner-border-radius);
+          }
+        }
+      }
+    }
   }
 }
diff --git a/src/components/dropdown/dropdown-form.js b/src/components/dropdown/dropdown-form.js
@@ -6,15 +6,27 @@ export default Vue.extend({
   name: 'BDropdownForm',
   functional: true,
   inheritAttrs: false,
-  props: { ...formProps },
+  props: {
+    ...formProps,
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
   render(h, { props, data, children }) {
     return h('li', [
       h(
         BForm,
         mergeData(data, {
+          ref: 'form',
           staticClass: 'b-dropdown-form',
+          class: { disabled: props.disabled },
           props,
-          ref: 'form'
+          attrs: {
+            disabled: props.disabled,
+            // Tab index of -1 for keyboard navigation
+            tabindex: props.disabled ? null : '-1'
+          }
         }),
         children
       )
diff --git a/src/components/dropdown/dropdown-form.spec.js b/src/components/dropdown/dropdown-form.spec.js
@@ -10,23 +10,47 @@ describe('dropdown-form', () => {
     expect(form.is('form')).toBe(true)
   })
 
-  it('has custom class "b-dropdown-form"', async () => {
+  it('default has expected classes', async () => {
     const wrapper = mount(BDropdownForm)
     expect(wrapper.is('li')).toBe(true)
 
     const form = wrapper.find('form')
     expect(form.classes()).toContain('b-dropdown-form')
     expect(form.classes()).not.toContain('was-validated')
+    expect(form.classes()).not.toContain('disabled')
   })
 
-  it('has class "was-validated" when validated=true', async () => {
+  it('has tabindex on form', async () => {
+    const wrapper = mount(BDropdownForm)
+    expect(wrapper.is('li')).toBe(true)
+
+    const form = wrapper.find('form')
+    expect(form.is('form')).toBe(true)
+    expect(form.attributes('tabindex')).toBeDefined()
+    expect(form.attributes('tabindex')).toEqual('-1')
+  })
+
+  it('does not have tabindex on form when disabled', async () => {
     const wrapper = mount(BDropdownForm, {
-      context: {
-        props: { validated: true }
+      propsData: {
+        disabled: true
       }
     })
     expect(wrapper.is('li')).toBe(true)
 
+    const form = wrapper.find('form')
+    expect(form.is('form')).toBe(true)
+    expect(form.attributes('tabindex')).not.toBeDefined()
+    expect(form.attributes('disabled')).toBeDefined()
+    expect(form.classes()).toContain('disabled')
+  })
+
+  it('has class "was-validated" when validated=true', async () => {
+    const wrapper = mount(BDropdownForm, {
+      propsData: { validated: true }
+    })
+    expect(wrapper.is('li')).toBe(true)
+
     const form = wrapper.find('form')
     expect(form.classes()).toContain('was-validated')
     expect(form.classes()).toContain('b-dropdown-form')
@@ -42,9 +66,7 @@ describe('dropdown-form', () => {
 
   it('has attribute novalidate when novalidate=true', async () => {
     const wrapper = mount(BDropdownForm, {
-      context: {
-        props: { novalidate: true }
-      }
+      propsData: { novalidate: true }
     })
     expect(wrapper.is('li')).toBe(true)
 
diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
@@ -1,6 +1,7 @@
 import Vue from '../../utils/vue'
 import { stripTags } from '../../utils/html'
 import { getComponentConfig } from '../../utils/config'
+import { HTMLElement } from '../../utils/safe-types'
 import idMixin from '../../mixins/id'
 import dropdownMixin from '../../mixins/dropdown'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
@@ -60,8 +61,8 @@ export const props = {
   },
   boundary: {
     // String: `scrollParent`, `window` or `viewport`
-    // Object: HTML Element reference
-    type: [String, Object],
+    // HTMLElement: HTML Element reference
+    type: [String, HTMLElement],
     default: 'scrollParent'
   }
 }
@@ -73,40 +74,33 @@ export default Vue.extend({
   props,
   computed: {
     dropdownClasses() {
-      // Position `static` is needed to allow menu to "breakout" of the scrollParent boundaries
-      // when boundary is anything other than `scrollParent`
-      // See https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
-      const positionStatic = this.boundary !== 'scrollParent' || !this.boundary
-
       return [
-        'btn-group',
-        'b-dropdown',
-        'dropdown',
         this.directionClass,
         {
           show: this.visible,
-          'position-static': positionStatic
+          // Position `static` is needed to allow menu to "breakout" of the scrollParent boundaries
+          // when boundary is anything other than `scrollParent`
+          // See https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
+          'position-static': this.boundary !== 'scrollParent' || !this.boundary
         }
       ]
     },
     menuClasses() {
       return [
-        'dropdown-menu',
+        this.menuClass,
         {
           'dropdown-menu-right': this.right,
           show: this.visible
-        },
-        this.menuClass
+        }
       ]
     },
     toggleClasses() {
       return [
-        'dropdown-toggle',
+        this.toggleClass,
         {
           'dropdown-toggle-split': this.split,
           'dropdown-toggle-no-caret': this.noCaret && !this.split
-        },
-        this.toggleClass
+        }
       ]
     }
   },
@@ -149,6 +143,7 @@ export default Vue.extend({
       BButton,
       {
         ref: 'toggle',
+        staticClass: 'dropdown-toggle',
         class: this.toggleClasses,
         props: {
           variant: this.variant,
@@ -172,23 +167,27 @@ export default Vue.extend({
       'ul',
       {
         ref: 'menu',
+        staticClass: 'dropdown-menu',
         class: this.menuClasses,
         attrs: {
           role: this.role,
           tabindex: '-1',
           'aria-labelledby': this.safeId(this.split ? '_BV_button_' : '_BV_toggle_')
         },
         on: {
-          mouseover: this.onMouseOver,
-          keydown: this.onKeydown // tab, up, down, esc
+          keydown: this.onKeydown // up, down, esc
         }
       },
-      this.normalizeSlot('default')
+      this.normalizeSlot('default', { hide: this.hide })
+    )
+    return h(
+      'div',
+      {
+        staticClass: 'dropdown btn-group b-dropdown',
+        class: this.dropdownClasses,
+        attrs: { id: this.safeId() }
+      },
+      [split, toggle, menu]
     )
-    return h('div', { attrs: { id: this.safeId() }, class: this.dropdownClasses }, [
-      split,
-      toggle,
-      menu
-    ])
   }
 })
diff --git a/src/components/nav/README.md b/src/components/nav/README.md
@@ -204,6 +204,16 @@ add them (like above) which will produce something like:
 
 Refer to [`<b-dropdown>`](/docs/components/dropdown) for a list of supported sub-components.
 
+### Optionally scoped default slot
+
+<span class="badge badge-info small">NEW in 2.0.0-rc.20</span>
+
+The dropdown default slot is optionally scoped with the following scope available:
+
+| Property or Method | Description                                                                                                                      |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
+| `hide()`           | Can be used to close the dropdown menu. Accepts an optional boolean argument, which if `true` returns focus to the toggle button |
+
 ## Using in navbar
 
 Prop `is-nav-bar` has been deprecated and will be removed in a future release.
diff --git a/src/components/nav/nav-item-dropdown.js b/src/components/nav/nav-item-dropdown.js
diff --git a/src/mixins/dropdown.js b/src/mixins/dropdown.js

Original file line number	Diff line number	Diff line change
`@@ -13,13 +13,5 @@ $bv-dropdown-text-defined: false !default;`
`13`	`13`	`width: 100%;`
`14`	`14`	`clear: both;`
`15`	`15`	`font-weight: $font-weight-lighter;`
`16`		`-`
`17`		`- &:first-child {`
`18`		`- @include border-top-radius($dropdown-inner-border-radius);`
`19`		`- }`
`20`		`-`
`21`		`- &:last-child {`
`22`		`- @include border-bottom-radius($dropdown-inner-border-radius);`
`23`		`- }`
`24`	`16`	`}`
`25`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -24,5 +24,28 @@ $bv-dropdown-defined: false !default;`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`	`}`
	`27`	`+`
	`28`	`+ // Prevent dropdown background overflow if there's no padding`
	`29`	`+ // See https://github.com/twbs/bootstrap/pull/27703`
	`30`	`+ // Added here to address <li> wrapping of items`
	`31`	`+ @if $dropdown-padding-y == 0 {`
	`32`	`+ .dropdown-menu {`
	`33`	`+ > :first-child {`
	`34`	`+ .dropdown-item,`
	`35`	`+ .dropdown-form,`
	`36`	`+ .dropdown-text {`
	`37`	`+ @include border-top-radius($dropdown-inner-border-radius);`
	`38`	`+ }`
	`39`	`+ }`
	`40`	`+`
	`41`	`+ > :last-child {`
	`42`	`+ .dropdown-item,`
	`43`	`+ .dropdown-form,`
	`44`	`+ .dropdown-text {`
	`45`	`+ @include border-bottom-radius($dropdown-inner-border-radius);`
	`46`	`+ }`
	`47`	`+ }`
	`48`	`+ }`
	`49`	`+ }`
`27`	`50`	`}`
`28`	`51`	`}`