Skip to content

Add support for Tag in NavTab tab item #637

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
phndiaye merged 1 commit into from
Feb 11, 2026
Merged

Add support for Tag in NavTab tab item #637

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions addon/components/o-s-s/nav-tab.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}} />
Expand All @@ -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>
12 changes: 10 additions & 2 deletions addon/components/o-s-s/nav-tab.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[]'
Expand All @@ -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')
};
Expand Down
9 changes: 6 additions & 3 deletions addon/components/o-s-s/nav-tab.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
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;
tabArray: TabDefinition[];
}

export interface TabDefinition {
selected: boolean;
disabled: boolean;
Copy link
Contributor

@OwenCoogan OwenCoogan Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is disabled mandatory ?

Copy link
Member Author

@phndiaye phndiaye Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it already was ^^ but i can make it optional (easier in that direction)

icon?: string;
label?: string;
infoCircle?: boolean;
notificationDot?: boolean;
selected: boolean;
disabled: boolean;
tag?: OSSTagArgs;
}

export default class OSSNavTab extends Component<OSSNavTabArgs> {
Expand Down
12 changes: 12 additions & 0 deletions tests/integration/components/o-s-s/nav-tab-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}} />`);
Expand Down
Loading