@gitlab/ui 101.16.0 → 102.0.0

package/src/vendor/bootstrap-vue/src/components/form-radio/form-radio.spec.js

@@ -369,371 +369,6 @@ describe('form-radio', () => {
     wrapper.destroy()
   })
 
-  // --- Plain styling ---
-
-  it('plain has structure <div><input><label></label></div>', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        plain: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    const children = wrapper.element.children
-    expect(children.length).toEqual(2)
-    expect(children[0].tagName).toEqual('INPUT')
-    expect(children[1].tagName).toEqual('LABEL')
-
-    wrapper.destroy()
-  })
-
-  it('plain has wrapper class form-check', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        plain: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    expect(wrapper.classes().length).toEqual(1)
-    expect(wrapper.classes()).toContain('form-check')
-
-    wrapper.destroy()
-  })
-
-  it('plain has input type radio', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        plain: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const input = wrapper.find('input')
-    expect(input.attributes('type')).toBeDefined()
-    expect(input.attributes('type')).toEqual('radio')
-
-    wrapper.destroy()
-  })
-
-  it('plain has input class form-check-input', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        plain: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const input = wrapper.find('input')
-    expect(input.classes().length).toEqual(1)
-    expect(input.classes()).toContain('form-check-input')
-
-    wrapper.destroy()
-  })
-
-  it('plain has label class form-check-label', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        plain: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const input = wrapper.find('label')
-    expect(input.classes().length).toEqual(1)
-    expect(input.classes()).toContain('form-check-label')
-
-    wrapper.destroy()
-  })
-
-  it('plain has default slot content in label', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        plain: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const label = wrapper.find('label')
-    expect(label.text()).toEqual('foobar')
-
-    wrapper.destroy()
-  })
-
-  it('plain has no input validation classes by default', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        plain: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const input = wrapper.find('input')
-    expect(input).toBeDefined()
-    expect(input.classes()).not.toContain('is-invalid')
-    expect(input.classes()).not.toContain('is-valid')
-
-    wrapper.destroy()
-  })
-
-  it('plain has no input validation classes when state=null', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        state: null,
-        plain: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const input = wrapper.find('input')
-    expect(input).toBeDefined()
-    expect(input.classes()).not.toContain('is-invalid')
-    expect(input.classes()).not.toContain('is-valid')
-
-    wrapper.destroy()
-  })
-
-  it('plain has input validation class is-valid when state=true', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        state: true,
-        plain: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const input = wrapper.find('input')
-    expect(input).toBeDefined()
-    expect(input.classes()).not.toContain('is-invalid')
-    expect(input.classes()).toContain('is-valid')
-
-    wrapper.destroy()
-  })
-
-  it('plain has input validation class is-invalid when state=false', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        state: false,
-        plain: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const input = wrapper.find('input')
-    expect(input).toBeDefined()
-    expect(input.classes()).toContain('is-invalid')
-    expect(input.classes()).not.toContain('is-valid')
-
-    wrapper.destroy()
-  })
-
-  // --- Button styling - stand-alone mode ---
-
-  it('stand-alone button has structure <div><label><input></label></div>', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        button: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-    const label = wrapper.element.children
-    expect(label.length).toEqual(1)
-    expect(label[0].tagName).toEqual('LABEL')
-    const input = label[0].children
-    expect(input.length).toEqual(1)
-    expect(input[0].tagName).toEqual('INPUT')
-
-    wrapper.destroy()
-  })
-
-  it('stand-alone button has wrapper classes btn-group-toggle and d-inline-block', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        button: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    expect(wrapper.classes().length).toEqual(2)
-    expect(wrapper.classes()).toContain('btn-group-toggle')
-    expect(wrapper.classes()).toContain('d-inline-block')
-
-    wrapper.destroy()
-  })
-
-  it('stand-alone button has label classes btn and btn-secondary when unchecked', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        button: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const label = wrapper.find('label')
-    expect(label).toBeDefined()
-    expect(label.classes().length).toEqual(2)
-    expect(label.classes()).not.toContain('active')
-    expect(label.classes()).not.toContain('focus')
-    expect(label.classes()).toContain('btn')
-    expect(label.classes()).toContain('btn-secondary')
-
-    wrapper.destroy()
-  })
-
-  it('stand-alone button has label classes btn, btn-secondary and active when checked by default', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        button: true,
-        checked: 'a',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const label = wrapper.find('label')
-    expect(label).toBeDefined()
-    expect(label.classes().length).toEqual(3)
-    expect(label.classes()).not.toContain('focus')
-    expect(label.classes()).toContain('btn')
-    expect(label.classes()).toContain('btn-secondary')
-    expect(label.classes()).toContain('active')
-
-    wrapper.destroy()
-  })
-
-  it('stand-alone button has label class active when clicked (checked)', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        button: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const label = wrapper.find('label')
-    expect(label).toBeDefined()
-    const input = wrapper.find('input')
-    expect(input).toBeDefined()
-    expect(label.classes().length).toEqual(2)
-    expect(label.classes()).not.toContain('focus')
-    expect(label.classes()).not.toContain('active')
-    expect(label.classes()).toContain('btn')
-    expect(label.classes()).toContain('btn-secondary')
-    await input.setChecked(true)
-    expect(label.classes().length).toEqual(3)
-    expect(label.classes()).toContain('active')
-    expect(label.classes()).toContain('btn')
-    expect(label.classes()).toContain('btn-secondary')
-
-    wrapper.destroy()
-  })
-
-  it('stand-alone button has label class focus when input focused', async () => {
-    const wrapper = mount(BFormRadio, {
-      attachTo: document.body,
-      propsData: {
-        button: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-
-    const label = wrapper.find('label')
-    expect(label).toBeDefined()
-
-    const input = wrapper.find('input')
-    expect(label.classes().length).toEqual(2)
-    expect(label.classes()).not.toContain('focus')
-    expect(label.classes()).not.toContain('active')
-    expect(label.classes()).toContain('btn')
-    expect(label.classes()).toContain('btn-secondary')
-    expect(input).toBeDefined()
-
-    await input.trigger('focus')
-    expect(label.classes().length).toEqual(3)
-    expect(label.classes()).toContain('focus')
-
-    await input.trigger('blur')
-    expect(label.classes().length).toEqual(2)
-    expect(label.classes()).not.toContain('focus')
-
-    wrapper.destroy()
-  })
-
-  it('stand-alone button has label btn-primary when prop btn-variant set to primary', async () => {
-    const wrapper = mount(BFormRadio, {
-      propsData: {
-        button: true,
-        buttonVariant: 'primary',
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const label = wrapper.find('label')
-    expect(label).toBeDefined()
-    expect(label.classes().length).toEqual(2)
-    expect(label.classes()).not.toContain('focus')
-    expect(label.classes()).not.toContain('active')
-    expect(label.classes()).not.toContain('btn-secondary')
-    expect(label.classes()).toContain('btn')
-    expect(label.classes()).toContain('btn-primary')
-
-    wrapper.destroy()
-  })
-
   // --- Functionality testing ---
 
   it('default has internal localChecked="" when prop checked=""', async () => {

package/src/vendor/bootstrap-vue/src/components/nav/README.md

@@ -144,24 +144,6 @@ and `right`.
 <!-- b-nav-alignment.vue -->
 ```
 
-## Vertical variation
-
-By default `<b-nav>` appear on a horizontal line. Stack your navigation by setting the `vertical`
-prop.
-
-```html
-<div>
-  <b-nav vertical class="w-25">
-    <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-vertical.vue -->
-```
-
 ## Dropdown support
 
 Use `<b-nav-item-dropdown>` to place dropdown items within your nav.
@@ -371,8 +353,6 @@ Bootstrap v4 SCSS does not have special styling for `active` state plain style n
 <!-- nav-card-plain.vue -->
 ```
 
-The `card-header` prop has no styling effect if the `<b-nav>` is in `vertical` mode.
-
 ### Using with Vue Router
 
 Have your card `<b-nav>` control vue router nested routes via `<router-view>` or `<nuxt-child>`

package/src/vendor/bootstrap-vue/src/components/nav/nav.js

@@ -22,8 +22,7 @@ export const props = makePropsConfigurable(
     pills: makeProp(PROP_TYPE_BOOLEAN, false),
     small: makeProp(PROP_TYPE_BOOLEAN, false),
     tabs: makeProp(PROP_TYPE_BOOLEAN, false),
-    tag: makeProp(PROP_TYPE_STRING, 'ul'),
-    vertical: makeProp(PROP_TYPE_BOOLEAN, false)
+    tag: makeProp(PROP_TYPE_STRING, 'ul')
   },
   NAME_NAV
 )
@@ -36,7 +35,7 @@ export const BNav = /*#__PURE__*/ extend({
   functional: true,
   props,
   render(h, { props, data, children }) {
-    const { tabs, pills, vertical, align, cardHeader } = props
+    const { tabs, pills, align, cardHeader } = props
 
     return h(
       props.tag,
@@ -45,12 +44,11 @@ export const BNav = /*#__PURE__*/ extend({
         class: {
           'nav-tabs': tabs,
           'nav-pills': pills && !tabs,
-          'card-header-tabs': !vertical && cardHeader && tabs,
-          'card-header-pills': !vertical && cardHeader && pills && !tabs,
-          'flex-column': vertical,
-          'nav-fill': !vertical && props.fill,
-          'nav-justified': !vertical && props.justified,
-          [computeJustifyContent(align)]: !vertical && align,
+          'card-header-tabs': cardHeader && tabs,
+          'card-header-pills': cardHeader && pills && !tabs,
+          'nav-fill': props.fill,
+          'nav-justified': props.justified,
+          [computeJustifyContent(align)]: align,
           small: props.small
         }
       }),

package/src/vendor/bootstrap-vue/src/components/nav/nav.spec.js

@@ -75,22 +75,6 @@ describe('nav', () => {
     wrapper.destroy()
   })
 
-  it('applies vertical style', async () => {
-    const wrapper = mount(BNav, {
-      propsData: {
-        vertical: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('UL')
-    expect(wrapper.classes()).toContain('nav')
-    expect(wrapper.classes()).toContain('flex-column')
-    expect(wrapper.classes().length).toBe(2)
-    expect(wrapper.text()).toBe('')
-
-    wrapper.destroy()
-  })
-
   it('applies justify style when justified', async () => {
     const wrapper = mount(BNav, {
       propsData: {
@@ -107,23 +91,6 @@ describe('nav', () => {
     wrapper.destroy()
   })
 
-  it("doesn't apply justify style when vertical", async () => {
-    const wrapper = mount(BNav, {
-      propsData: {
-        justified: true,
-        vertical: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('UL')
-    expect(wrapper.classes()).toContain('nav')
-    expect(wrapper.classes()).toContain('flex-column')
-    expect(wrapper.classes().length).toBe(2)
-    expect(wrapper.text()).toBe('')
-
-    wrapper.destroy()
-  })
-
   it('applies fill style style when fill set', async () => {
     const wrapper = mount(BNav, {
       propsData: {
@@ -140,23 +107,6 @@ describe('nav', () => {
     wrapper.destroy()
   })
 
-  it("doesn't apply fill style when vertical", async () => {
-    const wrapper = mount(BNav, {
-      propsData: {
-        fill: true,
-        vertical: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('UL')
-    expect(wrapper.classes()).toContain('nav')
-    expect(wrapper.classes()).toContain('flex-column')
-    expect(wrapper.classes().length).toBe(2)
-    expect(wrapper.text()).toBe('')
-
-    wrapper.destroy()
-  })
-
   it('applies alignment correctly', async () => {
     const wrapper = mount(BNav, {
       propsData: {
@@ -173,23 +123,6 @@ describe('nav', () => {
     wrapper.destroy()
   })
 
-  it("doesn't apply alignment when vertical", async () => {
-    const wrapper = mount(BNav, {
-      propsData: {
-        align: 'center',
-        vertical: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('UL')
-    expect(wrapper.classes()).toContain('nav')
-    expect(wrapper.classes()).toContain('flex-column')
-    expect(wrapper.classes().length).toBe(2)
-    expect(wrapper.text()).toBe('')
-
-    wrapper.destroy()
-  })
-
   it('applies small style', async () => {
     const wrapper = mount(BNav, {
       propsData: {