diff --git a/changelog.md b/changelog.md index 8cd22c371..1e696de4e 100644 --- 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 index b4886fb8c..3eb24b7e2 100644 --- a/components/src/core/components/Tabs/Tabs.vue +++ b/components/src/core/components/Tabs/Tabs.vue @@ -8,17 +8,23 @@ > - {{ - $vt(tab.title) - }}{{ $vt(tab.title) }}
-
  • Posts +
  • Posts
  • -
  • Posts +
  • Posts
  • diff --git a/components/src/core/components/Tabs/__tests__/tabs.spec.ts b/components/src/core/components/Tabs/__tests__/tabs.spec.ts index 472df260b..7472c2f3e 100644 --- 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 index 0a6c83c1b..ae3757a85 100644 --- 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: `
    Hi this is the content of first tab
    Hi this is the content of second tab
    Hi this is the content of third tab
    `, + template: `
    Hi this is the content of first tab
    Hi this is the content of second tab
    Hi this is the content of third tab
    Hi this is the content of fourth tab
    `, }); export const WithIcon = TemplateWithIcon.bind({}); WithIcon.parameters = { docs: { source: { - code: `
    Hi this is the content of first tab
    Hi this is the content of second tab
    Hi this is the content of third tab
    `, + code: `
    Hi this is the content of first tab
    Hi this is the content of second tab
    Hi this is the content of third tab
    Hi this is the content of fourth tab
    `, }, }, };