@gitlab/ui 101.15.0 → 102.0.0

package/CHANGELOG.md

@@ -1,3 +1,42 @@
+# [102.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v101.16.0...v102.0.0) (2024-11-12)
+
+
+### Bug Fixes
+
+* **GlCheckbox:** always add a label, even for empty content ([4154c08](https://gitlab.com/gitlab-org/gitlab-ui/commit/4154c082e5935031f1f5670fc16ad3c87b736251))
+
+
+### Features
+
+* **FormRadio,FormCheckbox:** Remove buttons style ([5ca17b0](https://gitlab.com/gitlab-org/gitlab-ui/commit/5ca17b0841d2d13c5a977cc674ef24a7273fa1d4))
+* **GlButton:** Remove pill and squared properties ([7c61763](https://gitlab.com/gitlab-org/gitlab-ui/commit/7c617631e03f4e042caf95471d3d15a22856fac3))
+* **GlFormRadio,GlFormCheckbox:** Remove plain style ([415542c](https://gitlab.com/gitlab-org/gitlab-ui/commit/415542c144bcd599428065c736db16233801526a))
+* **GlNav,GlTabs:** Remove vertical and card designs ([8bd8b00](https://gitlab.com/gitlab-org/gitlab-ui/commit/8bd8b00821494e80aacffb5210b24c73fc9a608a))
+
+
+### BREAKING CHANGES
+
+* **GlNav,GlTabs:** BootstrapVue's Nav and Tabs components support a vertical, and card
+styles. These styles are now removed in GitLab UI.
+* **GlFormRadio,GlFormCheckbox:** The GlFormRadio and GlFormCheckbox do not support the property 'plain'
+anymore. Prefer overriding the CSS styles in case native browser styles
+should be used instead.
+* **FormRadio,FormCheckbox:** BootstrapVue's Radio Buttons and Checkboxes support a button style mode
+which was never documented within our system. We do not support adding
+the property 'button' on GlFormRadio and GlFormCheckbox.
+* **GlButton:** The GlButton does not support the properties 'pill' and 'squared'
+anymore.
+Prefer using the styles with the usual border radius. When absolutely
+necessary, apply GitLab UI Util CSS classes to override the border
+radius
+
+# [101.16.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v101.15.0...v101.16.0) (2024-11-07)
+
+
+### Features
+
+* **GlDuoChat, GlAnimatedIcon:** Update loading icon ([23d0874](https://gitlab.com/gitlab-org/gitlab-ui/commit/23d08749510808b1ece754025714ad2a6dd9fd65))
+
 # [101.15.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v101.14.0...v101.15.0) (2024-11-07)
 
 

package/dist/components/base/animated_icon/animated_loader_icon.js

@@ -0,0 +1,45 @@
+import GlBaseAnimatedIcon from './base_animated_icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlAnimatedLoaderIcon',
+  extends: GlBaseAnimatedIcon
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{class:_vm.iconStateClass,attrs:{"aria-label":_vm.ariaLabel,"width":"16","height":"16","viewBox":"0 0 16 16","fill":"none","xmlns":"http://www.w3.org/2000/svg"}},[_c('circle',{staticClass:"gl-animated-loader-shape gl-animated-loader-shape-1",attrs:{"cx":"8","cy":"8","r":"2","fill":"currentColor","stroke-width":"0"}}),_vm._v(" "),_c('circle',{staticClass:"gl-animated-loader-shape gl-animated-loader-shape-2",attrs:{"cx":"14","cy":"8","r":"2","fill":"currentColor","stroke-width":"0"}}),_vm._v(" "),_c('circle',{staticClass:"gl-animated-loader-shape gl-animated-loader-shape-3",attrs:{"cx":"2","cy":"8","r":"2","fill":"currentColor","stroke-width":"0"}})])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/dist/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.js

@@ -93,6 +93,9 @@ var script = {
       if (this.contextItem.category !== CONTEXT_ITEM_CATEGORY_DEPENDENCY) {
         return null;
       }
+      if (!this.contextItem.content) {
+        return null;
+      }
       try {
         return JSON.parse(this.contextItem.content);
       } catch (error) {

package/dist/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.js

@@ -1,5 +1,6 @@
 import { translate } from '../../../../../../utils/i18n';
 import GlSprintf from '../../../../../utilities/sprintf/sprintf';
+import GlAnimatedLoaderIcon from '../../../../../base/animated_icon/animated_loader_icon';
 import { LOADING_TRANSITION_DURATION } from '../../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -11,7 +12,8 @@ const i18n = {
 var script = {
   name: 'GlDuoChatLoader',
   components: {
-    GlSprintf
+    GlSprintf,
+    GlAnimatedLoaderIcon
   },
   i18n,
   props: {
@@ -65,8 +67,8 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"duo-chat-loader gl-mt-5 gl-flex gl-items-center"},[_vm._m(0),_vm._v(" "),_c('div',[_c('gl-sprintf',{attrs:{"message":_vm.$options.i18n.LOADER_LOADING_MESSAGE},scopedSlots:_vm._u([{key:"tool",fn:function(){return [_c('strong',{attrs:{"data-testid":"tool"}},[_vm._v(_vm._s(_vm.toolName))])]},proxy:true},{key:"transition",fn:function(){return [_c('transition-group',{ref:"transition",staticClass:"transition gl-relative gl-inline-block gl-align-bottom",attrs:{"name":"text"},on:{"after-leave":_vm.computeTransitionWidth}},_vm._l((_vm.$options.i18n.LOADER_LOADING_TRANSITIONS),function(message,index){return _c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.isCurrentTransition(index)),expression:"isCurrentTransition(index)"}],key:message,ref:_vm.isCurrentTransition(index) ? 'currentTransition' : '',refInFor:true,staticClass:"gl-absolute gl-bottom-0 gl-left-0 gl-whitespace-nowrap",attrs:{"data-testid":_vm.isCurrentTransition(index) ? 'current-transition' : ''}},[_vm._v(_vm._s(message))])}),0)]},proxy:true}])})],1)])};
-var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-mr-3 gl-flex"},[_c('div',{staticClass:"duo-chat-loader__dot duo-chat-loader__dot--1"}),_vm._v(" "),_c('div',{staticClass:"duo-chat-loader__dot duo-chat-loader__dot--2"}),_vm._v(" "),_c('div',{staticClass:"duo-chat-loader__dot duo-chat-loader__dot--3"})])}];
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"duo-chat-loader gl-mt-5 gl-flex gl-items-center gl-gap-3"},[_c('gl-animated-loader-icon',{attrs:{"is-on":true}}),_vm._v(" "),_c('div',[_c('gl-sprintf',{attrs:{"message":_vm.$options.i18n.LOADER_LOADING_MESSAGE},scopedSlots:_vm._u([{key:"tool",fn:function(){return [_c('strong',{attrs:{"data-testid":"tool"}},[_vm._v(_vm._s(_vm.toolName))])]},proxy:true},{key:"transition",fn:function(){return [_c('transition-group',{ref:"transition",staticClass:"transition gl-relative gl-inline-block gl-align-bottom",attrs:{"name":"text"},on:{"after-leave":_vm.computeTransitionWidth}},_vm._l((_vm.$options.i18n.LOADER_LOADING_TRANSITIONS),function(message,index){return _c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.isCurrentTransition(index)),expression:"isCurrentTransition(index)"}],key:message,ref:_vm.isCurrentTransition(index) ? 'currentTransition' : '',refInFor:true,staticClass:"gl-absolute gl-bottom-0 gl-left-0 gl-whitespace-nowrap",attrs:{"data-testid":_vm.isCurrentTransition(index) ? 'current-transition' : ''}},[_vm._v(_vm._s(message))])}),0)]},proxy:true}])})],1)],1)};
+var __vue_staticRenderFns__ = [];
 
   /* style */
   const __vue_inject_styles__ = undefined;

package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js

@@ -1,6 +1,6 @@
 import throttle from 'lodash/throttle';
 import GlIcon from '../../../../../base/icon/icon';
-import GlLoadingIcon from '../../../../../base/loading_icon/loading_icon';
+import GlAnimatedLoaderIcon from '../../../../../base/animated_icon/animated_loader_icon';
 import { GlTooltipDirective } from '../../../../../../directives/tooltip';
 import GlDuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
@@ -41,7 +41,7 @@ var script = {
     GlFormGroup,
     GlFormTextarea,
     GlIcon,
-    GlLoadingIcon
+    GlAnimatedLoaderIcon
   },
   directives: {
     SafeHtml: SafeHtmlDirective,
@@ -256,7 +256,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
       _vm.isAssistantMessage,
     'gl-bg-subtle': _vm.isAssistantMessage && !_vm.error,
     'duo-chat-message-with-error gl-bg-red-50': _vm.error,
-  },on:{"insert-code-snippet":_vm.onInsertCodeSnippet}},[(_vm.error)?_c('gl-icon',{staticClass:"error-icon gl-border gl-mr-3 gl-shrink-0 gl-rounded-full gl-border-red-500 gl-text-red-600",attrs:{"aria-label":_vm.$options.i18n.MESSAGE_ERROR,"name":"status_warning_borderless","size":16,"data-testid":"error"}}):_vm._e(),_vm._v(" "),_c('div',{ref:"content-wrapper",class:{ 'has-error': _vm.error }},[(_vm.displaySelectedContextItems && _vm.isAssistantMessage)?_c('gl-duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"assistant"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e(),_vm._v(" "),(_vm.error)?_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedError),expression:"renderedError",arg:_vm.$options.safeHtmlConfigExtension}],ref:"error-message"}):_c('div',[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end"},[(_vm.isChunkAndNotCancelled)?_c('gl-loading-icon',{staticClass:"gl-pt-4",attrs:{"variant":"dots","inline":""}}):_vm._e(),_vm._v(" "),(_vm.isNotChunkOrCancelled)?_c('gl-duo-user-feedback',{attrs:{"feedback-received":_vm.hasFeedback,"modal-title":_vm.$options.i18n.MODAL.TITLE,"modal-alert":_vm.$options.i18n.MODAL.ALERT_TEXT},on:{"feedback":_vm.logEvent},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.DID_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.INTERACTION},model:{value:(_vm.didWhat),callback:function ($$v) {_vm.didWhat=$$v;},expression:"didWhat"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.IMPROVE_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}],null,false,419229417)}):_vm._e()],1)]:_vm._e()],2),_vm._v(" "),(_vm.displaySelectedContextItems && _vm.isUserMessage)?_c('gl-duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"user"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e()],1)],1)};
+  },on:{"insert-code-snippet":_vm.onInsertCodeSnippet}},[(_vm.error)?_c('gl-icon',{staticClass:"error-icon gl-border gl-mr-3 gl-shrink-0 gl-rounded-full gl-border-red-500 gl-text-red-600",attrs:{"aria-label":_vm.$options.i18n.MESSAGE_ERROR,"name":"status_warning_borderless","size":16,"data-testid":"error"}}):_vm._e(),_vm._v(" "),_c('div',{ref:"content-wrapper",class:{ 'has-error': _vm.error }},[(_vm.displaySelectedContextItems && _vm.isAssistantMessage)?_c('gl-duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"assistant"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e(),_vm._v(" "),(_vm.error)?_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedError),expression:"renderedError",arg:_vm.$options.safeHtmlConfigExtension}],ref:"error-message"}):_c('div',[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end"},[(_vm.isChunkAndNotCancelled)?_c('gl-animated-loader-icon',{attrs:{"is-on":true}}):_vm._e(),_vm._v(" "),(_vm.isNotChunkOrCancelled)?_c('gl-duo-user-feedback',{attrs:{"feedback-received":_vm.hasFeedback,"modal-title":_vm.$options.i18n.MODAL.TITLE,"modal-alert":_vm.$options.i18n.MODAL.ALERT_TEXT},on:{"feedback":_vm.logEvent},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.DID_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.INTERACTION},model:{value:(_vm.didWhat),callback:function ($$v) {_vm.didWhat=$$v;},expression:"didWhat"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.IMPROVE_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}],null,false,419229417)}):_vm._e()],1)]:_vm._e()],2),_vm._v(" "),(_vm.displaySelectedContextItems && _vm.isUserMessage)?_c('gl-duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"user"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e()],1)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -20,12 +20,10 @@ const props = makePropsConfigurable(sortKeys({
   ...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')
@@ -60,8 +58,6 @@ const isNonStandardTag = props => !isLink(props) && !isButton(props);
 const computeClass = props => [`btn-${props.variant || 'secondary'}`, {
   [`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/dist/vendor/bootstrap-vue/src/components/nav/nav.js

@@ -21,8 +21,7 @@ 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);
 
 // --- Main component ---
@@ -41,7 +40,6 @@ const BNav = /*#__PURE__*/extend({
     const {
       tabs,
       pills,
-      vertical,
       align,
       cardHeader
     } = props;
@@ -50,12 +48,11 @@ 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
       }
     }), children);

package/dist/vendor/bootstrap-vue/src/components/tabs/tabs.js

@@ -175,7 +175,6 @@ const props = makePropsConfigurable(sortKeys({
   // Only applied to the currently active `<b-tab>`
   // This prop is sniffed by the `<b-tab>` child
   activeTabClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  card: makeProp(PROP_TYPE_BOOLEAN, false),
   contentClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
   // Synonym for 'bottom'
   end: makeProp(PROP_TYPE_BOOLEAN, false),
@@ -215,13 +214,6 @@ const BTabs = /*#__PURE__*/extend({
     fade() {
       // This computed prop is sniffed by the tab child
       return !this.noFade;
-    },
-    localNavClass() {
-      const classes = [];
-      if (this.card && this.vertical) {
-        classes.push('card-header', 'h-100', 'border-bottom-0', 'rounded-0');
-      }
-      return [...classes, this.navClass];
     }
   },
   watch: {
@@ -489,7 +481,6 @@ const BTabs = /*#__PURE__*/extend({
   render(h) {
     const {
       align,
-      card,
       end,
       fill,
       firstTab,
@@ -501,8 +492,7 @@ const BTabs = /*#__PURE__*/extend({
       pills,
       previousTab,
       small,
-      tabs: $tabs,
-      vertical
+      tabs: $tabs
     } = this;
 
     // Currently active tab
@@ -553,7 +543,7 @@ const BTabs = /*#__PURE__*/extend({
       });
     });
     let $nav = h(BNav, {
-      class: this.localNavClass,
+      class: this.navClass,
       attrs: {
         role: 'tablist',
         id: this.safeId('_BV_tab_controls_')
@@ -564,35 +554,25 @@ const BTabs = /*#__PURE__*/extend({
         align,
         tabs: !noNavStyle && !pills,
         pills: !noNavStyle && pills,
-        vertical,
-        small,
-        cardHeader: card && !vertical
+        small
       },
       ref: 'nav'
     }, [this.normalizeSlot(SLOT_NAME_TABS_START) || h(), $buttons, this.normalizeSlot(SLOT_NAME_TABS_END) || h()]);
     $nav = h('div', {
-      class: [{
-        'card-header': card && !vertical && !end,
-        'card-footer': card && !vertical && end,
-        'col-auto': vertical
-      }, this.navWrapperClass],
+      class: this.navWrapperClass,
       key: 'bv-tabs-nav'
     }, [$nav]);
     const $children = this.normalizeSlot() || [];
     let $empty = h();
     if ($children.length === 0) {
       $empty = h('div', {
-        class: ['tab-pane', 'active', {
-          'card-body': card
-        }],
+        class: ['tab-pane', 'active'],
         key: 'bv-empty-tab'
       }, this.normalizeSlot(SLOT_NAME_EMPTY));
     }
     const $content = h('div', {
       staticClass: 'tab-content',
-      class: [{
-        col: vertical
-      }, this.contentClass],
+      class: this.contentClass,
       attrs: {
         id: this.safeId('_BV_tab_container_')
       },
@@ -603,10 +583,6 @@ const BTabs = /*#__PURE__*/extend({
     // Render final output
     return h(this.tag, {
       staticClass: 'tabs',
-      class: {
-        row: vertical,
-        'no-gutters': vertical && card
-      },
       attrs: {
         id: this.safeId()
       }

package/dist/vendor/bootstrap-vue/src/index.js

@@ -1,5 +1,3 @@
-import { installFactory } from './utils/plugins';
-import { componentsPlugin } from './components';
 export { BVConfigPlugin as BVConfig, BVConfigPlugin } from './bv-config';
 export { BVToastPlugin } from './components/toast/helpers/bv-toast';
 export { BBreadcrumb } from './components/breadcrumb/breadcrumb';
@@ -65,18 +63,10 @@ export { VBVisible } from './directives/visible/visible';
 
 const NAME = 'BootstrapVue';
 
-// --- BootstrapVue installer ---
-const install = /*#__PURE__*/installFactory({
-  plugins: {
-    componentsPlugin
-  }
-});
-
 // --- BootstrapVue plugin ---
 const BootstrapVue = {
-  install,
   NAME
 };
 
 export default BootstrapVue;
-export { BootstrapVue, NAME, install };
+export { BootstrapVue, NAME };

package/dist/vendor/bootstrap-vue/src/mixins/form-radio-check-group.js

@@ -1,5 +1,5 @@
 import { extend } from '../vue';
-import { PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../constants/props';
+import { PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_BOOLEAN } from '../constants/props';
 import { SLOT_NAME_FIRST } from '../constants/slots';
 import { htmlOrText } from '../utils/html';
 import { looseEqual } from '../utils/loose-equal';
@@ -38,10 +38,6 @@ const props = makePropsConfigurable(sortKeys({
   ...props$5,
   ...props$6,
   ariaInvalid: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
-  // Only applicable when rendered with button style
-  buttonVariant: makeProp(PROP_TYPE_STRING),
-  // Render as button style
-  buttons: makeProp(PROP_TYPE_BOOLEAN, false),
   stacked: makeProp(PROP_TYPE_BOOLEAN, false),
   validated: makeProp(PROP_TYPE_BOOLEAN, false)
 }), 'formRadioCheckGroups');
@@ -69,21 +65,11 @@ const formRadioCheckGroupMixin = extend({
     },
     groupClasses() {
       const {
-        inline,
-        size,
         validated
       } = this;
-      let classes = {
+      return {
         'was-validated': validated
       };
-      if (this.buttons) {
-        classes = [classes, 'btn-group-toggle', {
-          'btn-group': inline,
-          'btn-group-vertical': !inline,
-          [`btn-group-${size}`]: size
-        }];
-      }
-      return classes;
     }
   },
   watch: {

package/dist/vendor/bootstrap-vue/src/mixins/form-radio-check.js

@@ -37,10 +37,6 @@ const props = makePropsConfigurable(sortKeys({
   ...props$5,
   ariaLabel: makeProp(PROP_TYPE_STRING),
   ariaLabelledby: makeProp(PROP_TYPE_STRING),
-  // Only applicable in standalone mode (non group)
-  button: makeProp(PROP_TYPE_BOOLEAN, false),
-  // Only applicable when rendered with button style
-  buttonVariant: makeProp(PROP_TYPE_STRING),
   inline: makeProp(PROP_TYPE_BOOLEAN, false),
   value: makeProp(PROP_TYPE_ANY)
 }), 'formRadioCheckControls');
@@ -54,8 +50,7 @@ const formRadioCheckMixin = extend({
   props,
   data() {
     return {
-      localChecked: this.isGroup ? this.bvGroup[MODEL_PROP_NAME] : this[MODEL_PROP_NAME],
-      hasFocus: false
+      localChecked: this.isGroup ? this.bvGroup[MODEL_PROP_NAME] : this[MODEL_PROP_NAME]
     };
   },
   computed: {
@@ -81,19 +76,9 @@ const formRadioCheckMixin = extend({
       // Is this check/radio a child of check-group or radio-group?
       return !!this.bvGroup;
     },
-    isBtnMode() {
-      // Support button style in single input mode
-      return this.isGroup ? this.bvGroup.buttons : this.button;
-    },
-    isPlain() {
-      return this.isBtnMode ? false : this.isGroup ? this.bvGroup.plain : this.plain;
-    },
-    isCustom() {
-      return this.isBtnMode ? false : !this.isPlain;
-    },
     isSwitch() {
       // Custom switch styling (checkboxes only)
-      return this.isBtnMode || this.isRadio || this.isPlain ? false : this.isGroup ? this.bvGroup.switches : this.switch;
+      return this.isRadio ? false : this.isGroup ? this.bvGroup.switches : this.switch;
     },
     isInline() {
       return this.isGroup ? this.bvGroup.inline : this.inline;
@@ -121,33 +106,6 @@ const formRadioCheckMixin = extend({
     computedState() {
       return this.isGroup ? this.bvGroup.computedState : isBoolean(this.state) ? this.state : null;
     },
-    computedButtonVariant() {
-      // Local variant preferred over group variant
-      const {
-        buttonVariant
-      } = this;
-      if (buttonVariant) {
-        return buttonVariant;
-      }
-      if (this.isGroup && this.bvGroup.buttonVariant) {
-        return this.bvGroup.buttonVariant;
-      }
-      return 'secondary';
-    },
-    buttonClasses() {
-      const {
-        computedSize
-      } = this;
-      return ['btn', `btn-${this.computedButtonVariant}`, {
-        [`btn-${computedSize}`]: computedSize,
-        // 'disabled' class makes "button" look disabled
-        disabled: this.isDisabled,
-        // 'active' class makes "button" look pressed
-        active: this.isChecked,
-        // Focus class makes button look focused
-        focus: this.hasFocus
-      }];
-    },
     computedAttrs() {
       const {
         isDisabled: disabled,
@@ -209,17 +167,6 @@ const formRadioCheckMixin = extend({
         }
       });
     },
-    handleFocus(event) {
-      // When in buttons mode, we need to add 'focus' class to label when input focused
-      // As it is the hidden input which has actual focus
-      if (event.target) {
-        if (event.type === 'focus') {
-          this.hasFocus = true;
-        } else if (event.type === 'blur') {
-          this.hasFocus = false;
-        }
-      }
-    },
     // Convenience methods for focusing the input
     focus() {
       if (!this.isDisabled) {
@@ -235,9 +182,6 @@ const formRadioCheckMixin = extend({
   render(h) {
     const {
       isRadio,
-      isBtnMode,
-      isPlain,
-      isCustom,
       isInline,
       isSwitch,
       computedSize,
@@ -245,12 +189,7 @@ const formRadioCheckMixin = extend({
     } = this;
     const $content = this.normalizeSlot();
     const $input = h('input', {
-      class: [{
-        'form-check-input': isPlain,
-        'custom-control-input': isCustom,
-        // https://github.com/bootstrap-vue/bootstrap-vue/issues/2911
-        'position-static': isPlain && !$content
-      }, isBtnMode ? '' : this.stateClass],
+      class: ['custom-control-input', this.stateClass],
       directives: [{
         name: 'model',
         value: this.computedLocalChecked
@@ -261,55 +200,26 @@ const formRadioCheckMixin = extend({
         checked: this.isChecked
       },
       on: {
-        change: this.handleChange,
-        ...(isBtnMode ? {
-          focus: this.handleFocus,
-          blur: this.handleFocus
-        } : {})
+        change: this.handleChange
       },
       key: 'input',
       ref: 'input'
     });
-    if (isBtnMode) {
-      let $button = h('label', {
-        class: this.buttonClasses
-      }, [$input, $content]);
-      if (!this.isGroup) {
-        // Standalone button mode, so wrap in 'btn-group-toggle'
-        // and flag it as inline-block to mimic regular buttons
-        $button = h('div', {
-          class: ['btn-group-toggle', 'd-inline-block']
-        }, [$button]);
+    const $label = h('label', {
+      class: 'custom-control-label',
+      attrs: {
+        for: this.safeId()
       }
-      return $button;
-    }
-
-    // If no label content in plain mode we dont render the label
-    // See: https://github.com/bootstrap-vue/bootstrap-vue/issues/2911
-    let $label = h();
-    if (!(isPlain && !$content)) {
-      $label = h('label', {
-        class: {
-          'form-check-label': isPlain,
-          'custom-control-label': isCustom
-        },
-        attrs: {
-          for: this.safeId()
-        }
-      }, $content);
-    }
+    }, $content);
     return h('div', {
       class: [{
-        'form-check': isPlain,
-        'form-check-inline': isPlain && isInline,
-        'custom-control': isCustom,
-        'custom-control-inline': isCustom && isInline,
-        'custom-checkbox': isCustom && !isRadio && !isSwitch,
+        'custom-control-inline': isInline,
+        'custom-checkbox': !isRadio && !isSwitch,
         'custom-switch': isSwitch,
-        'custom-radio': isCustom && isRadio,
+        'custom-radio': isRadio,
         // Temporary until Bootstrap v4 supports sizing (most likely in V5)
-        [`b-custom-control-${computedSize}`]: computedSize && !isBtnMode
-      }, bvAttrs.class],
+        [`b-custom-control-${computedSize}`]: computedSize
+      }, 'custom-control', bvAttrs.class],
       style: bvAttrs.style
     }, [$input, $label]);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "101.15.0",
+  "version": "102.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -115,7 +115,6 @@
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
-    "@rollup/plugin-replace": "^2.3.2",
     "@storybook/addon-a11y": "^7.6.20",
     "@storybook/addon-docs": "^7.6.20",
     "@storybook/addon-essentials": "^7.6.20",

package/src/components/base/animated_icon/animated_icon.scss

@@ -103,6 +103,27 @@
 }
 
 /* * * * * * * * * * * * * * * * *
+ * animated_loader_icon.vue
+ * * * * * * * * * * * * * * * * */
+.gl-animated-icon-on .gl-animated-loader-shape {
+  animation: gl-animated-loader-on 1.8s $gl-easing-default infinite;
+}
+
+.gl-animated-icon-on .gl-animated-loader-shape-1 {
+  animation-delay: 0.15s;
+}
+
+.gl-animated-icon-on .gl-animated-loader-shape-2 {
+  animation-delay: 0.3s;
+}
+
+@keyframes gl-animated-loader-on {
+  30% { translate: 0 -30%; }
+  60% { translate: 0 2%; }
+  65% { translate: 0 0; }
+}
+
+ /* * * * * * * * * * * * * * * * *
  * animated_notifications_icon.vue
  * * * * * * * * * * * * * * * * */
 

package/src/components/base/animated_icon/animated_loader_icon.vue

@@ -0,0 +1,44 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedLoaderIcon',
+  extends: GlBaseAnimatedIcon,
+};
+</script>
+<template>
+  <svg
+    :class="iconStateClass"
+    :aria-label="ariaLabel"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      class="gl-animated-loader-shape gl-animated-loader-shape-1"
+      cx="8"
+      cy="8"
+      r="2"
+      fill="currentColor"
+      stroke-width="0"
+    />
+    <circle
+      class="gl-animated-loader-shape gl-animated-loader-shape-2"
+      cx="14"
+      cy="8"
+      r="2"
+      fill="currentColor"
+      stroke-width="0"
+    />
+    <circle
+      class="gl-animated-loader-shape gl-animated-loader-shape-3"
+      cx="2"
+      cy="8"
+      r="2"
+      fill="currentColor"
+      stroke-width="0"
+    />
+  </svg>
+</template>