@gitlab/ui 105.7.0 → 106.0.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [106.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v105.7.0...v106.0.0) (2024-12-20)
+
+
+### Features
+
+* **GlButtonGroup:** migrate GlButtonGroup ([e1f4927](https://gitlab.com/gitlab-org/gitlab-ui/commit/e1f4927497af1c5e16debfb8a3a668f3c064d5c5))
+
+
+### BREAKING CHANGES
+
+* **GlButtonGroup:** this removes the `size`, `tag`, and `ariaRole`
+props from GlButtonGroup.
+
 # [105.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v105.6.0...v105.7.0) (2024-12-19)
 
 

package/dist/components/base/button_group/button_group.js

@@ -1,10 +1,16 @@
-import { BButtonGroup } from '../../../vendor/bootstrap-vue/src/components/button-group/button-group';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlButtonGroup',
-  components: {
-    BButtonGroup
+  props: {
+    /**
+     * When set, rendered the button group in vertical mode.
+     */
+    vertical: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
   }
 };
 
@@ -12,7 +18,7 @@ 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('b-button-group',_vm._g(_vm._b({},'b-button-group',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g({class:!_vm.vertical ? 'btn-group' : 'btn-group-vertical',attrs:{"role":"group"}},_vm.$listeners),[_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/dashboards/dashboard_panel/dashboard_panel.js

@@ -94,28 +94,25 @@ var script = {
       return `${this.containerClass} ${this.borderClass}`;
     },
     hasTitleIcon() {
-      var _this$titleIcon;
-      return ((_this$titleIcon = this.titleIcon) === null || _this$titleIcon === void 0 ? void 0 : _this$titleIcon.length) > 0;
+      return Boolean(this.titleIcon);
     },
     hasTitle() {
-      var _this$title;
-      return ((_this$title = this.title) === null || _this$title === void 0 ? void 0 : _this$title.length) > 0;
+      return Boolean(this.title);
     },
     hasTitlePopover() {
-      var _this$titlePopover, _this$titlePopover$de;
-      return ((_this$titlePopover = this.titlePopover) === null || _this$titlePopover === void 0 ? void 0 : (_this$titlePopover$de = _this$titlePopover.description) === null || _this$titlePopover$de === void 0 ? void 0 : _this$titlePopover$de.length) > 0;
+      var _this$titlePopover;
+      return Boolean((_this$titlePopover = this.titlePopover) === null || _this$titlePopover === void 0 ? void 0 : _this$titlePopover.description);
     },
     hasTitlePopoverLink() {
-      var _this$titlePopover2, _this$titlePopover2$d;
-      return ((_this$titlePopover2 = this.titlePopover) === null || _this$titlePopover2 === void 0 ? void 0 : (_this$titlePopover2$d = _this$titlePopover2.descriptionLink) === null || _this$titlePopover2$d === void 0 ? void 0 : _this$titlePopover2$d.length) > 0;
+      var _this$titlePopover2;
+      return Boolean((_this$titlePopover2 = this.titlePopover) === null || _this$titlePopover2 === void 0 ? void 0 : _this$titlePopover2.descriptionLink);
     },
     shouldShowActions() {
       var _this$actions;
       return ((_this$actions = this.actions) === null || _this$actions === void 0 ? void 0 : _this$actions.length) > 0;
     },
     isLoadingDelayed() {
-      var _this$loadingDelayedT;
-      return this.loadingDelayed && ((_this$loadingDelayedT = this.loadingDelayedText) === null || _this$loadingDelayedT === void 0 ? void 0 : _this$loadingDelayedT.length) > 0;
+      return this.loadingDelayed && Boolean(this.loadingDelayedText);
     }
   }
 };

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

@@ -1,7 +1,6 @@
 // Component names
 const NAME_BUTTON = 'BButton';
 const NAME_BUTTON_CLOSE = 'BButtonClose';
-const NAME_BUTTON_GROUP = 'BButtonGroup';
 const NAME_COL = 'BCol';
 const NAME_COLLAPSE = 'BCollapse';
 const NAME_DROPDOWN = 'BDropdown';
@@ -68,4 +67,4 @@ const NAME_TRANSITION = 'BVTransition';
 const NAME_TRANSPORTER = 'BVTransporter';
 const NAME_TRANSPORTER_TARGET = 'BVTransporterTarget';
 
-export { NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_BUTTON_GROUP, NAME_COL, NAME_COLLAPSE, NAME_COLLAPSE_HELPER, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INPUT, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_INPUT_GROUP, NAME_INPUT_GROUP_ADDON, NAME_INPUT_GROUP_APPEND, NAME_INPUT_GROUP_PREPEND, NAME_INPUT_GROUP_TEXT, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAV_ITEM, NAME_NAV_ITEM_DROPDOWN, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };
+export { NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_COL, NAME_COLLAPSE, NAME_COLLAPSE_HELPER, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INPUT, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_INPUT_GROUP, NAME_INPUT_GROUP_ADDON, NAME_INPUT_GROUP_APPEND, NAME_INPUT_GROUP_PREPEND, NAME_INPUT_GROUP_TEXT, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAV_ITEM, NAME_NAV_ITEM_DROPDOWN, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "105.7.0",
+  "version": "106.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/button_group/button_group.md

@@ -1,5 +1,13 @@
 Button groups are an easy way to group a series of buttons together.
 
+```html
+<gl-button-group>
+  <gl-button>Download</b-button>
+  <gl-button>Browse</b-button>
+  <gl-button variant="danger">Delete</b-button>
+</gl-button-group>
+```
+
 ## Split dropdowns
 
 Both `GlCollapsibleListbox` and `GlDisclosureDropdown` can be added as the last
@@ -22,7 +30,15 @@ dropdown's `toggle-text` _and_ `text-sr-only` props are set.
 </gl-button-group>
 ```
 
-## vue-bootstrap component
+## Vertical variation
 
-This component uses [`BButtonGroup`](https://bootstrap-vue.org/docs/components/button-group) from vue-bootstrap
-internally. So please take a look also there at their extensive documentation.
+Make a set of buttons appear vertically stacked rather than horizontally by setting the `vertical` prop.
+Split button dropdowns are not supported here.
+
+```html
+<gl-button-group vertical>
+  <gl-button>Top</b-button>
+  <gl-button>Middle</b-button>
+  <gl-button>Bottom</b-button>
+</gl-button-group>
+```

package/src/components/base/button_group/button_group.vue

@@ -1,16 +1,21 @@
 <script>
-import { BButtonGroup } from '../../../vendor/bootstrap-vue/src/components/button-group/button-group';
-
 export default {
   name: 'GlButtonGroup',
-  components: {
-    BButtonGroup,
+  props: {
+    /**
+     * When set, rendered the button group in vertical mode.
+     */
+    vertical: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 };
 </script>
 <template>
-  <b-button-group v-bind="$attrs" v-on="$listeners">
+  <div :class="!vertical ? 'btn-group' : 'btn-group-vertical'" role="group" v-on="$listeners">
     <!-- @slot The buttons to group. -->
     <slot></slot>
-  </b-button-group>
+  </div>
 </template>

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -94,22 +94,22 @@ export default {
       return `${this.containerClass} ${this.borderClass}`;
     },
     hasTitleIcon() {
-      return this.titleIcon?.length > 0;
+      return Boolean(this.titleIcon);
     },
     hasTitle() {
-      return this.title?.length > 0;
+      return Boolean(this.title);
     },
     hasTitlePopover() {
-      return this.titlePopover?.description?.length > 0;
+      return Boolean(this.titlePopover?.description);
     },
     hasTitlePopoverLink() {
-      return this.titlePopover?.descriptionLink?.length > 0;
+      return Boolean(this.titlePopover?.descriptionLink);
     },
     shouldShowActions() {
       return this.actions?.length > 0;
     },
     isLoadingDelayed() {
-      return this.loadingDelayed && this.loadingDelayedText?.length > 0;
+      return this.loadingDelayed && Boolean(this.loadingDelayedText);
     },
   },
 };

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

@@ -1,7 +1,6 @@
 // Component names
 export const NAME_BUTTON = 'BButton'
 export const NAME_BUTTON_CLOSE = 'BButtonClose'
-export const NAME_BUTTON_GROUP = 'BButtonGroup'
 export const NAME_COL = 'BCol'
 export const NAME_COLLAPSE = 'BCollapse'
 export const NAME_DROPDOWN = 'BDropdown'

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

@@ -1,44 +0,0 @@
-import { extend, mergeData } from '../../vue';
-import { NAME_BUTTON_GROUP } from '../../constants/components';
-import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';
-import { sortKeys, pick } from '../../utils/object';
-import { makePropsConfigurable, makeProp } from '../../utils/props';
-import { props as props$1 } from '../button/button';
-
-// --- Props ---
-
-const props = makePropsConfigurable(sortKeys({
-  ...pick(props$1, ['size']),
-  ariaRole: makeProp(PROP_TYPE_STRING, 'group'),
-  size: makeProp(PROP_TYPE_STRING),
-  tag: makeProp(PROP_TYPE_STRING, 'div'),
-  vertical: makeProp(PROP_TYPE_BOOLEAN, false)
-}), NAME_BUTTON_GROUP);
-
-// --- Main component ---
-
-// @vue/component
-const BButtonGroup = /*#__PURE__*/extend({
-  name: NAME_BUTTON_GROUP,
-  functional: true,
-  props,
-  render(h, _ref) {
-    let {
-      props,
-      data,
-      children
-    } = _ref;
-    return h(props.tag, mergeData(data, {
-      class: {
-        'btn-group': !props.vertical,
-        'btn-group-vertical': props.vertical,
-        [`btn-group-${props.size}`]: props.size
-      },
-      attrs: {
-        role: props.ariaRole
-      }
-    }), children);
-  }
-});
-
-export { BButtonGroup, props };

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

@@ -1 +0,0 @@
-export { BButtonGroup } from './button-group';

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

@@ -1,107 +0,0 @@
-# Button Group
-
-> Group a series of buttons together on a single line with `<b-button-group>`.
-
-## Overview
-
-Button Groups are an easy way to group a series of buttons together.
-
-```html
-<div>
-  <div>
-    <b-button-group>
-      <b-button>Button 1</b-button>
-      <b-button>Button 2</b-button>
-      <b-button>Button 3</b-button>
-    </b-button-group>
-  </div>
-  <div class="mt-3">
-    <b-button-group>
-      <b-button variant="success">Success</b-button>
-      <b-button variant="info">Info</b-button>
-      <b-button variant="warning">Warning</b-button>
-    </b-button-group>
-  </div>
-</div>
-
-<!-- b-button-group.vue -->
-```
-
-## Sizing
-
-Set the `size` prop to `lg` or `sm` to render larger or smaller, respectively, buttons. There is no
-need to specify the size on the individual buttons.
-
-```html
-<div>
-  <div>
-    <b-button-group>
-      <b-button>Button 1</b-button>
-      <b-button>Button 2</b-button>
-      <b-button>Button 3</b-button>
-    </b-button-group>
-  </div>
-  <div class="mt-3">
-    <b-button-group size="sm">
-      <b-button>Left</b-button>
-      <b-button>Middle</b-button>
-      <b-button>Right</b-button>
-    </b-button-group>
-  </div>
-  <div class="mt-3">
-    <b-button-group size="lg">
-      <b-button>Left</b-button>
-      <b-button>Middle</b-button>
-      <b-button>Right</b-button>
-    </b-button-group>
-  </div>
-</div>
-
-<!-- b-button-group-sizes.vue -->
-```
-
-## Vertical variation
-
-Make a set of buttons appear vertically stacked rather than horizontally by setting the `vertical`
-prop. Split button dropdowns are not supported here.
-
-```html
-<div>
-  <b-button-group vertical>
-    <b-button>Top</b-button>
-    <b-button>Middle</b-button>
-    <b-button>Bottom</b-button>
-  </b-button-group>
-</div>
-
-<!-- b-button-group-vertical.vue -->
-```
-
-## Dropdown menu support
-
-Add [`<b-dropdown>`](/docs/components/dropdown) menus directly inside your `<b-button-group>`. Note
-that split dropdown menus are not supported when prop `vertical` is set.
-
-```html
-<div>
-  <b-button-group>
-    <b-button>Button</b-button>
-    <b-dropdown right text="Menu">
-      <b-dropdown-item>Item 1</b-dropdown-item>
-      <b-dropdown-item>Item 2</b-dropdown-item>
-      <b-dropdown-divider></b-dropdown-divider>
-      <b-dropdown-item>Item 3</b-dropdown-item>
-    </b-dropdown>
-    <b-dropdown right split text="Split Menu">
-      <b-dropdown-item>Item 1</b-dropdown-item>
-      <b-dropdown-item>Item 2</b-dropdown-item>
-      <b-dropdown-divider></b-dropdown-divider>
-      <b-dropdown-item>Item 3</b-dropdown-item>
-    </b-dropdown>
-  </b-button-group>
-</div>
-
-<!-- b-button-group-menu.vue -->
-```
-
-<!-- Component reference added automatically from component package.json -->

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

@@ -1,42 +0,0 @@
-import { extend, mergeData } from '../../vue'
-import { NAME_BUTTON_GROUP } from '../../constants/components'
-import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
-import { pick, sortKeys } from '../../utils/object'
-import { makeProp, makePropsConfigurable } from '../../utils/props'
-import { props as buttonProps } from '../button/button'
-
-// --- Props ---
-
-export const props = makePropsConfigurable(
-  sortKeys({
-    ...pick(buttonProps, ['size']),
-    ariaRole: makeProp(PROP_TYPE_STRING, 'group'),
-    size: makeProp(PROP_TYPE_STRING),
-    tag: makeProp(PROP_TYPE_STRING, 'div'),
-    vertical: makeProp(PROP_TYPE_BOOLEAN, false)
-  }),
-  NAME_BUTTON_GROUP
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BButtonGroup = /*#__PURE__*/ extend({
-  name: NAME_BUTTON_GROUP,
-  functional: true,
-  props,
-  render(h, { props, data, children }) {
-    return h(
-      props.tag,
-      mergeData(data, {
-        class: {
-          'btn-group': !props.vertical,
-          'btn-group-vertical': props.vertical,
-          [`btn-group-${props.size}`]: props.size
-        },
-        attrs: { role: props.ariaRole }
-      }),
-      children
-    )
-  }
-})

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

@@ -1,98 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { BButtonGroup } from './button-group'
-
-describe('button-group', () => {
-  it('has expected default structure', async () => {
-    const wrapper = mount(BButtonGroup)
-
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.classes()).toContain('btn-group')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.attributes('role')).toBeDefined()
-    expect(wrapper.attributes('role')).toBe('group')
-    expect(wrapper.text()).toBe('')
-
-    wrapper.destroy()
-  })
-
-  it('should render default slot', async () => {
-    const wrapper = mount(BButtonGroup, {
-      slots: {
-        default: '<span>foobar</span>'
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.classes()).toContain('btn-group')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.attributes('role')).toBeDefined()
-    expect(wrapper.attributes('role')).toBe('group')
-    expect(wrapper.find('span').exists()).toBe(true)
-    expect(wrapper.text()).toBe('foobar')
-
-    wrapper.destroy()
-  })
-
-  it('should apply vertical class', async () => {
-    const wrapper = mount(BButtonGroup, {
-      propsData: {
-        vertical: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.classes()).toContain('btn-group-vertical')
-    expect(wrapper.classes()).not.toContain('btn-group')
-    expect(wrapper.classes().length).toBe(1)
-
-    wrapper.destroy()
-  })
-
-  it('should apply size class', async () => {
-    const wrapper = mount(BButtonGroup, {
-      propsData: {
-        size: 'sm'
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.classes()).toContain('btn-group')
-    expect(wrapper.classes()).toContain('btn-group-sm')
-    expect(wrapper.classes().length).toBe(2)
-
-    wrapper.destroy()
-  })
-
-  it('should apply size class when vertical', async () => {
-    const wrapper = mount(BButtonGroup, {
-      propsData: {
-        size: 'sm',
-        vertical: true
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.classes()).toContain('btn-group-sm')
-    expect(wrapper.classes()).toContain('btn-group-vertical')
-    expect(wrapper.classes()).not.toContain('btn-group')
-    expect(wrapper.classes().length).toBe(2)
-
-    wrapper.destroy()
-  })
-
-  it('has custom role when aria-role prop set', async () => {
-    const wrapper = mount(BButtonGroup, {
-      propsData: {
-        ariaRole: 'foobar'
-      }
-    })
-
-    expect(wrapper.element.tagName).toBe('DIV')
-    expect(wrapper.classes()).toContain('btn-group')
-    expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.attributes('role')).toBeDefined()
-    expect(wrapper.attributes('role')).toBe('foobar')
-
-    wrapper.destroy()
-  })
-})

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

@@ -1,3 +0,0 @@
-import { BButtonGroup } from './button-group'
-
-export { BButtonGroup }

package/src/vendor/bootstrap-vue/src/components/button-group/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "@bootstrap-vue/button-group",
-  "version": "1.0.0",
-  "meta": {
-    "title": "Button Group",
-    "description": "Group a series of buttons together on a single line with <b-button-group>.",
-    "components": [
-      {
-        "component": "BButtonGroup",
-        "description": "Group a series of buttons together on a single line",
-        "aliases": [
-          "BBtnGroup"
-        ],
-        "props": [
-          {
-            "prop": "vertical",
-            "description": "When set, rendered the button group in vertical mode"
-          }
-        ],
-        "slots": [
-          {
-            "name": "default",
-            "description": "Content (buttons) to place in the button group"
-          }
-        ]
-      }
-    ]
-  }
-}