ENG-863: Add tooltip to tab icon when title is absent (#817)

* Tabs.vue - Add tooltip to tab icon when title is absent * add log detail * components/Tabs/Tabs.vue - Add tooltip to tab icon when title is absent * add log details * correct suggestions
orangehrm · Nov 7, 2024 · fbc930c · fbc930c
1 parent 4268528
commit fbc930c
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 11 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,5 @@
+2024-11-07 - 897c614bb977f6e559e717ad0a69a0bce5869183 - components/Tabs/Tabs.vue - Add tooltip to tab icon when title is absent
+
 2024-11-01 - d9cb67f8abf3c1128203f14bce687c8b5b4075a6 - Remove unnecessary separator between consecutive page numbers in OXD pagination
 
 2024-11-01 - 5f4c5306a8ec4b497cb824fa673e50ac0162af4b - ProfilePicture.vue, ProfilePic.vue, profile-pic.spec.ts- add onclick event to prevent default behaviour of link and execute a function fix issue

diff --git a/components/src/core/components/Tabs/Tabs.vue b/components/src/core/components/Tabs/Tabs.vue
@@ -8,17 +8,23 @@
     >
       <span
         tabindex="0"
-        class="tab-item"
+        :id="tab.id"
+        :class="{
+          'tab-item': true,
+          active: selectedTabId == tab.id,
+        }"
+        @blur="onBlur($event, tab)"
         @click="onClick($event, tab)"
         @focus="onFocus($event, tab)"
-        @blur="onBlur($event, tab)"
-        :class="{active: selectedTabId == tab.id}"
         @keyup.enter="onClick($event, tab)"
-        :id="tab.id"
       >
-        <oxd-icon class="tab-icon" :name="tab.icon" v-if="tab.icon" />{{
-          $vt(tab.title)
-        }}</span
+        <oxd-icon
+          class="tab-icon"
+          :name="tab.icon"
+          v-if="tab.icon"
+          :flow="!tab.title && tab.tooltip ? 'bottom' : null"
+          :tooltip="!tab.title && tab.tooltip ? $vt(tab.tooltip) : null"
+        />{{ $vt(tab.title) }}</span
       >
       <div
         class="selected-tab-indicator"
@@ -58,6 +64,7 @@ export default defineComponent({
                 title: value.props?.tab.title,
                 icon: value.props?.tab.icon,
                 class: value.props?.tab.class,
+                tooltip: value.props?.tab.tooltip,
               };
             })
         : [],

diff --git a/components/src/core/components/Tabs/__tests__/__snapshots__/tabs.spec.ts.snap b/components/src/core/components/Tabs/__tests__/__snapshots__/tabs.spec.ts.snap
@@ -2,10 +2,10 @@
 
 exports[`Tabs.vue Renders two tabs along with icons 1`] = `
 <ul class="tab-list">
-  <li class="tab-items"><span tabindex="0" class="tab-item active" id="1"><i class="oxd-svg-icon oxd-svg-icon--medium tab-icon"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 516.07 512"><defs><style>.cls-1{fill:#64728c;}</style></defs><path class="cls-1" d="M388.07,512h-272a120.14,120.14,0,0,1-120-120V120a120.14,120.14,0,0,1,120-120h208c26.54,1.06,26.52,39,0,40h-208a80.09,80.09,0,0,0-80,80V392a80.09,80.09,0,0,0,80,80h272a80.09,80.09,0,0,0,80-80V207c1.06-26.54,39-26.52,40,0V392A120.13,120.13,0,0,1,388.07,512ZM266.77,266.34a20,20,0,0,1-19.63-23.61l10.47-56.19a2.38,2.38,0,0,1,.05-.26,143.77,143.77,0,0,1,39.48-73.78l90.73-91.26C415-7.07,463.8-7.08,491,21.2c28.26,27.12,28.26,75.92,0,103l-90.74,91.25A143.91,143.91,0,0,1,326.39,255l-55.78,11a20,20,0,0,1-3.84.37Zm27.5-69.67-5.06,27.14,26.86-5.27A104,104,0,0,0,369.38,190l90.74-91.26c12.82-12.3,12.83-34.32,0-46.62h0c-12.26-12.77-34.32-12.77-46.58,0l-90.74,91.26a104.12,104.12,0,0,0-28.57,53.3Z" transform="translate(3.93)"></path></svg></i>Posts</span>
+  <li class="tab-items"><span tabindex="0" id="1" class="tab-item active"><i class="oxd-svg-icon oxd-svg-icon--medium tab-icon"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 516.07 512"><defs><style>.cls-1{fill:#64728c;}</style></defs><path class="cls-1" d="M388.07,512h-272a120.14,120.14,0,0,1-120-120V120a120.14,120.14,0,0,1,120-120h208c26.54,1.06,26.52,39,0,40h-208a80.09,80.09,0,0,0-80,80V392a80.09,80.09,0,0,0,80,80h272a80.09,80.09,0,0,0,80-80V207c1.06-26.54,39-26.52,40,0V392A120.13,120.13,0,0,1,388.07,512ZM266.77,266.34a20,20,0,0,1-19.63-23.61l10.47-56.19a2.38,2.38,0,0,1,.05-.26,143.77,143.77,0,0,1,39.48-73.78l90.73-91.26C415-7.07,463.8-7.08,491,21.2c28.26,27.12,28.26,75.92,0,103l-90.74,91.25A143.91,143.91,0,0,1,326.39,255l-55.78,11a20,20,0,0,1-3.84.37Zm27.5-69.67-5.06,27.14,26.86-5.27A104,104,0,0,0,369.38,190l90.74-91.26c12.82-12.3,12.83-34.32,0-46.62h0c-12.26-12.77-34.32-12.77-46.58,0l-90.74,91.26a104.12,104.12,0,0,0-28.57,53.3Z" transform="translate(3.93)"></path></svg></i>Posts</span>
     <div class="selected-tab-indicator active"></div>
   </li>
-  <li class="tab-items"><span tabindex="0" class="tab-item" id="2"><i class="oxd-svg-icon oxd-svg-icon--medium tab-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460.8 460.8" style="enable-background:new 0 0 460.8 460.8" xml:space="preserve"><path style="fill:currentColor" d="M230.432 0c-65.829 0-119.641 53.812-119.641 119.641s53.812 119.641 119.641 119.641 119.641-53.812 119.641-119.641S296.261 0 230.432 0zM435.755 334.89c-3.135-7.837-7.314-15.151-12.016-21.943-24.033-35.527-61.126-59.037-102.922-64.784-5.224-.522-10.971.522-15.151 3.657-21.943 16.196-48.065 24.555-75.233 24.555s-53.29-8.359-75.233-24.555c-4.18-3.135-9.927-4.702-15.151-3.657-41.796 5.747-79.412 29.257-102.922 64.784-4.702 6.792-8.882 14.629-12.016 21.943-1.567 3.135-1.045 6.792.522 9.927 4.18 7.314 9.404 14.629 14.106 20.898 7.314 9.927 15.151 18.808 24.033 27.167 7.314 7.314 15.673 14.106 24.033 20.898 41.273 30.825 90.906 47.02 142.106 47.02s100.833-16.196 142.106-47.02c8.359-6.269 16.718-13.584 24.033-20.898 8.359-8.359 16.718-17.241 24.033-27.167 5.224-6.792 9.927-13.584 14.106-20.898 2.611-3.135 3.133-6.793 1.566-9.927z"></path></svg></i>Posts</span>
+  <li class="tab-items"><span tabindex="0" id="2" class="tab-item"><i class="oxd-svg-icon oxd-svg-icon--medium tab-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460.8 460.8" style="enable-background:new 0 0 460.8 460.8" xml:space="preserve"><path style="fill:currentColor" d="M230.432 0c-65.829 0-119.641 53.812-119.641 119.641s53.812 119.641 119.641 119.641 119.641-53.812 119.641-119.641S296.261 0 230.432 0zM435.755 334.89c-3.135-7.837-7.314-15.151-12.016-21.943-24.033-35.527-61.126-59.037-102.922-64.784-5.224-.522-10.971.522-15.151 3.657-21.943 16.196-48.065 24.555-75.233 24.555s-53.29-8.359-75.233-24.555c-4.18-3.135-9.927-4.702-15.151-3.657-41.796 5.747-79.412 29.257-102.922 64.784-4.702 6.792-8.882 14.629-12.016 21.943-1.567 3.135-1.045 6.792.522 9.927 4.18 7.314 9.404 14.629 14.106 20.898 7.314 9.927 15.151 18.808 24.033 27.167 7.314 7.314 15.673 14.106 24.033 20.898 41.273 30.825 90.906 47.02 142.106 47.02s100.833-16.196 142.106-47.02c8.359-6.269 16.718-13.584 24.033-20.898 8.359-8.359 16.718-17.241 24.033-27.167 5.224-6.792 9.927-13.584 14.106-20.898 2.611-3.135 3.133-6.793 1.566-9.927z"></path></svg></i>Posts</span>
     <div class="selected-tab-indicator"></div>
   </li>
   <li class="tab-actions"></li>

diff --git a/components/src/core/components/Tabs/__tests__/tabs.spec.ts b/components/src/core/components/Tabs/__tests__/tabs.spec.ts
@@ -191,4 +191,58 @@ describe('Tabs.vue', () => {
     });
     expect(wrapper.emitted('blur')).toBeTruthy();
   });
+  it('Displays tooltip on icon when title is empty and tooltip is provided', async () => {
+    const wrapper = mount(Tabs, {
+      slots: {
+        default: [
+          h(
+            'Tab',
+            {
+              tab: {
+                id: 'tab1',
+                title: '',
+                icon: 'oxd-icon-info',
+                tooltip: 'Information',
+              },
+            },
+            'This is the content of tab 1',
+          ),
+        ],
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const icon = wrapper.findComponent(Icon);
+    expect(icon.exists()).toBeTruthy();
+    expect(icon.attributes('tooltip')).toBe('Information');
+    expect(icon.attributes('flow')).toBe('bottom');
+  });
+  it('Does not display tooltip on icon when title is provided', async () => {
+    const wrapper = mount(Tabs, {
+      slots: {
+        default: [
+          h(
+            'Tab',
+            {
+              tab: {
+                id: 'tab1',
+                title: 'Information',
+                icon: 'oxd-icon-info',
+                tooltip: 'Information',
+              },
+            },
+            'This is the content of tab 1',
+          ),
+        ],
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const icon = wrapper.findComponent(Icon);
+    expect(icon.exists()).toBeTruthy();
+    expect(icon.attributes('tooltip')).toBeFalsy();
+    expect(icon.attributes('flow')).toBeFalsy();
+  });
 });
diff --git a/storybook/stories/core/components/Tabs/Tabs.stories.js b/storybook/stories/core/components/Tabs/Tabs.stories.js
@@ -42,14 +42,14 @@ const TemplateWithIcon = (args) => ({
     return {args};
   },
   components: {'oxd-tabs': Tabs, 'oxd-tab': Tab},
-  template: `<oxd-tabs v-bind="args">   <oxd-tab :tab="{id:'1',title:'Posts',icon: 'oxd-posts'}"> <div> Hi this is the content of first tab </div> </oxd-tab><oxd-tab :tab="{id:'2',title:'Personal Details',icon: 'oxd-time'}"> <div> Hi this is the content of second tab </div> </oxd-tab> <oxd-tab :tab="{id:'3',title:'Schedule',icon: 'oxd-posts'}"> <div> Hi this is the content of third tab </div> </oxd-tab> </oxd-tabs>`,
+  template: `<oxd-tabs v-bind="args">   <oxd-tab :tab="{id:'1',title:'Posts',icon: 'oxd-posts'}"> <div> Hi this is the content of first tab </div> </oxd-tab><oxd-tab :tab="{id:'2',title:'Personal Details',icon: 'oxd-time'}"> <div> Hi this is the content of second tab </div> </oxd-tab> <oxd-tab :tab="{id:'3',title:'Schedule',icon: 'oxd-posts'}"> <div> Hi this is the content of third tab </div> </oxd-tab> <oxd-tab :tab="{id:'4',title:'',icon: 'oxd-posts', tooltip: 'Posts'}"> <div> Hi this is the content of fourth tab </div></oxd-tab> </oxd-tabs>`,
 });
 export const WithIcon = TemplateWithIcon.bind({});
 
 WithIcon.parameters = {
   docs: {
     source: {
-      code: `<oxd-tabs v-bind="args">   <oxd-tab :tab="{id:'1',title:'Posts',icon: 'oxd-posts'}"> <div> Hi this is the content of first tab </div> </oxd-tab><oxd-tab :tab="{id:'2',title:'Personal Details',icon: 'oxd-time'}"> <div> Hi this is the content of second tab </div> </oxd-tab> <oxd-tab :tab="{id:'3',title:'Schedule',icon: 'oxd-posts'}"> <div> Hi this is the content of third tab </div> </oxd-tab> </oxd-tabs>`,
+      code: `<oxd-tabs v-bind="args">   <oxd-tab :tab="{id:'1',title:'Posts',icon: 'oxd-posts'}"> <div> Hi this is the content of first tab </div> </oxd-tab><oxd-tab :tab="{id:'2',title:'Personal Details',icon: 'oxd-time'}"> <div> Hi this is the content of second tab </div> </oxd-tab> <oxd-tab :tab="{id:'3',title:'Schedule',icon: 'oxd-posts'}"> <div> Hi this is the content of third tab </div> </oxd-tab> <oxd-tab :tab="{id:'4',title:'',icon: 'oxd-posts', tooltip: 'Posts'}"> <div> Hi this is the content of fourth tab </div></oxd-tab> </oxd-tabs>`,
     },
   },
 };