@gitlab/ui 101.16.0 → 102.0.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+# [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)
 
 

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/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.16.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/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/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: {