Skip to content

Commit b0c1a1b

Browse files
rise-erpeldingrise-erpelding
committed
refactor(tabs): clean up
refactor(tabs): miscellaneous adjustments - add a passthrough for picker so compact and regular overflow look different instead of exactly the same - change the corner radius for the focus indicator because there wasn't one on the spec but it looks like it's 6px, not 4px... the comment about calcs in the figma spec doesn't make sense to me so @todo I'll have to ask about that later - changed ::before inset-inline-start for the default variant, so updates it in --vertical variants as well - fixes undefined icon that was showing up as a circle in stories.js - add tests to grid for hover colors, with necessary support in template - add tests to grid for focus indicator, with necessary support in template - add gap rather than confusing margin-inline-start rule - add notes within the comments to clarify things that may not be as obvious within the context of css only - moves selection indicator margin-block-start to scope only to horizontal variant
1 parent a3f230e commit b0c1a1b

File tree

5 files changed

+64
-21
lines changed

5 files changed

+64
-21
lines changed

‎components/tabs/dist/metadata.json

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
".spectrum-Tabs .is-selected:before",
66
".spectrum-Tabs .is-selected:focus",
77
".spectrum-Tabs .is-selected:focus-visible",
8+
".spectrum-Tabs .spectrum-Picker-button",
89
".spectrum-Tabs .spectrum-Tabs-item .spectrum-Icon",
910
".spectrum-Tabs .spectrum-Tabs-item .spectrum-Tabs-itemLabel",
1011
".spectrum-Tabs--horizontal",
1112
".spectrum-Tabs--horizontal .spectrum-Tabs-item",
12-
".spectrum-Tabs--horizontal .spectrum-Tabs-item + :not(.spectrum-Tabs-selectionIndicator)",
1313
".spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator",
1414
".spectrum-Tabs--horizontal.spectrum-Tabs--compact",
1515
".spectrum-Tabs--vertical",
@@ -68,7 +68,6 @@
6868
"--mod-tabs-item-height-compact",
6969
"--mod-tabs-item-horizontal-spacing",
7070
"--mod-tabs-item-horizontal-spacing-compact",
71-
"--mod-tabs-item-vertical-spacing",
7271
"--mod-tabs-label-to-selection-indicator",
7372
"--mod-tabs-label-to-selection-indicator-compact",
7473
"--mod-tabs-line-height",
@@ -109,7 +108,6 @@
109108
"--spectrum-tabs-item-border-radius",
110109
"--spectrum-tabs-item-height",
111110
"--spectrum-tabs-item-horizontal-spacing",
112-
"--spectrum-tabs-item-vertical-spacing",
113111
"--spectrum-tabs-label-to-selection-indicator",
114112
"--spectrum-tabs-line-height",
115113
"--spectrum-tabs-selection-indicator-border-radius",
@@ -125,7 +123,7 @@
125123
"--spectrum-animation-duration-100",
126124
"--spectrum-animation-ease-in-out",
127125
"--spectrum-corner-radius-0",
128-
"--spectrum-corner-radius-100",
126+
"--spectrum-corner-radius-300",
129127
"--spectrum-default-font-style",
130128
"--spectrum-disabled-border-color",
131129
"--spectrum-disabled-content-color",
@@ -153,15 +151,14 @@
153151
"--spectrum-tab-item-start-to-edge-medium",
154152
"--spectrum-tab-item-to-tab-item-compact-horizontal-medium",
155153
"--spectrum-tab-item-to-tab-item-horizontal-medium",
156-
"--spectrum-tab-item-to-tab-item-vertical-medium",
157154
"--spectrum-tab-item-top-to-text-compact-medium",
158155
"--spectrum-tab-item-top-to-text-medium",
159156
"--spectrum-tab-item-top-to-workflow-icon-compact-medium",
160157
"--spectrum-tab-item-top-to-workflow-icon-medium",
161158
"--spectrum-text-to-visual-100",
162159
"--spectrum-workflow-icon-size-75"
163160
],
164-
"passthroughs": [],
161+
"passthroughs": ["--mod-picker-block-size"],
165162
"high-contrast": [
166163
"--highcontrast-tabs-color",
167164
"--highcontrast-tabs-color-disabled",

‎components/tabs/index.css

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
--spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text, var(--spectrum-tab-item-bottom-to-text-medium));
1919
--spectrum-tabs-label-to-selection-indicator: var(--mod-tabs-label-to-selection-indicator, var(--spectrum-spacing-200));
2020
--spectrum-tabs-item-horizontal-spacing: var(--mod-tabs-item-horizontal-spacing, var(--spectrum-tab-item-to-tab-item-horizontal-medium));
21-
--spectrum-tabs-item-vertical-spacing: var(--mod-tabs-item-vertical-spacing, var(--spectrum-tab-item-to-tab-item-vertical-medium));
2221

2322
--spectrum-tabs-icon-size: var(--mod-tabs-icon-size, var(--spectrum-workflow-icon-size-75));
2423
--spectrum-tabs-icon-to-text: var(--mod-tabs-icon-to-text, var(--spectrum-text-to-visual-100));
@@ -43,7 +42,7 @@
4342
--spectrum-tabs-line-height: var(--mod-tabs-line-height, var(--spectrum-line-height-100));
4443

4544
--spectrum-tabs-focus-indicator-width: var(--mod-tabs-focus-indicator-width, var(--spectrum-focus-indicator-thickness));
46-
--spectrum-tabs-focus-indicator-border-radius: var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-corner-radius-100));
45+
--spectrum-tabs-focus-indicator-border-radius: var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-corner-radius-300));
4746
--spectrum-tabs-focus-indicator-gap: var(--mod-tabs-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
4847
--spectrum-tabs-focus-indicator-color: var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-focus-indicator-color)));
4948

@@ -79,9 +78,14 @@
7978
--spectrum-tab-item-to-tab-item-compact-horizontal-medium: 24px; /* 24px desktop/30px mobile */
8079
}
8180
}
81+
/* @passthrough -- picker styling for overflow tabs */
82+
.spectrum-Tabs .spectrum-Picker-button {
83+
--mod-picker-block-size: var(--spectrum-tabs-item-height);
84+
}
8285

8386
.spectrum-Tabs {
8487
display: flex;
88+
gap: var(--spectrum-tabs-item-horizontal-spacing);
8589

8690
/* Contain the selection indicator */
8791
position: relative;
@@ -207,13 +211,13 @@
207211

208212
.spectrum-Tabs-selectionIndicator {
209213
position: absolute;
210-
margin-block-start: var(--spectrum-tabs-label-to-selection-indicator);
211214
inset-inline-start: 0;
212215
background-color: var(--spectrum-tabs-selection-indicator-color);
213216

214217
/* Be below the tab */
215218
z-index: 0;
216219

220+
/* @todo: set transition: none for initial positioning */
217221
transition: transform var(--spectrum-tabs-animation-duration) var(--spectrum-tabs-animation-ease);
218222
transform-origin: top left;
219223

@@ -225,22 +229,18 @@
225229

226230
.spectrum-Tabs-item {
227231
vertical-align: top;
228-
229-
/* Target anything since React likes to add lots of happy <div>s around all things */
230-
& + *:not(.spectrum-Tabs-selectionIndicator) {
231-
margin-inline-start: var(--spectrum-tabs-item-horizontal-spacing);
232-
}
233232
}
234233

235234
.spectrum-Tabs-selectionIndicator {
236235
position: absolute;
237236
inset-block-end: 0;
238237
inline-size: 100%;
239238
block-size: var(--spectrum-tabs-selection-indicator-thickness);
239+
margin-block-start: var(--spectrum-tabs-label-to-selection-indicator);
240240
}
241241

242242
&.spectrum-Tabs--compact {
243-
/* The ActionButton is taller than the tabs, so don't push tabs around */
243+
/* The overflow ActionButton is taller than the tabs, so don't push tabs around */
244244
box-sizing: content-box;
245245
align-items: end;
246246
}
@@ -257,12 +257,11 @@
257257
line-height: var(--spectrum-tabs-item-height);
258258
padding-block: 0;
259259

260-
margin-block-end: var(--spectrum-tabs-item-vertical-spacing);
261260
margin-inline-start: var(--spectrum-tabs-start-to-edge);
262261
margin-inline-end: var(--spectrum-tabs-start-to-edge);
263262

264263
&::before {
265-
inset-inline-start: calc(-1 * var(--spectrum-tabs-focus-indicator-gap));
264+
margin-inline-start: calc(-1 * var(--spectrum-tabs-focus-indicator-gap));
266265
}
267266
}
268267

@@ -281,7 +280,7 @@
281280

282281
.spectrum-Tabs--vertical-right {
283282
.spectrum-Tabs-selectionIndicator {
284-
inset-inline: auto calc(-1* var(--spectrum-tabs-start-to-edge));
283+
inset-inline: auto calc(-1 * var(--spectrum-tabs-start-to-edge));
285284
}
286285
}
287286

‎components/tabs/stories/tabs.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export default {
9696
},
9797
{
9898
label: "Tab 3",
99-
icon: "Document",
99+
icon: "File",
100100
isDisabled: true,
101101
},
102102
],

‎components/tabs/stories/tabs.test.js

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,32 @@ export const TabsGroups = Variants({
5252
orientation: "overflow",
5353
isCompact: true,
5454
},
55+
{
56+
testHeading: "Hover colors",
57+
withStates: false,
58+
content: [
59+
{
60+
label: "Hovered unselected tab",
61+
icon: "Folder",
62+
isHovered: true,
63+
},
64+
{
65+
label: "Hovered selected tab",
66+
icon: "Image",
67+
isSelected: true,
68+
isHovered: true,
69+
},
70+
{
71+
label: "Unhovered unselected tab",
72+
icon: "File",
73+
},
74+
{
75+
label: "Disabled tab",
76+
icon: "Archive",
77+
isDisabled: true,
78+
}
79+
]
80+
},
5581
{
5682
testHeading: "With anchor tags",
5783
useAnchors: true,
@@ -64,7 +90,27 @@ export const TabsGroups = Variants({
6490
},
6591
{
6692
testHeading: "Icon only",
67-
iconOnly: true
93+
iconOnly: true,
6894
},
95+
{
96+
testHeading: "Selected tab focused",
97+
content: [
98+
{
99+
label: "Tab 1",
100+
icon: "Folder",
101+
},
102+
{
103+
label: "Selected focused tab",
104+
icon: "Image",
105+
isSelected: true,
106+
isFocused: true,
107+
},
108+
{
109+
label: "Tab 3",
110+
icon: "File",
111+
}
112+
],
113+
ignore: ["Overflow", "Compact overflow"],
114+
}
69115
]
70116
});

‎components/tabs/stories/template.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,14 @@ export const Template = ({
6262
[`${rootClass}-item`]: true,
6363
"is-selected": item?.isSelected ?? false,
6464
"is-disabled": item?.isDisabled ?? false,
65+
"is-focus-visible": item?.isFocused ?? false,
66+
"is-hover": item?.isHovered ?? false,
6567
})}
6668
tabindex=${item?.isDisabled ? "-1" : "0"}
6769
id=${getRandomId("tab-item")}
6870
role="tab"
6971
aria-selected=${item?.isSelected ?? false}
7072
aria-disabled=${item?.isDisabled ?? false}
71-
7273
>
7374
${when(item.icon, () =>
7475
Icon({

0 commit comments

Comments
 (0)