bootstrap-vue · jacobmllr95 · Apr 16, 2019 · Apr 9, 2019 · Apr 9, 2019 · Apr 9, 2019
diff --git a/src/components/nav/README.md b/src/components/nav/README.md
@@ -30,7 +30,7 @@ variants are mutually exclusive - use only one style or the other.
 
 ### Tab style
 
-Make the nav look like tabs by setting the prop `tabs`.
+Make the nav look like tabs by setting the `tabs` prop.
 
 ```html
 <div>
@@ -47,7 +47,7 @@ Make the nav look like tabs by setting the prop `tabs`.
 
 ### Pill style
 
-Use the pill style by setting the prop `pills`.
+Use the pill style by setting the `pills` prop.
 
 ```html
 <div>
@@ -62,9 +62,26 @@ Use the pill style by setting the prop `pills`.
 <!-- b-nav-pills.vue -->
 ```
 
+### Small
+
+Make the nav smaller by setting the `small` prop.
+
+```html
+<div>
+  <b-nav small>
+    <b-nav-item active>Active</b-nav-item>
+    <b-nav-item>Link</b-nav-item>
+    <b-nav-item>Another Link</b-nav-item>
+    <b-nav-item disabled>Disabled</b-nav-item>
+  </b-nav>
+</div>
+
+<!-- b-nav-small.vue -->
+```
+
 ## Fill and justify
 
-Force your `b-nav` content to extend the full available width.
+Force your `<b-nav>` content to extend the full available width.
 
 ### Fill
 
@@ -73,7 +90,7 @@ prop. Notice that all horizontal space is occupied, but not every nav item has t
 
 ```html
 <div>
-  <b-nav fill tabs>
+  <b-nav tabs fill>
     <b-nav-item active>Active</b-nav-item>
     <b-nav-item>Link</b-nav-item>
     <b-nav-item>Link with a long name </b-nav-item>
@@ -86,12 +103,12 @@ prop. Notice that all horizontal space is occupied, but not every nav item has t
 
 ### Justified
 
-For equal-width elements, set prop `justified` instead. All horizontal space will be occupied by nav
-links, but unlike `fill` above, every `<b-nav-item>` will be the same width.
+For equal-width elements, set the `justified` prop instead. All horizontal space will be occupied by
+nav links, but unlike `fill` above, every `<b-nav-item>` will be the same width.
 
 ```html
 <div>
-  <b-nav justified tabs>
+  <b-nav tabs justified>
     <b-nav-item active>Active</b-nav-item>
     <b-nav-item>Link</b-nav-item>
     <b-nav-item>Link with a long name </b-nav-item>
@@ -102,6 +119,24 @@ links, but unlike `fill` above, every `<b-nav-item>` will be the same width.
 <!-- b-nav-justified.vue -->
 ```
 
+## Alignment
+
+To align your `<b-nav-item>` components, use the `align` prop. Available values are `left`, `center`
+and `right`.
+
+```html
+<div>
+  <b-nav tabs align="center">
+    <b-nav-item active>Active</b-nav-item>
+    <b-nav-item>Link</b-nav-item>
+    <b-nav-item>Link with a long name </b-nav-item>
+    <b-nav-item disabled>Disabled</b-nav-item>
+  </b-nav>
+</div>
+
+<!-- b-nav-alignment.vue -->
+```
+
 ## Vertical variation
 
 By default `<b-nav>` appear on a horizontal line. Stack your navigation by setting the `vertical`

diff --git a/src/components/nav/nav-form.js b/src/components/nav/nav-form.js
@@ -1,14 +1,9 @@
 import Vue from 'vue'
-import BForm, { props as BFormProps } from '../form/form'
 import { mergeData } from 'vue-functional-data-merge'
-import copyProps from '../../utils/copy-props'
-
-const formProps = copyProps(BFormProps)
-delete formProps.inline
+import BForm, { props as BFormProps } from '../form/form'
+import { omit } from '../../utils/object'
 
-export const props = {
-  ...formProps
-}
+export const props = omit(BFormProps, ['inline'])
 
 // @vue/component
 export default Vue.extend({

diff --git a/src/components/nav/nav.js b/src/components/nav/nav.js
@@ -1,6 +1,10 @@
 import Vue from 'vue'
 import { mergeData } from 'vue-functional-data-merge'
-import warn from '../../utils/warn'
+
+// -- Constants --
+
+const DEPRECATED_MSG =
+  'Setting prop "is-nav-bar" is deprecated. Use the <b-navbar-nav> component instead.'
 
 export const props = {
   tag: {
@@ -15,6 +19,10 @@ export const props = {
     type: Boolean,
     default: false
   },
+  align: {
+    type: String,
+    default: null
+  },
   tabs: {
     type: Boolean,
     default: false
@@ -27,22 +35,33 @@ export const props = {
     type: Boolean,
     default: false
   },
-  isNavBar: {
+  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
   }
 }
 
+// -- Utils --
+
+const computeJustifyContent = value => {
+  // Normalize value
+  value = value === 'left' ? 'start' : value === 'right' ? 'end' : value
+  return `justify-content-${value}`
+}
+
 // @vue/component
 export default Vue.extend({
   name: 'BNav',
   functional: true,
   props,
   render(h, { props, data, children }) {
-    if (props.isNavBar) {
-      /* istanbul ignore next */
-      warn("b-nav: Prop 'is-nav-bar' is deprecated. Please use component '<b-navbar-nav>' instead.")
-    }
     return h(
       props.tag,
       mergeData(data, {
@@ -52,8 +71,10 @@ export default Vue.extend({
           'nav-tabs': props.tabs && !props.isNavBar,
           'nav-pills': props.pills && !props.isNavBar,
           'flex-column': props.vertical && !props.isNavBar,
-          'nav-fill': props.fill,
-          'nav-justified': props.justified
+          '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
@@ -37,6 +37,19 @@ 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: {
@@ -51,6 +64,20 @@ 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: {
@@ -65,7 +92,21 @@ describe('nav', () => {
     expect(wrapper.text()).toBe('')
   })
 
-  it('applies flex-column style when vertical', async () => {
+  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: {
         vertical: true
@@ -79,6 +120,20 @@ 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: {
@@ -93,6 +148,21 @@ describe('nav', () => {
     expect(wrapper.text()).toBe('')
   })
 
+  it("doesn't apply justify style when vertical", async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        justified: true,
+        vertical: true
+      }
+    })
+
+    expect(wrapper.is('ul')).toBe(true)
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('flex-column')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+  })
+
   it('applies fill style style when fill set', async () => {
     const wrapper = mount(BNav, {
       propsData: {
@@ -106,4 +176,62 @@ describe('nav', () => {
     expect(wrapper.classes().length).toBe(2)
     expect(wrapper.text()).toBe('')
   })
+
+  it("doesn't apply fill style when vertical", async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        fill: true,
+        vertical: true
+      }
+    })
+
+    expect(wrapper.is('ul')).toBe(true)
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('flex-column')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('applies alignment correctly', async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        align: 'center'
+      }
+    })
+
+    expect(wrapper.is('ul')).toBe(true)
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('justify-content-center')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+  })
+
+  it("doesn't apply alignment when vertical", async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        align: 'center',
+        vertical: true
+      }
+    })
+
+    expect(wrapper.is('ul')).toBe(true)
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('flex-column')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('applies small style', async () => {
+    const wrapper = mount(BNav, {
+      propsData: {
+        small: true
+      }
+    })
+
+    expect(wrapper.is('ul')).toBe(true)
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('small')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+  })
 })
diff --git a/src/components/nav/package.json b/src/components/nav/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "meta": {
     "title": "Nav",
+    "enhanced": true,
     "description": "Navigation components that share general markup and styles, from the base <b-nav> class to the active and disabled states. Swap modifier props to switch between each style.",
     "plugins": [
       "Dropdown"