@gitlab/ui 37.10.0 → 38.1.0

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>

package/dist/components/base/filtered_search/examples/filtered_search.default.example.js

@@ -1,422 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const fakeUsers = [{
-  id: 1,
-  name: 'User Alpha',
-  username: 'alpha'
-}, {
-  id: 2,
-  name: 'User Beta',
-  username: 'beta'
-}, {
-  id: 3,
-  name: 'User Gamma',
-  username: 'gamma'
-}, {
-  id: 4,
-  name: 'User Delta',
-  username: 'delta'
-}, {
-  id: 5,
-  name: 'User Epsilon',
-  username: 'epsilon'
-}];
-const fakeMilestones = [{
-  id: 1,
-  title: '12.7',
-  name: '%12.7'
-}, {
-  id: 2,
-  title: '12.8',
-  name: '%12.8'
-}, {
-  id: 3,
-  title: '12.9',
-  name: '%12.9'
-}, {
-  id: 4,
-  title: '12.10',
-  name: '%12.10'
-}, {
-  id: 5,
-  title: 'Backlog',
-  name: 'Backlog'
-}];
-const fakeLabels = [{
-  id: 1,
-  title: 'Bug',
-  color: '#D9534F',
-  text_color: '#FFFFFF'
-}, {
-  id: 2,
-  title: 'Enhancement',
-  color: '#F0AD4E',
-  text_color: '#FFFFFF'
-}, {
-  id: 3,
-  title: 'Backlog',
-  color: '#cccccc',
-  text_color: '#333333'
-}, {
-  id: 4,
-  title: 'Feature',
-  color: '#A8D695',
-  text_color: '#333333'
-}, {
-  id: 5,
-  title: 'Documentation',
-  color: '#5CB85C',
-  text_color: '#FFFFFF'
-}];
-const UserToken = {
-  props: ['value', 'active'],
-  inheritAttrs: false,
-
-  data() {
-    return {
-      loadingView: false,
-      loadingSuggestions: false,
-      users: [],
-      activeUser: null
-    };
-  },
-
-  methods: {
-    loadView() {
-      this.loadingView = true;
-      setTimeout(() => {
-        this.loadingView = false;
-        this.activeUser = fakeUsers.find(u => u.username === this.value.data);
-      }, 1000);
-    },
-
-    loadSuggestions() {
-      this.loadingSuggestions = true;
-      setTimeout(() => {
-        this.loadingSuggestions = false;
-        this.users = fakeUsers;
-      }, 2000);
-    }
-
-  },
-  watch: {
-    // eslint-disable-next-line func-names
-    'value.data': function () {
-      if (this.active) {
-        this.loadSuggestions();
-      }
-    },
-    active: {
-      immediate: true,
-
-      handler(newValue) {
-        if (!newValue) {
-          this.loadView();
-        } else {
-          this.loadSuggestions();
-        }
-      }
-
-    }
-  },
-  template: `
-    <gl-filtered-search-token
-      v-bind="{ ...this.$props, ...this.$attrs }"
-      v-on="$listeners"
-    >
-      <template #view="{ inputValue }">
-        <gl-loading-icon size="sm" v-if="loadingView" class="gl-mr-2" />
-        <gl-avatar :size="16" :entity-name="inputValue" shape="circle" class="gl-mr-2" v-else />
-        {{ activeUser ? activeUser.name : inputValue }}
-      </template>
-      <template #suggestions>
-        <template v-if="loadingSuggestions">
-          <gl-loading-icon />
-        </template>
-        <template v-else>
-        <gl-filtered-search-suggestion :key="user.id" v-for="user in users" :value="user.username">
-          <div class="gl-display-flex">
-            <gl-avatar :size="32" :entity-name="user.username" />
-            <div>
-              <p class="gl-m-0">{{ user.name }}</p>
-              <p class="gl-m-0">@{{ user.username }}</p>
-            </div>
-          </div>
-        </gl-filtered-search-suggestion>
-        </template>
-      </template>
-    </gl-filtered-search-token>
-  `
-};
-const MilestoneToken = {
-  props: ['value', 'active'],
-  inheritAttrs: false,
-
-  data() {
-    return {
-      loadingView: false,
-      loadingSuggestions: false,
-      milestones: []
-    };
-  },
-
-  methods: {
-    loadSuggestions() {
-      this.loadingSuggestions = true;
-      setTimeout(() => {
-        this.loadingSuggestions = false;
-        this.milestones = fakeMilestones;
-      }, 2000);
-    }
-
-  },
-  watch: {
-    // eslint-disable-next-line func-names
-    'value.data': function () {
-      if (this.active) {
-        this.loadSuggestions();
-      }
-    },
-    active: {
-      immediate: true,
-
-      handler(newValue) {
-        if (newValue) {
-          this.loadSuggestions();
-        }
-      }
-
-    }
-  },
-  template: `
-    <gl-filtered-search-token
-      v-bind="{ ...this.$props, ...this.$attrs }"
-      v-on="$listeners"
-    >
-      <template #suggestions>
-        <gl-filtered-search-suggestion value="None">None</gl-filtered-search-suggestion>
-        <gl-filtered-search-suggestion value="Any">Any</gl-filtered-search-suggestion>
-        <gl-filtered-search-suggestion value="Upcoming">Upcoming</gl-filtered-search-suggestion>
-        <gl-filtered-search-suggestion value="Started">Started</gl-filtered-search-suggestion>
-        <gl-dropdown-divider v-if="loadingSuggestions || milestones.length" />
-        <template v-if="loadingSuggestions">
-          <gl-loading-icon />
-        </template>
-        <template v-else>
-        <gl-filtered-search-suggestion :key="milestone.id" v-for="milestone in milestones" :value="milestone.name">
-        {{ milestone.title }}
-        </gl-filtered-search-suggestion>
-        </template>
-      </template>
-    </gl-filtered-search-token>
-  `
-};
-const LabelToken = {
-  props: ['value', 'active'],
-  inheritAttrs: false,
-
-  data() {
-    return {
-      loadingView: false,
-      loadingSuggestions: false,
-      labels: [],
-      activeLabel: null
-    };
-  },
-
-  computed: {
-    currentValue() {
-      return this.value.data.toLowerCase();
-    },
-
-    containerStyle() {
-      if (this.activeLabel) {
-        const {
-          color,
-          text_color
-        } = this.activeLabel;
-        return {
-          backgroundColor: color,
-          color: text_color
-        };
-      }
-
-      return {};
-    }
-
-  },
-  methods: {
-    loadView() {
-      this.loadingView = true;
-      setTimeout(() => {
-        this.loadingView = false;
-        this.activeLabel = fakeLabels.find(l => l.title === this.value.data);
-      }, 100);
-    },
-
-    loadSuggestions() {
-      this.loadingSuggestions = true;
-      setTimeout(() => {
-        this.loadingSuggestions = false;
-        this.labels = fakeLabels;
-      }, 2000);
-    }
-
-  },
-  watch: {
-    // eslint-disable-next-line func-names
-    'value.data': function () {
-      if (this.active) {
-        this.loadSuggestions();
-      }
-    },
-    active: {
-      immediate: true,
-
-      handler(newValue) {
-        if (!newValue) {
-          this.loadView();
-        } else {
-          this.loadSuggestions();
-        }
-      }
-
-    }
-  },
-  template: `
-    <gl-filtered-search-token
-      v-bind="{ ...this.$props, ...this.$attrs }"
-      v-on="$listeners"
-    >
-      <template #view-token="{ inputValue, cssClasses, listeners }">
-        <gl-token variant="search-value" :class="cssClasses" :style="containerStyle" v-on="listeners">
-          {{ activeLabel ? activeLabel.title : inputValue }}
-        </gl-token>
-      </template>
-      <template #suggestions>
-        <gl-filtered-search-suggestion value="None">None</gl-filtered-search-suggestion>
-        <gl-filtered-search-suggestion value="Any">Any</gl-filtered-search-suggestion>
-        <gl-dropdown-divider v-if="loadingSuggestions || labels.length" />
-        <template v-if="loadingSuggestions">
-          <gl-loading-icon />
-        </template>
-        <template v-else>
-        <gl-filtered-search-suggestion :key="label.id" v-for="label in labels" :value="label.title">
-          <div class="d-flex">
-            <span
-              :style="{ backgroundColor: label.color, height: '16px', width: '16px' }"
-              class="d-inline-block mr-2"
-            ></span>
-            {{ label.title }}
-          </div>
-        </gl-filtered-search-suggestion>
-        </template>
-      </template>
-    </gl-filtered-search-token>
-  `
-};
-const tokens = [{
-  type: 'author',
-  icon: 'pencil',
-  title: 'Author',
-  dataType: 'user',
-  unique: true,
-  token: UserToken
-}, {
-  type: 'user',
-  icon: 'user',
-  title: 'Assignee',
-  dataType: 'user',
-  token: UserToken
-}, {
-  type: 'milestone',
-  icon: 'clock',
-  title: 'Milestone',
-  unique: true,
-  token: MilestoneToken
-}, {
-  type: 'label',
-  icon: 'labels',
-  title: 'Label',
-  token: LabelToken
-}, {
-  type: 'weight',
-  icon: 'weight',
-  title: 'Weight',
-  unique: true,
-  token: 'gl-filtered-search-token'
-}, {
-  type: 'confidential',
-  icon: 'eye-slash',
-  title: 'Confidential',
-  unique: true,
-  token: 'gl-filtered-search-token',
-  options: [{
-    icon: 'eye-slash',
-    value: true,
-    title: 'Yes'
-  }, {
-    icon: 'eye',
-    value: false,
-    title: 'No'
-  }]
-}];
-var script = {
-  data() {
-    return {
-      tokens,
-      value: [{
-        type: 'author',
-        value: {
-          data: 'beta',
-          operator: '='
-        }
-      }, {
-        type: 'label',
-        value: {
-          data: 'Bug',
-          operator: '='
-        }
-      }, 'raw text']
-    };
-  }
-
-};
-
-/* 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('gl-filtered-search',{attrs:{"available-tokens":_vm.tokens},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;