@gitlab/ui 101.16.0 → 102.1.0

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

@@ -406,230 +406,6 @@ describe('form-checkbox', () => {
     wrapper.destroy()
   })
 
-  // --- Plain styling ---
-
-  it('plain has structure <div><input><label></label></div>', async () => {
-    const wrapper = mount(BFormCheckbox, {
-      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(BFormCheckbox, {
-      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 checkbox', async () => {
-    const wrapper = mount(BFormCheckbox, {
-      propsData: {
-        plain: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-
-    const $input = wrapper.find('input')
-    expect($input.attributes('type')).toBeDefined()
-    expect($input.attributes('type')).toEqual('checkbox')
-
-    wrapper.destroy()
-  })
-
-  it('plain has input class form-check-input', async () => {
-    const wrapper = mount(BFormCheckbox, {
-      propsData: {
-        plain: true,
-        checked: false
-      },
-      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(BFormCheckbox, {
-      propsData: {
-        plain: true,
-        checked: false
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-
-    const $label = wrapper.find('label')
-    expect($label.classes().length).toEqual(1)
-    expect($label.classes()).toContain('form-check-label')
-
-    wrapper.destroy()
-  })
-
-  it('plain has default slot content in label', async () => {
-    const wrapper = mount(BFormCheckbox, {
-      propsData: {
-        plain: true,
-        checked: false
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-
-    const $label = wrapper.find('label')
-    expect($label.text()).toEqual('foobar')
-
-    wrapper.destroy()
-  })
-
-  it('plain does not have class position-static when label provided', async () => {
-    const wrapper = mount(BFormCheckbox, {
-      propsData: {
-        plain: true,
-        checked: false
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-
-    expect(wrapper.find('input').classes()).not.toContain('position-static')
-
-    wrapper.destroy()
-  })
-
-  it('plain has no label when no default slot content', async () => {
-    const wrapper = mount(BFormCheckbox, {
-      propsData: {
-        plain: true,
-        checked: false
-      }
-    })
-
-    expect(wrapper.find('label').exists()).toBe(false)
-    expect(wrapper.find('input').classes()).toContain('position-static')
-
-    wrapper.destroy()
-  })
-
-  it('plain has no input validation classes by default', async () => {
-    const wrapper = mount(BFormCheckbox, {
-      propsData: {
-        plain: true,
-        checked: false
-      },
-      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(BFormCheckbox, {
-      propsData: {
-        state: null,
-        plain: true,
-        checked: false
-      },
-      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(BFormCheckbox, {
-      propsData: {
-        state: true,
-        plain: true,
-        checked: false
-      },
-      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(BFormCheckbox, {
-      propsData: {
-        state: false,
-        plain: true,
-        checked: false
-      },
-      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()
-  })
-
   // --- Switch styling - stand alone ---
 
   it('switch has structure <div><input><label></label></div>', async () => {
@@ -729,191 +505,6 @@ describe('form-checkbox', () => {
     wrapper.destroy()
   })
 
-  // --- Button styling - stand-alone mode ---
-
-  it('stand-alone button has structure <div><label><input></label></div>', async () => {
-    const wrapper = mount(BFormCheckbox, {
-      propsData: {
-        button: true,
-        checked: '',
-        value: 'a'
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-
-    expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('DIV')
-
-    const $labels = wrapper.element.children
-    expect($labels.length).toEqual(1)
-    expect($labels[0].tagName).toEqual('LABEL')
-
-    const $inputs = $labels[0].children
-    expect($inputs.length).toEqual(1)
-    expect($inputs[0].tagName).toEqual('INPUT')
-
-    wrapper.destroy()
-  })
-
-  it('stand-alone button has wrapper classes btn-group-toggle and d-inline-block', async () => {
-    const wrapper = mount(BFormCheckbox, {
-      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(BFormCheckbox, {
-      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(BFormCheckbox, {
-      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(BFormCheckbox, {
-      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(BFormCheckbox, {
-      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(BFormCheckbox, {
-      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()
-  })
-
   // --- Indeterminate testing ---
 
   it('does not have input indeterminate set by default', async () => {

package/src/vendor/bootstrap-vue/src/components/form-radio/README.md

@@ -341,133 +341,6 @@ Sizes can be set on individual `<b-form-radio>` components, or inherited from th
 **Note:** Bootstrap v4.x does not natively support sizes for the custom radio control. However,
 BootstrapVue includes custom SCSS/CSS that adds support for sizing the custom radios.
 
-## Button style radios
-
-Render radios with the look of buttons by setting the prop `buttons` to `true` on
-`<b-form-radio-group>`. Set the button variant by setting the `button-variant` prop to one of the
-standard Bootstrap button variants (see [`<gl-button>`](?path=/docs/base-button--docs) for supported
-variants). The default `button-variant` is `secondary`.
-
-The `buttons` prop has precedence over `plain`, and `button-variant` has no effect if `buttons` is
-not set.
-
-Button style radios will have the class `.active` automatically applied to their label when they are
-in the checked state.
-
-```html
-<template>
-  <div>
-    <b-form-group label="Button style radios" v-slot="{ ariaDescribedby }">
-      <b-form-radio-group
-        id="btn-radios-1"
-        v-model="selected"
-        :options="options"
-        :aria-describedby="ariaDescribedby"
-        name="radios-btn-default"
-        buttons
-      ></b-form-radio-group>
-    </b-form-group>
-
-    <b-form-group
-      label="Button style radios with outline-primary variant and size lg"
-      v-slot="{ ariaDescribedby }"
-    >
-      <b-form-radio-group
-        id="btn-radios-2"
-        v-model="selected"
-        :options="options"
-        :aria-describedby="ariaDescribedby"
-        button-variant="outline-primary"
-        size="lg"
-        name="radio-btn-outline"
-        buttons
-      ></b-form-radio-group>
-    </b-form-group>
-
-    <b-form-group label="Stacked button style radios" v-slot="{ ariaDescribedby }">
-      <b-form-radio-group
-        id="btn-radios-3"
-        v-model="selected"
-        :options="options"
-        :aria-describedby="ariaDescribedby"
-        name="radio-btn-stacked"
-        buttons
-        stacked
-      ></b-form-radio-group>
-    </b-form-group>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        selected: 'radio1',
-        options: [
-          { text: 'Radio 1', value: 'radio1' },
-          { text: 'Radio 3', value: 'radio2' },
-          { text: 'Radio 3 (disabled)', value: 'radio3', disabled: true },
-          { text: 'Radio 4', value: 'radio4' }
-        ]
-      }
-    }
-  }
-</script>
-
-<!-- b-form-radio-buttons.vue -->
-```
-
-## Non-custom style radio inputs (plain)
-
-You can have `<b-form-radio>` and `<b-form-radio-group>` render a browser native-styled radio input
-by setting the `plain` prop.
-
-```html
-<template>
-  <div>
-    <b-form-group label="Plain inline radios" v-slot="{ ariaDescribedby }">
-      <b-form-radio-group
-        v-model="selected"
-        :options="options"
-        :aria-describedby="ariaDescribedby"
-        name="plain-inline"
-        plain
-      ></b-form-radio-group>
-    </b-form-group>
-
-    <b-form-group label="Plain stacked radios" v-slot="{ ariaDescribedby }">
-      <b-form-radio-group
-        v-model="selected"
-        :options="options"
-        :aria-describedby="ariaDescribedby"
-        name="plain-stacked"
-        plain
-        stacked
-      ></b-form-radio-group>
-    </b-form-group>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        selected: 'first',
-        options: [
-          { text: 'First radio', value: 'first' },
-          { text: 'Second radio', value: 'second' },
-          { text: 'Third radio', value: 'third' }
-        ]
-      }
-    }
-  }
-</script>
-
-<!-- b-form-radio-plain.vue -->
-```
-
-**Note:** `plain` will have no effect if `buttons`/`button` is set.
-
 ## Required constraint
 
 When using individual `<b-form-radio>` components (not in a `<b-form-radio-group>`), and you want
@@ -503,8 +376,6 @@ Generally speaking, you'll want to use a particular state for specific types of
 To apply one of the contextual state icons on `<b-form-radio>`, set the `state` prop to `false` (for
 invalid), `true` (for valid), or `null` (no validation state).
 
-**Note:** Contextual state is not supported for radios rendered in buttons mode.
-
 ### Contextual state with feedback example
 
 ```html

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

@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { waitNT } from '../../../tests/utils'
 import { BFormRadioGroup } from './form-radio-group'
-import { BFormRadio } from './form-radio'
 
 describe('form-radio-group', () => {
   // --- Structure, class and attributes tests ---
@@ -221,117 +220,6 @@ describe('form-radio-group', () => {
     wrapper.destroy()
   })
 
-  // --- Button mode structure ---
-
-  it('button mode has classes button-group and button-group-toggle', async () => {
-    const wrapper = mount(BFormRadioGroup, {
-      attachTo: document.body,
-      propsData: {
-        buttons: true
-      }
-    })
-    expect(wrapper.classes()).toBeDefined()
-    expect(wrapper.classes().length).toBe(3)
-    expect(wrapper.classes()).toContain('btn-group')
-    expect(wrapper.classes()).toContain('btn-group-toggle')
-    expect(wrapper.classes()).toContain('bv-no-focus-ring')
-
-    wrapper.destroy()
-  })
-
-  it('button mode has classes button-group-vertical and button-group-toggle when stacked=true', async () => {
-    const wrapper = mount(BFormRadioGroup, {
-      attachTo: document.body,
-      propsData: {
-        buttons: true,
-        stacked: true
-      }
-    })
-    expect(wrapper.classes()).toBeDefined()
-    expect(wrapper.classes().length).toBe(3)
-    expect(wrapper.classes()).toContain('btn-group-vertical')
-    expect(wrapper.classes()).toContain('btn-group-toggle')
-    expect(wrapper.classes()).toContain('bv-no-focus-ring')
-
-    wrapper.destroy()
-  })
-
-  it('button mode has size class when size prop set', async () => {
-    const wrapper = mount(BFormRadioGroup, {
-      attachTo: document.body,
-      propsData: {
-        buttons: true,
-        size: 'lg'
-      }
-    })
-    expect(wrapper.classes()).toBeDefined()
-    expect(wrapper.classes().length).toBe(4)
-    expect(wrapper.classes()).toContain('btn-group')
-    expect(wrapper.classes()).toContain('btn-group-toggle')
-    expect(wrapper.classes()).toContain('btn-group-lg')
-    expect(wrapper.classes()).toContain('bv-no-focus-ring')
-
-    wrapper.destroy()
-  })
-
-  it('button mode has size class when size prop set and stacked', async () => {
-    const wrapper = mount(BFormRadioGroup, {
-      attachTo: document.body,
-      propsData: {
-        buttons: true,
-        stacked: true,
-        size: 'lg'
-      }
-    })
-    expect(wrapper.classes()).toBeDefined()
-    expect(wrapper.classes().length).toBe(4)
-    expect(wrapper.classes()).toContain('btn-group-vertical')
-    expect(wrapper.classes()).toContain('btn-group-toggle')
-    expect(wrapper.classes()).toContain('btn-group-lg')
-    expect(wrapper.classes()).toContain('bv-no-focus-ring')
-
-    wrapper.destroy()
-  })
-
-  it('button mode button-variant works', async () => {
-    const App = {
-      render(h) {
-        return h(
-          BFormRadioGroup,
-          {
-            props: {
-              checked: '',
-              buttons: true,
-              buttonVariant: 'primary'
-            }
-          },
-          [
-            h(BFormRadio, { props: { value: 'one' } }, 'button 1'),
-            h(BFormRadio, { props: { value: 'two' } }, 'button 2'),
-            h(BFormRadio, { props: { value: 'three', buttonVariant: 'danger' } }, 'button 3')
-          ]
-        )
-      }
-    }
-
-    const wrapper = mount(App, {
-      attachTo: document.body
-    })
-    expect(wrapper).toBeDefined()
-    await waitNT(wrapper.vm)
-
-    // Find all the labels with .btn class
-    const btns = wrapper.findAll('label.btn')
-    expect(btns).toBeDefined()
-    expect(btns.length).toBe(3)
-    // Expect them to have the correct variant classes
-    expect(btns.at(0).classes()).toContain('btn-primary')
-    expect(btns.at(1).classes()).toContain('btn-primary')
-    expect(btns.at(2).classes()).toContain('btn-danger')
-
-    wrapper.destroy()
-  })
-
   // --- Functionality testing ---
 
   it('has radios via options array', async () => {