@gitlab/ui 41.9.1 → 41.10.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [41.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v41.9.1...v41.10.0) (2022-06-15)
+
+
+### Features
+
+* **GlTokenSelector:** add empty and readonly states ([e0b60a7](https://gitlab.com/gitlab-org/gitlab-ui/commit/e0b60a7cb24875e62e57c76963135e324b6bfa11))
+
 ## [41.9.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v41.9.0...v41.9.1) (2022-06-15)
 
 

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

@@ -22,6 +22,11 @@ var script = {
     registerFocusOnToken: {
       type: Function,
       required: true
+    },
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
 
@@ -138,7 +143,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',{ref:"tokenContainer",staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1",attrs:{"role":"listbox","aria-multiselectable":"false","aria-orientation":"horizontal","aria-invalid":_vm.state === false && 'true'},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.handleLeftArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.handleRightArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.handleHome($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.handleEnd($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleDelete($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape($event)},function($event){$event.preventDefault();}]}},[_vm._l((_vm.tokens),function(token,index){return _c('div',{key:token.id,ref:"tokens",refInFor:true,staticClass:"gl-token-selector-token-container gl-px-1 gl-py-1 gl-outline-none",attrs:{"data-token-id":token.id,"role":"option","tabindex":"-1"},on:{"focus":function($event){_vm.bindFocusEvent ? _vm.handleTokenFocus(index) : null;}}},[_c('gl-token',{staticClass:"gl-cursor-default",class:token.class,style:(token.style),on:{"close":function($event){return _vm.handleClose(token)}}},[_vm._t("token-content",[_c('span',[_vm._v("\n          "+_vm._s(token.name)+"\n        ")])],{"token":token})],2)],1)}),_vm._v(" "),_vm._t("text-input")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"tokenContainer",staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1",attrs:{"role":"listbox","aria-multiselectable":"false","aria-orientation":"horizontal","aria-invalid":_vm.state === false && 'true'},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.handleLeftArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.handleRightArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.handleHome($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.handleEnd($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleDelete($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape($event)},function($event){$event.preventDefault();}]}},[_vm._l((_vm.tokens),function(token,index){return _c('div',{key:token.id,ref:"tokens",refInFor:true,staticClass:"gl-token-selector-token-container gl-px-1 gl-py-1 gl-outline-none",attrs:{"data-token-id":token.id,"role":"option","tabindex":"-1"},on:{"focus":function($event){_vm.bindFocusEvent ? _vm.handleTokenFocus(index) : null;}}},[_c('gl-token',{staticClass:"gl-cursor-default",class:token.class,style:(token.style),attrs:{"view-only":_vm.viewOnly},on:{"close":function($event){return _vm.handleClose(token)}}},[_vm._t("token-content",[_c('span',[_vm._v("\n          "+_vm._s(token.name)+"\n        ")])],{"token":token})],2)],1)}),_vm._v(" "),_vm._t("text-input")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -125,6 +125,15 @@ var script = {
       // All tokens need to have an `id` key
       validator: tokensValidator,
       required: true
+    },
+
+    /**
+     * Controls the `view-only` mode for the tokens
+     */
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
 
@@ -178,6 +187,10 @@ var script = {
       }
 
       return this.state ? 'is-valid gl-inset-border-1-gray-400!' : 'is-invalid gl-inset-border-1-red-500!';
+    },
+
+    showEmptyPlaceholder() {
+      return this.selectedTokens.length === 0 && !this.inputFocused;
     }
 
   },
@@ -380,9 +393,9 @@ 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-cursor-text! gl-py-2! gl-px-3!",class:[_vm.inputFocused ? 'gl-token-selector-focus-glow' : '', _vm.containerClass, _vm.stateClass],on:{"click":_vm.handleContainerClick}},[_c('gl-token-container',{attrs:{"tokens":_vm.selectedTokens,"state":_vm.state,"register-focus-on-token":_vm.registerFocusOnToken},on:{"token-remove":_vm.removeToken,"cancel-focus":_vm.cancelTokenFocus},scopedSlots:_vm._u([{key:"token-content",fn:function(ref){
+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-display-flex gl-align-items-center form-control form-control-plaintext gl-cursor-text! gl-py-2! gl-px-3!",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},on:{"token-remove":_vm.removeToken,"cancel-focus":_vm.cancelTokenFocus},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-bg-none gl-font-regular gl-font-base gl-line-height-normal gl-px-1 gl-h-auto gl-text-gray-900 gl-border-none gl-outline-none gl-flex-grow-1",attrs:{"type":"text","autocomplete":_vm.autocomplete,"aria-labelledby":_vm.ariaLabelledby,"placeholder":_vm.placeholder},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($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleBackspace($event)},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($event)},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($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleHomeKey($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleEndKey($event)},function($event){$event.stopPropagation();return _vm.$emit('keydown', $event)}],"click":_vm.handleInputClick}},'input',_vm.textInputAttrs,false))]},proxy:true}],null,true)})],1),_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,"allow-user-defined-tokens":_vm.allowUserDefinedTokens,"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){
+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-bg-none gl-font-regular gl-font-base gl-line-height-normal gl-px-1 gl-h-auto gl-text-gray-900 gl-border-none gl-outline-none gl-flex-grow-1",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($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleBackspace($event)},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($event)},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($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleHomeKey($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleEndKey($event)},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,"allow-user-defined-tokens":_vm.allowUserDefinedTokens,"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__ = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "41.9.1",
+  "version": "41.10.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/token_selector/token_container.spec.js

@@ -62,6 +62,15 @@ describe('GlTokenContainer', () => {
       });
     });
 
+    describe('viewOnly', () => {
+      it('passes viewOnly prop to tokens correctly', () => {
+        createComponent({ propsData: { viewOnly: true } });
+        const tokenWrappers = wrapper.findAllComponents(GlToken);
+
+        expect(tokenWrappers.wrappers.every((token) => token.props('viewOnly'))).toBe(true);
+      });
+    });
+
     describe('state', () => {
       describe('when `state` is `false`', () => {
         it('adds `aria-invalid="true"` attribute`', () => {

package/src/components/base/token_selector/token_container.vue

@@ -21,6 +21,11 @@ export default {
       type: Function,
       required: true,
     },
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -143,6 +148,7 @@ export default {
         class="gl-cursor-default"
         :class="token.class"
         :style="token.style"
+        :view-only="viewOnly"
         @close="handleClose(token)"
       >
         <slot name="token-content" :token="token">

package/src/components/base/token_selector/token_selector.spec.js

@@ -46,6 +46,8 @@ describe('GlTokenSelector', () => {
     },
   ];
 
+  const placeholderText = 'Test placeholder';
+
   let wrapper;
 
   const defaultProps = { selectedTokens: [] };
@@ -141,6 +143,22 @@ describe('GlTokenSelector', () => {
       });
     });
 
+    describe('viewOnly', () => {
+      beforeEach(() => {
+        createComponent({ propsData: { viewOnly: true } });
+      });
+
+      it('passes `viewOnly` prop to GlTokenContainer', () => {
+        expect(wrapper.findComponent(GlTokenContainer).props('viewOnly')).toBe(true);
+      });
+
+      it('disables input field if viewOnly is true', () => {
+        findTextInput().trigger('focus');
+
+        expect(findTextInput().attributes('disabled')).toBe('disabled');
+      });
+    });
+
     describe('containerClass', () => {
       it('renders passed CSS classes', () => {
         createComponent({
@@ -302,6 +320,48 @@ describe('GlTokenSelector', () => {
 
       expect(wrapper.findComponent(component).vm.$scopedSlots).toHaveProperty(slot);
     });
+
+    it('renders empty-placeholder slot if tokens list is empty and input is not focused', () => {
+      createComponent({
+        propsData: {
+          selectedTokens: [],
+        },
+        slots: {
+          'empty-placeholder': placeholderText,
+        },
+      });
+
+      expect(wrapper.text()).toContain(placeholderText);
+    });
+
+    it('does not render empty-placeholder slot if token list is not empty', () => {
+      createComponent({
+        propsData: {
+          selectedTokens: tokens,
+        },
+        slots: {
+          'empty-placeholder': placeholderText,
+        },
+      });
+
+      expect(wrapper.text()).not.toContain(placeholderText);
+    });
+
+    it('hides empty-placeholder slot if input is focused', async () => {
+      createComponent({
+        propsData: {
+          selectedTokens: [],
+        },
+        slots: {
+          'empty-placeholder': placeholderText,
+        },
+      });
+
+      expect(wrapper.text()).toContain(placeholderText);
+
+      await findTextInput().trigger('focus');
+      expect(wrapper.text()).not.toContain(placeholderText);
+    });
   });
 
   describe('text input events', () => {

package/src/components/base/token_selector/token_selector.vue

@@ -113,6 +113,14 @@ export default {
       validator: tokensValidator,
       required: true,
     },
+    /**
+     * Controls the `view-only` mode for the tokens
+     */
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -165,6 +173,9 @@ export default {
         ? 'is-valid gl-inset-border-1-gray-400!'
         : 'is-invalid gl-inset-border-1-red-500!';
     },
+    showEmptyPlaceholder() {
+      return this.selectedTokens.length === 0 && !this.inputFocused;
+    },
   },
   watch: {
     inputText(newValue, oldValue) {
@@ -354,14 +365,18 @@ export default {
   <div>
     <div
       ref="container"
-      class="gl-token-selector gl-form-input form-control form-control-plaintext gl-cursor-text! gl-py-2! gl-px-3!"
+      class="gl-token-selector gl-form-input gl-display-flex gl-align-items-center form-control form-control-plaintext gl-cursor-text! gl-py-2! gl-px-3!"
       :class="[inputFocused ? 'gl-token-selector-focus-glow' : '', containerClass, stateClass]"
       @click="handleContainerClick"
     >
+      <!-- @slot Optional content to display a placeholder when tokens list is empty
+        and user doesn't edit tokens -->
+      <slot v-if="showEmptyPlaceholder" name="empty-placeholder"></slot>
       <gl-token-container
         :tokens="selectedTokens"
         :state="state"
         :register-focus-on-token="registerFocusOnToken"
+        :view-only="viewOnly"
         @token-remove="removeToken"
         @cancel-focus="cancelTokenFocus"
       >
@@ -383,6 +398,7 @@ export default {
             :autocomplete="autocomplete"
             :aria-labelledby="ariaLabelledby"
             :placeholder="placeholder"
+            :disabled="viewOnly"
             v-bind="textInputAttrs"
             @input="inputText = $event.target.value"
             @focus="handleFocus"