@gitlab/ui 101.16.0 → 102.1.0

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

@@ -100,42 +100,6 @@ describe('button', () => {
     wrapper.destroy()
   })
 
-  it('applies rounded-pill class when pill prop set', async () => {
-    const wrapper = mount(BButton, {
-      propsData: {
-        pill: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('BUTTON')
-    expect(wrapper.attributes('type')).toBeDefined()
-    expect(wrapper.attributes('type')).toBe('button')
-    expect(wrapper.classes()).toContain('btn')
-    expect(wrapper.classes()).toContain('btn-secondary')
-    expect(wrapper.classes()).toContain('rounded-pill')
-    expect(wrapper.classes().length).toBe(3)
-
-    wrapper.destroy()
-  })
-
-  it('applies rounded-0 class when squared prop set', async () => {
-    const wrapper = mount(BButton, {
-      propsData: {
-        squared: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('BUTTON')
-    expect(wrapper.attributes('type')).toBeDefined()
-    expect(wrapper.attributes('type')).toBe('button')
-    expect(wrapper.classes()).toContain('btn')
-    expect(wrapper.classes()).toContain('btn-secondary')
-    expect(wrapper.classes()).toContain('rounded-0')
-    expect(wrapper.classes().length).toBe(3)
-
-    wrapper.destroy()
-  })
-
   it('renders custom root element', async () => {
     const wrapper = mount(BButton, {
       propsData: {

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

@@ -1,6 +1,5 @@
 import { extend } from '../../vue'
 import { NAME_COLLAPSE } from '../../constants/components'
-import { CLASS_NAME_SHOW } from '../../constants/classes'
 import {
   EVENT_NAME_HIDDEN,
   EVENT_NAME_HIDE,
@@ -20,6 +19,7 @@ import { normalizeSlotMixin } from '../../mixins/normalize-slot'
 import { BVCollapse } from './helpers/bv-collapse'
 
 // --- Constants ---
+const CLASS_NAME_SHOW = 'show'
 
 const ROOT_ACTION_EVENT_NAME_TOGGLE = getRootActionEventName(NAME_COLLAPSE, 'toggle')
 const ROOT_ACTION_EVENT_NAME_REQUEST_STATE = getRootActionEventName(NAME_COLLAPSE, 'request-state')

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

@@ -364,128 +364,10 @@ Whenever using multiple checkboxes, it is recommended that the checkboxes be pla
 [`<gl-form-group>`](?path=/docs/base-form-form-group--docs) component to associate a label with the
 entire group of checkboxes. See examples above.
 
-## Button style checkboxes
-
-You can optionally render checkboxes to appear as buttons, either individually, or in a group.
-
-Button style checkboxes will have the class `.active` automatically applied to the label when they
-are in the _checked_ state.
-
-### Individual checkbox button style
-
-A single checkbox can be rendered with a button appearance by setting the prop `button` to `true`
-
-Change 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 variant is `secondary`.
-
-```html
-<template>
-  <div>
-    <b-form-checkbox v-model="checked1" name="check-button" button>
-      Button Checkbox <b>(Checked: {{ checked1 }})</b>
-    </b-form-checkbox>
-    <b-form-checkbox v-model="checked2" name="check-button" button button-variant="info">
-      Button Checkbox <b>(Checked: {{ checked2 }})</b>
-    </b-form-checkbox>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        checked1: false,
-        checked2: false
-      }
-    }
-  }
-</script>
-
-<!-- b-form-checkbox-button.vue -->
-```
-
-The `inline` prop has no effect on individual button-style checkboxes.
-
-### Grouped button style checkboxes
-
-Render groups of checkboxes with the look of a button-group by setting the prop `buttons` on
-`<b-form-checkbox-group>`. Change 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`.
-
-```html
-<template>
-  <div>
-    <b-form-group
-      label="Button-group style checkboxes"
-      v-slot="{ ariaDescribedby }"
-    >
-      <b-form-checkbox-group
-        v-model="selected"
-        :options="options"
-        :aria-describedby="ariaDescribedby"
-        name="buttons-1"
-        buttons
-      ></b-form-checkbox-group>
-    </b-form-group>
-
-    <b-form-group
-      label="Button-group style checkboxes with variant primary and large buttons"
-      v-slot="{ ariaDescribedby }"
-    >
-      <b-form-checkbox-group
-        v-model="selected"
-        :options="options"
-        :aria-describedby="ariaDescribedby"
-        buttons
-        button-variant="primary"
-        size="lg"
-        name="buttons-2"
-      ></b-form-checkbox-group>
-    </b-form-group>
-
-    <b-form-group
-      label="Stacked (vertical) button-group style checkboxes"
-      v-slot="{ ariaDescribedby }"
-    >
-      <b-form-checkbox-group
-        v-model="selected"
-        :options="options"
-        :aria-describedby="ariaDescribedby"
-        stacked
-        buttons
-      ></b-form-checkbox-group>
-    </b-form-group>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        selected: [], // Must be an array reference!
-        options: [
-          { text: 'Orange', value: 'orange' },
-          { text: 'Apple', value: 'apple' },
-          { text: 'Pineapple', value: 'pineapple' },
-          { text: 'Grape', value: 'grape' }
-        ]
-      }
-    }
-  }
-</script>
-
-<!-- b-form-checkbox-button-group.vue -->
-```
-
 ## Switch style checkboxes
 
 Switch styling is supported on `<b-form-checkbox>` and `<b-form-checkbox-group>` components.
 
-**Note:** If the checkbox is in [button mode](#button-style-checkboxes), switch mode will have no
-effect.
-
 ### Individual checkbox switch style
 
 A single checkbox can be rendered with a switch appearance by setting the prop `switch` to `true`
@@ -587,56 +469,6 @@ Sizes can be set on individual `<b-form-checkbox>` components, or inherited from
 **Note:** Bootstrap v4.x does not natively support sizes for the custom switch control. However,
 BootstrapVue includes custom SCSS/CSS that adds support for sizing the custom switches.
 
-## Non custom check inputs (plain)
-
-You can have `<b-form-checkbox-group>` or `<b-form-checkbox>` render a browser native checkbox input
-by setting the `plain` prop.
-
-```html
-<template>
-  <div>
-    <b-form-group label="Plain inline checkboxes" v-slot="{ ariaDescribedby }">
-      <b-form-checkbox-group
-        v-model="selected"
-        :options="options"
-        :aria-describedby="ariaDescribedby"
-        plain
-      ></b-form-checkbox-group>
-    </b-form-group>
-
-    <b-form-group label="Plain stacked checkboxes" v-slot="{ ariaDescribedby }">
-      <b-form-checkbox-group
-        v-model="selected"
-        :options="options"
-        :aria-describedby="ariaDescribedby"
-        plain
-        stacked
-      ></b-form-checkbox-group>
-    </b-form-group>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        selected: [], // Must be an array reference!
-        options: [
-          { text: 'Orange', value: 'orange' },
-          { text: 'Apple', value: 'apple' },
-          { text: 'Pineapple', value: 'pineapple' },
-          { text: 'Grape', value: 'grape' }
-        ]
-      }
-    }
-  }
-</script>
-
-<!-- b-form-checkbox-plain.vue -->
-```
-
-**Note:** The `plain` prop has no effect when `button` or `buttons` is set.
-
 ## Contextual states
 
 Bootstrap includes validation styles for `valid` and `invalid` states on most form controls.
@@ -652,8 +484,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-checkbox>`, set the `state` prop to `false`
 (for invalid), `true` (for valid), or `null` (no validation state).
 
-**Note:** Contextual states are **not** supported when in button mode.
-
 ### Contextual state and validation example
 
 ```html
@@ -732,7 +562,7 @@ better make sense in your UI!
 prop can be synced to the checkbox's state by v-binding the `indeterminate` prop with the `.sync`
 modifier.
 
-**Note:** indeterminate styling is not supported in button or switch mode, nor is it supported in
+**Note:** indeterminate styling is not supported in switch mode, nor is it supported in
 `<b-form-checkbox-group>` (multiple checkboxes).
 
 **Single Indeterminate checkbox:**
@@ -849,9 +679,8 @@ modifier.
 <!-- b-form-checkbox-indeterminate-multiple.vue -->
 ```
 
-**Note:** indeterminate is not supported in `button` mode, nor in multiple checkbox mode. Also pay
-attention that plain checkbox (i.e. with prop `plain`) also supports indeterminate state on
-Windows/Linux/Mac/Android, but not on iOS.
+**Note:** Pay attention that plain checkbox (i.e. with prop `plain`) also supports indeterminate
+state on Windows/Linux/Mac/Android, but not on iOS.
 
 ### Indeterminate state and accessibility
 

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

@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { waitNT } from '../../../tests/utils'
 import { BFormCheckboxGroup } from './form-checkbox-group'
-import { BFormCheckbox } from './form-checkbox'
 
 describe('form-checkbox-group', () => {
   // --- Structure, class and attributes tests ---
@@ -238,122 +237,6 @@ describe('form-checkbox-group', () => {
     wrapper.destroy()
   })
 
-  // --- Button mode structure ---
-
-  it('button mode has classes button-group and button-group-toggle', async () => {
-    const wrapper = mount(BFormCheckboxGroup, {
-      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(BFormCheckboxGroup, {
-      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(BFormCheckboxGroup, {
-      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(BFormCheckboxGroup, {
-      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(
-          BFormCheckboxGroup,
-          {
-            props: {
-              checked: [],
-              buttons: true,
-              buttonVariant: 'primary'
-            }
-          },
-          [
-            h(BFormCheckbox, { props: { value: 'one' } }, 'button 1'),
-            h(BFormCheckbox, { props: { value: 'two' } }, 'button 2'),
-            h(BFormCheckbox, { 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 checkboxes via options array', async () => {