Skip to content

Commit f7ad885

Browse files
davidken91davidken91
authored
Feature/513 tabbar use slots instead of arrays in the tabbar (#799)
* replacing array with slots in tabbar component
1 parent b94f1fa commit f7ad885

File tree

8 files changed

+103
-203
lines changed

8 files changed

+103
-203
lines changed

‎packages/js-example-app/src/assets/index.html

Lines changed: 12 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -76,64 +76,6 @@ <h2>Vanilla JS Example Application</h2>
7676
<div class="component">
7777
<p>Tab Bar</p>
7878
<blr-tab-bar
79-
tabs="[
80-
{
81-
label: 'Tab 1',
82-
icon: 'blr360',
83-
href: './',
84-
disabled: true,
85-
},
86-
{
87-
label: 'Tab 2',
88-
icon: 'blrInfo',
89-
href: './',
90-
},
91-
{
92-
label: 'Tab 3',
93-
icon: 'blrCrop',
94-
href: './',
95-
},
96-
{
97-
label: 'Tab 4',
98-
icon: 'blrDocumentNew',
99-
href: './',
100-
},
101-
{
102-
label: 'Tab 5',
103-
icon: 'blrDocumentTwo',
104-
href: './',
105-
},
106-
{
107-
label: 'Tab 6',
108-
icon: 'blrDownload',
109-
href: './',
110-
},
111-
{
112-
label: 'Tab 7',
113-
icon: 'blrHeart',
114-
href: './',
115-
},
116-
{
117-
label: 'Tab 8',
118-
icon: 'blrHome',
119-
href: './',
120-
},
121-
{
122-
label: 'Tab 9',
123-
icon: 'blrLockClosed',
124-
href: './',
125-
},
126-
{
127-
label: 'Tab 10',
128-
icon: 'blrMusic',
129-
href: './',
130-
},
131-
{
132-
label: 'Tab 11',
133-
icon: 'blrPen',
134-
href: './',
135-
},
136-
]"
13779
variant="standard"
13880
overflowVariantStandard="buttons"
13981
overflowVariantFullWidth="browserOverflow"
@@ -142,7 +84,18 @@ <h2>Vanilla JS Example Application</h2>
14284
tabContent="labelAndIcon"
14385
iconPosition="leading"
14486
alignment="left"
145-
></blr-tab-bar>
87+
><p disabled label="Tab 1" icon="blr360">Tab 1</p>
88+
<p label="Tab 2" icon="blrInfo">Tab 2</p>
89+
<p label="Tab 3" icon="blrCrop">Tab 3</p>
90+
<p label="Tab 4" icon="blrDocumentNew">Tab 4</p>
91+
<p label="Tab 5" icon="blrDocumentTwo">Tab 5</p>
92+
<p label="Tab 6" icon="blrDownload">Tab 6</p>
93+
<p label="Tab 7" icon="blrHeart">Tab 7</p>
94+
<p label="Tab 8" icon="blrHome">Tab 8</p>
95+
<p label="Tab 9" icon="blrLockClosed">Tab 9</p>
96+
<p label="Tab 10" icon="blrMusic">Tab 10</p>
97+
<p label="Tab 11" icon="blrPen">Tab 11</p>
98+
</blr-tab-bar>
14699
</div>
147100
</div>
148101

‎packages/ui-library/src/components/navigation/tab-bar/index.css.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ export const { tokenizedLight: tabBarLight, tokenizedDark: tabBarDark } = render
3232
- [ ] Add layoutvariant where I see the buttons, but no scrollbar
3333
*/
3434
return typeSafeNestedCss/* css */ `
35+
slot {
36+
display: none;
37+
}
38+
3539
.wrapper-horizontal {
3640
position: relative;
3741
display: block;
@@ -152,7 +156,6 @@ export const { tokenizedLight: tabBarLight, tokenizedDark: tabBarDark } = render
152156
flex-direction: column;
153157
_flex: 0 1 0px;
154158
justify-content: center;
155-
overflow: clip;
156159
157160
158161
&:focus-within:not(.disabled) {
@@ -165,6 +168,12 @@ export const { tokenizedLight: tabBarLight, tokenizedDark: tabBarDark } = render
165168
_flex: 1 1 0px;
166169
}
167170
171+
.nav-item-underline {
172+
&.selected {
173+
background-color: ${TabBar.Tab.HighlightLine.BackgroundColor.Active.Pressed}
174+
}
175+
}
176+
168177
.nav-item-content-wrapper {
169178
display: flex;
170179
justify-content: center;

‎packages/ui-library/src/components/navigation/tab-bar/index.stories.ts

Lines changed: 16 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { html } from 'lit-html';
12
import { BlrTabBarType } from './index';
23
import { BlrTabBarRenderFunction } from './renderFunction';
34
import {
@@ -25,7 +26,6 @@ export default {
2526
options: FormSizes,
2627
control: { type: 'select' },
2728
},
28-
tabs: { control: 'array' },
2929
tabContent: {
3030
options: TabContentVariants,
3131
control: { type: 'select' },
@@ -63,70 +63,26 @@ export default {
6363
},
6464
};
6565

66-
export const BlrTabBar = (params: BlrTabBarType) => BlrTabBarRenderFunction(params);
66+
const tabsAsChildren = html`
67+
<p disabled label="Tab 1" icon="blr360">Tab 1</p>
68+
<p label="Tab 2" icon="blrInfo">Tab 2</p>
69+
<p label="Tab 3" icon="blrCrop">Tab 3</p>
70+
<p label="Tab 4" icon="blrDocumentNew">Tab 4</p>
71+
<p label="Tab 5" icon="blrDocumentTwo">Tab 5</p>
72+
<p label="Tab 6" icon="blrDownload">Tab 6</p>
73+
<p label="Tab 7" icon="blrHeart">Tab 7</p>
74+
<p label="Tab 8" icon="blrHome">Tab 8</p>
75+
<p label="Tab 9" icon="blrLockClosed">Tab 9</p>
76+
<p label="Tab 10" icon="blrMusic">Tab 10</p>
77+
<p label="Tab 11" icon="blrPen">Tab 11</p>
78+
`;
79+
80+
export const BlrTabBar = (params: BlrTabBarType) => BlrTabBarRenderFunction(params, tabsAsChildren);
6781

6882
BlrTabBar.storyName = 'TabBar';
6983

7084
const args: BlrTabBarType = {
7185
theme: 'Light',
72-
tabs: [
73-
{
74-
label: 'Tab 1',
75-
icon: 'blr360',
76-
href: './',
77-
disabled: true,
78-
},
79-
{
80-
label: 'Tab 2',
81-
icon: 'blrInfo',
82-
href: './',
83-
},
84-
{
85-
label: 'Tab 3',
86-
icon: 'blrCrop',
87-
href: './',
88-
},
89-
{
90-
label: 'Tab 4',
91-
icon: 'blrDocumentNew',
92-
href: './',
93-
},
94-
{
95-
label: 'Tab 5',
96-
icon: 'blrDocumentTwo',
97-
href: './',
98-
},
99-
{
100-
label: 'Tab 6',
101-
icon: 'blrDownload',
102-
href: './',
103-
},
104-
{
105-
label: 'Tab 7',
106-
icon: 'blrHeart',
107-
href: './',
108-
},
109-
{
110-
label: 'Tab 8',
111-
icon: 'blrHome',
112-
href: './',
113-
},
114-
{
115-
label: 'Tab 9',
116-
icon: 'blrLockClosed',
117-
href: './',
118-
},
119-
{
120-
label: 'Tab 10',
121-
icon: 'blrMusic',
122-
href: './',
123-
},
124-
{
125-
label: 'Tab 11',
126-
icon: 'blrPen',
127-
href: './',
128-
},
129-
],
13086
variant: 'standard',
13187
overflowVariantStandard: 'buttons',
13288
overflowVariantFullWidth: 'browserOverflow',

‎packages/ui-library/src/components/navigation/tab-bar/index.test.ts

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,10 @@ import type { BlrTabBarType } from '@boiler/ui-library/dist/';
55

66
import { fixture, expect } from '@open-wc/testing';
77
import { querySelectorDeep } from 'query-selector-shadow-dom';
8+
import { html } from 'lit-html';
89

910
const sampleParams: BlrTabBarType = {
1011
theme: 'Light',
11-
tabs: [
12-
{
13-
label: 'Tab 1',
14-
icon: 'blr360',
15-
href: './',
16-
},
17-
{
18-
label: 'Tab 2',
19-
icon: 'blrInfo',
20-
href: './',
21-
},
22-
{
23-
label: 'Tab 3',
24-
icon: 'blrCalendar',
25-
href: './',
26-
},
27-
],
2812
overflowVariantStandard: 'wrap',
2913
overflowVariantFullWidth: 'wrap',
3014
showDivider: true,
@@ -34,9 +18,23 @@ const sampleParams: BlrTabBarType = {
3418
alignment: 'left',
3519
};
3620

21+
const tabsAsChildren = html`
22+
<p disabled label="Tab 1" icon="blr360">Tab 1</p>
23+
<p label="Tab 2" icon="blrInfo">Tab 2</p>
24+
<p label="Tab 3" icon="blrCrop">Tab 3</p>
25+
<p label="Tab 4" icon="blrDocumentNew">Tab 4</p>
26+
<p label="Tab 5" icon="blrDocumentTwo">Tab 5</p>
27+
<p label="Tab 6" icon="blrDownload">Tab 6</p>
28+
<p label="Tab 7" icon="blrHeart">Tab 7</p>
29+
<p label="Tab 8" icon="blrHome">Tab 8</p>
30+
<p label="Tab 9" icon="blrLockClosed">Tab 9</p>
31+
<p label="Tab 10" icon="blrMusic">Tab 10</p>
32+
<p label="Tab 11" icon="blrPen">Tab 11</p>
33+
`;
34+
3735
describe('blr-tab-bar', () => {
3836
it('is having a tab bar containing the right className', async () => {
39-
const element = await fixture(BlrTabBarRenderFunction(sampleParams));
37+
const element = await fixture(BlrTabBarRenderFunction(sampleParams, tabsAsChildren));
4038

4139
const tabBar = querySelectorDeep('.blr-tab-bar-group', element.getRootNode() as HTMLElement);
4240
const className = tabBar?.className;
@@ -45,7 +43,7 @@ describe('blr-tab-bar', () => {
4543
});
4644

4745
it('has a size md by default', async () => {
48-
const element = await fixture(BlrTabBarRenderFunction(sampleParams));
46+
const element = await fixture(BlrTabBarRenderFunction(sampleParams, tabsAsChildren));
4947

5048
const input = querySelectorDeep('.blr-tab-bar-group', element.getRootNode() as HTMLElement);
5149
const className = input?.className;
@@ -54,7 +52,7 @@ describe('blr-tab-bar', () => {
5452
});
5553

5654
it('has a size sm when "size" is set to "sm" ', async () => {
57-
const element = await fixture(BlrTabBarRenderFunction({ ...sampleParams, size: 'sm' }));
55+
const element = await fixture(BlrTabBarRenderFunction({ ...sampleParams, size: 'sm' }, tabsAsChildren));
5856

5957
const input = querySelectorDeep('.blr-tab-bar-group', element.getRootNode() as HTMLElement);
6058
const className = input?.className;

0 commit comments

Comments
 (0)