@gitlab/ui 108.7.0 → 108.8.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [108.8.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.8.0...v108.8.1) (2025-02-27)
+
+
+### Bug Fixes
+
+* **GlTruncate:** Prevent total whitespace collapse ([2811b7e](https://gitlab.com/gitlab-org/gitlab-ui/commit/2811b7e7e9a7fc37bd17042063ee3e4504cb380d))
+
+# [108.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.7.0...v108.8.0) (2025-02-27)
+
+
+### Features
+
+* **GlDatepicker:** use variant prop on GlIcon for disabled control ([f64fe84](https://gitlab.com/gitlab-org/gitlab-ui/commit/f64fe843b018b4fe04ea8626c38d942b729bd279))
+* **GlLabel:** update scoped label title text color to text.color.strong ([6df7597](https://gitlab.com/gitlab-org/gitlab-ui/commit/6df7597071f2e24800a784b164616a1a7a5b5f44))
+
 # [108.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.6.0...v108.7.0) (2025-02-26)
 
 

package/dist/components/base/datepicker/datepicker.js

@@ -380,7 +380,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('div',{class:_vm.datepickerClasses},[(_vm.showDefaultField)?_c('div',{staticClass:"gl-flex gl-items-start gl-gap-3"},[_c('div',{staticClass:"gl-relative gl-flex gl-grow"},[_vm._t("default",function(){return [_c('gl-form-input',{class:_vm.renderClearButton ? '!gl-pr-9' : '!gl-pr-7',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel,"state":_vm.state},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown.apply(null, arguments)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})]},{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2",class:_vm.disabled ? 'gl-text-gray-400' : 'gl-text-gray-500',attrs:{"data-testid":"datepicker-calendar-icon"}},[_c('gl-icon',{staticClass:"gl-block",attrs:{"name":"calendar","size":16}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2),_vm._v(" "),_vm._t("after")],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.datepickerClasses},[(_vm.showDefaultField)?_c('div',{staticClass:"gl-flex gl-items-start gl-gap-3"},[_c('div',{staticClass:"gl-relative gl-flex gl-grow"},[_vm._t("default",function(){return [_c('gl-form-input',{class:_vm.renderClearButton ? '!gl-pr-9' : '!gl-pr-7',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel,"state":_vm.state},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown.apply(null, arguments)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})]},{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2"},[_c('gl-icon',{staticClass:"gl-block",attrs:{"data-testid":"datepicker-calendar-icon","name":"calendar","size":16,"variant":_vm.disabled ? 'disabled' : 'default'}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2),_vm._v(" "),_vm._t("after")],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/utilities/truncate/constants.js

@@ -3,5 +3,6 @@ const POSITION = {
   MIDDLE: 'middle',
   END: 'end'
 };
+const ZERO_WIDTH_SPACE = '\u200b';
 
-export { POSITION };
+export { POSITION, ZERO_WIDTH_SPACE };

package/dist/components/utilities/truncate/truncate.js

@@ -1,6 +1,6 @@
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
-import { POSITION } from './constants';
+import { POSITION, ZERO_WIDTH_SPACE } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
@@ -46,8 +46,49 @@ var script = {
     middleIndex() {
       return Math.floor(this.text.length / 2);
     },
+    preventWhitespaceCollapse() {
+      // We don't use `\s` here since it includes non-breaking spaces and other
+      // non-collapsible whitespace characters.
+      // See https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace
+      // and https://infra.spec.whatwg.org/#ascii-whitespace.
+      const collapsibleWhitespaceChar = /^[ \n\t\r\f]$/;
+      const {
+        text,
+        middleIndex
+      } = this;
+      const lastCharOfFirstIsCollapsibleWhitespace = collapsibleWhitespaceChar.test(text.charAt(middleIndex - 1));
+      const firstCharOfLastIsCollapsibleWhitespace = collapsibleWhitespaceChar.test(text.charAt(middleIndex));
+      return lastCharOfFirstIsCollapsibleWhitespace && !firstCharOfLastIsCollapsibleWhitespace;
+    },
     first() {
-      return this.text.slice(0, this.middleIndex);
+      const first = this.text.slice(0, this.middleIndex);
+      if (this.preventWhitespaceCollapse) {
+        // Because this component's root element has an internal flex layout,
+        // whitespace at the end of the first child span and at the beginning
+        // of the second child span would be ignored (i.e., totally collapsed).
+        //
+        // This means that strings with a space character in the middle would
+        // render as if there were no space, which would be incorrect (e.g.,
+        // "Gap here" would render as "Gaphere").
+        //
+        // So, in that case, we insert a zero-width space at the end of the
+        // first child span to prevent that whitespace from being totally
+        // collapsed. In other words:
+        // 'first-part-with-space ' → 'first-part-with-space ​'
+        //
+        // If there's a whitespace character at the begging of the second child
+        // span, we do *not* do this, since the left-to-right mark (‎) just
+        // before `{{ last }}` in the template prevents the collapse of any
+        // whitespace at the start of `last`. If we ignored this edge case,
+        // we'd render a double space, which wouldn't correspond to how the
+        // string would normally render.
+        //
+        // See
+        // https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#whitespace_in_block_formatting_contexts
+        // for more information on how browsers treat whitespace.
+        return `${first}${ZERO_WIDTH_SPACE}`;
+      }
+      return first;
     },
     last() {
       return this.text.slice(this.middleIndex);