@gitlab/ui 42.3.0 → 42.4.1

package/package.json

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

package/src/components/base/label/label.scss

@@ -34,10 +34,6 @@ $label-close-button: '.gl-label-close.gl-button';
       @include gl-reset-color;
       @include gl-shadow-none;
       @include gl-outline-none;
-
-      .gl-label-text-scoped {
-        @include gl-text-decoration-underline;
-      }
     }
   }
 

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

@@ -36,9 +36,11 @@ describe('Label component', () => {
   };
 
   const findLink = () => wrapper.findComponent(GlLink);
+  const findContent = () => wrapper.find('.gl-label-link');
   const findTitle = () => wrapper.find('.gl-label-text');
   const findSubTitle = () => wrapper.find('.gl-label-text-scoped');
-  const findTooltipText = () => wrapper.findComponent(GlTooltip).text();
+  const findTooltip = () => wrapper.findComponent(GlTooltip);
+  const findTooltipText = () => findTooltip().text();
   const findCloseButton = () => wrapper.findComponent(CloseButton);
 
   describe('basic label', () => {
@@ -137,6 +139,22 @@ describe('Label component', () => {
         expect(wrapper.emitted().close).toBeFalsy();
       });
     });
+
+    describe('label has no target', () => {
+      const props = { ...defaultProps, target: '' };
+
+      it('renders the label content as text', () => {
+        createComponent(props, { mountFn: mount });
+
+        expect(findContent().element.tagName.toLowerCase()).toBe('span');
+      });
+
+      it('does not render a link', () => {
+        createComponent(props, { mountFn: shallowMount });
+
+        expect(findLink().exists()).toBe(false);
+      });
+    });
   });
 
   describe('scoped label', () => {
@@ -220,5 +238,21 @@ describe('Label component', () => {
         expect(wrapper.emitted().close).toBeFalsy();
       });
     });
+
+    describe('label has no target', () => {
+      const props = { ...defaultProps, target: '' };
+
+      it('renders the label content as text', () => {
+        createComponent(props, { mountFn: mount });
+
+        expect(findContent().element.tagName.toLowerCase()).toBe('span');
+      });
+
+      it('does not render a link', () => {
+        createComponent(props, { mountFn: shallowMount });
+
+        expect(findLink().exists()).toBe(false);
+      });
+    });
   });
 });

package/src/components/base/label/label.stories.js

@@ -54,6 +54,9 @@ Scoped.args = generateProps({ title: 'scoped::label', scoped: true });
 export const WithCloseButton = Template.bind({});
 WithCloseButton.args = generateProps({ showCloseButton: true });
 
+export const WithoutTarget = Template.bind({});
+WithoutTarget.args = generateProps({ target: '' });
+
 export default {
   title: 'base/label',
   component: GlLabel,
@@ -70,6 +73,7 @@ export default {
     },
     size: {
       options: labelSizeOptions,
+      control: 'select',
     },
     tooltipPlacement: {
       options: tooltipPlacements,

package/src/components/base/label/label.vue

@@ -41,7 +41,7 @@ export default {
     target: {
       type: String,
       required: false,
-      default: '#',
+      default: '',
     },
     scoped: {
       type: Boolean,
@@ -91,6 +91,12 @@ export default {
     closeIconSize() {
       return this.size === 'sm' ? 12 : 16;
     },
+    labelComponent() {
+      return this.target ? GlLink : 'span';
+    },
+    tooltipTarget() {
+      return this.target ? this.$refs.labelTitle.$el : this.$refs.labelTitle;
+    },
   },
   watch: {
     title() {
@@ -122,14 +128,20 @@ export default {
 
 <template>
   <span class="gl-label" :class="cssClasses" :style="cssVariables" v-bind="$attrs" @click="onClick">
-    <gl-link ref="labelTitle" :href="target" class="gl-label-link">
+    <component
+      :is="labelComponent"
+      ref="labelTitle"
+      :href="target ? target : false"
+      class="gl-label-link"
+      tabindex="0"
+    >
       <span class="gl-label-text">
         {{ scopedKey }}
       </span>
       <span v-if="scoped && scopedValue" class="gl-label-text-scoped">
         {{ scopedValue }}
       </span>
-    </gl-link>
+    </component>
     <close-button
       v-if="showCloseButton"
       class="gl-label-close gl-p-0!"
@@ -140,7 +152,7 @@ export default {
     />
     <gl-tooltip
       v-if="description"
-      :target="() => $refs.labelTitle.$el"
+      :target="() => tooltipTarget"
       :placement="tooltipPlacement"
       boundary="viewport"
     >

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

@@ -257,7 +257,7 @@ describe('GlTokenContainer', () => {
         expect(expectedFocusedToken.element).toHaveFocus();
       });
 
-      it('emits the `cancel-focus` event when tab key is pressed', async () => {
+      it('emits the `cancel-focus` event when tab key is pressed without modifiers', async () => {
         createComponent({});
 
         const focusedToken = findTokenByName(tokens[0].name);
@@ -267,6 +267,17 @@ describe('GlTokenContainer', () => {
 
         expect(wrapper.emitted('cancel-focus')).toEqual([[]]);
       });
+
+      it('does not emit the `cancel-focus` event when tab key is pressed with modifiers', async () => {
+        createComponent({});
+
+        const focusedToken = findTokenByName(tokens[0].name);
+
+        await focusedToken.trigger('focus');
+        await focusedToken.trigger('keydown', { key: keyboard.tab, shiftKey: true });
+
+        expect(wrapper.emitted('cancel-focus')).toBeUndefined();
+      });
     });
   });
 });

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

@@ -135,7 +135,7 @@ export default {
     @keydown.end="handleEnd"
     @keydown.delete="handleDelete"
     @keydown.esc="handleEscape"
-    @keydown.tab.prevent="handleTab"
+    @keydown.tab.exact.prevent="handleTab"
   >
     <div
       v-for="(token, index) in tokens"