@gitlab/ui 129.5.1 → 130.0.1

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

@@ -13,8 +13,6 @@ const NAME_DROPDOWN_TEXT = 'BDropdownText';
 const NAME_FORM = 'BForm';
 const NAME_FORM_GROUP = 'BFormGroup';
 const NAME_FORM_INVALID_FEEDBACK = 'BFormInvalidFeedback';
-const NAME_FORM_RADIO = 'BFormRadio';
-const NAME_FORM_RADIO_GROUP = 'BFormRadioGroup';
 const NAME_FORM_ROW = 'BFormRow';
 const NAME_FORM_SELECT = 'BFormSelect';
 const NAME_FORM_SELECT_OPTION = 'BFormSelectOption';
@@ -54,4 +52,4 @@ const NAME_TRANSITION = 'BVTransition';
 const NAME_TRANSPORTER = 'BVTransporter';
 const NAME_TRANSPORTER_TARGET = 'BVTransporterTarget';
 
-export { NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_COL, 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_GROUP, 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_LINK, NAME_MODAL, 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_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_GROUP, NAME_FORM_INVALID_FEEDBACK, 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_LINK, NAME_MODAL, 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": "129.5.1",
+  "version": "130.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -119,9 +119,9 @@
     "@storybook/vue3": "^7.6.20",
     "@storybook/vue3-webpack5": "^7.6.20",
     "@types/jest-image-snapshot": "^6.4.1",
-    "@vue/compat": "^3.5.24",
-    "@vue/compiler-sfc": "^3.5.24",
-    "@vue/server-renderer": "^3.5.24",
+    "@vue/compat": "3.5.30",
+    "@vue/compiler-sfc": "3.5.30",
+    "@vue/server-renderer": "3.5.30",
     "@vue/test-utils": "1.3.6",
     "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.4.6",
     "@vue/vue2-jest": "29.2.6",
@@ -143,7 +143,7 @@
     "jest-circus": "30.3.0",
     "jest-environment-jsdom": "30.3.0",
     "jest-image-snapshot": "^6.5.2",
-    "merge-cobertura": "^1.0.7",
+    "merge-cobertura": "^1.0.8",
     "mockdate": "^3.0.5",
     "module-alias": "^2.3.4",
     "pikaday": "^1.8.0",

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -8,7 +8,7 @@ $breadcrumb-max-width: $grid-size * 16;
 .gl-breadcrumb-list {
   @apply gl-bg-transparent;
   @apply gl-p-0;
-  @apply gl-items-center;
+  @apply gl-items-start;
   @apply gl-leading-normal;
   @apply gl-m-0;
   @apply gl-flex-nowrap;
@@ -17,6 +17,8 @@ $breadcrumb-max-width: $grid-size * 16;
 
 // bootstrap overrides
 .gl-breadcrumb-item {
+  @apply gl-inline-flex;
+  @apply gl-items-center;
   @apply gl-leading-normal;
   @apply gl-shrink-0;
 
@@ -56,10 +58,12 @@ $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumb-item-sm {
   @apply gl-text-sm;
+  @apply gl-h-6;
 }
 
 .gl-breadcrumb-item-md {
   @apply gl-text-base;
+  @apply gl-h-7;
 }
 
 .gl-breadcrumb-item {

package/src/components/base/form/form_checkbox/form_checkbox.vue

@@ -6,7 +6,7 @@ import { looseIndexOf } from '../../../../vendor/bootstrap-vue/src/utils/loose-i
 export default {
   name: 'GlFormCheckbox',
   inject: {
-    getGroup: {
+    getCheckboxGroup: {
       default: () => () => null,
     },
   },
@@ -108,7 +108,7 @@ export default {
     },
   },
   data() {
-    const group = this.getGroup();
+    const group = this.getCheckboxGroup();
     return {
       internalId: this.id ? this.id : uniqueId('gitlab_ui_checkbox_'),
       localChecked: group ? group.checked : this.checked,
@@ -128,7 +128,7 @@ export default {
       },
     },
     group() {
-      return this.getGroup();
+      return this.getCheckboxGroup();
     },
     isGroup() {
       // Is this check a child of check-group?

package/src/components/base/form/form_checkbox/form_checkbox_group.vue

@@ -17,7 +17,7 @@ export default {
   mixins: [formOptionsMixin],
   provide() {
     return {
-      getGroup: () => this,
+      getCheckboxGroup: () => this,
     };
   },
   inheritAttrs: false,
@@ -101,11 +101,6 @@ export default {
     computedState() {
       return isBoolean(this.state) ? this.state : null;
     },
-    stateClass() {
-      if (this.computedState === true) return 'is-valid';
-      if (this.computedState === false) return 'is-invalid';
-      return null;
-    },
     computedAriaInvalid() {
       const { ariaInvalid } = this;
       if (ariaInvalid === true || ariaInvalid === 'true' || ariaInvalid === '') {
@@ -125,8 +120,8 @@ export default {
       return pick(this.$attrs, PASS_DOWN_ATTRS);
     },
     groupName() {
-      // Checks/Radios tied to the same model must have the same name,
-      // especially for ARIA accessibility
+      // Checkboxes tied to the same model must have the same name, especially for
+      // ARIA accessibility. This is accessed from the child GlFormCheckboxes.
       return this.name || this.internalId;
     },
   },

package/src/components/base/form/form_radio/form_radio.vue

@@ -5,10 +5,7 @@ import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equ
 export default {
   name: 'GlFormRadio',
   inject: {
-    getGroup: {
-      // When we remove BFormRadioGroup from GlFormRadioGroup, we can rename
-      // the `getBvRadioGroup` provide to `getRadioGroup`.
-      from: 'getBvRadioGroup',
+    getRadioGroup: {
       default: () => () => null,
     },
   },
@@ -78,7 +75,7 @@ export default {
     },
   },
   data() {
-    const group = this.getGroup();
+    const group = this.getRadioGroup();
     return {
       internalId: this.id ? this.id : uniqueId('gitlab_ui_radio_'),
       localChecked: group ? group.checked : this.checked,
@@ -98,7 +95,7 @@ export default {
       },
     },
     group() {
-      return this.getGroup();
+      return this.getRadioGroup();
     },
     isGroup() {
       // Is this radio a child of radio-group?

package/src/components/base/form/form_radio_group/form_radio_group.vue

@@ -1,56 +1,164 @@
 <script>
+import { uniqueId, isBoolean, omit, pick } from 'lodash-es';
+import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
 import { formOptionsMixin } from '../../../../vendor/bootstrap-vue/src/mixins/form-options';
-import { BFormRadioGroup } from '../../../../vendor/bootstrap-vue/src/components/form-radio/form-radio-group';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormRadio from '../form_radio/form_radio.vue';
 
-const { model } = BFormRadioGroup.options;
+// Attributes to pass down to checks/radios instead of applying them to the group
+const PASS_DOWN_ATTRS = ['aria-describedby', 'aria-labelledby'];
 
 export default {
   name: 'GlFormRadioGroup',
   components: {
-    BFormRadioGroup,
     GlFormRadio,
   },
   directives: {
     SafeHtml,
   },
   mixins: [formOptionsMixin],
+  provide() {
+    return {
+      getRadioGroup: () => this,
+    };
+  },
   inheritAttrs: false,
-  model,
-  methods: {
-    onInput(e) {
-      /**
-       * Emitted when the selected value is changed.
-       *
-       * @event input
-       */
-      this.$emit('input', e);
+  model: {
+    prop: 'checked',
+    event: 'input',
+  },
+  props: {
+    /**
+     * Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed.
+     */
+    id: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * The current value of the radio.
+     */
+    checked: {
+      // `checked` prop can be any type
+      type: undefined,
+      required: false,
+      default: null,
+    },
+    /**
+     * Array of items to render in the component
+     */
+    options: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    /**
+     * When set to `true`, disables the component's functionality and places it in a disabled state.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Sets the value of the `name` attribute on the form control.
+     */
+    name: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * Adds the `required` attribute to the form control.
+     */
+    required: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state.
+     */
+    state: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
+    /**
+     * Optional value to set for the 'aria-invalid' attribute. Supported values are 'true' and 'false'. If not set, the 'state' prop will dictate the value
+     */
+    ariaInvalid: {
+      type: [Boolean, String],
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      internalId: this.id ? this.id : uniqueId('gitlab_ui_radio_group_'),
+      localChecked: this.checked,
+    };
+  },
+  computed: {
+    computedState() {
+      return isBoolean(this.state) ? this.state : null;
+    },
+    computedAriaInvalid() {
+      const { ariaInvalid } = this;
+      if (ariaInvalid === true || ariaInvalid === 'true' || ariaInvalid === '') {
+        return 'true';
+      }
+      return this.computedState === false ? 'true' : ariaInvalid;
+    },
+    computedAttrs() {
+      return {
+        ...omit(this.$attrs, PASS_DOWN_ATTRS),
+        id: this.internalId,
+        'aria-invalid': this.computedAriaInvalid,
+        'aria-required': this.required || null,
+      };
+    },
+    passDownAttrs() {
+      return pick(this.$attrs, PASS_DOWN_ATTRS);
+    },
+    groupName() {
+      // Radios tied to the same model must have the same name, especially for
+      // ARIA accessibility. This is accessed from the child GlFormRadios.
+      return this.name || this.internalId;
+    },
+  },
+  watch: {
+    checked(newValue) {
+      if (!looseEqual(newValue, this.localChecked)) {
+        this.localChecked = newValue;
+      }
     },
-    onChange(e) {
-      /**
-       * Emitted when the selected value is changed.
-       *
-       * @event change
-       */
-      this.$emit('change', e);
+    localChecked(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        /**
+         * Emitted when the selected value is changed.
+         *
+         * @event input
+         */
+        this.$emit('input', newValue);
+      }
     },
   },
 };
 </script>
 <template>
-  <b-form-radio-group
-    class="gl-form-checkbox-group"
-    stacked
-    v-bind="$attrs"
-    v-on="$listeners"
-    @input="onInput"
-    @change="onChange"
+  <div
+    v-bind="computedAttrs"
+    role="radiogroup"
+    tabindex="-1"
+    class="gl-form-radio-group gl-outline-none"
   >
     <!-- @slot Slot for GlFormRadios that will appear before radios generated from options prop -->
     <slot name="first"></slot>
     <gl-form-radio
       v-for="(option, idx) in formOptions"
+      v-bind="passDownAttrs"
       :key="idx"
       :value="option.value"
       :disabled="option.disabled"
@@ -60,5 +168,5 @@ export default {
     </gl-form-radio>
     <!-- @slot Slot for GlFormRadios that will appear after radios generated from options prop -->
     <slot></slot>
-  </b-form-radio-group>
+  </div>
 </template>

package/src/scss/bootstrap_vue.scss

@@ -7,7 +7,6 @@ $bv-enable-popover-variants: false;
 @import "../vendor/bootstrap-vue/src/utilities.scss";
 
 @import "../vendor/bootstrap-vue/src/components/dropdown/index.scss";
-@import "../vendor/bootstrap-vue/src/components/form-radio/index.scss";
 @import "../vendor/bootstrap-vue/src/components/modal/index.scss";
 @import "../vendor/bootstrap-vue/src/components/popover/index.scss";
 @import "../vendor/bootstrap-vue/src/components/table/index.scss";

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

@@ -13,8 +13,6 @@ export const NAME_DROPDOWN_TEXT = 'BDropdownText'
 export const NAME_FORM = 'BForm'
 export const NAME_FORM_GROUP = 'BFormGroup'
 export const NAME_FORM_INVALID_FEEDBACK = 'BFormInvalidFeedback'
-export const NAME_FORM_RADIO = 'BFormRadio'
-export const NAME_FORM_RADIO_GROUP = 'BFormRadioGroup'
 export const NAME_FORM_ROW = 'BFormRow'
 export const NAME_FORM_SELECT = 'BFormSelect'
 export const NAME_FORM_SELECT_OPTION = 'BFormSelectOption'

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

@@ -1,28 +0,0 @@
-import { extend } from '../../vue';
-import { NAME_FORM_RADIO_GROUP } from '../../constants/components';
-import { props as props$1, formRadioCheckGroupMixin } from '../../mixins/form-radio-check-group';
-
-// --- Props ---
-
-const props = props$1;
-
-// --- Main component ---
-
-// @vue/component
-const BFormRadioGroup = /*#__PURE__*/extend({
-  name: NAME_FORM_RADIO_GROUP,
-  mixins: [formRadioCheckGroupMixin],
-  provide() {
-    return {
-      getBvRadioGroup: () => this
-    };
-  },
-  props,
-  computed: {
-    isRadioGroup() {
-      return true;
-    }
-  }
-});
-
-export { BFormRadioGroup, props };

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

@@ -1,29 +0,0 @@
-import { extend } from '../../vue';
-import { NAME_FORM_RADIO } from '../../constants/components';
-import { props as props$1, formRadioCheckMixin } from '../../mixins/form-radio-check';
-
-// --- Props ---
-
-const props = props$1;
-
-// --- Main component ---
-
-// @vue/component
-const BFormRadio = /*#__PURE__*/extend({
-  name: NAME_FORM_RADIO,
-  mixins: [formRadioCheckMixin],
-  inject: {
-    getBvGroup: {
-      from: 'getBvRadioGroup',
-      default: () => () => null
-    }
-  },
-  props,
-  computed: {
-    bvGroup() {
-      return this.getBvGroup();
-    }
-  }
-});
-
-export { BFormRadio, props };

package/dist/vendor/bootstrap-vue/src/components/form-radio/index.js

@@ -1,2 +0,0 @@
-export { BFormRadio } from './form-radio';
-export { BFormRadioGroup } from './form-radio-group';

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

@@ -1,127 +0,0 @@
-import { extend } from '../vue';
-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';
-import { makeModelMixin } from '../utils/model';
-import { sortKeys, pick, omit } from '../utils/object';
-import { makeProp } from '../utils/props';
-import { BFormRadio } from '../components/form-radio/form-radio';
-import { props as props$2, formControlMixin } from './form-control';
-import { props as props$6, formCustomMixin } from './form-custom';
-import { props as props$3, formOptionsMixin } from './form-options';
-import { props as props$4, formSizeMixin } from './form-size';
-import { props as props$5, formStateMixin } from './form-state';
-import { props as props$1, idMixin } from './id';
-import { normalizeSlotMixin } from './normalize-slot';
-
-// --- Constants ---
-
-// Attributes to pass down to checks/radios instead of applying them to the group
-const PASS_DOWN_ATTRS = ['aria-describedby', 'aria-labelledby'];
-const {
-  mixin: modelMixin,
-  props: modelProps,
-  prop: MODEL_PROP_NAME,
-  event: MODEL_EVENT_NAME
-} = makeModelMixin('checked');
-
-// --- Props ---
-
-const props = sortKeys({
-  ...props$1,
-  ...modelProps,
-  ...props$2,
-  ...props$3,
-  ...props$4,
-  ...props$5,
-  ...props$6,
-  ariaInvalid: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
-  stacked: makeProp(PROP_TYPE_BOOLEAN, false),
-  validated: makeProp(PROP_TYPE_BOOLEAN, false)
-});
-
-// --- Mixin ---
-
-// @vue/component
-const formRadioCheckGroupMixin = extend({
-  mixins: [idMixin, modelMixin, normalizeSlotMixin, formControlMixin, formOptionsMixin, formSizeMixin, formStateMixin, formCustomMixin],
-  inheritAttrs: false,
-  props,
-  data() {
-    return {
-      localChecked: this[MODEL_PROP_NAME]
-    };
-  },
-  computed: {
-    inline() {
-      return !this.stacked;
-    },
-    groupName() {
-      // Checks/Radios tied to the same model must have the same name,
-      // especially for ARIA accessibility
-      return this.name || this.safeId();
-    },
-    groupClasses() {
-      const {
-        validated
-      } = this;
-      return {
-        'was-validated': validated
-      };
-    }
-  },
-  watch: {
-    [MODEL_PROP_NAME](newValue) {
-      if (!looseEqual(newValue, this.localChecked)) {
-        this.localChecked = newValue;
-      }
-    },
-    localChecked(newValue, oldValue) {
-      if (!looseEqual(newValue, oldValue)) {
-        this.$emit(MODEL_EVENT_NAME, newValue);
-      }
-    }
-  },
-  render(h) {
-    const {
-      isRadioGroup
-    } = this;
-    const attrs = pick(this.$attrs, PASS_DOWN_ATTRS);
-    const optionComponent = BFormRadio;
-    const $inputs = this.formOptions.map((option, index) => {
-      const key = `BV_option_${index}`;
-      return h(optionComponent, {
-        props: {
-          // Individual radios or checks can be disabled in a group
-          disabled: option.disabled || false,
-          id: this.safeId(key),
-          value: option.value
-          // We don't need to include these, since the input's will know they are inside here
-          // form: this.form || null,
-          // name: this.groupName,
-          // required: Boolean(this.name && this.required),
-          // state: this.state
-        },
-        attrs,
-        key
-      }, [h('span', {
-        domProps: htmlOrText(option.html, option.text)
-      })]);
-    });
-    return h('div', {
-      class: [this.groupClasses, 'bv-no-focus-ring'],
-      attrs: {
-        ...omit(this.$attrs, PASS_DOWN_ATTRS),
-        'aria-invalid': this.computedAriaInvalid,
-        'aria-required': this.required ? 'true' : null,
-        id: this.safeId(),
-        role: isRadioGroup ? 'radiogroup' : 'group',
-        // Add `tabindex="-1"` to allow group to be focused if needed by screen readers
-        tabindex: '-1'
-      }
-    }, [this.normalizeSlot(SLOT_NAME_FIRST), $inputs, this.normalizeSlot()]);
-  }
-});
-
-export { MODEL_EVENT_NAME, MODEL_PROP_NAME, formRadioCheckGroupMixin, props };