Skip to content

Commit 149d34d

Browse files
janhasselfrancineluccatw15egan
authored
feat(tabs): support contextual layout tokens (size & density) (#13951)
* feat(tabs): support contextual layout tokens (size & density)) * style(tabs): adjust label vertical position --------- Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: TJ Egan <tw15egan@gmail.com>
1 parent fae184d commit 149d34d

3 files changed

Lines changed: 31 additions & 29 deletions

File tree

‎packages/react/src/components/Tabs/Tabs.stories.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ export const Icon20Only = () => (
313313

314314
export const IconOnly = () => (
315315
<Tabs>
316-
<TabList iconSize="default" aria-label="List of tabs">
316+
<TabList aria-label="List of tabs">
317317
<IconTab label="Monster" disabled>
318318
<Monster aria-label="Monster" />
319319
</IconTab>

‎packages/react/src/components/Tabs/Tabs.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -348,7 +348,8 @@ function TabList({
348348
[`${prefix}--tabs--contained`]: contained,
349349
[`${prefix}--tabs--light`]: light,
350350
[`${prefix}--tabs__icon--default`]: iconSize === 'default',
351-
[`${prefix}--tabs__icon--lg`]: iconSize === 'lg',
351+
[`${prefix}--tabs__icon--lg`]: iconSize === 'lg', // TODO: V12 - Remove this class
352+
[`${prefix}--layout--size-lg`]: iconSize === 'lg',
352353
[`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
353354
[`${prefix}--tabs--full-width`]: distributeWidth,
354355
},

‎packages/styles/scss/components/tabs/_tabs.scss‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -31,27 +31,37 @@
3131
@use '../../utilities/button-reset';
3232
@use '../../utilities/high-contrast-mode' as *;
3333
@use '../../utilities/convert' as *;
34-
35-
$icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
34+
@use '../../utilities/layout';
3635

3736
/// Tabs styles
3837
/// @access public
3938
/// @group tabs
4039
@mixin tabs {
40+
.#{$prefix}--tabs,
41+
.#{$prefix}--tab-content {
42+
@include layout.use('density', $default: 'normal');
43+
}
44+
45+
.#{$prefix}--tabs.#{$prefix}--tabs--tall,
46+
.#{$prefix}--tabs.#{$prefix}--tabs--contained.#{$prefix}--tabs--tall {
47+
@include layout.use('size', $min: 'lg', $max: 'xl', $default: 'xl');
48+
}
49+
4150
.#{$prefix}--tabs {
4251
@include reset;
4352
@include type-style('body-compact-01');
53+
@include layout.use('size', $min: 'sm', $max: 'lg', $default: 'md');
4454

4555
position: relative;
4656
display: flex;
4757
width: 100%;
4858
height: auto;
49-
min-height: rem(40px);
50-
max-height: 4rem;
59+
min-height: layout.size('height');
60+
max-height: custom-property.get-var('layout-size-height-xl');
5161
color: $text-primary;
5262

5363
&.#{$prefix}--tabs--contained {
54-
min-height: rem(48px);
64+
@include layout.use('size', $min: 'sm', $max: 'xl', $default: 'lg');
5565
}
5666

5767
.#{$prefix}--tab--list {
@@ -241,6 +251,12 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
241251
display: flex;
242252
}
243253

254+
&:not(.#{$prefix}--tabs--contained)
255+
.#{$prefix}--tabs__nav-item-label-wrapper {
256+
position: relative;
257+
top: rem(1px);
258+
}
259+
244260
//-----------------------------
245261
// Item
246262
//-----------------------------
@@ -285,11 +301,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
285301
.#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled)
286302
.#{$prefix}--tabs__nav-item--icon
287303
.#{$prefix}--tabs__nav-item--close-icon {
288-
padding: $spacing-05;
289-
margin-top: -$spacing-03;
290-
margin-right: -$spacing-05;
291-
margin-left: -$spacing-05;
292-
293304
&:hover {
294305
background-color: inherit;
295306
}
@@ -343,7 +354,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
343354
}
344355

345356
&.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon {
346-
padding-left: $spacing-05;
357+
padding-inline-start: layout.density('padding-inline');
347358
}
348359

349360
//-----------------------------
@@ -355,9 +366,9 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
355366
@include type-style('body-compact-01');
356367

357368
overflow: hidden;
358-
padding: $spacing-04 $spacing-05 $spacing-03;
359369
border-bottom: $tab-underline-color;
360370
color: $text-secondary;
371+
padding-inline: layout.density('padding-inline');
361372
text-align: left;
362373
text-decoration: none;
363374
text-overflow: ellipsis;
@@ -372,9 +383,8 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
372383
}
373384

374385
&.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-link {
375-
height: rem(48px);
376-
padding: $spacing-03 $spacing-05;
377386
border-bottom: 0;
387+
padding-inline: layout.density('padding-inline');
378388
}
379389

380390
&.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall)
@@ -389,11 +399,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
389399
min-height: rem(16px);
390400
}
391401

392-
&.#{$prefix}--tabs--contained.#{$prefix}--tabs--tall
393-
.#{$prefix}--tabs__nav-link {
394-
height: rem(64px);
395-
}
396-
397402
//-----------------------------
398403
// Icon Item
399404
//-----------------------------
@@ -405,8 +410,8 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
405410
.#{$prefix}--tabs__nav-item--icon-only,
406411
&.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon-only {
407412
display: flex;
408-
width: $icon-tab-size;
409-
height: $icon-tab-size;
413+
width: layout.size('height');
414+
height: layout.size('height');
410415
align-items: center;
411416
justify-content: center;
412417
padding: 0;
@@ -416,10 +421,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
416421
}
417422
}
418423

419-
&.#{$prefix}--tabs__icon--lg {
420-
@include custom-property.declaration('icon-tab-size', rem(48px));
421-
}
422-
423424
//-----------------------------
424425
// Item Hover
425426
//-----------------------------
@@ -558,7 +559,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
558559
// Tab Content Container
559560
//-----------------------------
560561
.#{$prefix}--tab-content {
561-
padding: $spacing-05;
562+
padding: layout.density('padding-inline');
562563

563564
&:focus {
564565
@include focus-outline('outline');
@@ -589,7 +590,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
589590
width: 10rem;
590591
height: 100%;
591592
align-items: center;
592-
padding: 0 1rem;
593+
padding: 0 layout.density('padding-inline');
593594
}
594595

595596
.#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link span {

0 commit comments

Comments
 (0)