Skip to content

Commit 913d42e

Browse files
seanwuappsseanwuapps
authored
feat(go-tabs, go-tablist): separate tablist logic into go-tablist
separate tablist logic into go-tablist - go-tabs, go-tablist: add `fill` prop - go-tabs, go-tablist: change `manual` to `auto` - go-tablist with `icon` and `icon-active` slots
1 parent 8f4d80c commit 913d42e

22 files changed

+1664
-1996
lines changed

‎packages/core/package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -47,24 +47,24 @@
4747
"@commitlint/cli": "^13.2.1",
4848
"@commitlint/config-conventional": "^13.2.0",
4949
"@release-it/conventional-changelog": "^5.1.1",
50-
"@stencil/core": "^4.5.0",
51-
"@stencil/postcss": "^2.1.0",
50+
"@stencil-community/postcss": "^2.2.0",
51+
"@stencil/core": "^4.12.2",
5252
"@stencil/react-output-target": "^0.5.3",
5353
"@stencil/sass": "^3.0.4",
5454
"@stencil/vue-output-target": "^0.8.6",
55-
"@types/jest": "^26.0.24",
55+
"@types/jest": "^29.5.12",
5656
"@types/markdown-it": "^12.2.3",
57-
"@types/node": "^18.11.18",
57+
"@types/node": "^20.11.19",
5858
"autoprefixer": "^10.4.13",
5959
"axe-core": "^4.6.2",
6060
"chalk": "^4.1.2",
6161
"chokidar": "^3.5.3",
6262
"concurrently": "^6.5.1",
6363
"cssnano": "^5.1.14",
6464
"esm": "^3.2.25",
65-
"jest": "^26.6.3",
66-
"jest-circus": "^29.5.0",
67-
"jest-cli": "^26.6.3",
65+
"jest": "^29.7.0",
66+
"jest-circus": "^29.7.0",
67+
"jest-cli": "^29.7.0",
6868
"lodash": "^4.17.21",
6969
"lodash.camelcase": "^4.3.0",
7070
"minimist": "^1.2.7",

‎packages/core/src/components.d.ts

+287-9
Large diffs are not rendered by default.

‎packages/core/src/components/go-tabs/go-tab.scss

+4
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,8 @@ go-tab {
44
&.active {
55
display: block;
66
}
7+
8+
&:focus-visible {
9+
outline-offset: 0.5rem;
10+
}
711
}

‎packages/core/src/components/go-tabs/go-tab.tsx

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
1-
import { Component, h, Prop, Element, Host } from '@stencil/core';
1+
import { Component, h, Prop, Element, Host, Method } from '@stencil/core';
2+
import { TabIconPosition } from './tabs.type';
3+
4+
/**
5+
* @slot icon - Slot for the tab icon (only 1 element allowed)
6+
* @slot icon-active - Slot for the tab icon (only 1 element allowed)
7+
*/
28
@Component({
39
tag: 'go-tab',
410
styleUrl: 'go-tab.scss',
511
})
612
export class GoTab {
713
@Element() el: HTMLElement;
814

15+
/**
16+
* Label displayed on the tab
17+
*/
918
@Prop() label: string;
1019

1120
/**
@@ -26,7 +35,12 @@ export class GoTab {
2635
*/
2736
@Prop({ mutable: true }) panelId?: string;
2837

29-
componentWillLoad() {}
38+
@Prop() iconPosition?: TabIconPosition = 'before';
39+
40+
@Method()
41+
async setActive(active: boolean) {
42+
this.active = active;
43+
}
3044

3145
render() {
3246
const { panelId, tabId, active } = this;

‎packages/core/src/components/go-tabs/go-tablist.scss

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
go-tablist {
2+
/**
3+
@prop --tab-padding:
4+
Padding for tabs
5+
- default: 0.75rem 1.25rem
6+
*/
7+
--tab-padding: 0.5rem 1rem;
8+
/**
9+
@prop --tab-bg-color:
10+
Background color for tabs
11+
- default: transparent
12+
*/
13+
--tab-bg-color: transparent;
14+
/**
15+
@prop --tab-hover-bg-color:
16+
Background color for tabs on hover
17+
- default: var(--go-color-neutral-200)
18+
*/
19+
--tab-hover-bg-color: var(--go-color-neutral-200);
20+
21+
/**
22+
@prop --tab-text-color:
23+
Text color for tabs
24+
- default: var(--go-color-neutral-800)
25+
*/
26+
--tab-text-color: var(--go-color-neutral-800);
27+
28+
/**
29+
@prop --tab-hover-text-color:
30+
Text color for tabs on hover
31+
- default: var(--go-color-neutral-900)
32+
*/
33+
--tab-hover-text-color: var(--go-color-neutral-900);
34+
35+
/**
36+
@prop --tab-focus-color:
37+
Focus outline color for tabs
38+
- default: var(--go-color-primary-600)
39+
*/
40+
--tab-focus-color: var(--go-color-primary-600);
41+
/**
42+
@prop --tab-active-color:
43+
Text color for active tab
44+
- default: var(--go-color-primary-800)
45+
*/
46+
--tab-active-color: var(--go-color-primary-600);
47+
/**
48+
@prop --tab-active-bg-color:
49+
Background color for active tab
50+
- default: transparent
51+
*/
52+
--tab-active-bg-color: transparent;
53+
/**
54+
@prop --tab-border-width:
55+
Border width for tabs
56+
- default: 0.2em
57+
*/
58+
--tab-border-width: 0.2em;
59+
/**
60+
@prop --tab-active-indicator-color:
61+
Color of the active tab indicator
62+
- default: var(--tab-active-color)
63+
*/
64+
--tab-active-indicator-color: var(--tab-active-color);
65+
/**
66+
@prop --tabs-active-indicator-width:
67+
Width of the active tab indicator
68+
- default: 0
69+
*/
70+
--tabs-active-indicator-width: 0;
71+
72+
/**
73+
@prop --tabs-active-indicator-height:
74+
Height of the active tab indicator
75+
- default: 0.2em
76+
*/
77+
--tabs-active-indicator-height: 0.2em;
78+
/**
79+
@prop --tabs-active-indicator-color:
80+
Color of the active tab indicator
81+
- default: var(--tab-active-color)
82+
*/
83+
--tabs-active-indicator-color: var(--tab-active-color);
84+
85+
/**
86+
@prop --tab-icon-gap:
87+
Gap between tab icons
88+
- default: 0.5rem
89+
*/
90+
--tab-icon-gap: 0.5rem;
91+
92+
[role='tablist'] {
93+
overflow: auto;
94+
display: flex;
95+
flex-wrap: nowrap;
96+
width: 100%;
97+
position: relative;
98+
}
99+
[role='tab'] {
100+
display: flex;
101+
flex-direction: column;
102+
align-items: center;
103+
justify-content: center;
104+
gap: var(--tab-icon-gap);
105+
@include tablet() {
106+
flex-direction: row;
107+
}
108+
109+
padding: var(--tab-padding);
110+
border: var(--tab-border-width) solid transparent;
111+
white-space: nowrap;
112+
background: var(--tab-bg-color);
113+
color: var(--tab-text-color);
114+
font-weight: 500;
115+
@include transition(background-color, color);
116+
.go-tab-icon-slot {
117+
svg,
118+
img {
119+
display: block;
120+
}
121+
}
122+
.go-tab-icon-active {
123+
display: none;
124+
}
125+
&:hover,
126+
&:focus {
127+
color: var(--tab-hover-text-color);
128+
background: var(--tab-hover-bg-color);
129+
}
130+
&:not(.active) {
131+
cursor: pointer;
132+
}
133+
&[aria-selected='true'] {
134+
background: var(--tab-active-bg-color);
135+
color: var(--tab-active-color);
136+
text-decoration: none;
137+
&.has-active-icon {
138+
.go-tab-icon {
139+
display: none;
140+
}
141+
}
142+
.go-tab-icon-active {
143+
display: block;
144+
}
145+
}
146+
}
147+
148+
.tabs-active-indicator-track {
149+
position: absolute;
150+
width: 100%;
151+
bottom: 0;
152+
left: 0;
153+
right: 0;
154+
.tabs-active-indicator {
155+
@include transition(transform, width, height);
156+
157+
transform: translateX(var(--tabs-active-indicator-left));
158+
width: var(--tabs-active-indicator-width);
159+
height: var(--tabs-active-indicator-height);
160+
border-radius: var(--radius-round);
161+
background: var(--tabs-active-indicator-color);
162+
}
163+
}
164+
&.vertical {
165+
flex-direction: row;
166+
[role='tablist'] {
167+
flex-direction: column;
168+
.tabs-active-indicator-track {
169+
width: auto;
170+
top: 0;
171+
left: auto;
172+
.tabs-active-indicator {
173+
--tabs-active-indicator-width: 4px;
174+
175+
transform: translateY(var(--tabs-active-indicator-top));
176+
}
177+
}
178+
}
179+
[role='tab'] {
180+
text-align: start;
181+
white-space: normal;
182+
&:focus-visible {
183+
border-top-color: transparent;
184+
border-left-color: var(--tab-focus-color);
185+
}
186+
}
187+
}
188+
189+
&.fill {
190+
[role='tablist'] {
191+
width: 100%;
192+
}
193+
[role='tab'] {
194+
flex: 1;
195+
}
196+
}
197+
}
198+
199+
@include theme-dark() {
200+
go-tablist {
201+
--tab-text-color: var(--go-color-neutral-700);
202+
--tab-hover-text-color: var(--go-color-neutral-900);
203+
--tab-active-color: var(--go-color-primary-800);
204+
}
205+
}

0 commit comments

Comments
 (0)