diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md index dce75c166a5..678e4a8623b 100644 --- a/packages/terra-framework-docs/CHANGELOG.md +++ b/packages/terra-framework-docs/CHANGELOG.md @@ -10,6 +10,9 @@ * Added * Added examples and tests for subsections in the FlowsheetDataGrid. +* Changed + * Updated `terra-tabs` vertical tabs example to fix custom label display. + ## 1.80.0 - (April 10, 2024) * Added diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/tabs/example/VerticalTabs.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/tabs/example/VerticalTabs.jsx index adb6f4d5751..8cc40c996a9 100644 --- a/packages/terra-framework-docs/src/terra-dev-site/doc/tabs/example/VerticalTabs.jsx +++ b/packages/terra-framework-docs/src/terra-dev-site/doc/tabs/example/VerticalTabs.jsx @@ -30,9 +30,9 @@ const VerticalTabs = () => { const customTab = ( + Surgical Department - + )} label="Surgical Department" key="tCustomTab" diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/tabs/example/common/TabExample.module.scss b/packages/terra-framework-docs/src/terra-dev-site/doc/tabs/example/common/TabExample.module.scss index 8bccf7ca11a..59ef0cbf14a 100644 --- a/packages/terra-framework-docs/src/terra-dev-site/doc/tabs/example/common/TabExample.module.scss +++ b/packages/terra-framework-docs/src/terra-dev-site/doc/tabs/example/common/TabExample.module.scss @@ -10,8 +10,6 @@ .custom-display { color: #f00; - overflow: hidden; - text-overflow: ellipsis; } .content-container { diff --git a/packages/terra-tabs/CHANGELOG.md b/packages/terra-tabs/CHANGELOG.md index b107019c098..66da2a3efe7 100644 --- a/packages/terra-tabs/CHANGELOG.md +++ b/packages/terra-tabs/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Fixed + * Fixes right border for vertical tabs not extending till last tab. + ## 7.26.0 - (April 10, 2024) * Changed diff --git a/packages/terra-tabs/src/clinical-lowlight-theme/Tabs.module.scss b/packages/terra-tabs/src/clinical-lowlight-theme/Tabs.module.scss index f7ec56198ae..95153ddee6d 100644 --- a/packages/terra-tabs/src/clinical-lowlight-theme/Tabs.module.scss +++ b/packages/terra-tabs/src/clinical-lowlight-theme/Tabs.module.scss @@ -104,12 +104,12 @@ --terra-tabs-structural-vertical-active-color: #b2b5b6; --terra-tabs-structural-vertical-active-font-weight: normal; --terra-tabs-structural-vertical-background-size: 0 1px; - --terra-tabs-structural-vertical-border-width: 0 0 1px 0; + --terra-tabs-structural-vertical-border-width: 0 1px 1px 0; --terra-tabs-menu-icon-margin-right: 0.5rem; --terra-tabs-menu-icon-font-size: 1rem; - + /* NOTE: This is being commented out until discussions have been resolved around if modular tabs should be removed. @@ -137,7 +137,7 @@ --terra-tabs-modular-selection-bar-background-color: #fff; --terra-tabs-modular-tab-bar-border-bottom-color: #dddedf; --terra-tabs-modular-active-focus-background-color: #fff; - + */ } diff --git a/packages/terra-tabs/src/common-tabs/CommonTabs.module.scss b/packages/terra-tabs/src/common-tabs/CommonTabs.module.scss index 881c5688186..bdd3098d96b 100644 --- a/packages/terra-tabs/src/common-tabs/CommonTabs.module.scss +++ b/packages/terra-tabs/src/common-tabs/CommonTabs.module.scss @@ -67,7 +67,6 @@ } .is-vertical { - border-left: 1px solid #868a8c; border-top: 0; } diff --git a/packages/terra-tabs/src/common-tabs/TerraStructuralTabs.module.scss b/packages/terra-tabs/src/common-tabs/TerraStructuralTabs.module.scss index 93fef6d6f5c..5e772ce9381 100644 --- a/packages/terra-tabs/src/common-tabs/TerraStructuralTabs.module.scss +++ b/packages/terra-tabs/src/common-tabs/TerraStructuralTabs.module.scss @@ -114,18 +114,16 @@ &.is-vertical { background-image: var(--terra-tabs-structural-vertical-background-image, linear-gradient(to bottom, #dedfe0, #dedfe0)); background-size: var(--terra-tabs-structural-vertical-background-size, 0 1px); - border-width: var(--terra-tabs-structural-vertical-border-width, 0 0 1px 0); + border-width: var(--terra-tabs-structural-vertical-border-width, 0 1px 1px 0); min-width: 2.571rem; } &.is-active-vertical { background-color: var(--terra-tabs-structural-vertical-active-background-color, #fff); - background-size: var(--terra-tabs-structural-vertical-active-background-size, 100% 1px); - border-bottom: 1px solid; - border-image: linear-gradient(#006fc3, #006fc3) 0 100%; - border-left: 2px solid; - border-width: 0 0 1px 2px; + background-image: var(--terra-tabs-structural-background-image, linear-gradient(to bottom, #006fc3, #006fc3)); + background-size: 2px; + border-width: 0 1px 1px 2px; box-shadow: var(--terra-tabs-structural-vertical-active-box-shadow, none); color: var(--terra-tabs-structural-vertical-active-color, #000); font-weight: var(--terra-tabs-structural-vertical-active-font-weight, normal); diff --git a/packages/terra-tabs/src/orion-fusion-theme/Tabs.module.scss b/packages/terra-tabs/src/orion-fusion-theme/Tabs.module.scss index a43858767f1..c674db24785 100644 --- a/packages/terra-tabs/src/orion-fusion-theme/Tabs.module.scss +++ b/packages/terra-tabs/src/orion-fusion-theme/Tabs.module.scss @@ -103,7 +103,7 @@ --terra-tabs-structural-vertical-active-color: #000; --terra-tabs-structural-vertical-active-font-weight: normal; --terra-tabs-structural-vertical-background-size: 0 1px; - --terra-tabs-structural-vertical-border-width: 0 0 1px 0; + --terra-tabs-structural-vertical-border-width: 0 1px 1px 0; --terra-tabs-menu-icon-margin-right: 0.25rem; --terra-tabs-menu-icon-font-size: 1rem; @@ -140,7 +140,7 @@ --terra-tabs-modular-selection-bar-background-color; --terra-tabs-modular-tab-bar-border-bottom-color; --terra-tabs-modular-active-focus-background-color; - + */ } } diff --git a/packages/terra-tabs/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/tabs-spec/Keyboard_Focus_on_First_Tab.png b/packages/terra-tabs/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/tabs-spec/Keyboard_Focus_on_First_Tab.png index 01b91645310..c9abed83b73 100644 Binary files a/packages/terra-tabs/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/tabs-spec/Keyboard_Focus_on_First_Tab.png and b/packages/terra-tabs/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/tabs-spec/Keyboard_Focus_on_First_Tab.png differ diff --git a/packages/terra-tabs/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/tabs-spec/Keyboard_Focus_on_First_Tab.png b/packages/terra-tabs/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/tabs-spec/Keyboard_Focus_on_First_Tab.png index 39ad62224c2..20d2cf08285 100644 Binary files a/packages/terra-tabs/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/tabs-spec/Keyboard_Focus_on_First_Tab.png and b/packages/terra-tabs/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/tabs-spec/Keyboard_Focus_on_First_Tab.png differ diff --git a/packages/terra-tabs/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/tabs-spec/Keyboard_Focus_on_First_Tab.png b/packages/terra-tabs/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/tabs-spec/Keyboard_Focus_on_First_Tab.png index b21a6a68a0c..110fca91fcf 100644 Binary files a/packages/terra-tabs/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/tabs-spec/Keyboard_Focus_on_First_Tab.png and b/packages/terra-tabs/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/tabs-spec/Keyboard_Focus_on_First_Tab.png differ