From 136c9078f879c4f81f6f46c65101a62ed25e79f5 Mon Sep 17 00:00:00 2001 From: Andy Blum Date: Wed, 23 Feb 2022 15:36:37 -0500 Subject: [PATCH 1/7] fix(tabs-extended): change anchor-based tabs to button-based tabs --- .../tabs-extended/_tabs-extended.scss | 71 ++++++++++++++++++- .../components/tabs-extended/tabs-extended.ts | 7 +- 2 files changed, 73 insertions(+), 5 deletions(-) diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss index dc28849fb74..f052edc202c 100644 --- a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss +++ b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss @@ -64,6 +64,12 @@ height: auto; overflow: visible; white-space: normal; + background: unset; + border: initial; + border-bottom: 2px solid var(--cds-ui-03, #e0e0e0); + display: inline-flex; + width: 10rem; + text-align: left; &[hasTooltip] { @include tooltip--trigger('definition', top); @@ -131,7 +137,7 @@ width: auto; } - a.#{$prefix}--tabs__nav-link { + .#{$prefix}--tabs__nav-link { padding: 0; border-bottom: carbon--rem(2px) solid transparent; } @@ -193,3 +199,66 @@ @include exports('tabs-extended') { @include tabs-extended; } + +button.#{$prefix}--tabs__nav-link { + @include focus-outline('reset'); + + display: inline-block; + overflow: hidden; + width: calc(100% - 32px); + height: rem(40px); + padding: $spacing-04 0; + border-bottom: 1px solid $ui-03; + margin: 0 $spacing-05; + color: $text-02; + font-weight: 400; + line-height: 1rem; + text-decoration: none; + text-overflow: ellipsis; + transition: border $duration--fast-01 motion(standard, productive), + outline $duration--fast-01 motion(standard, productive); + white-space: nowrap; + + &:focus, + &:active { + @include focus-outline('outline'); + + width: 100%; + padding-left: 16px; + margin: 0; + } + + @include carbon--breakpoint(md) { + width: rem(160px); + padding: $spacing-04 $spacing-05 $spacing-03; + border-bottom: $tab-underline-color; + margin: 0; + line-height: inherit; + + &:focus, + &:active { + width: rem(160px); + border-bottom: 2px; + } + } +} + +.#{$prefix}--tabs--container button.#{$prefix}--tabs__nav-link { + @include carbon--breakpoint(md) { + height: rem(48px); + padding: $spacing-03 $spacing-05; + border-bottom: none; + // Height - vertical padding + line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); + } +} + +.#{$prefix}--tabs__nav-item--disabled button.#{$prefix}--tabs__nav-link:active { + border-bottom: $tab-underline-disabled; + outline: none; +} + +.#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected) + button.#{$prefix}--tabs__nav-link:active { + color: $text-02; + } diff --git a/packages/web-components/src/components/tabs-extended/tabs-extended.ts b/packages/web-components/src/components/tabs-extended/tabs-extended.ts index 0f80e6156c8..f4aecc580bf 100644 --- a/packages/web-components/src/components/tabs-extended/tabs-extended.ts +++ b/packages/web-components/src/components/tabs-extended/tabs-extended.ts @@ -219,18 +219,17 @@ class DDSTabsExtended extends StableSelectorMixin(LitElement) { }); return html` `; })} From eb6f0533aa9aec643a15e7f3245c2dd4f9ec0a56 Mon Sep 17 00:00:00 2001 From: Andy Blum Date: Thu, 24 Feb 2022 12:36:11 -0500 Subject: [PATCH 2/7] fix(tabs-extended): fix stylelint errors --- .../components/tabs-extended/_tabs-extended.scss | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss index f052edc202c..7b35b163d4e 100644 --- a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss +++ b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss @@ -64,7 +64,7 @@ height: auto; overflow: visible; white-space: normal; - background: unset; + background: none; border: initial; border-bottom: 2px solid var(--cds-ui-03, #e0e0e0); display: inline-flex; @@ -135,9 +135,6 @@ .#{$prefix}--tabs__nav-link { width: auto; - } - - .#{$prefix}--tabs__nav-link { padding: 0; border-bottom: carbon--rem(2px) solid transparent; } @@ -248,8 +245,6 @@ button.#{$prefix}--tabs__nav-link { height: rem(48px); padding: $spacing-03 $spacing-05; border-bottom: none; - // Height - vertical padding - line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2)); } } @@ -259,6 +254,6 @@ button.#{$prefix}--tabs__nav-link { } .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected) - button.#{$prefix}--tabs__nav-link:active { - color: $text-02; - } + button.#{$prefix}--tabs__nav-link:active { + color: $text-02; +} From 619c45a11828da5482d2933e39147e4f269dffb9 Mon Sep 17 00:00:00 2001 From: Andy Blum Date: Fri, 25 Feb 2022 10:25:45 -0500 Subject: [PATCH 3/7] fix(tabs-extended): limit VO cursor to button boundaries --- .../components/tabs-extended/_tabs-extended.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss index 7b35b163d4e..90a310619f2 100644 --- a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss +++ b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss @@ -75,6 +75,19 @@ @include tooltip--trigger('definition', top); @include tooltip--placement('definition', 'bottom', 'start'); + &::before, + &::after { + display: none; + } + + &:hover, + &:focus { + &::before, + &::after { + display: flex; + } + } + &:focus { @include focus-outline('outline'); } From 70415b9b14cec1f072ac1f602e1afd372d741a7f Mon Sep 17 00:00:00 2001 From: Andy Blum Date: Fri, 4 Mar 2022 14:58:58 -0500 Subject: [PATCH 4/7] fix(tabs-extended): repace px/rem values with tokens --- .../scss/components/tabs-extended/_tabs-extended.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss index 90a310619f2..06ab8dde029 100644 --- a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss +++ b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss @@ -68,7 +68,7 @@ border: initial; border-bottom: 2px solid var(--cds-ui-03, #e0e0e0); display: inline-flex; - width: 10rem; + width: $spacing-13; text-align: left; &[hasTooltip] { @@ -222,7 +222,7 @@ button.#{$prefix}--tabs__nav-link { margin: 0 $spacing-05; color: $text-02; font-weight: 400; - line-height: 1rem; + line-height: $spacing-05; text-decoration: none; text-overflow: ellipsis; transition: border $duration--fast-01 motion(standard, productive), @@ -234,7 +234,7 @@ button.#{$prefix}--tabs__nav-link { @include focus-outline('outline'); width: 100%; - padding-left: 16px; + padding-left: $spacing-05; margin: 0; } From e988ad12dde2297c3ba2dbed2d4ffab1287cd7fc Mon Sep 17 00:00:00 2001 From: Andy Blum Date: Mon, 7 Mar 2022 17:58:27 -0500 Subject: [PATCH 5/7] Update packages/styles/scss/components/tabs-extended/_tabs-extended.scss Co-authored-by: Putra Bonaccorsi --- .../styles/scss/components/tabs-extended/_tabs-extended.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss index 06ab8dde029..619e48caad5 100644 --- a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss +++ b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss @@ -248,7 +248,7 @@ button.#{$prefix}--tabs__nav-link { &:focus, &:active { width: rem(160px); - border-bottom: 2px; + border-bottom: carbon--rem(2px); } } } From 1d4139831006af65bd5a4cfd8506b59191eea0db Mon Sep 17 00:00:00 2001 From: Andy Blum Date: Mon, 7 Mar 2022 17:58:40 -0500 Subject: [PATCH 6/7] Update packages/styles/scss/components/tabs-extended/_tabs-extended.scss Co-authored-by: Putra Bonaccorsi --- .../styles/scss/components/tabs-extended/_tabs-extended.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss index 619e48caad5..0bffde1b045 100644 --- a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss +++ b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss @@ -66,7 +66,7 @@ white-space: normal; background: none; border: initial; - border-bottom: 2px solid var(--cds-ui-03, #e0e0e0); + border-bottom: carbon--rem(2px) solid $ui-03; display: inline-flex; width: $spacing-13; text-align: left; From 03aea7087ab404ff3add7dee31135754430f8e6a Mon Sep 17 00:00:00 2001 From: Andy Blum Date: Mon, 7 Mar 2022 17:58:56 -0500 Subject: [PATCH 7/7] Update packages/styles/scss/components/tabs-extended/_tabs-extended.scss Co-authored-by: Putra Bonaccorsi --- .../styles/scss/components/tabs-extended/_tabs-extended.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss index 0bffde1b045..ab144ad9e63 100644 --- a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss +++ b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss @@ -215,7 +215,7 @@ button.#{$prefix}--tabs__nav-link { display: inline-block; overflow: hidden; - width: calc(100% - 32px); + width: calc(100% - #{$spacing-07}); height: rem(40px); padding: $spacing-04 0; border-bottom: 1px solid $ui-03;