Skip to content

Commit 0c32f29

Browse files
mxschllmxschll
committed
feat: implement style api for tabs component
1 parent 567860d commit 0c32f29

File tree

9 files changed

+920
-19
lines changed

9 files changed

+920
-19
lines changed

‎build-tools/utils/custom-css-properties.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,14 @@ const customCssPropertiesList = [
110110
'stylePlaceholderFontSize',
111111
'stylePlaceholderFontStyle',
112112
'stylePlaceholderFontWeight',
113+
// Tabs style properties
114+
'styleTabsUnderlineColor',
115+
'styleTabsUnderlineWidth',
116+
'styleTabsUnderlineBorderRadius',
117+
'styleTabsDividerColor',
118+
'styleTabsDividerWidth',
119+
'styleTabsHeaderDividerColor',
120+
'styleTabsHeaderDividerWidth',
113121
// Alert focus ring properties
114122
'alertFocusRingBorderColor',
115123
'alertFocusRingBorderRadius',

‎pages/tabs/style-permutations.page.tsx‎

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React from 'react';
4+
5+
import Tabs, { TabsProps } from '~components/tabs';
6+
7+
import createPermutations from '../utils/permutations';
8+
import PermutationsView from '../utils/permutations-view';
9+
import ScreenshotArea from '../utils/screenshot-area';
10+
11+
const permutations = createPermutations<TabsProps>([
12+
{
13+
tabs: [
14+
[
15+
{ id: 'first', label: 'First tab', content: 'First tab content' },
16+
{ id: 'second', label: 'Second tab', content: 'Second tab content' },
17+
{ id: 'third', label: 'Third tab', content: 'Third tab content', disabled: true },
18+
],
19+
],
20+
activeTabId: ['first', 'second'],
21+
variant: ['default', 'container', 'stacked'],
22+
disableContentPaddings: [false, true],
23+
style: [
24+
// Minimal Modern - no background, clean underline
25+
{
26+
tabs: {
27+
backgroundColor: {
28+
default: 'transparent',
29+
hover: 'light-dark(rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.15))',
30+
active: 'transparent',
31+
disabled: 'transparent',
32+
},
33+
borderColor: {
34+
default: 'transparent',
35+
hover: 'transparent',
36+
active: 'transparent',
37+
disabled: 'transparent',
38+
},
39+
borderWidth: '0px',
40+
borderRadius: '6px',
41+
color: {
42+
default: 'light-dark(#64748b, #94a3b8)',
43+
hover: 'light-dark(#1e293b, #e2e8f0)',
44+
active: 'light-dark(#0f172a, #ffffff)',
45+
disabled: 'light-dark(#cbd5e1, #475569)',
46+
},
47+
fontSize: '14px',
48+
fontWeight: '500',
49+
paddingBlock: '12px',
50+
paddingInline: '20px',
51+
focusRing: {
52+
borderColor: 'light-dark(#3b82f6, #60a5fa)',
53+
borderRadius: '6px',
54+
borderWidth: '2px',
55+
},
56+
},
57+
underline: {
58+
color: 'light-dark(#3b82f6, #60a5fa)',
59+
width: '3px',
60+
borderRadius: '3px 3px 0 0',
61+
},
62+
divider: {
63+
color: 'transparent',
64+
width: '0px',
65+
},
66+
headerDivider: {
67+
color: 'light-dark(#e2e8f0, #334155)',
68+
width: '1px',
69+
},
70+
},
71+
// Pill Style - rounded with subtle background
72+
{
73+
tabs: {
74+
backgroundColor: {
75+
default: 'light-dark(#f1f5f9, #1e293b)',
76+
hover: 'light-dark(#dbeafe, #1e3a8a)',
77+
active: 'light-dark(#2563eb, #1d4ed8)',
78+
disabled: 'light-dark(#f8fafc, #1e293b)',
79+
},
80+
borderColor: {
81+
default: 'transparent',
82+
hover: 'transparent',
83+
active: 'transparent',
84+
disabled: 'transparent',
85+
},
86+
borderWidth: '0px',
87+
borderRadius: '20px',
88+
color: {
89+
default: 'light-dark(#475569, #94a3b8)',
90+
hover: 'light-dark(#1e3a8a, #dbeafe)',
91+
active: 'light-dark(#ffffff, #ffffff)',
92+
disabled: 'light-dark(#cbd5e1, #64748b)',
93+
},
94+
fontSize: '14px',
95+
fontWeight: '600',
96+
paddingBlock: '10px',
97+
paddingInline: '24px',
98+
focusRing: {
99+
borderColor: 'light-dark(#2563eb, #60a5fa)',
100+
borderRadius: '22px',
101+
borderWidth: '2px',
102+
},
103+
},
104+
underline: {
105+
color: 'transparent',
106+
width: '0px',
107+
borderRadius: '0px',
108+
},
109+
divider: {
110+
color: 'light-dark(#e2e8f0, #334155)',
111+
width: '1px',
112+
},
113+
headerDivider: {
114+
color: 'light-dark(#cbd5e1, #475569)',
115+
width: '1px',
116+
},
117+
},
118+
// Bold Accent - strong colors with background
119+
{
120+
tabs: {
121+
backgroundColor: {
122+
default: 'light-dark(#fef3c7, #422006)',
123+
hover: 'light-dark(#fde68a, #713f12)',
124+
active: 'light-dark(#fbbf24, #d97706)',
125+
disabled: 'light-dark(#fef9e7, #78350f)',
126+
},
127+
borderColor: {
128+
default: 'transparent',
129+
hover: 'transparent',
130+
active: 'transparent',
131+
disabled: 'transparent',
132+
},
133+
borderWidth: '0px',
134+
borderRadius: '8px 8px 0 0',
135+
color: {
136+
default: 'light-dark(#92400e, #fef3c7)',
137+
hover: 'light-dark(#78350f, #fef9e7)',
138+
active: 'light-dark(#451a03, #ffffff)',
139+
disabled: 'light-dark(#d1d5db, #78350f)',
140+
},
141+
fontSize: '14px',
142+
fontWeight: '600',
143+
paddingBlock: '12px',
144+
paddingInline: '20px',
145+
focusRing: {
146+
borderColor: 'light-dark(#f59e0b, #fbbf24)',
147+
borderRadius: '8px',
148+
borderWidth: '2px',
149+
},
150+
},
151+
underline: {
152+
color: 'light-dark(#f59e0b, #fbbf24)',
153+
width: '4px',
154+
borderRadius: '4px 4px 0 0',
155+
},
156+
divider: {
157+
color: 'light-dark(#fde68a, #78350f)',
158+
width: '1px',
159+
},
160+
headerDivider: {
161+
color: 'light-dark(#fde047, #92400e)',
162+
width: '2px',
163+
},
164+
},
165+
// Elegant Teal - sophisticated with borders
166+
{
167+
tabs: {
168+
backgroundColor: {
169+
default: 'transparent',
170+
hover: 'light-dark(#f0fdfa, #134e4a)',
171+
active: 'light-dark(#ffffff, #0f766e)',
172+
disabled: 'transparent',
173+
},
174+
borderColor: {
175+
default: 'light-dark(#d1fae5, #2dd4bf)',
176+
hover: 'light-dark(#14b8a6, #5eead4)',
177+
active: 'light-dark(#0d9488, #14b8a6)',
178+
disabled: 'light-dark(#e5e7eb, #374151)',
179+
},
180+
borderWidth: '2px',
181+
borderRadius: '10px 10px 0 0',
182+
color: {
183+
default: 'light-dark(#0f766e, #99f6e4)',
184+
hover: 'light-dark(#115e59, #5eead4)',
185+
active: 'light-dark(#134e4a, #ffffff)',
186+
disabled: 'light-dark(#9ca3af, #6b7280)',
187+
},
188+
fontSize: '14px',
189+
fontWeight: '600',
190+
paddingBlock: '12px',
191+
paddingInline: '20px',
192+
focusRing: {
193+
borderColor: 'light-dark(#14b8a6, #2dd4bf)',
194+
borderRadius: '10px',
195+
borderWidth: '2px',
196+
},
197+
},
198+
underline: {
199+
color: 'transparent',
200+
width: '0px',
201+
borderRadius: '0px',
202+
},
203+
divider: {
204+
color: 'light-dark(#ccfbf1, #134e4a)',
205+
width: '1px',
206+
},
207+
headerDivider: {
208+
color: 'light-dark(#99f6e4, #0f766e)',
209+
width: '2px',
210+
},
211+
},
212+
// Cool Minimalist - subtle grays with accent
213+
{
214+
tabs: {
215+
backgroundColor: {
216+
default: 'transparent',
217+
hover: 'light-dark(#f8fafc, #1e293b)',
218+
active: 'light-dark(#f1f5f9, #334155)',
219+
disabled: 'transparent',
220+
},
221+
borderColor: {
222+
default: 'transparent',
223+
hover: 'transparent',
224+
active: 'light-dark(#e2e8f0, #64748b)',
225+
disabled: 'transparent',
226+
},
227+
borderWidth: '0px 0px 2px 0px',
228+
borderRadius: '0px',
229+
color: {
230+
default: 'light-dark(#64748b, #94a3b8)',
231+
hover: 'light-dark(#334155, #cbd5e1)',
232+
active: 'light-dark(#0f172a, #f1f5f9)',
233+
disabled: 'light-dark(#cbd5e1, #475569)',
234+
},
235+
fontSize: '14px',
236+
fontWeight: '500',
237+
paddingBlock: '12px',
238+
paddingInline: '20px',
239+
focusRing: {
240+
borderColor: 'light-dark(#94a3b8, #cbd5e1)',
241+
borderRadius: '4px',
242+
borderWidth: '2px',
243+
},
244+
},
245+
underline: {
246+
color: 'light-dark(#0f172a, #f1f5f9)',
247+
width: '3px',
248+
borderRadius: '3px 3px 0 0',
249+
},
250+
divider: {
251+
color: 'transparent',
252+
width: '0px',
253+
},
254+
headerDivider: {
255+
color: 'light-dark(#e2e8f0, #475569)',
256+
width: '1px',
257+
},
258+
},
259+
// Vibrant Rose - energetic and modern
260+
{
261+
tabs: {
262+
backgroundColor: {
263+
default: 'light-dark(#fff1f2, #4c0519)',
264+
hover: 'light-dark(#ffe4e6, #881337)',
265+
active: 'light-dark(#fb7185, #e11d48)',
266+
disabled: 'light-dark(#fff5f7, #881337)',
267+
},
268+
borderColor: {
269+
default: 'transparent',
270+
hover: 'transparent',
271+
active: 'transparent',
272+
disabled: 'transparent',
273+
},
274+
borderWidth: '0px',
275+
borderRadius: '12px 12px 0 0',
276+
color: {
277+
default: 'light-dark(#9f1239, #fecdd3)',
278+
hover: 'light-dark(#881337, #ffe4e6)',
279+
active: 'light-dark(#ffffff, #ffffff)',
280+
disabled: 'light-dark(#d1d5db, #881337)',
281+
},
282+
fontSize: '14px',
283+
fontWeight: '600',
284+
paddingBlock: '12px',
285+
paddingInline: '20px',
286+
focusRing: {
287+
borderColor: 'light-dark(#f43f5e, #fb7185)',
288+
borderRadius: '12px',
289+
borderWidth: '2px',
290+
},
291+
},
292+
underline: {
293+
color: 'light-dark(#f43f5e, #fda4af)',
294+
width: '3px',
295+
borderRadius: '3px 3px 0 0',
296+
},
297+
divider: {
298+
color: 'light-dark(#fecdd3, #881337)',
299+
width: '1px',
300+
},
301+
headerDivider: {
302+
color: 'light-dark(#fda4af, #9f1239)',
303+
width: '2px',
304+
},
305+
},
306+
],
307+
},
308+
]);
309+
310+
export default function TabsStylePermutations() {
311+
return (
312+
<>
313+
<h1>Tabs Style Permutations</h1>
314+
<ScreenshotArea disableAnimations={true}>
315+
<PermutationsView
316+
permutations={permutations}
317+
render={permutation => (
318+
<Tabs
319+
{...permutation}
320+
i18nStrings={{ scrollLeftAriaLabel: 'Scroll left', scrollRightAriaLabel: 'Scroll right' }}
321+
/>
322+
)}
323+
/>
324+
</ScreenshotArea>
325+
</>
326+
);
327+
}

0 commit comments

Comments
 (0)