@gitlab/ui 101.15.0 → 102.0.0

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.vue

@@ -106,6 +106,9 @@ export default {
       if (this.contextItem.category !== CONTEXT_ITEM_CATEGORY_DEPENDENCY) {
         return null;
       }
+      if (!this.contextItem.content) {
+        return null;
+      }
 
       try {
         return JSON.parse(this.contextItem.content);

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.scss

@@ -3,7 +3,8 @@
   @apply gl-text-gray-500;
 
   .transition {
-    transition: width 0.5s ease;
+    @include gl-prefers-reduced-motion-transition;
+    transition: width 200ms $gl-easing-out-cubic;
   }
 
   .text-enter {
@@ -11,7 +12,8 @@
   }
 
   .text-enter-active {
-    transition: opacity 1s ease-in; // we intentionally overlap this transition with .text-leave-active by 200ms
+    @include gl-prefers-reduced-motion-transition;
+    transition: opacity 400ms $gl-easing-out-cubic; // we intentionally overlap this transition with .text-leave-active by 200ms
   }
 
   .text-enter-to {
@@ -23,40 +25,11 @@
   }
 
   .text-leave-active {
-    transition: opacity 0.7s linear;
+    @include gl-prefers-reduced-motion-transition;
+    transition: opacity 200ms $gl-easing-out-cubic;
   }
 
   .text-leave-to {
     @apply gl-opacity-0;
   }
-
-  &__dot {
-    display: inline-block;
-    width: 0.3rem;
-    height: 0.3rem;
-    background-color: $gray-200;
-    border-radius: 100%;
-    animation: DuoChatLoading 1400ms ease-in-out infinite;
-    animation-fill-mode: both;
-  }
-
-  &__dot--1 {
-    animation-delay: -0.3s;
-  }
-
-  &__dot--2 {
-    animation-delay: -0.15s;
-  }
-}
-
-@keyframes DuoChatLoading {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-
-  40% {
-    transform: scale(1);
-  }
 }

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.vue

@@ -1,6 +1,7 @@
 <script>
 import { translate } from '../../../../../../utils/i18n';
 import GlSprintf from '../../../../../utilities/sprintf/sprintf.vue';
+import GlAnimatedLoaderIcon from '../../../../../base/animated_icon/animated_loader_icon.vue';
 import { LOADING_TRANSITION_DURATION } from '../../constants';
 
 export const i18n = {
@@ -21,6 +22,7 @@ export default {
   name: 'GlDuoChatLoader',
   components: {
     GlSprintf,
+    GlAnimatedLoaderIcon,
   },
   i18n,
   props: {
@@ -70,12 +72,8 @@ export default {
 </script>
 
 <template>
-  <div class="duo-chat-loader gl-mt-5 gl-flex gl-items-center">
-    <div class="gl-mr-3 gl-flex">
-      <div class="duo-chat-loader__dot duo-chat-loader__dot--1"></div>
-      <div class="duo-chat-loader__dot duo-chat-loader__dot--2"></div>
-      <div class="duo-chat-loader__dot duo-chat-loader__dot--3"></div>
-    </div>
+  <div class="duo-chat-loader gl-mt-5 gl-flex gl-items-center gl-gap-3">
+    <gl-animated-loader-icon :is-on="true" />
     <div>
       <gl-sprintf :message="$options.i18n.LOADER_LOADING_MESSAGE">
         <template #tool>

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue

@@ -1,7 +1,7 @@
 <script>
 import throttle from 'lodash/throttle';
 import GlIcon from '../../../../../base/icon/icon.vue';
-import GlLoadingIcon from '../../../../../base/loading_icon/loading_icon.vue';
+import GlAnimatedLoaderIcon from '../../../../../base/animated_icon/animated_loader_icon.vue';
 import { GlTooltipDirective } from '../../../../../../directives/tooltip';
 import GlDuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
@@ -59,7 +59,7 @@ export default {
     GlFormGroup,
     GlFormTextarea,
     GlIcon,
-    GlLoadingIcon,
+    GlAnimatedLoaderIcon,
   },
   directives: {
     SafeHtml,
@@ -315,7 +315,7 @@ export default {
           <documentation-sources v-if="sources" :sources="sources" />
 
           <div class="duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end">
-            <gl-loading-icon v-if="isChunkAndNotCancelled" class="gl-pt-4" variant="dots" inline />
+            <gl-animated-loader-icon v-if="isChunkAndNotCancelled" :is-on="true" />
             <gl-duo-user-feedback
               v-if="isNotChunkOrCancelled"
               :feedback-received="hasFeedback"

package/src/vendor/bootstrap-vue/src/components/button/MODIFICATIONS.md

@@ -0,0 +1,16 @@
+# Modifications to Vendored Code
+
+**Library**: BootstrapVue  
+**Version**: 2.23.1 **Link:** https://bootstrap-vue.org **Source:**
+https://github.com/bootstrap-vue/bootstrap-vue **Copyright:** (c) 2016-2024 BootstrapVue
+**License:** (c)
+[2016-2024 BootstrapVue](https://github.com/bootstrap-vue/bootstrap-vue/blob/master/LICENSE)
+
+This file documents modifications made to the original BootstrapVue component files.
+
+## Removed unnecessary properties
+
+The following properties have been removed as they are no longer supported in our implementation:
+
+- `pill`
+- `squared`

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

@@ -134,45 +134,6 @@ prop.
 <!-- b-button-block.vue -->
 ```
 
-## Pill style
-
-Prefer buttons with a more rounded-pill style? Just set the prop `pill` to true.
-
-```html
-<div>
-  <b-button pill>Button</b-button>
-  <b-button pill variant="primary">Button</b-button>
-  <b-button pill variant="outline-secondary">Button</b-button>
-  <b-button pill variant="success">Button</b-button>
-  <b-button pill variant="outline-danger">Button</b-button>
-  <b-button pill variant="info">Button</b-button>
-</div>
-
-<!-- b-button-pill.vue -->
-```
-
-This prop adds the Bootstrap v4.3 utility class `.rounded-pill` on the rendered button.
-
-## Squared style
-
-Prefer buttons with a more square corner style? Just set the prop `squared` to true.
-
-```html
-<div>
-  <b-button squared>Button</b-button>
-  <b-button squared variant="primary">Button</b-button>
-  <b-button squared variant="outline-secondary">Button</b-button>
-  <b-button squared variant="success">Button</b-button>
-  <b-button squared variant="outline-danger">Button</b-button>
-  <b-button squared variant="info">Button</b-button>
-</div>
-
-<!-- b-button-square.vue -->
-```
-
-The `squared` prop adds the Bootstrap v4.3 utility class `.rounded-0` on the rendered button. The
-`pill` prop takes precedence over the `squared` prop.
-
 ## Disabled state
 
 Set the `disabled` prop to disable button default functionality. `disabled` also works with buttons

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

@@ -22,12 +22,10 @@ export const props = makePropsConfigurable(
     ...linkProps,
     block: makeProp(PROP_TYPE_BOOLEAN, false),
     disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-    pill: makeProp(PROP_TYPE_BOOLEAN, false),
     // Tri-state: `true`, `false` or `null`
     // => On, off, not a toggle
     pressed: makeProp(PROP_TYPE_BOOLEAN, null),
     size: makeProp(PROP_TYPE_STRING),
-    squared: makeProp(PROP_TYPE_BOOLEAN, false),
     tag: makeProp(PROP_TYPE_STRING, 'button'),
     type: makeProp(PROP_TYPE_STRING, 'button'),
     variant: makeProp(PROP_TYPE_STRING, 'secondary')
@@ -66,8 +64,6 @@ const computeClass = props => [
   {
     [`btn-${props.size}`]: props.size,
     'btn-block': props.block,
-    'rounded-pill': props.pill,
-    'rounded-0': props.squared && !props.pill,
     disabled: props.disabled,
     active: props.pressed
   }

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/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 () => {