Skip to content
Permalink
Browse files

feat(b-nav, b-nav-item-dropdown): remove deprecated slot and props (#…

  • Loading branch information...
jackmu95 authored and tmorehouse committed Aug 13, 2019
1 parent 90c299c commit 21fab353f2bbaa4a5698bc646bfb99213117a916
@@ -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 `<b-nav-item-dropdown>` 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 [`<b-tabs>`](/docs/components/tabs) component for creating tabbable panes of local content
@@ -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) {
@@ -3,9 +3,6 @@ import { mergeData } from 'vue-functional-data-merge'

// -- Constants --

const DEPRECATED_MSG =
'Setting prop "is-nav-bar" is deprecated. Use the <b-navbar-nav> 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,12 +55,11 @@ export const BNav = /*#__PURE__*/ Vue.extend({
return h(
props.tag,
mergeData(data, {
staticClass: 'nav',
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-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,
@@ -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: {
@@ -158,9 +158,6 @@ securely aligned.
- `<b-nav-item-dropdown>` for navbar dropdown menus
- `<b-nav-form>` for adding simple forms to the navbar.

**Note:** _The use of `<b-nav is-nav-bar>` inside a `<b-navbar>` has been deprecated. Use component
`<b-navbar-nav>` instead._

### `<b-nav-item>`

`<b-nav-item>` is the primary link (and `<router-link>`) component. Providing a `to` prop value will

0 comments on commit 21fab35

Please sign in to comment.
You can’t perform that action at this time.