From 83c2423e347b9a561e1b5eee2ee1da5ed8fb080e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Sep 2019 10:58:56 -0300 Subject: [PATCH 01/11] feat(b-nav-*): ensure `b-nav-*` sub-components are wrapped in `
  • ` for a11y --- src/components/nav/nav-form.js | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/src/components/nav/nav-form.js b/src/components/nav/nav-form.js index 8f1b2814d65..045d03891c6 100644 --- a/src/components/nav/nav-form.js +++ b/src/components/nav/nav-form.js @@ -3,14 +3,35 @@ import { mergeData } from 'vue-functional-data-merge' import { omit } from '../../utils/object' import { BForm, props as BFormProps } from '../form/form' -export const props = omit(BFormProps, ['inline']) +export const props = { + ...omit(BFormProps, ['inline']), + formClass: { + type: [String, Array, Object], + default: null + } +} // @vue/component export const BNavForm = /*#__PURE__*/ Vue.extend({ name: 'BNavForm', functional: true, props, - render(h, { props, data, children }) { - return h(BForm, mergeData(data, { props: { ...props, inline: true } }), children) + render(h, { props, data, children, listeners = {} }) { + const attrs = data.attrs + // The following data properties are cleared out + // as they will be passed to BForm directly + data.attrs = {} + data.on = {} + const $form = h( + BForm, + { + class: props.formClass, + props: { ...props, inline: true }, + attrs, + on: listeners + }, + children + ) + return h('li', mergeData(data, { staticClass: 'form-inline' }), [$form]) } }) From ce507b8dfc96f364795e8b326c7e951a0275920f Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Sep 2019 11:18:01 -0300 Subject: [PATCH 02/11] Update nav-form.spec.js --- src/components/nav/nav-form.spec.js | 73 +++++++++++++++++++++++++++-- 1 file changed, 70 insertions(+), 3 deletions(-) diff --git a/src/components/nav/nav-form.spec.js b/src/components/nav/nav-form.spec.js index d582f6e293b..a586dba4d49 100644 --- a/src/components/nav/nav-form.spec.js +++ b/src/components/nav/nav-form.spec.js @@ -5,10 +5,17 @@ describe('nav > nav-form', () => { it('has expected default structure', async () => { const wrapper = mount(BNavForm) - expect(wrapper.is('form')).toBe(true) + expect(wrapper.is('li')).toBe(true) expect(wrapper.classes()).toContain('form-inline') expect(wrapper.classes().length).toBe(1) + + const $form = wrapper.find('form') + expect($form.exists()).toBe(true) + expect($form.classes()).toContain('form-inline') + expect($form.classes().length).toBe(1) expect(wrapper.text()).toEqual('') + + wrapper.destroy() }) it('renders default slot content', async () => { @@ -18,9 +25,69 @@ describe('nav > nav-form', () => { } }) - expect(wrapper.is('form')).toBe(true) + expect(wrapper.is('li')).toBe(true) + expect(wrapper.classes()).toContain('form-inline') + expect(wrapper.classes().length).toBe(1) + + const $form = wrapper.find('form') + expect($form.exists()).toBe(true) + expect($form.classes()).toContain('form-inline') + expect($form.text()).toEqual('foobar') + + wrapper.destroy() + }) + + it('applies ID to form when prop ID is set', async () => { + const wrapper = mount(BNavForm, { + propsData: { + id: 'baz' + }, + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('li')).toBe(true) + expect(wrapper.classes()).toContain('form-inline') + expect(wrapper.classes().length).toBe(1) + + const $form = wrapper.find('form') + expect($form.exists()).toBe(true) + expect($form.classes()).toContain('form-inline') + expect($form.text()).toEqual('foobar') + expect($form.attributes('id')).toEqual('baz') + + wrapper.destroy() + }) + + it('listeners are bound to form element', async () => { + const onSubmit = jest.$fn() + const wrapper = mount(BNavForm, { + propsData: { + id: 'baz' + }, + on: { + submit: onSubmit + }, + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('li')).toBe(true) expect(wrapper.classes()).toContain('form-inline') expect(wrapper.classes().length).toBe(1) - expect(wrapper.text()).toEqual('foobar') + + const $form = wrapper.find('form') + expect($form.exists()).toBe(true) + expect($form.classes()).toContain('form-inline') + expect($form.text()).toEqual('foobar') + + expect(onSubmit).not.toHaveBeenCalled() + + $form.trigger('submit') + expect(onSubmit).toHaveBeenCalled() + + wrapper.destroy() }) }) From edfded6a00deacb3f824e22488e1068f07e3f853 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Sep 2019 11:29:20 -0300 Subject: [PATCH 03/11] Update nav-form.spec.js --- src/components/nav/nav-form.spec.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/nav/nav-form.spec.js b/src/components/nav/nav-form.spec.js index a586dba4d49..1a0bdd86b11 100644 --- a/src/components/nav/nav-form.spec.js +++ b/src/components/nav/nav-form.spec.js @@ -14,8 +14,6 @@ describe('nav > nav-form', () => { expect($form.classes()).toContain('form-inline') expect($form.classes().length).toBe(1) expect(wrapper.text()).toEqual('') - - wrapper.destroy() }) it('renders default slot content', async () => { @@ -33,8 +31,6 @@ describe('nav > nav-form', () => { expect($form.exists()).toBe(true) expect($form.classes()).toContain('form-inline') expect($form.text()).toEqual('foobar') - - wrapper.destroy() }) it('applies ID to form when prop ID is set', async () => { @@ -56,8 +52,6 @@ describe('nav > nav-form', () => { expect($form.classes()).toContain('form-inline') expect($form.text()).toEqual('foobar') expect($form.attributes('id')).toEqual('baz') - - wrapper.destroy() }) it('listeners are bound to form element', async () => { @@ -87,7 +81,5 @@ describe('nav > nav-form', () => { $form.trigger('submit') expect(onSubmit).toHaveBeenCalled() - - wrapper.destroy() }) }) From e8e9b70abed1a34a375e34d447f27ff473e5cf92 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Sep 2019 11:38:02 -0300 Subject: [PATCH 04/11] Update nav-form.spec.js --- src/components/nav/nav-form.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/nav/nav-form.spec.js b/src/components/nav/nav-form.spec.js index 1a0bdd86b11..bedb03b289f 100644 --- a/src/components/nav/nav-form.spec.js +++ b/src/components/nav/nav-form.spec.js @@ -55,12 +55,12 @@ describe('nav > nav-form', () => { }) it('listeners are bound to form element', async () => { - const onSubmit = jest.$fn() + const onSubmit = jest.fn() const wrapper = mount(BNavForm, { propsData: { id: 'baz' }, - on: { + listeners: { submit: onSubmit }, slots: { From f5b8b9107052d745286445312fc706669064c94b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Sep 2019 12:21:36 -0300 Subject: [PATCH 05/11] Update nav-text.js --- src/components/nav/nav-text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/nav/nav-text.js b/src/components/nav/nav-text.js index 5882c482d48..0c993ba9837 100644 --- a/src/components/nav/nav-text.js +++ b/src/components/nav/nav-text.js @@ -4,7 +4,7 @@ import { mergeData } from 'vue-functional-data-merge' export const props = { tag: { type: String, - default: 'span' + default: 'li' } } From 62f3764c74200e3cf3c76f1a45931998c8e7ed86 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Sep 2019 12:22:10 -0300 Subject: [PATCH 06/11] Update nav-text.spec.js --- src/components/nav/nav-text.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/nav/nav-text.spec.js b/src/components/nav/nav-text.spec.js index 576a2a79ff8..e1c175123bf 100644 --- a/src/components/nav/nav-text.spec.js +++ b/src/components/nav/nav-text.spec.js @@ -5,7 +5,7 @@ describe('nav > nav-text', () => { it('has expected default structure', async () => { const wrapper = mount(BNavText) - expect(wrapper.is('span')).toBe(true) + expect(wrapper.is('li')).toBe(true) expect(wrapper.classes()).toContain('navbar-text') expect(wrapper.classes().length).toBe(1) expect(wrapper.text()).toEqual('') @@ -31,7 +31,7 @@ describe('nav > nav-text', () => { } }) - expect(wrapper.is('span')).toBe(true) + expect(wrapper.is('li')).toBe(true) expect(wrapper.classes()).toContain('navbar-text') expect(wrapper.classes().length).toBe(1) expect(wrapper.text()).toEqual('foobar') From 0d1c53cdbd7777664729784cfb6edee1aec05b67 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Sep 2019 13:33:09 -0300 Subject: [PATCH 07/11] Update nav-text.js --- src/components/nav/nav-text.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/nav/nav-text.js b/src/components/nav/nav-text.js index 0c993ba9837..f75aae55aff 100644 --- a/src/components/nav/nav-text.js +++ b/src/components/nav/nav-text.js @@ -1,12 +1,7 @@ import Vue from '../../utils/vue' import { mergeData } from 'vue-functional-data-merge' -export const props = { - tag: { - type: String, - default: 'li' - } -} +export const props = {} // @vue/component export const BNavText = /*#__PURE__*/ Vue.extend({ @@ -14,6 +9,6 @@ export const BNavText = /*#__PURE__*/ Vue.extend({ functional: true, props, render(h, { props, data, children }) { - return h(props.tag, mergeData(data, { staticClass: 'navbar-text' }), children) + return h('li', mergeData(data, { staticClass: 'navbar-text' }), children) } }) From e2a60b3cf3333aea3f9c0aacfbcbd827236312ae Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Sep 2019 13:33:29 -0300 Subject: [PATCH 08/11] Update nav-text.spec.js --- src/components/nav/nav-text.spec.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/components/nav/nav-text.spec.js b/src/components/nav/nav-text.spec.js index e1c175123bf..ccb916bc5e2 100644 --- a/src/components/nav/nav-text.spec.js +++ b/src/components/nav/nav-text.spec.js @@ -11,19 +11,6 @@ describe('nav > nav-text', () => { expect(wrapper.text()).toEqual('') }) - it('renders custom root element when prop tag is set', async () => { - const wrapper = mount(BNavText, { - propsData: { - tag: 'div' - } - }) - - expect(wrapper.is('div')).toBe(true) - expect(wrapper.classes()).toContain('navbar-text') - expect(wrapper.classes().length).toBe(1) - expect(wrapper.text()).toEqual('') - }) - it('renders default slot content', async () => { const wrapper = mount(BNavText, { slots: { From 743e6f189d5a2ac0290fff9b8ae621e736cc9c7b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Sep 2019 13:48:37 -0300 Subject: [PATCH 09/11] Update README.md --- src/components/navbar/README.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/navbar/README.md b/src/components/navbar/README.md index f45f0f9faad..1693244e73d 100644 --- a/src/components/navbar/README.md +++ b/src/components/navbar/README.md @@ -80,13 +80,14 @@ Navbars come with built-in support for a handful of sub-components. Choose from needed: - `` for your company, product, or project name. -- `` for a full-height and lightweight navigation (including support for dropdowns). -- `` for link (and router-link) action items -- `` for navbar dropdown menus -- `` for adding vertically centered strings of text. -- `` for any form controls and actions. - `` for use with the `` component. - `` for grouping and hiding navbar contents by a parent breakpoint. +- `` for a full-height and lightweight navigation (including support for dropdowns). + The following sub-components inside `` are supported: + - `` for link (and router-link) action items + - `` for nav dropdown menus + - `` for adding vertically centered strings of text. + - `` for any form controls and actions. ### `` @@ -153,7 +154,7 @@ Navbar navigation links build on the `` parent component and requi navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned. -`` supports the following components: +`` supports the following child components: - `` for link (and router-link) action items - `` for adding vertically centered strings of text. From 8cf15003de06d4c7184bea8e1a6eb9fd030b39df Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 15 Sep 2019 14:03:46 -0300 Subject: [PATCH 10/11] Update README.md --- src/components/nav/README.md | 45 ++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/src/components/nav/README.md b/src/components/nav/README.md index ed233b193ea..f29e2d4a5a2 100644 --- a/src/components/nav/README.md +++ b/src/components/nav/README.md @@ -23,6 +23,13 @@ types of navigation components. It includes some style overrides (for working wi padding for larger hit areas, and basic disabled styling. No active states are included in the base nav. +`` supports teh following child components: + +- `` for actionable links (or router-links) +- `` for drodpowns +- `` for plain text content +- `` for inline forms + ## Link appearance Two style variations are supported: `tabs` and `pills`, which support `active` state styling. These @@ -215,6 +222,44 @@ shown. When there are a large number of dropdowns rendered on the same page, per impacted due to larger overall memory utilization. You can instruct `` to render the menu contents only when it is shown by setting the `lazy` prop to true. +## Nav text content + +Use the `` child component to place plain text content into the nav: + +```html +
    + + Link 1 + Link 2 + Plain text + +
    + + +``` + +## Nav inline forms + +Use the `` child component to place an _inline_ form into the nav: + +```html +
    + + Link 1 + Link 2 + + + Ok + + +
    + + +``` + +Refer to the [``binline](/docs/components/form#inline-form) documentation for additional +details on placing form controls. + ## Tabbed local content support See the [``](/docs/components/tabs) component for creating tabbable panes of local content From e8586326c6916587544f2a9b1abd1055d486df6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 18 Sep 2019 10:18:03 +0200 Subject: [PATCH 11/11] Update README.md --- src/components/nav/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/nav/README.md b/src/components/nav/README.md index f29e2d4a5a2..2e446b254a2 100644 --- a/src/components/nav/README.md +++ b/src/components/nav/README.md @@ -26,7 +26,7 @@ nav. `` supports teh following child components: - `` for actionable links (or router-links) -- `` for drodpowns +- `` for dropdowns - `` for plain text content - `` for inline forms @@ -257,7 +257,7 @@ Use the `` child component to place an _inline_ form into the nav: ``` -Refer to the [``binline](/docs/components/form#inline-form) documentation for additional +Refer to the [`` inline](/docs/components/form#inline-form) documentation for additional details on placing form controls. ## Tabbed local content support