From 3075f0aece81b77411c030eaff470b55950fdef0 Mon Sep 17 00:00:00 2001
From: Philippe Ndiaye <philippe.ndiaye@upfluence.com>
Date: Tue, 10 Feb 2026 17:44:22 +0100
Subject: [PATCH] add support for Tag in NavTab tab item

---
 addon/components/o-s-s/nav-tab.hbs                 | 13 ++++++++++---
 addon/components/o-s-s/nav-tab.stories.js          | 12 ++++++++++--
 addon/components/o-s-s/nav-tab.ts                  |  9 ++++++---
 tests/integration/components/o-s-s/nav-tab-test.ts | 12 ++++++++++++
 4 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/addon/components/o-s-s/nav-tab.hbs b/addon/components/o-s-s/nav-tab.hbs
index 02243ee78..1f2ca5784 100644
--- a/addon/components/o-s-s/nav-tab.hbs
+++ b/addon/components/o-s-s/nav-tab.hbs
@@ -1,7 +1,11 @@
 <div class="fx-row fx-1 tab-container">
   {{#each @tabArray as |tab|}}
-    <button type="button" class="fx-col tab {{if tab.selected "tab--selected"}} {{if tab.disabled "tab--disabled"}}"
-            {{on "click" (fn this.onSelectTab tab)}} disabled={{tab.disabled}}>
+    <button
+      type="button"
+      class="fx-col tab {{if tab.selected 'tab--selected'}} {{if tab.disabled 'tab--disabled'}}"
+      {{on "click" (fn this.onSelectTab tab)}}
+      disabled={{tab.disabled}}
+    >
       <div class="fx-row tab-content fx-xalign-center fx-gap-px-9">
         {{#if tab.icon}}
           <OSS::Icon @style={{fa-icon-style tab.icon}} @icon={{fa-icon-value tab.icon}} />
@@ -15,7 +19,10 @@
         {{#if tab.notificationDot}}
           <OSS::Icon @style="solid" @icon="fa-circle" class="font-color-accent text-size-1" />
         {{/if}}
+        {{#if tab.tag}}
+          <OSS::Tag @label={{tab.tag.label}} @skin={{tab.tag.skin}} @plain={{tab.tag.plain}} />
+        {{/if}}
       </div>
     </button>
   {{/each}}
-</div>
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/nav-tab.stories.js b/addon/components/o-s-s/nav-tab.stories.js
index 25bca00b3..584e24166 100644
--- a/addon/components/o-s-s/nav-tab.stories.js
+++ b/addon/components/o-s-s/nav-tab.stories.js
@@ -19,7 +19,7 @@ export default {
     tabArray: {
       type: { required: true },
       description:
-        'Array of TabDefinition which has the following parameters: <br/> -icon?: string; <br/> -label?: string; <br/> -infoCircle?: boolean; <br/> -notificationDot?: boolean; <br/> -selected: boolean; <br/> -disabled: boolean; <br/> @label or @icon is mandatory for each element of tabArray',
+        'Array of TabDefinition which has the following parameters: <br/> -icon?: string; <br/> -label?: string; <br/> -infoCircle?: boolean; <br/> -notificationDot?: boolean; <br/> -selected: boolean; <br/> -disabled: boolean; <br/> -tag: OSS::Tag arg; <br/> @label or @icon is mandatory for each element of tabArray',
       table: {
         type: {
           summary: 'TabDefinition[]'
@@ -40,7 +40,15 @@ const defaultArgs = {
     { label: 'Tab', icon: 'far fa-thumbs-up', infoCircle: true, notificationDot: true },
     { label: 'Tab', icon: 'far fa-thumbs-up', infoCircle: true, notificationDot: true, selected: true },
     { label: 'Tab', icon: 'far fa-thumbs-up', infoCircle: true, notificationDot: true, disabled: true },
-    { label: 'Tab', icon: 'far fa-thumbs-up', infoCircle: true, notificationDot: true, selected: true, disabled: true }
+    { label: 'Tab', icon: 'far fa-thumbs-up', infoCircle: true, notificationDot: true, selected: true, disabled: true },
+    {
+      label: 'Tab',
+      icon: 'far fa-thumbs-up',
+      infoCircle: true,
+      notificationDot: true,
+      selected: true,
+      tag: { label: 'X', skin: 'danger' }
+    }
   ],
   onSelection: action('onSelection')
 };
diff --git a/addon/components/o-s-s/nav-tab.ts b/addon/components/o-s-s/nav-tab.ts
index f7a50661a..4783af9d3 100644
--- a/addon/components/o-s-s/nav-tab.ts
+++ b/addon/components/o-s-s/nav-tab.ts
@@ -1,6 +1,8 @@
 import { assert } from '@ember/debug';
-import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+import type { OSSTagArgs } from './tag';
 
 interface OSSNavTabArgs {
   onSelection(selectedTab: TabDefinition): void;
@@ -8,12 +10,13 @@ interface OSSNavTabArgs {
 }
 
 export interface TabDefinition {
+  selected: boolean;
+  disabled: boolean;
   icon?: string;
   label?: string;
   infoCircle?: boolean;
   notificationDot?: boolean;
-  selected: boolean;
-  disabled: boolean;
+  tag?: OSSTagArgs;
 }
 
 export default class OSSNavTab extends Component<OSSNavTabArgs> {
diff --git a/tests/integration/components/o-s-s/nav-tab-test.ts b/tests/integration/components/o-s-s/nav-tab-test.ts
index 8a6cfb1ef..1944589db 100644
--- a/tests/integration/components/o-s-s/nav-tab-test.ts
+++ b/tests/integration/components/o-s-s/nav-tab-test.ts
@@ -58,6 +58,18 @@ module('Integration | Component | o-s-s/nav-tab', function (hooks) {
       assert.dom('.tab-content .fas.fa-circle').exists();
     });
 
+    test('Tab tag displays properly', async function (assert) {
+      this.tabArray.push({ label: 'Tab', tag: { label: '1', skin: 'danger' } });
+
+      await render(hbs`<OSS::NavTab @tabArray={{this.tabArray}} @onSelection={{this.onSelection}} />`);
+
+      assert.dom('.tab-container').exists();
+      assert.dom('.tab-container .tab').exists();
+      assert.dom('.tab-container .upf-tag').exists();
+      assert.dom('.tab-container .upf-tag').hasText('1');
+      assert.dom('.tab-container .upf-tag').hasClass('upf-tag--critical');
+    });
+
     test('Tab displays selected state properly', async function (assert) {
       this.tabArray.push({ label: 'Tab', selected: true });
       await render(hbs`<OSS::NavTab @tabArray={{this.tabArray}} @onSelection={{this.onSelection}} />`);