Skip to content

Commit a34c7cd

Browse files
author
Douglas Fabris
authored
fix: Tabs design update (#427)
1 parent 0314d96 commit a34c7cd

11 files changed

+126
-50
lines changed

‎packages/fuselage/.loki/reference/chrome_iphone7_Misc_Tabs_Default.png

-2.58 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Misc_Tabs_Disabled.png

8.91 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Misc_Tabs_Selected.png

9.47 KB
Loading

‎packages/fuselage/.loki/reference/chrome_iphone7_Misc_Tabs_Selected_and_Disabled.png

8.76 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Misc_Tabs_Default.png

-1.04 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Misc_Tabs_Disabled.png

6.84 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Misc_Tabs_Selected.png

7.09 KB
Loading

‎packages/fuselage/.loki/reference/chrome_laptop_Misc_Tabs_Selected_and_Disabled.png

6.72 KB
Loading

‎packages/fuselage/src/components/Tabs/Tabs.stories.mdx

+53-14
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,61 @@ import { Tabs } from '../..';
66

77
# Tabs
88

9+
Tabs is a component to navigate around the UI using buttons arranged together with the selected tab highlighted.
10+
911
<Canvas>
1012
<Story name='Default'>
11-
<>
12-
<style>
13-
{`body{
14-
padding: 4px 0;
15-
}`}
16-
</style>
17-
<Tabs>
18-
<Tabs.Item selected>Tab text 1</Tabs.Item>
19-
<Tabs.Item>Tab text 2</Tabs.Item>
20-
<Tabs.Item>Tab text 3</Tabs.Item>
21-
<Tabs.Item>Tab text 4</Tabs.Item>
22-
<Tabs.Item>Tab text 5</Tabs.Item>
23-
</Tabs>
24-
</>
13+
<Tabs>
14+
<Tabs.Item>Tab text 1</Tabs.Item>
15+
<Tabs.Item>Tab text 2</Tabs.Item>
16+
<Tabs.Item>Tab text 3</Tabs.Item>
17+
<Tabs.Item>Tab text 4</Tabs.Item>
18+
<Tabs.Item>Tab text 5</Tabs.Item>
19+
</Tabs>
20+
</Story>
21+
</Canvas>
22+
23+
### Selected
24+
25+
<Canvas>
26+
<Story name='Selected'>
27+
<Tabs>
28+
<Tabs.Item selected>Tab text 1</Tabs.Item>
29+
<Tabs.Item>Tab text 2</Tabs.Item>
30+
<Tabs.Item>Tab text 3</Tabs.Item>
31+
<Tabs.Item>Tab text 4</Tabs.Item>
32+
<Tabs.Item>Tab text 5</Tabs.Item>
33+
</Tabs>
34+
</Story>
35+
</Canvas>
36+
37+
### Disabled
38+
39+
<Canvas>
40+
<Story name='Disabled'>
41+
<Tabs>
42+
<Tabs.Item disabled>Tab text 1</Tabs.Item>
43+
<Tabs.Item>Tab text 2</Tabs.Item>
44+
<Tabs.Item>Tab text 3</Tabs.Item>
45+
<Tabs.Item>Tab text 4</Tabs.Item>
46+
<Tabs.Item>Tab text 5</Tabs.Item>
47+
</Tabs>
48+
</Story>
49+
</Canvas>
50+
51+
### Selected and Disabled
52+
53+
<Canvas>
54+
<Story name='Selected and Disabled'>
55+
<Tabs>
56+
<Tabs.Item selected disabled>
57+
Tab text 1
58+
</Tabs.Item>
59+
<Tabs.Item>Tab text 2</Tabs.Item>
60+
<Tabs.Item>Tab text 3</Tabs.Item>
61+
<Tabs.Item>Tab text 4</Tabs.Item>
62+
<Tabs.Item>Tab text 5</Tabs.Item>
63+
</Tabs>
2564
</Story>
2665
</Canvas>
2766

‎packages/fuselage/src/components/Tabs/index.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,16 @@ export function Tabs({ children, ...props }) {
2020
}
2121

2222
export const TabsItem = forwardRef(function TabsItem(
23-
{ selected, ...props },
23+
{ selected, disabled, ...props },
2424
ref
2525
) {
2626
return (
2727
<Box
2828
is='button'
2929
rcx-tabs__item
3030
rcx-tabs__item--selected={selected}
31+
rcx-tabs__item--disabled={disabled}
32+
rcx-tabs__item--selected--disabled={selected && disabled}
3133
aria-selected={selected ? 'true' : 'false'}
3234
ref={ref}
3335
role='tab'
@@ -38,6 +40,7 @@ export const TabsItem = forwardRef(function TabsItem(
3840

3941
TabsItem.propTypes = {
4042
selected: PropTypes.bool,
43+
disabled: PropTypes.bool,
4144
};
4245

4346
Tabs.Item = TabsItem;

‎packages/fuselage/src/components/Tabs/styles.scss

+69-35
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,46 @@
55
$tabs-background-color: theme('tabs-background-color', transparent);
66
$tabs-border-color: theme('tabs-border-color', transparent);
77
$tabs-color: theme('tabs-color', colors.neutral(600));
8-
$tabs-delimiter-color: theme('tabs-color', colors.neutral(400));
8+
$tabs-hover-color: theme('tabs-hover-border-color', colors.neutral(700));
99
$tabs-selected-color: theme('tabs-selected-color', colors.primary(500));
1010
$tabs-selected-border-color: theme(
1111
'tabs-selected-border-color',
1212
colors.primary(500)
1313
);
14-
$tabs-hover-color: theme('tabs-hover-border-color', colors.neutral(700));
14+
$tabs-hover-selected-color: theme(
15+
'tabs-hover-selected-color',
16+
colors.primary(600)
17+
);
18+
$tabs-hover-selected-border-color: theme(
19+
'tabs-hover-selected-border-color',
20+
colors.primary(600)
21+
);
1522
$tabs-active-color: theme('tabs-active-color', colors.neutral(800));
23+
$tabs-active-selected-color: theme(
24+
'tabs-active-selected-color',
25+
colors.primary(700)
26+
);
27+
$tabs-active-selected-border-color: theme(
28+
'tabs-active-selected-border-color',
29+
colors.primary(700)
30+
);
1631
$tabs-focus-border-color: theme('tabs-focus-border-color', colors.primary(500));
1732
$tabs-focus-shadow-color: theme('tabs-focus-shadow-color', colors.primary(100));
1833
$tabs-disabled-color: theme('tabs-disabled-color', colors.neutral(500));
34+
$tabs-disabled-selected-color: theme(
35+
'tabs-disabled-selected-color',
36+
colors.primary(200)
37+
);
38+
$tabs-disabled-selected-border-color: theme(
39+
'tabs-disabled-selected-border-color',
40+
colors.primary(200)
41+
);
1942

2043
// TODO: Indication that there are more tab__items left to scroll (some sort of shadow maybe)
2144
.rcx-tabs {
2245
position: relative;
2346

2447
display: flex;
25-
26-
&::after {
27-
position: absolute;
28-
z-index: -1;
29-
inset-block-end: lengths.inset(none);
30-
inset-inline: lengths.inset(none);
31-
32-
height: lengths.border-width(2);
33-
34-
content: '';
35-
36-
background-color: $tabs-delimiter-color;
37-
}
3848
}
3949

4050
.rcx-tabs__scroll-box {
@@ -65,27 +75,21 @@ $tabs-disabled-color: theme('tabs-disabled-color', colors.neutral(500));
6575

6676
min-height: lengths.size(40);
6777

68-
padding: (lengths.padding(4) + lengths.border-width(2)) lengths.padding(16);
78+
margin: lengths.margin(none) lengths.margin(12);
79+
padding: (lengths.padding(4) + lengths.border-width(2)) lengths.padding(none);
6980

7081
color: $tabs-color;
7182
border-width: lengths.border-width(2);
7283

7384
border-style: solid;
7485
border-color: transparent;
7586
background-color: transparent;
87+
border-block-end-width: lengths.border-width(4);
88+
border-inline-width: lengths.border-width(none);
7689

7790
@include clickable;
7891
@include typography.use-font-scale(s2);
7992

80-
&--selected {
81-
padding: lengths.padding(4) (lengths.padding(16) + lengths.border-width(2));
82-
83-
color: $tabs-selected-color;
84-
border-block-end-color: $tabs-selected-border-color;
85-
border-block-end-width: lengths.border-width(4);
86-
border-inline-width: lengths.border-width(none);
87-
}
88-
8993
&.hover,
9094
&:hover {
9195
color: $tabs-hover-color;
@@ -96,24 +100,54 @@ $tabs-disabled-color: theme('tabs-disabled-color', colors.neutral(500));
96100
color: $tabs-active-color;
97101
}
98102

99-
&--disabled {
100-
color: $tabs-disabled-color;
101-
}
102-
103103
@include on-focus-visible {
104-
padding-inline: lengths.padding(16);
105-
106104
border-color: $tabs-focus-border-color;
107105
border-radius: lengths.border-radius(2);
108106
border-block-start-width: lengths.border-width(2);
109107
border-inline-width: lengths.border-width(2);
110108

111109
@include use-focus-shadow($tabs-focus-shadow-color);
112110
}
113-
}
114111

115-
@include on-breakpoint('md') {
116-
.rcx-tabs__wrapper {
117-
margin-inline: lengths.margin(24);
112+
&--disabled {
113+
cursor: not-allowed;
114+
115+
color: $tabs-disabled-color;
116+
117+
&:hover {
118+
color: $tabs-disabled-color;
119+
}
120+
}
121+
122+
&--selected {
123+
padding: lengths.padding(4) lengths.padding(none);
124+
125+
color: $tabs-selected-color;
126+
border-block-end-color: $tabs-selected-border-color;
127+
border-block-end-width: lengths.border-width(4);
128+
border-inline-width: lengths.border-width(none);
129+
130+
&:hover {
131+
color: $tabs-hover-selected-color;
132+
border-block-end-color: $tabs-hover-selected-border-color;
133+
}
134+
135+
&.active,
136+
&:active {
137+
color: $tabs-active-selected-color;
138+
border-block-end-color: $tabs-active-selected-border-color;
139+
}
140+
141+
&--disabled {
142+
cursor: not-allowed;
143+
144+
color: $tabs-disabled-selected-color;
145+
border-block-end-color: $tabs-disabled-selected-border-color;
146+
147+
&:hover {
148+
color: $tabs-disabled-selected-color;
149+
border-block-end-color: $tabs-disabled-selected-border-color;
150+
}
151+
}
118152
}
119153
}

0 commit comments

Comments
 (0)