From a83785829bfddddc5a6ed680da0774e21d4430b4 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 14 Aug 2019 13:35:40 -0300 Subject: [PATCH 01/14] feat(b-nav): add card header support Adds in support for placing `b-nav` in card headers via a new `card-header` boolean prop. Automatically applies the correct classes for pills and tabs mode --- src/components/nav/nav.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/nav/nav.js b/src/components/nav/nav.js index 28a1cc339ca..3cacfcc6d90 100644 --- a/src/components/nav/nav.js +++ b/src/components/nav/nav.js @@ -35,6 +35,11 @@ export const props = { small: { type: Boolean, default: false + }, + cardHeader: { + // Set to true if placing in a card header + type: Boolean, + default: false } } @@ -58,7 +63,9 @@ export const BNav = /*#__PURE__*/ Vue.extend({ staticClass: 'nav', class: { 'nav-tabs': props.tabs, - 'nav-pills': props.pills, + 'nav-pills': props.pills && !props.tabs, + 'card-header-tabs': props.cardHeader && props.tabs, + 'card-header-pills': props.cardHeader && props.pills && !props.tabs, 'flex-column': props.vertical, 'nav-fill': !props.vertical && props.fill, 'nav-justified': !props.vertical && props.justified, From 8a5e3a20b80e47365c8e941a13d97211229d0972 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 14 Aug 2019 13:47:21 -0300 Subject: [PATCH 02/14] Update nav.spec.js --- src/components/nav/nav.spec.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/components/nav/nav.spec.js b/src/components/nav/nav.spec.js index 00adb817b9f..89e5b7635e9 100644 --- a/src/components/nav/nav.spec.js +++ b/src/components/nav/nav.spec.js @@ -179,4 +179,36 @@ describe('nav', () => { expect(wrapper.classes().length).toBe(2) expect(wrapper.text()).toBe('') }) + + it('applies card-header-tabs class when tabs and card-header props set', async () => { + const wrapper = mount(BNav, { + propsData: { + tabs: true, + cardHeader: true + } + }) + + expect(wrapper.is('ul')).toBe(true) + expect(wrapper.classes()).toContain('nav') + expect(wrapper.classes()).toContain('nav-tabs') + expect(wrapper.classes()).toContain('card-header-tabs') + expect(wrapper.classes().length).toBe(3) + expect(wrapper.text()).toBe('') + }) + + it('applies card-header-pills class when pills and card-header props set', async () => { + const wrapper = mount(BNav, { + propsData: { + tabs: true, + cardHeader: true + } + }) + + expect(wrapper.is('ul')).toBe(true) + expect(wrapper.classes()).toContain('nav') + expect(wrapper.classes()).toContain('nav-pills') + expect(wrapper.classes()).toContain('card-header-pills') + expect(wrapper.classes().length).toBe(3) + expect(wrapper.text()).toBe('') + }) }) From 6e9435b926f12184c6296e0e58adb85464390696 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 14 Aug 2019 13:49:53 -0300 Subject: [PATCH 03/14] Update nav.spec.js --- src/components/nav/nav.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/nav/nav.spec.js b/src/components/nav/nav.spec.js index 89e5b7635e9..284a2ab1523 100644 --- a/src/components/nav/nav.spec.js +++ b/src/components/nav/nav.spec.js @@ -199,7 +199,7 @@ describe('nav', () => { it('applies card-header-pills class when pills and card-header props set', async () => { const wrapper = mount(BNav, { propsData: { - tabs: true, + pills: true, cardHeader: true } }) From 3c239e7d62be49cfb8504f9e2ab57ce644c0de6b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 14 Aug 2019 15:27:12 -0300 Subject: [PATCH 04/14] Update nav.js --- src/components/nav/nav.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/nav/nav.js b/src/components/nav/nav.js index 3cacfcc6d90..68a993087de 100644 --- a/src/components/nav/nav.js +++ b/src/components/nav/nav.js @@ -64,8 +64,8 @@ export const BNav = /*#__PURE__*/ Vue.extend({ class: { 'nav-tabs': props.tabs, 'nav-pills': props.pills && !props.tabs, - 'card-header-tabs': props.cardHeader && props.tabs, - 'card-header-pills': props.cardHeader && props.pills && !props.tabs, + 'card-header-tabs': !props.vertical && props.cardHeader && props.tabs, + 'card-header-pills': !props.vertical && props.cardHeader && props.pills && !props.tabs, 'flex-column': props.vertical, 'nav-fill': !props.vertical && props.fill, 'nav-justified': !props.vertical && props.justified, From fab84132e0b927c15384e199db263f3f2309c9b5 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 14 Aug 2019 15:32:07 -0300 Subject: [PATCH 05/14] Update tabs.js --- src/components/tabs/tabs.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index 5ac2cb43586..9bd3ff411fd 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -237,12 +237,8 @@ export const BTabs = /*#__PURE__*/ Vue.extend({ }, localNavClass() { const classes = [] - if (this.card) { - if (this.vertical) { - classes.push('card-header', 'h-100', 'border-bottom-0', 'rounded-0') - } else { - classes.push(`card-header-${this.navStyle}`) - } + if (this.card && this.vertical) { + classes.push('card-header', 'h-100', 'border-bottom-0', 'rounded-0') } return [...classes, this.navClass] } @@ -640,7 +636,8 @@ export const BTabs = /*#__PURE__*/ Vue.extend({ tabs: !this.noNavStyle && !this.pills, pills: !this.noNavStyle && this.pills, vertical: this.vertical, - small: this.small + small: this.small, + cardHeader: this.card && !this.vertical } }, [this.normalizeSlot('tabs-start') || h(), buttons, this.normalizeSlot('tabs-end') || h()] From f6aefdc79b75545648ced9aad7eb75e4816eb50b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 14 Aug 2019 15:54:37 -0300 Subject: [PATCH 06/14] Update README.md --- src/components/nav/README.md | 69 ++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/src/components/nav/README.md b/src/components/nav/README.md index 94dcb4236f1..60a30147a2f 100644 --- a/src/components/nav/README.md +++ b/src/components/nav/README.md @@ -220,6 +220,75 @@ render the menu contents only when it is shown by setting the `lazy` prop to tru See the [``](/docs/components/tabs) component for creating tabbable panes of local content (not suited for navigation). +## Card integration + +Use a `` in a [``](/docs/components/card) header, by enabling the `card-header` +prop on `` and setting eitehr the `pills` or `tabs` props: + +**Tabs style:** + +```html +
+ + + Active + Inactive + Disabled + + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + +
+ + +``` + +**Pill style:** + +```html +
+ + + Active + Inactive + Disabled + + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + +
+ + +``` + +**Plain style:** + +The `card-header` prop is only needed when you are applying `tabs` or `pills` style. + +```html +
+ + + Active + Inactive + Disabled + + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + +
+ + +``` + +The `card-header` prop has no effect if the `` is `vertical`. + ## Accessibility If you're using `` to provide a navigation bar, be sure to add a `role="navigation"` to the From 0b1ce2cfcefb39ab742e8f61035e015e809f1e9c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 14 Aug 2019 15:56:08 -0300 Subject: [PATCH 07/14] Update README.md --- src/components/nav/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/nav/README.md b/src/components/nav/README.md index 60a30147a2f..01dce52f6dd 100644 --- a/src/components/nav/README.md +++ b/src/components/nav/README.md @@ -223,7 +223,7 @@ See the [``](/docs/components/tabs) component for creating tabbable pane ## Card integration Use a `` in a [``](/docs/components/card) header, by enabling the `card-header` -prop on `` and setting eitehr the `pills` or `tabs` props: +prop on `` and setting either the `pills` or `tabs` props: **Tabs style:** From 946351ff5efd14994d04cdb01a452f832b602155 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 14 Aug 2019 16:03:55 -0300 Subject: [PATCH 08/14] Update README.md --- src/components/card/README.md | 52 +++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/src/components/card/README.md b/src/components/card/README.md index 390b3b4c14e..35a9e87ed7f 100644 --- a/src/components/card/README.md +++ b/src/components/card/README.md @@ -495,6 +495,58 @@ assistive technologies – such as screen readers. Ensure that information denot either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class. +## Nav integration + +Integrate [``](/docs/components/nav) into card headers easily. + +**Using the `header` slot**: + +```html +
+ + + Active + Inactive + Disabled + + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + +
+ + +``` + +**Using `` sub-component:** + +```html +
+ + + + Active + Inactive + Disabled + + + + Card Title + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + +
+ + +``` + +For more information on using `` in card headers, refer to the +[Navs documentation](/docs/components/nav). + ## Card groups In addition to styling the content within cards, BootstrapVue includes a `` component From 31fe03bc14d526b7a8100400714664248c521348 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 14 Aug 2019 16:08:35 -0300 Subject: [PATCH 09/14] Update tabs.js --- src/components/tabs/tabs.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index 9bd3ff411fd..7569db53c2a 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -232,9 +232,6 @@ export const BTabs = /*#__PURE__*/ Vue.extend({ // This computed prop is sniffed by the tab child return !this.noFade }, - navStyle() { - return this.pills ? 'pills' : 'tabs' - }, localNavClass() { const classes = [] if (this.card && this.vertical) { From 99be30eb22ae1d91f568d07a8a6b07cb52928ca8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 14 Aug 2019 21:35:59 +0200 Subject: [PATCH 10/14] Update README.md --- src/components/card/README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/card/README.md b/src/components/card/README.md index 35a9e87ed7f..a3f0f98c7dc 100644 --- a/src/components/card/README.md +++ b/src/components/card/README.md @@ -509,9 +509,11 @@ Integrate [``](/docs/components/nav) into card headers easily. Inactive Disabled + With supporting text below as a natural lead-in to additional content. + Go somewhere @@ -531,11 +533,14 @@ Integrate [``](/docs/components/nav) into card headers easily. Disabled + Card Title + With supporting text below as a natural lead-in to additional content. + Go somewhere From bd8a33ba3d9fa3057b23d545dc84a7dcf456f18b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 14 Aug 2019 21:37:06 +0200 Subject: [PATCH 11/14] Update README.md --- src/components/nav/README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/nav/README.md b/src/components/nav/README.md index 01dce52f6dd..ed80e1307d1 100644 --- a/src/components/nav/README.md +++ b/src/components/nav/README.md @@ -222,8 +222,8 @@ See the [``](/docs/components/tabs) component for creating tabbable pane ## Card integration -Use a `` in a [``](/docs/components/card) header, by enabling the `card-header` -prop on `` and setting either the `pills` or `tabs` props: +Use a `` in a [``](/docs/components/card) header, by enabling the `card-header` prop +on `` and setting either the `pills` or `tabs` props: **Tabs style:** @@ -235,9 +235,11 @@ prop on `` and setting either the `pills` or `tabs` props: Inactive Disabled + With supporting text below as a natural lead-in to additional content. + Go somewhere @@ -255,9 +257,11 @@ prop on `` and setting either the `pills` or `tabs` props: Inactive Disabled + With supporting text below as a natural lead-in to additional content. + Go somewhere From 05faa515b073b75100906e1d6050e291b2b6aab1 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 14 Aug 2019 16:39:09 -0300 Subject: [PATCH 12/14] Update README.md --- src/components/nav/README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/components/nav/README.md b/src/components/nav/README.md index ed80e1307d1..84acb164109 100644 --- a/src/components/nav/README.md +++ b/src/components/nav/README.md @@ -234,6 +234,11 @@ on `` and setting either the `pills` or `tabs` props: Active Inactive Disabled + + one + two + three + @@ -256,6 +261,11 @@ on `` and setting either the `pills` or `tabs` props: Active Inactive Disabled + + one + two + three + @@ -280,10 +290,17 @@ The `card-header` prop is only needed when you are applying `tabs` or `pills` st Active Inactive Disabled + + one + two + three + + With supporting text below as a natural lead-in to additional content. + Go somewhere From d01cdb0b8d72b111a2b53819be943641486f7b1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 14 Aug 2019 21:56:40 +0200 Subject: [PATCH 13/14] Update README.md --- src/components/nav/README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/nav/README.md b/src/components/nav/README.md index 84acb164109..55a5e9311f0 100644 --- a/src/components/nav/README.md +++ b/src/components/nav/README.md @@ -170,10 +170,10 @@ Use `` to place dropdown items within your nav. toggle-class="nav-link-custom" right > - one - two + One + Two - three + Three @@ -235,9 +235,9 @@ on `` and setting either the `pills` or `tabs` props: Inactive Disabled - one - two - three + One + Two + Three @@ -262,9 +262,9 @@ on `` and setting either the `pills` or `tabs` props: Inactive Disabled - one - two - three + One + Two + Three @@ -291,9 +291,9 @@ The `card-header` prop is only needed when you are applying `tabs` or `pills` st Inactive Disabled - one - two - three + One + Two + Three From cade7ecc3f03a83b2237f2c550e3c7a7a9580d1c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 14 Aug 2019 17:00:21 -0300 Subject: [PATCH 14/14] Update README.md --- src/directives/scrollspy/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/directives/scrollspy/README.md b/src/directives/scrollspy/README.md index 78fae488ebc..8880aa175ac 100644 --- a/src/directives/scrollspy/README.md +++ b/src/directives/scrollspy/README.md @@ -30,7 +30,7 @@ as well.