@gitlab/ui 131.3.0 → 131.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "131.3.0",
+  "version": "131.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -90,7 +90,7 @@
     "chokidar": "^4.0.3",
     "sane": "^5.0.1",
     "jackspeak": "2.1.1",
-    "postcss": "8.5.8",
+    "postcss": "8.5.9",
     "json5": "2.2.3",
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
@@ -135,7 +135,7 @@
     "autoprefixer": "10.4.27",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.13.0",
+    "cypress": "15.13.1",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
@@ -152,7 +152,7 @@
     "pikaday": "^1.8.0",
     "playwright": "^1.59.1",
     "playwright-core": "^1.59.1",
-    "postcss": "8.5.8",
+    "postcss": "8.5.9",
     "postcss-loader": "8.2.1",
     "postcss-scss": "4.0.9",
     "react": "18.3.1",

package/src/components/utilities/truncate/truncate.scss

@@ -6,8 +6,10 @@
 .gl-truncate-start,
 .gl-truncate-end {
   flex: 0 1 auto;
+  min-width: 0;
   white-space: nowrap;
-  overflow: hidden;
+  overflow-x: clip;
+  overflow-y: visible;
 }
 
 .gl-truncate-start {

package/src/scss/mixins.scss

@@ -2,7 +2,9 @@
 
 @mixin str-truncated($max-width: 82%) {
   display: inline-block;
-  overflow: hidden;
+  min-width: 0;
+  overflow-x: clip;
+  overflow-y: visible;
   text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;

package/tailwind.defaults.js

@@ -163,7 +163,9 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
     },
     '.str-truncated': {
       display: 'inline-block',
-      overflow: 'hidden',
+      'min-width': '0',
+      'overflow-x': 'clip',
+      'overflow-y': 'visible',
       'text-overflow': 'ellipsis',
       'vertical-align': 'top',
       'white-space': 'nowrap',
@@ -231,6 +233,13 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
     '.text-align-inherit': {
       'text-align': 'inherit',
     },
+    '.truncate': {
+      'overflow-x': 'clip',
+      'overflow-y': 'visible',
+      'text-overflow': 'ellipsis',
+      'white-space': 'nowrap',
+      'min-width': '0',
+    },
   });
 }
 

package/dist/charts.js

@@ -1,13 +0,0 @@
-export { default as GlChart } from './components/charts/chart/chart';
-export { default as GlAreaChart } from './components/charts/area/area';
-export { default as GlBarChart } from './components/charts/bar/bar';
-export { default as GlGaugeChart } from './components/charts/gauge/gauge';
-export { default as GlLineChart } from './components/charts/line/line';
-export { default as GlChartLegend } from './components/charts/legend/legend';
-export { default as GlChartSeriesLabel } from './components/charts/series_label/series_label';
-export { default as GlHeatmap } from './components/charts/heatmap';
-export { default as GlColumnChart } from './components/charts/column/column';
-export { default as GlStackedColumnChart } from './components/charts/stacked_column/stacked_column';
-export { default as GlDiscreteScatterChart } from './components/charts/discrete_scatter/discrete_scatter';
-export { default as GlSingleStat } from './components/charts/single_stat/single_stat';
-export { default as GlSparklineChart } from './components/charts/sparkline/sparkline';

package/dist/components/base/accordion/accordion.js

@@ -1,69 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAccordion',
-  provide() {
-    return {
-      defaultHeaderLevel: this.headerLevel,
-      autoCollapse: this.autoCollapse
-    };
-  },
-  props: {
-    /**
-     * When true, will have the effect of closing other accordion items when one accordion item is visible.
-     */
-    autoCollapse: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.
-     */
-    headerLevel: {
-      type: Number,
-      required: true,
-      validator(value) {
-        return value > 0 && value <= 6;
-      }
-    }
-  }
-};
-
-/* 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',[_vm._t("default")],2)};
-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__ = /*#__PURE__*/__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 { __vue_component__ as default };

package/dist/components/base/accordion/accordion_item.js

@@ -1,160 +0,0 @@
-import { uniqueId } from 'lodash-es';
-import GlCollapse from '../collapse/collapse';
-import GlAnimatedChevronRightDownIcon from '../animated_icon/animated_chevron_right_down_icon';
-import GlButton from '../button/button';
-import { COLLAPSE_EVENT } from './constants';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAccordionItem',
-  components: {
-    GlCollapse,
-    GlButton,
-    GlAnimatedChevronRightDownIcon
-  },
-  inject: ['defaultHeaderLevel', 'autoCollapse'],
-  inheritAttrs: false,
-  model: {
-    prop: 'visible',
-    event: 'input'
-  },
-  props: {
-    /**
-     * Used to set the title of accordion link
-     */
-    title: {
-      type: String,
-      required: true
-    },
-    /**
-     * Used to set the title of accordion link when the content is visible
-     * */
-    titleVisible: {
-      type: String,
-      default: null,
-      required: false
-    },
-    /**
-     * When set, it will ensure the accordion item is initially visible
-     */
-    visible: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    /**
-     * The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.,
-     */
-    headerLevel: {
-      type: Number,
-      required: false,
-      default: null,
-      validator(value) {
-        return value > 0 && value <= 6;
-      }
-    },
-    /**
-     * Additional CSS class(es) to be applied to the header
-     */
-    headerClass: {
-      type: [String, Object, Array],
-      required: false,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      accordionItemId: uniqueId('accordion-item-'),
-      localVisible: this.visible
-    };
-  },
-  computed: {
-    headerComponent() {
-      const level = this.headerLevel || this.defaultHeaderLevel;
-      return `h${level}`;
-    },
-    buttonTitle() {
-      return this.localVisible && this.titleVisible ? this.titleVisible : this.title;
-    }
-  },
-  watch: {
-    visible: {
-      handler(newVisible) {
-        this.localVisible = newVisible;
-        this.checkAndCollapseSiblingAccordionItems(newVisible);
-      }
-    }
-  },
-  created() {
-    this.$emit('input', this.localVisible);
-  },
-  mounted() {
-    this.$parent.$el.addEventListener(COLLAPSE_EVENT, this.onParentCollapse);
-  },
-  beforeDestroy() {
-    this.$parent.$el.removeEventListener(COLLAPSE_EVENT, this.onParentCollapse);
-  },
-  methods: {
-    onParentCollapse(_ref) {
-      let {
-        detail: accordionItemId
-      } = _ref;
-      if (accordionItemId === this.accordionItemId) {
-        return;
-      }
-      this.$emit('input', false);
-      this.localVisible = false;
-    },
-    onButtonClick() {
-      const newLocalVisible = !this.localVisible;
-      this.$emit('input', newLocalVisible);
-      this.localVisible = newLocalVisible;
-      this.checkAndCollapseSiblingAccordionItems(newLocalVisible);
-    },
-    checkAndCollapseSiblingAccordionItems(newVisible) {
-      if (this.autoCollapse && newVisible) {
-        this.$parent.$el.dispatchEvent(new CustomEvent(COLLAPSE_EVENT, {
-          detail: this.accordionItemId
-        }));
-      }
-    }
-  }
-};
-
-/* 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:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{attrs:{"variant":"link","button-text-classes":"gl-flex","aria-expanded":_vm.localVisible ? 'true' : 'false',"aria-controls":_vm.accordionItemId},on:{"click":_vm.onButtonClick}},[_c('gl-animated-chevron-right-down-icon',{attrs:{"is-on":_vm.localVisible}}),_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")],1)],1),_vm._v(" "),_c('gl-collapse',{attrs:{"id":_vm.accordionItemId,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.localVisible),callback:function ($$v) {_vm.localVisible=$$v;},expression:"localVisible"}},[_c('div',{staticClass:"gl-mt-3 gl-text-base"},[_vm._t("default")],2)])],1)};
-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__ = /*#__PURE__*/__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 { __vue_component__ as default };

package/dist/components/base/accordion/constants.js

@@ -1,3 +0,0 @@
-const COLLAPSE_EVENT = 'collapse';
-
-export { COLLAPSE_EVENT };

package/dist/components/base/alert/alert.js

@@ -1,263 +0,0 @@
-import { translate } from '../../../utils/i18n';
-import { alertVariantOptions, alertVariantIconMap, buttonCategoryOptions } from '../../../utils/constants';
-import CloseButton from '../../shared_components/close_button/close_button';
-import GlButton from '../button/button';
-import GlIcon from '../icon/icon';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAlert',
-  components: {
-    GlIcon,
-    CloseButton,
-    GlButton
-  },
-  expose: ['focus'],
-  props: {
-    /**
-     * The title text to display in the alert header.
-     */
-    title: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * Controls the dismiss button's visibility.
-     */
-    dismissible: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * The close button's label, it is used for the button's aria-label attribute.
-     */
-    dismissLabel: {
-      type: String,
-      required: false,
-      default: () => translate('GlAlert.closeButtonTitle', 'Dismiss')
-    },
-    /**
-     * The variant of the alert.
-     */
-    variant: {
-      type: String,
-      required: false,
-      default: alertVariantOptions.info,
-      validator: value => Object.keys(alertVariantOptions).includes(value)
-    },
-    /**
-     * If provided, renders the primary button as a link.
-     */
-    primaryButtonLink: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * If provided, renders a primary action button.
-     */
-    primaryButtonText: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * If provided, renders the secondary button as a link.
-     */
-    secondaryButtonLink: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * If provided, renders a secondary action button.
-     */
-    secondaryButtonText: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * When true, the alert stays fixed at the top of its container.
-     */
-    sticky: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * The header level used in the alert (h1/h2/h3/h4/h5/h6).
-     *
-     * This overrides the value provided by GlAlert. For accessibility this should be set to an
-     * appropriate value in the context where the alert is used.
-     */
-    headerLevel: {
-      type: Number,
-      required: false,
-      default: 2,
-      validator(value) {
-        return [1, 2, 3, 4, 5, 6].includes(value);
-      }
-    },
-    /**
-     * Set the aria-live attribute on the alert.
-     *
-     * Only set to 'assertive' if alert requires immediate user action.
-     * Otherwise, rely on the default value.
-     *
-     */
-    politeness: {
-      type: String,
-      required: false,
-      default: 'polite',
-      validator(value) {
-        return ['off', 'polite', 'assertive'].includes(value);
-      }
-    }
-  },
-  data() {
-    return {
-      hasProgrammaticFocus: false
-    };
-  },
-  computed: {
-    headingComponent() {
-      return `h${this.headerLevel}`;
-    },
-    role() {
-      if ([alertVariantOptions.danger, alertVariantOptions.warning, alertVariantOptions.success].includes(this.variant)) {
-        return 'alert';
-      }
-      return 'status';
-    },
-    iconName() {
-      return alertVariantIconMap[this.variant];
-    },
-    shouldRenderActions() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots.actions || this.actionButtons.length);
-    },
-    actionButtons() {
-      return [{
-        text: this.primaryButtonText,
-        attrs: {
-          href: this.primaryButtonLink,
-          variant: 'confirm',
-          category: buttonCategoryOptions.primary
-        },
-        listeners: {
-          click: this.primaryButtonClicked
-        }
-      }, {
-        text: this.secondaryButtonText,
-        attrs: {
-          href: this.secondaryButtonLink,
-          variant: 'default',
-          category: buttonCategoryOptions.secondary
-        },
-        listeners: {
-          click: this.secondaryButtonClicked
-        }
-      }].reduce((acc, actionButton) => {
-        if (!actionButton.text) return acc;
-        const attrs = {
-          ...actionButton.attrs
-        };
-        if (!attrs.href) {
-          delete attrs.href;
-        }
-        acc.push({
-          ...actionButton,
-          attrs
-        });
-        return acc;
-      }, []);
-    },
-    variantClass() {
-      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
-      return `gl-alert-${this.variant}`;
-    }
-  },
-  methods: {
-    /**
-     * Focus the alert.
-     */
-    focus() {
-      this.$el.focus();
-      this.hasProgrammaticFocus = true;
-    },
-    primaryButtonClicked(event) {
-      /**
-       * Emitted when the primary action button is clicked.
-       *
-       * @event primaryAction
-       * @type {object}
-       */
-      this.$emit('primaryAction', event);
-    },
-    secondaryButtonClicked(event) {
-      /**
-       * Emitted when the secondary action button is clicked.
-       *
-       * @event secondaryAction
-       * @type {object}
-       */
-      this.$emit('secondaryAction', event);
-    },
-    onDismiss() {
-      /**
-       * Emitted when the dismiss button is clicked.
-       *
-       * @event dismiss
-       * @type {object}
-       */
-      this.$emit('dismiss');
-    }
-  }
-};
-
-/* 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',{class:[
-    'gl-alert',
-    { 'gl-alert-sticky': _vm.sticky },
-    { 'gl-alert-not-dismissible': !_vm.dismissible },
-    { 'gl-alert-has-title': !!_vm.title },
-    { 'gl-focus': _vm.hasProgrammaticFocus },
-    _vm.variantClass ],attrs:{"role":_vm.role,"aria-live":_vm.politeness,"tabindex":"-1"},on:{"blur":function($event){_vm.hasProgrammaticFocus = false;}}},[_c('div',{staticClass:"gl-alert-icon-container"},[_c('gl-icon',{staticClass:"gl-alert-icon",attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-alert-content"},[(_vm.title)?_c(_vm.headingComponent,{tag:"component",staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()],1),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
-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__ = /*#__PURE__*/__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 { __vue_component__ as default };

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

@@ -1,45 +0,0 @@
-import GlBaseAnimatedIcon from './base_animated_icon';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAnimatedChevronDownUpIcon',
-  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, _vm.iconVariantClass],attrs:{"aria-label":_vm.ariaLabel,"width":"16","height":"16","viewBox":"0 0 16 16","fill":"none","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{staticClass:"gl-animated-chevron-down-up-arrow-left-line",attrs:{"d":"M0 0L0 4.6","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-chevron-down-up-arrow-right-line",attrs:{"d":"M0 0L0 4.6","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}})])};
-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__ = /*#__PURE__*/__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 { __vue_component__ as default };

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

@@ -1,45 +0,0 @@
-import GlBaseAnimatedIcon from './base_animated_icon';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAnimatedChevronLgDownUpIcon',
-  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, _vm.iconVariantClass],attrs:{"aria-label":_vm.ariaLabel,"width":"16","height":"16","viewBox":"0 0 16 16","fill":"none","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{staticClass:"gl-animated-chevron-lg-down-up-arrow-left-line",attrs:{"d":"M0 0L0 7.5","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-chevron-lg-down-up-arrow-right-line",attrs:{"d":"M0 0L0 7.5","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}})])};
-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__ = /*#__PURE__*/__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 { __vue_component__ as default };