@gitlab/ui 37.8.0 → 37.9.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [37.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.8.0...v37.9.0) (2022-03-15)
+
+
+### Features
+
+* **GlTruncate:** add slots to surround the text ([4a79750](https://gitlab.com/gitlab-org/gitlab-ui/commit/4a797503c85ac755e7dd4df1b2d46e95f3102e04))
+
 # [37.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.7.0...v37.8.0) (2022-03-15)
 
 

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

@@ -1,5 +1,5 @@
-import { GlTooltipDirective } from '../../../directives/tooltip';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import { POSITION } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -84,7 +84,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 (_vm.position === _vm.$options.POSITION.START)?_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate",attrs:{"title":_vm.text}},[_c('span',{ref:"text",staticClass:"gl-truncate-start gl-text-overflow-ellipsis!"},[_vm._v("‎"+_vm._s(_vm.text)+"‎")])]):(_vm.position === _vm.$options.POSITION.MIDDLE)?_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate",attrs:{"title":_vm.text}},[_c('span',{ref:"text",staticClass:"gl-truncate-end"},[_vm._v(_vm._s(_vm.first))]),_c('span',{staticClass:"gl-truncate-start"},[_vm._v("‎"+_vm._s(_vm.last)+"‎")])]):_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate",attrs:{"data-testid":"truncate-end-container","title":_vm.text}},[_c('span',{ref:"text",staticClass:"gl-truncate-end"},[_vm._v(_vm._s(_vm.text))])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.position === _vm.$options.POSITION.START)?_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate",attrs:{"title":_vm.text}},[(_vm.$scopedSlots['before-text'])?_c('span',{staticClass:"gl-pr-3"},[_vm._t("before-text")],2):_vm._e(),_vm._v(" "),_c('span',{ref:"text",staticClass:"gl-truncate-start gl-text-overflow-ellipsis!"},[_vm._v("‎"+_vm._s(_vm.text)+"‎")]),_vm._v(" "),(_vm.$scopedSlots['after-text'])?_c('span',{staticClass:"gl-pl-3"},[_vm._t("after-text")],2):_vm._e()]):(_vm.position === _vm.$options.POSITION.MIDDLE)?_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate",attrs:{"title":_vm.text}},[(_vm.$scopedSlots['before-text'])?_c('span',{staticClass:"gl-pr-3"},[_vm._t("before-text")],2):_vm._e(),_vm._v(" "),_c('span',{ref:"text",staticClass:"gl-truncate-end",attrs:{"data-testid":"text-beginning"}},[_vm._v(_vm._s(_vm.first))]),_c('span',{staticClass:"gl-truncate-start",attrs:{"data-testid":"text-ending"}},[_vm._v("‎"+_vm._s(_vm.last)+"‎")]),_vm._v(" "),(_vm.$scopedSlots['after-text'])?_c('span',{staticClass:"gl-pl-3"},[_vm._t("after-text")],2):_vm._e()]):_c('span',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ disabled: _vm.isTooltipDisabled }),expression:"{ disabled: isTooltipDisabled }"},{name:"gl-resize-observer",rawName:"v-gl-resize-observer:[withTooltip]",value:(_vm.checkTruncationState),expression:"checkTruncationState",arg:_vm.withTooltip}],staticClass:"gl-truncate",attrs:{"data-testid":"truncate-end-container","title":_vm.text}},[(_vm.$scopedSlots['before-text'])?_c('span',{staticClass:"gl-pr-3"},[_vm._t("before-text")],2):_vm._e(),_vm._v(" "),_c('span',{ref:"text",staticClass:"gl-truncate-end"},[_vm._v(_vm._s(_vm.text))]),_vm._v(" "),(_vm.$scopedSlots['after-text'])?_c('span',{staticClass:"gl-pl-3"},[_vm._t("after-text")],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

package/src/components/utilities/truncate/truncate.spec.js

@@ -16,10 +16,12 @@ describe('Truncate component', () => {
     text: 'ee/app/assets/javascripts/vue_shared/src/utils_reports/components/utils/index.js',
   };
 
-  const createComponent = (props) => {
+  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
+
+  const createComponent = (props, slots = {}) => {
     wrapper = shallowMount(
       { extends: Truncate, directives: { GlTooltip: createMockDirective('gl-tooltip') } },
-      { propsData: { ...defaultProps, ...props } }
+      { propsData: { ...defaultProps, ...props }, slots }
     );
   };
 
@@ -55,12 +57,13 @@ describe('Truncate component', () => {
       createComponent({ position: 'start' });
     });
 
-    it('should have the truncate-start class', () => {
-      expect(wrapper.find('.gl-truncate-start').exists()).toBe(true);
+    it('should have the truncate-start class on the text span', () => {
+      const textSpan = wrapper.findComponent({ ref: 'text' });
+      expect(textSpan.classes('gl-truncate-start')).toBe(true);
     });
 
     it('should have the special char surrounded', () => {
-      const spanTag = wrapper.findAll('.gl-truncate span').at(0).text();
+      const spanTag = wrapper.findComponent({ ref: 'text' }).text();
 
       expect(spanTag.charAt(0)).toBe('\u200E');
       expect(spanTag.charAt(spanTag.length - 1)).toBe('\u200E');
@@ -68,27 +71,27 @@ describe('Truncate component', () => {
   });
 
   describe('middle truncation', () => {
-    let firstSpan;
-    let secondSpan;
+    let firstTextSpan;
+    let secondTextSpan;
 
     beforeEach(() => {
       createComponent({ position: 'middle' });
-      firstSpan = wrapper.findAll('.gl-truncate span').at(0);
-      secondSpan = wrapper.findAll('.gl-truncate span').at(1);
+      firstTextSpan = findByTestId('text-beginning');
+      secondTextSpan = findByTestId('text-ending');
     });
 
     it('should have appropriate classes applied', () => {
-      expect(firstSpan.classes('gl-truncate-end')).toBe(true);
-      expect(secondSpan.classes('gl-truncate-start')).toBe(true);
+      expect(firstTextSpan.classes('gl-truncate-end')).toBe(true);
+      expect(secondTextSpan.classes('gl-truncate-start')).toBe(true);
     });
 
     it('should have the spans positioned correctly', () => {
-      expect(firstSpan.text()).toBe('ee/app/assets/javascripts/vue_shared/src');
-      expect(secondSpan.text()).toBe('‎/utils_reports/components/utils/index.js‎');
+      expect(firstTextSpan.text()).toBe('ee/app/assets/javascripts/vue_shared/src');
+      expect(secondTextSpan.text()).toBe('‎/utils_reports/components/utils/index.js‎');
     });
 
     it('last part should have the special char surrounded', () => {
-      const lastPart = secondSpan.text();
+      const lastPart = secondTextSpan.text();
 
       expect(lastPart.charAt(0)).toBe('\u200E');
       expect(lastPart.charAt(lastPart.length - 1)).toBe('\u200E');
@@ -108,4 +111,36 @@ describe('Truncate component', () => {
       expect(wrapper.find('.gl-truncate-end').exists()).toBe(true);
     });
   });
+
+  describe('slots', () => {
+    const beforeText = 'Before Text Slot';
+    const afterText = 'After Text Slot';
+    const slotOptions = {
+      'before-text': {
+        slot: `<span id="before-text">${beforeText}</span>`,
+        text: beforeText,
+      },
+      'after-text': {
+        slot: `<span id="after-text">${afterText}</span>`,
+        text: afterText,
+      },
+    };
+
+    it.each`
+      position    | slotType
+      ${'start'}  | ${'before-text'}
+      ${'start'}  | ${'after-text'}
+      ${'middle'} | ${'before-text'}
+      ${'middle'} | ${'after-text'}
+      ${'end'}    | ${'before-text'}
+      ${'end'}    | ${'after-text'}
+    `('$position truncation $slot slot', ({ position, slotType }) => {
+      const slot = { [slotType]: slotOptions[slotType].slot };
+
+      createComponent({ position }, slot);
+
+      const slotComponent = wrapper.find(`#${slotType}`);
+      expect(slotComponent.text()).toBe(slotOptions[slotType].text);
+    });
+  });
 });

package/src/components/utilities/truncate/truncate.stories.js

@@ -1,8 +1,21 @@
-import { GlTruncate } from '../../../index';
+import { GlIcon, GlTruncate } from '../../../index';
 import { POSITION } from './constants';
 import readme from './truncate.md';
 
 const template = '<gl-truncate :text="text" :position="position" :with-tooltip="withTooltip" />';
+const beforeTextTemplate = `
+<gl-truncate :text="text" :position="position" :with-tooltip="withTooltip">
+  <template #before-text><gl-icon name="container-image" /></template>
+</gl-truncate>`;
+const afterTextTemplate = `
+<gl-truncate :text="text" :position="position" :with-tooltip="withTooltip">
+  <template #after-text><gl-icon name="abuse" /></template>
+</gl-truncate>`;
+const bothSlotsTemplate = `
+<gl-truncate :text="text" :position="position" :with-tooltip="withTooltip">
+  <template #before-text><gl-icon name="rocket" /></template>
+  <template #after-text><gl-icon name="requirements" /></template>
+</gl-truncate>`;
 
 const generateProps = ({
   text = 'src/thisIs/AVeryLongFilePath/that/needs/to/be/smartly/truncated/from/the/middle/so/we/dont/lose/important/information/here.vue',
@@ -24,6 +37,51 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+const BeforeTextTemplate = (args, { argTypes }) => ({
+  components: { GlIcon, GlTruncate },
+  props: Object.keys(argTypes),
+  template: beforeTextTemplate,
+});
+export const BeforeText = BeforeTextTemplate.bind({});
+BeforeText.args = generateProps({ position: 'start' });
+BeforeText.parameters = {
+  docs: {
+    source: {
+      code: beforeTextTemplate,
+    },
+  },
+};
+
+const AfterTextTemplate = (args, { argTypes }) => ({
+  components: { GlIcon, GlTruncate },
+  props: Object.keys(argTypes),
+  template: afterTextTemplate,
+});
+export const AfterText = AfterTextTemplate.bind({});
+AfterText.args = generateProps({ position: 'end' });
+AfterText.parameters = {
+  docs: {
+    source: {
+      code: afterTextTemplate,
+    },
+  },
+};
+
+const BothSlotsTemplate = (args, { argTypes }) => ({
+  components: { GlIcon, GlTruncate },
+  props: Object.keys(argTypes),
+  template: bothSlotsTemplate,
+});
+export const BothSlots = BothSlotsTemplate.bind({});
+BothSlots.args = generateProps();
+BothSlots.parameters = {
+  docs: {
+    source: {
+      code: bothSlotsTemplate,
+    },
+  },
+};
+
 export default {
   title: 'utilities/truncate',
   component: GlTruncate,

package/src/components/utilities/truncate/truncate.vue

@@ -1,6 +1,6 @@
 <script>
-import { GlTooltipDirective } from '../../../directives/tooltip';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import { POSITION } from './constants';
 
 export default {
@@ -81,9 +81,15 @@ export default {
     class="gl-truncate"
     :title="text"
   >
+    <span v-if="$scopedSlots['before-text']" class="gl-pr-3">
+      <slot name="before-text"></slot>
+    </span>
     <span ref="text" class="gl-truncate-start gl-text-overflow-ellipsis!"
       >&lrm;{{ text }}&lrm;</span
     >
+    <span v-if="$scopedSlots['after-text']" class="gl-pl-3">
+      <slot name="after-text"></slot>
+    </span>
   </span>
 
   <!-- MIDDLE  -->
@@ -94,8 +100,14 @@ export default {
     class="gl-truncate"
     :title="text"
   >
-    <span ref="text" class="gl-truncate-end">{{ first }}</span
-    ><span class="gl-truncate-start">&lrm;{{ last }}&lrm;</span>
+    <span v-if="$scopedSlots['before-text']" class="gl-pr-3">
+      <slot name="before-text"></slot>
+    </span>
+    <span ref="text" class="gl-truncate-end" data-testid="text-beginning">{{ first }}</span
+    ><span class="gl-truncate-start" data-testid="text-ending">&lrm;{{ last }}&lrm;</span>
+    <span v-if="$scopedSlots['after-text']" class="gl-pl-3">
+      <slot name="after-text"></slot>
+    </span>
   </span>
 
   <!-- END  -->
@@ -107,6 +119,12 @@ export default {
     data-testid="truncate-end-container"
     :title="text"
   >
+    <span v-if="$scopedSlots['before-text']" class="gl-pr-3">
+      <slot name="before-text"></slot>
+    </span>
     <span ref="text" class="gl-truncate-end">{{ text }}</span>
+    <span v-if="$scopedSlots['after-text']" class="gl-pl-3">
+      <slot name="after-text"></slot>
+    </span>
   </span>
 </template>