Merge branch '343977-tooltip-on-truncate-stories' into 'master'

Add storybook stories to TooltipOnTruncate

See merge request gitlab-org/gitlab!75115

app/assets/javascripts/boards/components/board_card_inner.vue

@@ -13,7 +13,7 @@ import boardCardInner from 'ee_else_ce/boards/mixins/board_card_inner';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import { updateHistory } from '~/lib/utils/url_utility';
 import { sprintf, __, n__ } from '~/locale';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import { ListType } from '../constants';
 import eventHub from '../eventhub';

app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue

@@ -3,7 +3,7 @@ import { GlTable, GlButton, GlBadge, GlTooltipDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 
 export default {

app/assets/javascripts/environments/components/environment_item.vue

@@ -5,7 +5,7 @@ import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { __, s__, sprintf } from '~/locale';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import CommitComponent from '~/vue_shared/components/commit.vue';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import eventHub from '../event_hub';

app/assets/javascripts/error_tracking/components/error_details.vue

@@ -17,7 +17,7 @@ import createFlash from '~/flash';
 import { __, sprintf, n__ } from '~/locale';
 import Tracking from '~/tracking';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import query from '../queries/details.query.graphql';
 import {

app/assets/javascripts/jobs/components/sidebar.vue

@@ -2,7 +2,7 @@
 import { GlButton, GlIcon } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { JOB_SIDEBAR } from '../constants';
 import ArtifactsBlock from './artifacts_block.vue';
 import CommitBlock from './commit_block.vue';

app/assets/javascripts/pipeline_editor/components/header/validation_segment.vue

@@ -2,7 +2,7 @@
 import { GlIcon, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import getAppStatus from '~/pipeline_editor/graphql/queries/client/app_status.graphql';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import {
   EDITOR_APP_STATUS_EMPTY,
   EDITOR_APP_STATUS_LOADING,

app/assets/javascripts/pipelines/components/pipeline_graph/job_pill.vue

 <script>
-import tooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import tooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 
 export default {
   components: {

app/assets/javascripts/pipelines/components/pipeline_graph/stage_name.vue

 <script>
 import { capitalize, escape } from 'lodash';
-import tooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import tooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 
 export default {
   components: {

app/assets/javascripts/runner/components/cells/runner_summary_cell.vue

 <script>
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import RunnerName from '../runner_name.vue';
 import RunnerTypeBadge from '../runner_type_badge.vue';
 

app/assets/javascripts/runner/components/runner_list.vue

 <script>
 import { GlTable, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __, s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_info.vue

 <script>
 import { GlLink, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import {
   MANUAL_DEPLOY,

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -13,7 +13,7 @@ import {
 import { constructWebIDEPath } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
 import MrWidgetHowToMergeModal from './mr_widget_how_to_merge_modal.vue';
 import MrWidgetIcon from './mr_widget_icon.vue';

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

@@ -15,7 +15,7 @@ import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mi
 import PipelineArtifacts from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { MT_MERGE_STRATEGY } from '../constants';
 
 export default {

app/assets/javascripts/vue_shared/components/commit.vue

@@ -2,7 +2,7 @@
 import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui';
 import { isString, isEmpty } from 'lodash';
 import { __, sprintf } from '~/locale';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import UserAvatarLink from './user_avatar/user_avatar_link.vue';
 
 export default {

app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue

@@ -3,7 +3,7 @@ import { GlIcon, GlButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitl
 import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range';
 import { __, sprintf } from '~/locale';
 
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import DateTimePickerInput from './date_time_picker_input.vue';
 import {
   defaultTimeRanges,

app/assets/javascripts/vue_shared/components/registry/metadata_item.vue

 <script>
 import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 
 export default {
   name: 'MetadataItem',

app/assets/javascripts/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.stories.js

+/* eslint-disable @gitlab/require-i18n-strings */
+import TooltipOnTruncate from './tooltip_on_truncate.vue';
+
+const defaultWidth = '250px';
+
+export default {
+  component: TooltipOnTruncate,
+  title: 'vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue',
+};
+
+const createStory = ({ ...options }) => {
+  return (_, { argTypes }) => {
+    const comp = {
+      components: { TooltipOnTruncate },
+      props: Object.keys(argTypes),
+      template: `
+        <div class="gl-bg-blue-50" :style="{ width }">
+          <tooltip-on-truncate :title="title" :placement="placement" class="gl-display-block gl-text-truncate">
+            {{title}}
+          </tooltip-on-truncate>
+        </div>
+      `,
+      ...options,
+    };
+
+    return comp;
+  };
+};
+
+export const Default = createStory();
+Default.args = {
+  width: defaultWidth,
+  title: 'Hover on this text to see the content in a tooltip.',
+};
+
+export const NoOverflow = createStory();
+NoOverflow.args = {
+  width: defaultWidth,
+  title: "Short text doesn't need a tooltip.",
+};
+
+export const Placement = createStory();
+Placement.args = {
+  width: defaultWidth,
+  title: 'Use `placement="right"` to display this tooltip at the right.',
+  placement: 'right',
+};
+
+const TIMEOUT_S = 3;
+
+export const LiveUpdates = createStory({
+  props: ['width', 'placement'],
+  data() {
+    return {
+      title: `(loading in ${TIMEOUT_S}s)`,
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.title = 'Content updated! The content is now overflowing so we use a tooltip!';
+    }, TIMEOUT_S * 1000);
+  },
+});
+LiveUpdates.args = {
+  width: defaultWidth,
+};
+LiveUpdates.argTypes = {
+  title: {
+    control: false,
+  },
+};
+
+export const TruncateTarget = createStory({
+  template: `
+    <div class="gl-bg-black" :style="{ width }">
+      <tooltip-on-truncate class="gl-display-flex" :truncate-target="truncateTarget" :title="title">
+        <div class="gl-m-5 gl-bg-blue-50 gl-text-truncate">
+          {{ title }}
+        </div>
+      </tooltip-on-truncate>
+    </div>
+  `,
+});
+TruncateTarget.args = {
+  width: defaultWidth,
+  truncateTarget: 'child',
+  title: 'Wrap in container and use `truncate-target="child"` prop.',
+};

spec/frontend/vue_shared/components/registry/metadata_item_spec.js

@@ -2,7 +2,7 @@ import { GlIcon, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import component from '~/vue_shared/components/registry/metadata_item.vue';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 
 describe('Metadata Item', () => {
   let wrapper;

spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js

 import { mount, shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { hasHorizontalOverflow } from '~/lib/utils/dom_utils';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 const MOCK_TITLE = 'lorem-ipsum-dolar-sit-amit-consectur-adipiscing-elit-sed-do';