Skip to content

Commit 662b517

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

File tree

9 files changed

+819
-19
lines changed

9 files changed

+819
-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: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
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+
style: [
22+
{
23+
tabs: {
24+
backgroundColor: {
25+
default: 'light-dark(#f0f9ff, #1e293b)',
26+
hover: 'light-dark(#e0f2fe, #334155)',
27+
active: 'light-dark(#bae6fd, #0f172a)',
28+
disabled: 'light-dark(#f8fafc, #334155)',
29+
},
30+
borderColor: {
31+
default: 'light-dark(#0ea5e9, #0284c7)',
32+
hover: 'light-dark(#0284c7, #0369a1)',
33+
active: 'light-dark(#0369a1, #0ea5e9)',
34+
disabled: 'light-dark(#e0f2fe, #334155)',
35+
},
36+
borderWidth: '0px',
37+
borderRadius: '8px 8px 0 0',
38+
color: {
39+
default: 'light-dark(#0c4a6e, #e0f2fe)',
40+
hover: 'light-dark(#075985, #f0f9ff)',
41+
active: 'light-dark(#0c4a6e, #ffffff)',
42+
disabled: 'light-dark(#94a3b8, #64748b)',
43+
},
44+
fontSize: '15px',
45+
fontWeight: '600',
46+
paddingBlock: '12px',
47+
paddingInline: '20px',
48+
focusRing: {
49+
borderColor: 'light-dark(#0ea5e9, #0284c7)',
50+
borderRadius: '8px',
51+
borderWidth: '2px',
52+
},
53+
},
54+
underline: {
55+
color: 'light-dark(#0ea5e9, #06b6d4)',
56+
width: '3px',
57+
borderRadius: '3px 3px 0 0',
58+
},
59+
divider: {
60+
color: 'light-dark(#e0f2fe, #334155)',
61+
width: '1px',
62+
},
63+
headerDivider: {
64+
color: 'light-dark(#bae6fd, #475569)',
65+
width: '2px',
66+
},
67+
},
68+
{
69+
tabs: {
70+
backgroundColor: {
71+
default: 'transparent',
72+
hover: 'light-dark(#f8fafc, #1e293b)',
73+
active: 'light-dark(#f1f5f9, #0f172a)',
74+
disabled: 'transparent',
75+
},
76+
borderColor: {
77+
default: 'transparent',
78+
hover: 'transparent',
79+
active: 'transparent',
80+
disabled: 'transparent',
81+
},
82+
borderWidth: '0px',
83+
borderRadius: '0px',
84+
color: {
85+
default: 'light-dark(#64748b, #cbd5e1)',
86+
hover: 'light-dark(#1e293b, #f1f5f9)',
87+
active: 'light-dark(#0f172a, #ffffff)',
88+
disabled: 'light-dark(#cbd5e1, #475569)',
89+
},
90+
fontSize: '14px',
91+
fontWeight: '500',
92+
paddingBlock: '10px',
93+
paddingInline: '16px',
94+
},
95+
underline: {
96+
color: 'light-dark(#0f172a, #e2e8f0)',
97+
width: '2px',
98+
borderRadius: '2px 2px 0 0',
99+
},
100+
divider: {
101+
color: 'transparent',
102+
width: '0px',
103+
},
104+
headerDivider: {
105+
color: 'light-dark(#e2e8f0, #475569)',
106+
width: '1px',
107+
},
108+
},
109+
{
110+
tabs: {
111+
backgroundColor: {
112+
default: 'light-dark(#faf5ff, #1e1b4b)',
113+
hover: 'light-dark(#f3e8ff, #312e81)',
114+
active: 'light-dark(#e9d5ff, #1e1b4b)',
115+
disabled: 'light-dark(#faf5ff, #312e81)',
116+
},
117+
borderColor: {
118+
default: 'light-dark(#a855f7, #9333ea)',
119+
hover: 'light-dark(#9333ea, #a855f7)',
120+
active: 'light-dark(#7e22ce, #c084fc)',
121+
disabled: 'light-dark(#f3e8ff, #4c1d95)',
122+
},
123+
borderWidth: '2px',
124+
borderRadius: '12px 12px 0 0',
125+
color: {
126+
default: 'light-dark(#6b21a8, #e9d5ff)',
127+
hover: 'light-dark(#581c87, #f3e8ff)',
128+
active: 'light-dark(#4c1d95, #faf5ff)',
129+
disabled: 'light-dark(#c4b5fd, #6b21a8)',
130+
},
131+
fontSize: '16px',
132+
fontWeight: '600',
133+
paddingBlock: '14px',
134+
paddingInline: '24px',
135+
focusRing: {
136+
borderColor: 'light-dark(#a855f7, #c084fc)',
137+
borderRadius: '12px',
138+
borderWidth: '3px',
139+
},
140+
},
141+
underline: {
142+
color: 'light-dark(#a855f7, #c084fc)',
143+
width: '4px',
144+
borderRadius: '4px 4px 0 0',
145+
},
146+
divider: {
147+
color: 'light-dark(#f3e8ff, #4c1d95)',
148+
width: '2px',
149+
},
150+
headerDivider: {
151+
color: 'light-dark(#e9d5ff, #6b21a8)',
152+
width: '3px',
153+
},
154+
},
155+
{
156+
tabs: {
157+
backgroundColor: {
158+
default: 'light-dark(#f0fdf4, #14532d)',
159+
hover: 'light-dark(#dcfce7, #166534)',
160+
active: 'light-dark(#bbf7d0, #14532d)',
161+
disabled: 'light-dark(#f7fee7, #1e3a8a)',
162+
},
163+
borderColor: {
164+
default: 'light-dark(#10b981, #059669)',
165+
hover: 'light-dark(#059669, #10b981)',
166+
active: 'light-dark(#047857, #34d399)',
167+
disabled: 'light-dark(#d1fae5, #1e40af)',
168+
},
169+
borderWidth: '0px',
170+
borderRadius: '10px 10px 0 0',
171+
color: {
172+
default: 'light-dark(#065f46, #d1fae5)',
173+
hover: 'light-dark(#047857, #ecfdf5)',
174+
active: 'light-dark(#064e3b, #f0fdf4)',
175+
disabled: 'light-dark(#a7f3d0, #475569)',
176+
},
177+
fontSize: '15px',
178+
fontWeight: '600',
179+
paddingBlock: '12px',
180+
paddingInline: '18px',
181+
focusRing: {
182+
borderColor: 'light-dark(#10b981, #34d399)',
183+
borderRadius: '10px',
184+
borderWidth: '2px',
185+
},
186+
},
187+
underline: {
188+
color: 'light-dark(#10b981, #34d399)',
189+
width: '3px',
190+
borderRadius: '3px 3px 0 0',
191+
},
192+
divider: {
193+
color: 'light-dark(#d1fae5, #1e3a8a)',
194+
width: '1px',
195+
},
196+
headerDivider: {
197+
color: 'light-dark(#a7f3d0, #334155)',
198+
width: '2px',
199+
},
200+
},
201+
],
202+
},
203+
]);
204+
205+
export default function TabsStylePermutations() {
206+
return (
207+
<>
208+
<h1>Tabs Style Permutations</h1>
209+
<ScreenshotArea disableAnimations={true}>
210+
<PermutationsView permutations={permutations} render={permutation => <Tabs {...permutation} />} />
211+
</ScreenshotArea>
212+
</>
213+
);
214+
}

0 commit comments

Comments
 (0)