@gitlab/ui 37.10.0 → 38.0.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [38.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.10.0...v38.0.0) (2022-03-18)
+
+
+### Reverts
+
+* **GlFilteredSearch:** Allow to pass token dynamically ([0dcfb53](https://gitlab.com/gitlab-org/gitlab-ui/commit/0dcfb5300f80ee821f16ab62fd655c7e4f141ffe)), closes [/gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2715#note_878880409](https://gitlab.com//gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2715/issues/note_878880409)
+* **GlTruncate:** add slots to surround the text ([ed4aa40](https://gitlab.com/gitlab-org/gitlab-ui/commit/ed4aa40ed8c3e748f78e78d2e312a8be9ffb9833))
+
+
+### BREAKING CHANGES
+
+* **GlFilteredSearch:** This makes the `value` prop of `GlFilteredSearch`
+static again, so that it is only read once at mount.
+* **GlTruncate:** This drops the before-text and after-text slots from
+GlTruncate.
+
 # [37.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.9.1...v37.10.0) (2022-03-18)
 
 

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

@@ -1,4 +1,3 @@
-import _isEqual from 'lodash/isEqual';
 import _cloneDeep from 'lodash/cloneDeep';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
@@ -151,16 +150,6 @@ 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
     }

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

@@ -1,5 +1,5 @@
-import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 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}},[(_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_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_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

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

@@ -1,5 +1,5 @@
 <script>
-import { cloneDeep, isEqual } from 'lodash';
+import { cloneDeep } from 'lodash';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
@@ -146,21 +146,13 @@ 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;

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

@@ -16,12 +16,10 @@ describe('Truncate component', () => {
     text: 'ee/app/assets/javascripts/vue_shared/src/utils_reports/components/utils/index.js',
   };
 
-  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
-
-  const createComponent = (props, slots = {}) => {
+  const createComponent = (props) => {
     wrapper = shallowMount(
       { extends: Truncate, directives: { GlTooltip: createMockDirective('gl-tooltip') } },
-      { propsData: { ...defaultProps, ...props }, slots }
+      { propsData: { ...defaultProps, ...props } }
     );
   };
 
@@ -57,13 +55,12 @@ describe('Truncate component', () => {
       createComponent({ position: 'start' });
     });
 
-    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 truncate-start class', () => {
+      expect(wrapper.find('.gl-truncate-start').exists()).toBe(true);
     });
 
     it('should have the special char surrounded', () => {
-      const spanTag = wrapper.findComponent({ ref: 'text' }).text();
+      const spanTag = wrapper.findAll('.gl-truncate span').at(0).text();
 
       expect(spanTag.charAt(0)).toBe('\u200E');
       expect(spanTag.charAt(spanTag.length - 1)).toBe('\u200E');
@@ -71,27 +68,27 @@ describe('Truncate component', () => {
   });
 
   describe('middle truncation', () => {
-    let firstTextSpan;
-    let secondTextSpan;
+    let firstSpan;
+    let secondSpan;
 
     beforeEach(() => {
       createComponent({ position: 'middle' });
-      firstTextSpan = findByTestId('text-beginning');
-      secondTextSpan = findByTestId('text-ending');
+      firstSpan = wrapper.findAll('.gl-truncate span').at(0);
+      secondSpan = wrapper.findAll('.gl-truncate span').at(1);
     });
 
     it('should have appropriate classes applied', () => {
-      expect(firstTextSpan.classes('gl-truncate-end')).toBe(true);
-      expect(secondTextSpan.classes('gl-truncate-start')).toBe(true);
+      expect(firstSpan.classes('gl-truncate-end')).toBe(true);
+      expect(secondSpan.classes('gl-truncate-start')).toBe(true);
     });
 
     it('should have the spans positioned correctly', () => {
-      expect(firstTextSpan.text()).toBe('ee/app/assets/javascripts/vue_shared/src');
-      expect(secondTextSpan.text()).toBe('‎/utils_reports/components/utils/index.js‎');
+      expect(firstSpan.text()).toBe('ee/app/assets/javascripts/vue_shared/src');
+      expect(secondSpan.text()).toBe('‎/utils_reports/components/utils/index.js‎');
     });
 
     it('last part should have the special char surrounded', () => {
-      const lastPart = secondTextSpan.text();
+      const lastPart = secondSpan.text();
 
       expect(lastPart.charAt(0)).toBe('\u200E');
       expect(lastPart.charAt(lastPart.length - 1)).toBe('\u200E');
@@ -111,36 +108,4 @@ 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,21 +1,8 @@
-import { GlIcon, GlTruncate } from '../../../index';
+import { 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',
@@ -37,51 +24,6 @@ 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 { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { POSITION } from './constants';
 
 export default {
@@ -81,15 +81,9 @@ 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  -->
@@ -100,14 +94,8 @@ 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-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 ref="text" class="gl-truncate-end">{{ first }}</span
+    ><span class="gl-truncate-start">&lrm;{{ last }}&lrm;</span>
   </span>
 
   <!-- END  -->
@@ -119,12 +107,6 @@ 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>