@gitlab/ui 96.3.0 → 97.1.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+# [97.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v97.0.0...v97.1.0) (2024-10-16)
+
+
+### Features
+
+* **DesignTokens:** add token-selector design tokens ([54a79d3](https://gitlab.com/gitlab-org/gitlab-ui/commit/54a79d319a32fd7a117a68dd201ff69ffc0185af))
+* **glToggle:** add border color and disabled attribute on toggle when disabled ([9047a39](https://gitlab.com/gitlab-org/gitlab-ui/commit/9047a390676b1c87ddd2607f2175ae0e3b9e2cc8))
+* **GlToggle:** change border color for interactive pseudo-classes ([bd3d5c8](https://gitlab.com/gitlab-org/gitlab-ui/commit/bd3d5c8e305d7e44d143b98b935a7e146cf7ea83))
+* **GlToggle:** remove gl-focus on hover ([877326a](https://gitlab.com/gitlab-org/gitlab-ui/commit/877326a1aaed05ad5f84724b4732f7e85b5d6293))
+* **GlTokenSelector:** use design tokens in GlTokenSelector ([cc5b2bc](https://gitlab.com/gitlab-org/gitlab-ui/commit/cc5b2bc193cd63fe8b0caceafac45b20132ae01b))
+
+# [97.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v96.3.0...v97.0.0) (2024-10-16)
+
+
+### Features
+
+* migrate GlProgressBar component ([c58a6c8](https://gitlab.com/gitlab-org/gitlab-ui/commit/c58a6c8197388cd97e44c7b87a6ec87e5bf23b4a))
+
+
+### BREAKING CHANGES
+
+* Remove GlProgressBar's `animated`, `precision`,
+`showValue`, `showProgress`, `striped` props, and functionality to use
+the default slot.
+
+* Migrate GlProgressBar component so it does not depend
+on Bootstrap Vue's BProgress and BProgressBar components anymore
+* Remove Bootstrap Vue's BProgress, BProgressBar, styling, and docs
+* Include documentation for GlProgressBar
+* Update stories to include `height` and `max`
+* Update toast docs to remove mention of progress bar styling
+
 # [96.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v96.2.0...v96.3.0) (2024-10-11)
 
 

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

@@ -144,7 +144,7 @@ var script = {
       }, []);
     },
     variantClass() {
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return `gl-alert-${this.variant}`;
     }
   },

package/dist/components/base/avatar/avatar.js

@@ -67,7 +67,7 @@ var script = {
   computed: {
     sizeClasses() {
       if (isNumber(this.size)) {
-        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
         return `gl-avatar-s${this.size}`;
       }
       const {
@@ -75,9 +75,9 @@ var script = {
         ...nonDefaultSizes
       } = this.size;
       return [
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       `gl-avatar-s${defaultSize || avatarSizeOptions[1]}`, ...Object.entries(nonDefaultSizes).map(
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       _ref => {
         let [breakpoint, size] = _ref;
         return `gl-${breakpoint}-avatar-s${size}`;
@@ -92,7 +92,7 @@ var script = {
        * Gets the remainder after dividing the 'entityId' by the number of available backgrounds.
        */
       const type = this.entityId % IDENTICON_BG_COUNT + 1;
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return `gl-avatar-identicon-bg${type}`;
     },
     identiconText() {

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

@@ -239,7 +239,7 @@ var script = {
     },
     datepickerClasses() {
       return ['gl-datepicker', 'd-inline-block', 'gl-w-full',
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       `gl-form-input-${this.computedWidth}`];
     },
     computedWidth() {

package/dist/components/base/drawer/drawer.js

@@ -60,7 +60,7 @@ var script = {
       return Boolean(this.$slots.footer);
     },
     variantClass() {
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return `gl-drawer-${this.variant}`;
     }
   },

package/dist/components/base/form/form_input/form_input.js

@@ -40,16 +40,16 @@ var script = {
           ...nonDefaultWidths
         } = this.width;
         return [
-        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
         ...(defaultWidth ? [`gl-form-input-${defaultWidth}`] : []), ...Object.entries(nonDefaultWidths).map(
-        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
         _ref => {
           let [breakpoint, width] = _ref;
           return `gl-${breakpoint}-form-input-${width}`;
         })];
       }
 
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return [`gl-form-input-${this.width}`];
     },
     listeners() {

package/dist/components/base/form/form_select/form_select.js

@@ -34,16 +34,16 @@ var script = {
           ...nonDefaultWidths
         } = this.width;
         return [
-        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
         ...(defaultWidth ? [`gl-form-select-${defaultWidth}`] : []), ...Object.entries(nonDefaultWidths).map(
-        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+        // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
         _ref => {
           let [breakpoint, width] = _ref;
           return `gl-${breakpoint}-form-select-${width}`;
         })];
       }
 
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return [`gl-form-select-${this.width}`];
     }
   }

package/dist/components/base/progress_bar/progress_bar.js

@@ -1,19 +1,61 @@
-import { BProgress } from '../../../vendor/bootstrap-vue/src/components/progress/progress';
+import { progressBarVariantOptions } from '../../../utils/constants';
+import { toFloat } from '../../../utils/number_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlProgressBar',
-  components: {
-    BProgress
+  props: {
+    value: {
+      type: [Number, String],
+      required: false,
+      default: 0
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: 'primary',
+      validator: value => Object.keys(progressBarVariantOptions).includes(value)
+    },
+    max: {
+      type: [Number, String],
+      required: false,
+      default: 100
+    },
+    height: {
+      type: String,
+      required: false,
+      default: null
+    }
   },
-  inheritAttrs: false
+  computed: {
+    progressHeight() {
+      return {
+        height: this.height
+      };
+    },
+    computedValue() {
+      return toFloat(this.value, 0);
+    },
+    computedMax() {
+      const max = toFloat(this.max, 100);
+      return max > 0 ? max : 100;
+    },
+    progressBarStyles() {
+      return {
+        transform: `scaleX(${this.computedValue / this.computedMax})`
+      };
+    },
+    classes() {
+      return ['gl-progress', `bg-${this.variant}`];
+    }
+  }
 };
 
 /* 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-progress',_vm._b({staticClass:"gl-progress-bar"},'b-progress',_vm.$attrs,false))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-progress-bar progress",style:(_vm.progressHeight)},[_c('div',{class:_vm.classes,style:(_vm.progressBarStyles),attrs:{"role":"progressbar","aria-valuemin":"0","aria-valuemax":String(_vm.computedMax),"aria-valuenow":_vm.computedValue}})])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/toast/toast.js

@@ -31,7 +31,7 @@ function renderTitle(h, toast, options) {
 }
 function showToast(message) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+  // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
   const id = `gl-toast-${toastsCount}`;
   toastsCount += 1;
   const hide = () => {

package/dist/components/base/toggle/toggle.js

@@ -144,7 +144,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
   },attrs:{"data-testid":"toggle-wrapper"}},[_c('span',{staticClass:"gl-toggle-label gl-shrink-0",class:_vm.toggleClasses,attrs:{"id":_vm.labelId,"data-testid":"toggle-label"}},[_vm._t("label",function(){return [_vm._v(_vm._s(_vm.label))]})],2),_vm._v(" "),(_vm.shouldRenderDescription)?_c('span',{staticClass:"gl-description-label gl-mb-3",attrs:{"data-testid":"toggle-description"}},[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),_vm._v(" "),(_vm.name)?_c('input',{attrs:{"name":_vm.name,"type":"hidden"},domProps:{"value":_vm.value}}):_vm._e(),_vm._v(" "),_c('button',{staticClass:"gl-toggle gl-shrink-0",class:{
       'is-checked': _vm.value,
       'is-disabled': _vm.disabled || _vm.isLoading,
-    },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.helpId,"aria-disabled":_vm.disabled,"type":"button"},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature.apply(null, arguments)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"dark"}}):_c('span',{staticClass:"toggle-icon"},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":12}})],1)],1),_vm._v(" "),(_vm.shouldRenderHelp)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",function(){return [_vm._v(_vm._s(_vm.help))]})],2):_vm._e()])};
+    },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.helpId,"aria-disabled":_vm.disabled,"type":"button","disabled":_vm.disabled},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature.apply(null, arguments)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"dark"}}):_c('span',{staticClass:"toggle-icon"},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":12}})],1)],1),_vm._v(" "),(_vm.shouldRenderHelp)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",function(){return [_vm._v(_vm._s(_vm.help))]})],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/token/token.js

@@ -35,7 +35,7 @@ var script = {
   },
   computed: {
     variantClass() {
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return `gl-token-${this.variant}-variant`;
     },
     viewOnlyClass() {

package/dist/components/base/token_selector/token_selector.js

@@ -181,10 +181,14 @@ var script = {
       return false;
     },
     stateClass() {
-      if (this.state === null) {
-        return '!gl-shadow-inner-1-gray-400';
+      switch (this.state) {
+        case true:
+          return 'is-valid';
+        case false:
+          return 'is-invalid';
+        default:
+          return '';
       }
-      return this.state ? 'is-valid !gl-shadow-inner-1-gray-400' : 'is-invalid !gl-shadow-inner-1-red-500';
     },
     hasSelectedTokens() {
       return this.selectedTokens.length > 0;
@@ -367,10 +371,16 @@ 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',[_c('div',{ref:"container",staticClass:"gl-token-selector gl-form-input form-control form-control-plaintext gl-flex !gl-cursor-text gl-items-center !gl-px-3 !gl-py-2",class:[_vm.inputFocused ? 'gl-token-selector-focus-glow' : '', _vm.containerClass, _vm.stateClass],on:{"click":_vm.handleContainerClick}},[(_vm.showEmptyPlaceholder)?_vm._t("empty-placeholder"):_vm._e(),_vm._v(" "),_c('gl-token-container',{attrs:{"tokens":_vm.selectedTokens,"state":_vm.state,"register-focus-on-token":_vm.registerFocusOnToken,"view-only":_vm.viewOnly,"show-clear-all-button":_vm.showClearAllButton},on:{"token-remove":_vm.removeToken,"cancel-focus":_vm.cancelTokenFocus,"clear-all":_vm.clearAll},scopedSlots:_vm._u([{key:"token-content",fn:function(ref){
-var token = ref.token;
-return [_vm._t("token-content",null,{"token":token})]}},{key:"text-input",fn:function(){return [_c('input',_vm._b({ref:"textInput",staticClass:"gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-gray-900 gl-outline-none",attrs:{"type":"text","autocomplete":_vm.autocomplete,"aria-labelledby":_vm.ariaLabelledby,"placeholder":_vm.placeholder,"disabled":_vm.viewOnly},domProps:{"value":_vm.inputText},on:{"input":function($event){_vm.inputText = $event.target.value;},"focus":_vm.handleFocus,"blur":_vm.handleBlur,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleBackspace.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleUpArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleDownArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleHomeKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleEndKey.apply(null, arguments)},function($event){$event.stopPropagation();return _vm.$emit('keydown', $event)}],"click":_vm.handleInputClick}},'input',_vm.textInputAttrs,false))]},proxy:true}],null,true)})],2),_vm._v(" "),_c('gl-token-selector-dropdown',{attrs:{"menu-class":_vm.menuClass,"show":_vm.dropdownIsOpen,"loading":_vm.loading,"dropdown-items":_vm.filteredDropdownItems,"selected-tokens":_vm.selectedTokens,"input-text":_vm.inputText,"user-defined-token-can-be-added":_vm.userDefinedTokenCanBeAdded,"component-id":_vm.$options.componentId,"register-dropdown-event-handlers":_vm.registerDropdownEventHandlers,"register-reset-focused-dropdown-item":_vm.registerResetFocusedDropdownItem},on:{"dropdown-item-click":_vm.addToken,"show":_vm.openDropdown},scopedSlots:_vm._u([{key:"loading-content",fn:function(){return [_vm._t("loading-content")]},proxy:true},{key:"user-defined-token-content",fn:function(){return [_vm._t("user-defined-token-content",null,{"inputText":_vm.inputText})]},proxy:true},{key:"no-results-content",fn:function(){return [_vm._t("no-results-content")]},proxy:true},{key:"dropdown-item-content",fn:function(ref){
-var dropdownItem = ref.dropdownItem;
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{ref:"container",staticClass:"gl-token-selector gl-form-input gl-form-input-not-readonly form-control gl-flex !gl-cursor-text gl-items-center !gl-px-3 !gl-py-2",class:[
+      {
+        'gl-token-selector-focus-glow': _vm.inputFocused,
+        'gl-token-selector-view-only': _vm.viewOnly,
+      },
+      _vm.containerClass,
+      _vm.stateClass ],on:{"click":_vm.handleContainerClick}},[(_vm.showEmptyPlaceholder)?_vm._t("empty-placeholder"):_vm._e(),_vm._v(" "),_c('gl-token-container',{attrs:{"tokens":_vm.selectedTokens,"state":_vm.state,"register-focus-on-token":_vm.registerFocusOnToken,"view-only":_vm.viewOnly,"show-clear-all-button":_vm.showClearAllButton},on:{"token-remove":_vm.removeToken,"cancel-focus":_vm.cancelTokenFocus,"clear-all":_vm.clearAll},scopedSlots:_vm._u([{key:"token-content",fn:function(ref){
+    var token = ref.token;
+return [_vm._t("token-content",null,{"token":token})]}},{key:"text-input",fn:function(){return [_c('input',_vm._b({ref:"textInput",staticClass:"gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-default gl-outline-none",attrs:{"type":"text","autocomplete":_vm.autocomplete,"aria-labelledby":_vm.ariaLabelledby,"placeholder":_vm.placeholder,"disabled":_vm.viewOnly},domProps:{"value":_vm.inputText},on:{"input":function($event){_vm.inputText = $event.target.value;},"focus":_vm.handleFocus,"blur":_vm.handleBlur,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleBackspace.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleUpArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleDownArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleHomeKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleEndKey.apply(null, arguments)},function($event){$event.stopPropagation();return _vm.$emit('keydown', $event)}],"click":_vm.handleInputClick}},'input',_vm.textInputAttrs,false))]},proxy:true}],null,true)})],2),_vm._v(" "),_c('gl-token-selector-dropdown',{attrs:{"menu-class":_vm.menuClass,"show":_vm.dropdownIsOpen,"loading":_vm.loading,"dropdown-items":_vm.filteredDropdownItems,"selected-tokens":_vm.selectedTokens,"input-text":_vm.inputText,"user-defined-token-can-be-added":_vm.userDefinedTokenCanBeAdded,"component-id":_vm.$options.componentId,"register-dropdown-event-handlers":_vm.registerDropdownEventHandlers,"register-reset-focused-dropdown-item":_vm.registerResetFocusedDropdownItem},on:{"dropdown-item-click":_vm.addToken,"show":_vm.openDropdown},scopedSlots:_vm._u([{key:"loading-content",fn:function(){return [_vm._t("loading-content")]},proxy:true},{key:"user-defined-token-content",fn:function(){return [_vm._t("user-defined-token-content",null,{"inputText":_vm.inputText})]},proxy:true},{key:"no-results-content",fn:function(){return [_vm._t("no-results-content")]},proxy:true},{key:"dropdown-item-content",fn:function(ref){
+    var dropdownItem = ref.dropdownItem;
 return [_vm._t("dropdown-item-content",null,{"dropdownItem":dropdownItem})]}},{key:"dropdown-footer",fn:function(){return [_vm._t("dropdown-footer")]},proxy:true}],null,true),model:{value:(_vm.focusedDropdownItem),callback:function ($$v) {_vm.focusedDropdownItem=$$v;},expression:"focusedDropdownItem"}})],1)};
 var __vue_staticRenderFns__ = [];