From 8cb9aa1303f33ebe536ef6cd3c56e41308baa296 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Tue, 13 Aug 2019 11:55:31 +0200 Subject: [PATCH 1/2] feat(nav): remove deprecations --- src/components/nav/README.md | 4 -- src/components/nav/nav-item-dropdown.js | 28 +------------ src/components/nav/nav.js | 33 ++++++--------- src/components/nav/nav.spec.js | 55 ------------------------- src/components/navbar/README.md | 3 -- 5 files changed, 14 insertions(+), 109 deletions(-) diff --git a/src/components/nav/README.md b/src/components/nav/README.md index 991ffd5915b..12e6c26cb38 100644 --- a/src/components/nav/README.md +++ b/src/components/nav/README.md @@ -223,10 +223,6 @@ 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. -## Using in navbar - -Prop `is-nav-bar` has been deprecated and will be removed in a future release. - ## Tabbed local content support See the [``](/docs/components/tabs) component for creating tabbable panes of local content diff --git a/src/components/nav/nav-item-dropdown.js b/src/components/nav/nav-item-dropdown.js index a77c681081d..d3d4b0a789e 100644 --- a/src/components/nav/nav-item-dropdown.js +++ b/src/components/nav/nav-item-dropdown.js @@ -9,24 +9,7 @@ import { BLink } from '../link/link' // -- Constants -- -export const props = { - ...pluckProps(['menuClass', 'toggleClass', 'noCaret', 'role'], BDropdownProps), - extraMenuClasses: { - type: String, - default: '', - // `deprecated` -> Don't use this prop - // `deprecation` -> Refers to a change in prop usage - deprecated: 'Setting prop "extra-menu-classes" is deprecated. Use "menu-class" prop instead.' - }, - extraToggleClasses: { - type: String, - default: '', - // `deprecated` -> Don't use this prop - // `deprecation` -> Refers to a change in prop usage - deprecated: - 'Setting prop "extra-toggle-classes" is deprecated. Use "toggle-class" prop instead.' - } -} +export const props = pluckProps(['menuClass', 'toggleClass', 'noCaret', 'role'], BDropdownProps) // @vue/component export const BNavItemDropdown = /*#__PURE__*/ Vue.extend({ @@ -43,7 +26,6 @@ export const BNavItemDropdown = /*#__PURE__*/ Vue.extend({ }, menuClasses() { return [ - this.extraMenuClasses, // Deprecated this.menuClass, { 'dropdown-menu-right': this.right, @@ -52,13 +34,7 @@ export const BNavItemDropdown = /*#__PURE__*/ Vue.extend({ ] }, toggleClasses() { - return [ - this.extraToggleClasses, // Deprecated - this.toggleClass, - { - 'dropdown-toggle-no-caret': this.noCaret - } - ] + return [this.toggleClass, { 'dropdown-toggle-no-caret': this.noCaret }] } }, render(h) { diff --git a/src/components/nav/nav.js b/src/components/nav/nav.js index d3cee1af965..9853ff95823 100644 --- a/src/components/nav/nav.js +++ b/src/components/nav/nav.js @@ -3,9 +3,6 @@ import { mergeData } from 'vue-functional-data-merge' // -- Constants -- -const DEPRECATED_MSG = - 'Setting prop "is-nav-bar" is deprecated. Use the component instead.' - export const props = { tag: { type: String, @@ -38,13 +35,6 @@ export const props = { small: { type: Boolean, default: false - }, - isNavBar: { - type: Boolean, - default: false, - // `deprecated` -> Don't use this prop - // `deprecation` -> Refers to a change in prop usage - deprecated: DEPRECATED_MSG } } @@ -65,17 +55,18 @@ export const BNav = /*#__PURE__*/ Vue.extend({ return h( props.tag, mergeData(data, { - class: { - nav: !props.isNavBar, - 'navbar-nav': props.isNavBar, - 'nav-tabs': props.tabs && !props.isNavBar, - 'nav-pills': props.pills && !props.isNavBar, - 'flex-column': props.vertical && !props.isNavBar, - 'nav-fill': !props.vertical && props.fill, - 'nav-justified': !props.vertical && props.justified, - [computeJustifyContent(props.align)]: !props.vertical && props.align, - small: props.small - } + class: [ + 'nav', + { + 'nav-tabs': props.tabs, + 'nav-pills': props.pills, + 'flex-column': props.vertical, + 'nav-fill': !props.vertical && props.fill, + 'nav-justified': !props.vertical && props.justified, + [computeJustifyContent(props.align)]: !props.vertical && props.align, + small: props.small + } + ] }), children ) diff --git a/src/components/nav/nav.spec.js b/src/components/nav/nav.spec.js index 9837918e745..00adb817b9f 100644 --- a/src/components/nav/nav.spec.js +++ b/src/components/nav/nav.spec.js @@ -37,19 +37,6 @@ describe('nav', () => { expect(wrapper.text()).toBe('foobar') }) - it('supports "is-navbar-nav" mode', async () => { - const wrapper = mount(BNav, { - propsData: { - isNavBar: true - } - }) - - expect(wrapper.is('ul')).toBe(true) - expect(wrapper.classes()).toContain('navbar-nav') - expect(wrapper.classes().length).toBe(1) - expect(wrapper.text()).toBe('') - }) - it('applies pill style', async () => { const wrapper = mount(BNav, { propsData: { @@ -64,20 +51,6 @@ describe('nav', () => { expect(wrapper.text()).toBe('') }) - it("doesn't apply pill style when in 'is-navbar-nav' mode", async () => { - const wrapper = mount(BNav, { - propsData: { - pills: true, - isNavBar: true - } - }) - - expect(wrapper.is('ul')).toBe(true) - expect(wrapper.classes()).toContain('navbar-nav') - expect(wrapper.classes().length).toBe(1) - expect(wrapper.text()).toBe('') - }) - it('applies tab style', async () => { const wrapper = mount(BNav, { propsData: { @@ -92,20 +65,6 @@ describe('nav', () => { expect(wrapper.text()).toBe('') }) - it("doesn't apply tab style when in 'is-navbar-nav' mode", async () => { - const wrapper = mount(BNav, { - propsData: { - tabs: true, - isNavBar: true - } - }) - - expect(wrapper.is('ul')).toBe(true) - expect(wrapper.classes()).toContain('navbar-nav') - expect(wrapper.classes().length).toBe(1) - expect(wrapper.text()).toBe('') - }) - it('applies vertical style', async () => { const wrapper = mount(BNav, { propsData: { @@ -120,20 +79,6 @@ describe('nav', () => { expect(wrapper.text()).toBe('') }) - it("doesn't apply vertical style when in 'is-navbar-nav' mode", async () => { - const wrapper = mount(BNav, { - propsData: { - vertical: true, - isNavBar: true - } - }) - - expect(wrapper.is('ul')).toBe(true) - expect(wrapper.classes()).toContain('navbar-nav') - expect(wrapper.classes().length).toBe(1) - expect(wrapper.text()).toBe('') - }) - it('applies justify style when justified', async () => { const wrapper = mount(BNav, { propsData: { diff --git a/src/components/navbar/README.md b/src/components/navbar/README.md index eafe3aabf1d..ac35839c25c 100644 --- a/src/components/navbar/README.md +++ b/src/components/navbar/README.md @@ -158,9 +158,6 @@ securely aligned. - `` for navbar dropdown menus - `` for adding simple forms to the navbar. -**Note:** _The use of `` inside a `` has been deprecated. Use component -`` instead._ - ### `` `` is the primary link (and ``) component. Providing a `to` prop value will From a3c1f2ba710604ef0bbc1754b2221f6c51e4b63a Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 12:47:08 -0300 Subject: [PATCH 2/2] Update nav.js --- src/components/nav/nav.js | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/nav/nav.js b/src/components/nav/nav.js index 9853ff95823..28a1cc339ca 100644 --- a/src/components/nav/nav.js +++ b/src/components/nav/nav.js @@ -55,18 +55,16 @@ export const BNav = /*#__PURE__*/ Vue.extend({ return h( props.tag, mergeData(data, { - class: [ - 'nav', - { - 'nav-tabs': props.tabs, - 'nav-pills': props.pills, - 'flex-column': props.vertical, - 'nav-fill': !props.vertical && props.fill, - 'nav-justified': !props.vertical && props.justified, - [computeJustifyContent(props.align)]: !props.vertical && props.align, - small: props.small - } - ] + staticClass: 'nav', + class: { + 'nav-tabs': props.tabs, + 'nav-pills': props.pills, + 'flex-column': props.vertical, + 'nav-fill': !props.vertical && props.fill, + 'nav-justified': !props.vertical && props.justified, + [computeJustifyContent(props.align)]: !props.vertical && props.align, + small: props.small + } }), children )