Skip to content

Commit ce9415f

Browse files
deleoniodeleonio
authored
fix: tabs multiple selected (#9731)
2 parents 82713fe + fdd413c commit ce9415f

File tree

6 files changed

+45
-36
lines changed

6 files changed

+45
-36
lines changed

‎packages/components/src/components/button/component.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,7 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
152152
'kol-button--inline': this.state._inline === true,
153153
'kol-button--standalone': this.state._inline === false,
154154
'kol-button--hide-label': hideLabel,
155-
[this.state._customClass as string]:
156-
this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
155+
[this.state._customClass as string]: typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
157156
})}
158157
disabled={isDisabled}
159158
id={this.state._id}

‎packages/components/src/components/pagination/test/__snapshots__/snapshot.spec.tsx.snap‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,22 @@ exports[`kol-pagination should render with _label="Label" _on={} _max=2 _page=1
2525
<nav aria-label="Label" class="kol-pagination__navigation">
2626
<ul class="kol-pagination__navigation-list">
2727
<li>
28-
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-first" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--first"></kol-button-wc>
28+
<kol-button-wc _customclass="" _disabled="" _hidelabel="" _label="kol-page-first" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--first"></kol-button-wc>
2929
</li>
3030
<li>
31-
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--previous"></kol-button-wc>
31+
<kol-button-wc _customclass="" _disabled="" _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--previous"></kol-button-wc>
3232
</li>
3333
<li>
34-
<kol-button-wc _ariadescription="kol-page 1" _disabled="" _label="1" aria-current="page" class="kol-pagination__button kol-pagination__button--selected selected"></kol-button-wc>
34+
<kol-button-wc _ariadescription="kol-page 1" _customclass="" _disabled="" _label="1" aria-current="page" class="kol-pagination__button kol-pagination__button--selected selected"></kol-button-wc>
3535
</li>
3636
<li>
37-
<kol-button-wc _ariadescription="kol-page 2" _label="2" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
37+
<kol-button-wc _ariadescription="kol-page 2" _customclass="" _label="2" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
3838
</li>
3939
<li>
40-
<kol-button-wc _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--next"></kol-button-wc>
40+
<kol-button-wc _customclass="" _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--next"></kol-button-wc>
4141
</li>
4242
<li>
43-
<kol-button-wc _hidelabel="" _label="kol-page-last" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--last"></kol-button-wc>
43+
<kol-button-wc _customclass="" _hidelabel="" _label="kol-page-last" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--last"></kol-button-wc>
4444
</li>
4545
</ul>
4646
</nav>
@@ -59,34 +59,34 @@ exports[`kol-pagination should render with _label="Label" _on={} _max=10 _page=1
5959
<nav aria-label="Label" class="kol-pagination__navigation">
6060
<ul class="kol-pagination__navigation-list">
6161
<li>
62-
<kol-button-wc _hidelabel="" _label="kol-page-first" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--first"></kol-button-wc>
62+
<kol-button-wc _customclass="" _hidelabel="" _label="kol-page-first" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--first"></kol-button-wc>
6363
</li>
6464
<li>
65-
<kol-button-wc _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--previous"></kol-button-wc>
65+
<kol-button-wc _customclass="" _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--previous"></kol-button-wc>
6666
</li>
6767
<li>
68-
<kol-button-wc _ariadescription="kol-page 1" _label="1" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
68+
<kol-button-wc _ariadescription="kol-page 1" _customclass="" _label="1" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
6969
</li>
7070
<li>
71-
<kol-button-wc _ariadescription="kol-page 2" _label="2" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
71+
<kol-button-wc _ariadescription="kol-page 2" _customclass="" _label="2" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
7272
</li>
7373
<li>
7474
<span aria-hidden="true" class="kol-pagination__separator"></span>
7575
</li>
7676
<li>
77-
<kol-button-wc _ariadescription="kol-page 8" _label="8" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
77+
<kol-button-wc _ariadescription="kol-page 8" _customclass="" _label="8" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
7878
</li>
7979
<li>
80-
<kol-button-wc _ariadescription="kol-page 9" _label="9" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
80+
<kol-button-wc _ariadescription="kol-page 9" _customclass="" _label="9" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
8181
</li>
8282
<li>
83-
<kol-button-wc _ariadescription="kol-page 10" _disabled="" _label="10" aria-current="page" class="kol-pagination__button kol-pagination__button--selected selected"></kol-button-wc>
83+
<kol-button-wc _ariadescription="kol-page 10" _customclass="" _disabled="" _label="10" aria-current="page" class="kol-pagination__button kol-pagination__button--selected selected"></kol-button-wc>
8484
</li>
8585
<li>
86-
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--next"></kol-button-wc>
86+
<kol-button-wc _customclass="" _disabled="" _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--next"></kol-button-wc>
8787
</li>
8888
<li>
89-
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-last" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--last"></kol-button-wc>
89+
<kol-button-wc _customclass="" _disabled="" _hidelabel="" _label="kol-page-last" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--last"></kol-button-wc>
9090
</li>
9191
</ul>
9292
</nav>
@@ -105,22 +105,22 @@ exports[`kol-pagination should render with _label="Label" _on={} _max=12 _page=6
105105
<nav aria-label="Label" class="kol-pagination__navigation">
106106
<ul class="kol-pagination__navigation-list">
107107
<li>
108-
<kol-button-wc _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--previous"></kol-button-wc>
108+
<kol-button-wc _customclass="" _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--previous"></kol-button-wc>
109109
</li>
110110
<li>
111-
<kol-button-wc _ariadescription="kol-page 5" _label="5" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
111+
<kol-button-wc _ariadescription="kol-page 5" _customclass="" _label="5" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
112112
</li>
113113
<li>
114-
<kol-button-wc _ariadescription="kol-page 6" _disabled="" _label="6" aria-current="page" class="kol-pagination__button kol-pagination__button--selected selected"></kol-button-wc>
114+
<kol-button-wc _ariadescription="kol-page 6" _customclass="" _disabled="" _label="6" aria-current="page" class="kol-pagination__button kol-pagination__button--selected selected"></kol-button-wc>
115115
</li>
116116
<li>
117-
<kol-button-wc _ariadescription="kol-page 7" _label="7" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
117+
<kol-button-wc _ariadescription="kol-page 7" _customclass="" _label="7" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
118118
</li>
119119
<li>
120120
<span aria-hidden="true" class="kol-pagination__separator"></span>
121121
</li>
122122
<li>
123-
<kol-button-wc _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--next"></kol-button-wc>
123+
<kol-button-wc _customclass="" _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--next"></kol-button-wc>
124124
</li>
125125
</ul>
126126
</nav>
@@ -139,31 +139,31 @@ exports[`kol-pagination should render with _label="Label" _on={} _max=25 _page=3
139139
<nav aria-label="Label" class="kol-pagination__navigation">
140140
<ul class="kol-pagination__navigation-list">
141141
<li>
142-
<kol-button-wc _hidelabel="" _label="kol-page-first" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--first"></kol-button-wc>
142+
<kol-button-wc _customclass="" _hidelabel="" _label="kol-page-first" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--first"></kol-button-wc>
143143
</li>
144144
<li>
145-
<kol-button-wc _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--previous"></kol-button-wc>
145+
<kol-button-wc _customclass="" _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--previous"></kol-button-wc>
146146
</li>
147147
<li>
148-
<kol-button-wc _ariadescription="kol-page 1" _label="1" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
148+
<kol-button-wc _ariadescription="kol-page 1" _customclass="" _label="1" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
149149
</li>
150150
<li>
151-
<kol-button-wc _ariadescription="kol-page 2" _label="2" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
151+
<kol-button-wc _ariadescription="kol-page 2" _customclass="" _label="2" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
152152
</li>
153153
<li>
154-
<kol-button-wc _ariadescription="kol-page 3" _disabled="" _label="3" aria-current="page" class="kol-pagination__button kol-pagination__button--selected selected"></kol-button-wc>
154+
<kol-button-wc _ariadescription="kol-page 3" _customclass="" _disabled="" _label="3" aria-current="page" class="kol-pagination__button kol-pagination__button--selected selected"></kol-button-wc>
155155
</li>
156156
<li>
157-
<kol-button-wc _ariadescription="kol-page 4" _label="4" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
157+
<kol-button-wc _ariadescription="kol-page 4" _customclass="" _label="4" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
158158
</li>
159159
<li>
160-
<kol-button-wc _ariadescription="kol-page 5" _label="5" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
160+
<kol-button-wc _ariadescription="kol-page 5" _customclass="" _label="5" class="kol-pagination__button kol-pagination__button--numbers"></kol-button-wc>
161161
</li>
162162
<li>
163-
<kol-button-wc _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--next"></kol-button-wc>
163+
<kol-button-wc _customclass="" _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--next"></kol-button-wc>
164164
</li>
165165
<li>
166-
<kol-button-wc _hidelabel="" _label="kol-page-last" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--last"></kol-button-wc>
166+
<kol-button-wc _customclass="" _hidelabel="" _label="kol-page-last" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--last"></kol-button-wc>
167167
</li>
168168
</ul>
169169
</nav>

‎packages/components/src/components/tabs/shadow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ export class KolTabs implements TabsAPI {
167167
_tabIndex={this.state._selected === index ? 0 : -1}
168168
_tooltipAlign={button._tooltipAlign}
169169
_variant={this.state._selected === index ? 'custom' : undefined}
170-
_customClass={this.state._selected === index ? 'selected' : undefined}
170+
_customClass={this.state._selected === index ? 'selected' : ''}
171171
_ariaControls={`tabpanel-${index}`}
172172
_ariaSelected={this.state._selected === index}
173173
_id={`${this.state._label.replace(/\s/g, '-')}-tab-${index}`}

‎packages/components/src/components/tabs/tabs.e2e.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,4 +119,14 @@ test.describe('kol-tabs', () => {
119119
await expect(eventPromise).resolves.toBeUndefined();
120120
});
121121
});
122+
123+
test('after click only 1 tab has selected class', async ({ page }) => {
124+
await page.setContent(`<kol-tabs _tabs='${JSON.stringify(TABS)}' _label="Tabs">
125+
<div slot="tab-0">Contents of Tab 1</div>
126+
<div slot="tab-1">Contents of Tab 2</div>
127+
</kol-tabs>`);
128+
const kolTabs = page.locator('kol-tabs');
129+
await kolTabs.getByRole('tab', { name: 'Second Tab' }).click();
130+
await expect(page.locator('.kol-tabs .selected')).toHaveCount(1);
131+
});
122132
});

‎packages/components/src/components/tabs/test/__snapshots__/snapshot.spec.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ exports[`kol-tabs should render with _label="Text" _selected=1 _tabs=[{"_icons":
55
<template shadowrootmode="open">
66
<div class="kol-tabs kol-tabs--align-top">
77
<div aria-label="Text" class="kol-tabs__button-group" role="tablist">
8-
<kol-button-wc _ariacontrols="tabpanel-0" _icons="codicon codicon-pie-chart" _id="Text-tab-0" _label="Erster Tab" _role="tab" _tabindex="-1" _value="0"></kol-button-wc>
8+
<kol-button-wc _ariacontrols="tabpanel-0" _customclass="" _icons="codicon codicon-pie-chart" _id="Text-tab-0" _label="Erster Tab" _role="tab" _tabindex="-1" _value="0"></kol-button-wc>
99
<kol-button-wc _ariacontrols="tabpanel-1" _ariaselected="" _customclass="selected" _icons="codicon codicon-calendar" _id="Text-tab-1" _label="Zweiter Tab" _role="tab" _tabindex="0" _value="1" _variant="custom"></kol-button-wc>
10-
<kol-button-wc _ariacontrols="tabpanel-2" _disabled="" _icons="codicon codicon-briefcase" _id="Text-tab-2" _label="Deaktivierter Tab" _role="tab" _tabindex="-1" _value="2"></kol-button-wc>
11-
<kol-button-wc _ariacontrols="tabpanel-3" _icons="codicon codicon-telescope" _id="Text-tab-3" _label="Letzter Tab" _role="tab" _tabindex="-1" _value="3"></kol-button-wc>
10+
<kol-button-wc _ariacontrols="tabpanel-2" _customclass="" _disabled="" _icons="codicon codicon-briefcase" _id="Text-tab-2" _label="Deaktivierter Tab" _role="tab" _tabindex="-1" _value="2"></kol-button-wc>
11+
<kol-button-wc _ariacontrols="tabpanel-3" _customclass="" _icons="codicon codicon-telescope" _id="Text-tab-3" _label="Letzter Tab" _role="tab" _tabindex="-1" _value="3"></kol-button-wc>
1212
</div>
1313
<div class="kol-tabs__content">
1414
<div aria-labelledby="Text-tab-0" hidden="" id="tabpanel-0" role="tabpanel" tabindex="0">

‎packages/components/src/schema/props/custom-class.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@ export type PropCustomClass = {
1515
/* validator */
1616
export const validateCustomClass = (component: Generic.Element.Component, value?: CustomClassPropType): void => {
1717
watchString(component, '_customClass', value, {
18-
defaultValue: undefined,
18+
defaultValue: '',
1919
});
2020
};

0 commit comments

Comments
 (0)
⚡