@gitlab/ui 37.7.0 → 37.9.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [37.9.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.9.0...v37.9.1) (2022-03-16)
+
+
+### Bug Fixes
+
+* **GlFilteredSearch:** Keep active state on backspace on first token ([bd241df](https://gitlab.com/gitlab-org/gitlab-ui/commit/bd241dfbbd87064c10a67f0a0857b54542362605))
+
+# [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)
+
+
+### Features
+
+* **GlFilteredSearch:** Allow to pass token dynamically ([247ea01](https://gitlab.com/gitlab-org/gitlab-ui/commit/247ea011487a1ab0087d994cdb994c9c553565eb))
+
 # [37.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.6.0...v37.7.0) (2022-03-14)
 
 

package/dist/components/base/filtered_search/filtered_search.js

@@ -1,3 +1,4 @@
+import _isEqual from 'lodash/isEqual';
 import _cloneDeep from 'lodash/cloneDeep';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
@@ -150,6 +151,16 @@ var script = {
         this.$emit('input', this.tokens);
       },
 
+      deep: true,
+      immediate: true
+    },
+    value: {
+      handler(newValue, oldValue) {
+        if (newValue.length && !_isEqual(newValue, oldValue)) {
+          this.applyNewValue(_cloneDeep(newValue));
+        }
+      },
+
       deep: true,
       immediate: true
     }
@@ -230,8 +241,8 @@ var script = {
       // possible, make sure no token is active.
 
       if (intent === INTENT_ACTIVATE_PREVIOUS) {
-        // If there is a previous token, activate it; else, deactivate all tokens
-        this.activeTokenIdx = idx > 0 ? idx - 1 : null;
+        // If there is a previous token, activate it; else, activate the first token
+        this.activeTokenIdx = Math.max(idx - 1, 0);
       } else if (idx < this.activeTokenIdx) {
         // Preserve the active token's active status (it shifted down one index)
         this.activeTokenIdx -= 1;

package/dist/components/base/modal/modal.documentation.js

@@ -1,4 +1,4 @@
-var description = "Modals are used to reveal critical information, show information without losing context, or when the\nsystem requires a user response. Modals can also fragment a complex workflow into simpler steps and\nshould serve a single purpose dedicated to completing the user’s task.\n\n## VModel\n\nYou can use the `v-model` directive to control the modal’s visibility. The `v-model`\ndirective interfaces with the `visible` property and the `@change` event.\n\n## Deprecation Warning\n\nWe are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the\n`modal-footer` slot content is populated. This is in order to align this component with the design\nsystem.\n\nThe `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and\n`action-cancel`. These props allow you to handle how a primary, secondary and cancel button will\nbehave in the modals footer. The props receive an object as such:\n\n```js\n{\n  text: 'Save Changes',\n  attributes: [\n    { variant: 'confirm' },\n    { disabled: this.someState },\n    { class: 'some-class' },\n    ...\n  ]\n}\n```\n";
+var description = "Modals are used to reveal critical information, show information without losing context, or when the\nsystem requires a user response. Modals can also fragment a complex workflow into simpler steps and\nshould serve a single purpose dedicated to completing the user’s task.\n\n## VModel\n\nYou can use the `v-model` directive to control the modal’s visibility. The `v-model`\ndirective interfaces with the `visible` property and the `@change` event.\n\n## Deprecation Warning\n\nWe are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the\n`modal-footer` slot content is populated. This is in order to align this component with the design\nsystem.\n\nThe `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and\n`action-cancel`. These props allow you to handle how a primary, secondary and cancel button will\nbehave in the modals footer. The props receive an object as such:\n\n```js\n{\n  text: 'Save Changes',\n  attributes: {\n    variant: 'confirm',\n    disabled: this.someState,\n    class: 'some-class',\n    ...\n  }\n}\n```\n";
 
 var modal_documentation = {
   followsDesignSystem: true,

package/dist/components/base/tabs/tabs/tabs.documentation.js

@@ -1,4 +1,4 @@
-var description = "Tabs are used to divide content into meaningful, related sections. Tabs allow users to focus on one\nspecific view at a time while maintaining sight of all the relevant content options available. Each\ntab, when active, will reveal it’s own unique content.\n\n## Using the component Vue\n\n~~~html\n<gl-tabs>\n  <gl-tab title=\"Tab 1\">\n    Tab panel 1\n  </gl-tab>\n  <gl-tab title=\"Tab 2\">\n    Tab panel 2\n  </gl-tab>\n</gl-tabs>\n~~~\n\n## Using the component HTML\n\n~~~html\n<div class=\"tabs gl-tabs\">\n  <ul role=\"tablist\" class=\"nav gl-tabs-nav\">\n    <li role=\"presentation\" class=\"nav-item\">\n      <a\n        role=\"tab\"\n        target=\"_self\"\n        href=\"#\"\n        class=\"nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo\"\n      >Tab 1</a>\n    </li>\n    <li role=\"presentation\" class=\"nav-item\">\n      <a role=\"tab\" target=\"_self\" href=\"#\" class=\"nav-link gl-tab-nav-item\">Tab 2</a>\n    </li>\n  </ul>\n  <div class=\"tab-content gl-tab-content\">\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content active\">Tab panel 1</div>\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content\">Tab panel 2</div>\n  </div>\n</div>\n~~~\n\n## Adding Action Buttons to the Tabs\n\nTabs start and end slot can be populated via props: `action-primary`, `action-secondary` and\n`action-tertiary`. These props allow you to handle how a primary, secondary and tertiary button will\nbehave and look. The props receive an object as such:\n\n~~~js\n{\n  text: 'Save Changes',\n  attributes: [\n    { variant: 'info' },\n    { disabled: this.someState },\n    { class: 'some-class' },\n    ...\n  ]\n}\n~~~\n\n## Scrollable tab buttons\n\nBy default, `GlTab` will wrap tab buttons when they overflow the container. To\nenable horizontally scrolling for the tab buttons, use the `GlScrollableTabs`\ncomponent. This is a separate Vue component because of some limitations:\n\n- The action props (e.g., `action-primary`) are not respected in `GlScrollableTabs`. At the\n  moment, BootstrapVue does not provide a reliable way for us to achieve this desired combination.\n\n`GlScrollableTabs` composes `GlTabs` and passes through every listener, slot, or prop (with the above\nexceptions).\n\n~~~html\n<gl-scrollable-tabs>\n  <gl-tab v-for=\"tab in tabs\" :key=\"tab.key\" :title=\"tab.title\"> {{ tab.content }} </gl-tab>\n</gl-scrollable-tabs>\n~~~\n";
+var description = "Tabs are used to divide content into meaningful, related sections. Tabs allow users to focus on one\nspecific view at a time while maintaining sight of all the relevant content options available. Each\ntab, when active, will reveal it’s own unique content.\n\n## Using the component Vue\n\n~~~html\n<gl-tabs>\n  <gl-tab title=\"Tab 1\">\n    Tab panel 1\n  </gl-tab>\n  <gl-tab title=\"Tab 2\">\n    Tab panel 2\n  </gl-tab>\n</gl-tabs>\n~~~\n\n## Using the component HTML\n\n~~~html\n<div class=\"tabs gl-tabs\">\n  <ul role=\"tablist\" class=\"nav gl-tabs-nav\">\n    <li role=\"presentation\" class=\"nav-item\">\n      <a\n        role=\"tab\"\n        target=\"_self\"\n        href=\"#\"\n        class=\"nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo\"\n      >Tab 1</a>\n    </li>\n    <li role=\"presentation\" class=\"nav-item\">\n      <a role=\"tab\" target=\"_self\" href=\"#\" class=\"nav-link gl-tab-nav-item\">Tab 2</a>\n    </li>\n  </ul>\n  <div class=\"tab-content gl-tab-content\">\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content active\">Tab panel 1</div>\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content\">Tab panel 2</div>\n  </div>\n</div>\n~~~\n\n## Adding Action Buttons to the Tabs\n\nTabs start and end slot can be populated via props: `action-primary`, `action-secondary` and\n`action-tertiary`. These props allow you to handle how a primary, secondary and tertiary button will\nbehave and look. The props receive an object as such:\n\n~~~js\n{\n  text: 'Save Changes',\n  attributes: {\n    variant: 'info',\n    disabled: this.someState,\n    class: 'some-class',\n    ...\n  }\n}\n~~~\n\n## Scrollable tab buttons\n\nBy default, `GlTab` will wrap tab buttons when they overflow the container. To\nenable horizontally scrolling for the tab buttons, use the `GlScrollableTabs`\ncomponent. This is a separate Vue component because of some limitations:\n\n- The action props (e.g., `action-primary`) are not respected in `GlScrollableTabs`. At the\n  moment, BootstrapVue does not provide a reliable way for us to achieve this desired combination.\n\n`GlScrollableTabs` composes `GlTabs` and passes through every listener, slot, or prop (with the above\nexceptions).\n\n~~~html\n<gl-scrollable-tabs>\n  <gl-tab v-for=\"tab in tabs\" :key=\"tab.key\" :title=\"tab.title\"> {{ tab.content }} </gl-tab>\n</gl-scrollable-tabs>\n~~~\n";
 
 var tabs_documentation = {
   description,

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.7.0",
+  "version": "37.9.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -211,7 +211,7 @@ describe('Filtered search', () => {
       expect(wrapper.findComponent(FakeToken).props('active')).toBe(true);
     });
 
-    it('makes no token active if user intends it on first token destruction', async () => {
+    it('keeps first token active on first token destruction with backspace', async () => {
       createComponent({
         value: ['foo', { type: 'faketoken', value: '' }],
       });
@@ -228,7 +228,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
-      expect(wrapper.findComponent(FakeToken).props('active')).toBe(false);
+      expect(wrapper.findComponent(FakeToken).props('active')).toBe(true);
     });
 
     it('keeps active token active if later one destroyed', async () => {

package/src/components/base/filtered_search/filtered_search.vue

@@ -1,5 +1,5 @@
 <script>
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEqual } from 'lodash';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
@@ -146,13 +146,21 @@ export default {
       deep: true,
       immediate: true,
     },
+    value: {
+      handler(newValue, oldValue) {
+        if (newValue.length && !isEqual(newValue, oldValue)) {
+          this.applyNewValue(cloneDeep(newValue));
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
   },
   mounted() {
     if (this.value.length) {
       this.applyNewValue(cloneDeep(this.value));
     }
   },
-
   methods: {
     applyNewValue(newValue) {
       this.tokens = needDenormalization(newValue) ? denormalizeTokens(newValue) : newValue;
@@ -214,8 +222,8 @@ export default {
       // active state for the token that was active at the time. If that's not
       // possible, make sure no token is active.
       if (intent === INTENT_ACTIVATE_PREVIOUS) {
-        // If there is a previous token, activate it; else, deactivate all tokens
-        this.activeTokenIdx = idx > 0 ? idx - 1 : null;
+        // If there is a previous token, activate it; else, activate the first token
+        this.activeTokenIdx = Math.max(idx - 1, 0);
       } else if (idx < this.activeTokenIdx) {
         // Preserve the active token's active status (it shifted down one index)
         this.activeTokenIdx -= 1;

package/src/components/base/modal/modal.md

@@ -20,11 +20,11 @@ behave in the modals footer. The props receive an object as such:
 ```js
 {
   text: 'Save Changes',
-  attributes: [
-    { variant: 'confirm' },
-    { disabled: this.someState },
-    { class: 'some-class' },
+  attributes: {
+    variant: 'confirm',
+    disabled: this.someState,
+    class: 'some-class',
     ...
-  ]
+  }
 }
 ```

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

@@ -107,14 +107,14 @@ describe('Modal component', () => {
     const props = {
       actionPrimary: {
         text: 'Primary',
-        attributes: [{ variant: 'info' }],
+        attributes: { variant: 'info' },
       },
       actionSecondary: {
         text: 'Secondary',
       },
       actionCancel: {
         text: 'Cancel',
-        attributes: [{ variant: 'danger' }],
+        attributes: { variant: 'danger' },
       },
     };
 

package/src/components/base/tabs/tabs/tabs.md

@@ -48,12 +48,12 @@ behave and look. The props receive an object as such:
 ~~~js
 {
   text: 'Save Changes',
-  attributes: [
-    { variant: 'info' },
-    { disabled: this.someState },
-    { class: 'some-class' },
+  attributes: {
+    variant: 'info',
+    disabled: this.someState,
+    class: 'some-class',
     ...
-  ]
+  }
 }
 ~~~
 

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>