[terra-tabs] Vertical tabs border fix (#2133)

Co-authored-by: Sugan G <[email protected]>

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

packages/terra-framework-docs/src/terra-dev-site/doc/tabs/example/VerticalTabs.jsx

@@ -30,9 +30,9 @@ const VerticalTabs = () => {
   const customTab = (
     <Tabs.Pane
       customDisplay={(
-        <div className={cx('custom-display')}>
+        <span className={cx('custom-display')}>
           Surgical Department
-        </div>
+        </span>
       )}
       label="Surgical Department"
       key="tCustomTab"

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 {

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

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;
-    
+
     */
 
   }

packages/terra-tabs/src/common-tabs/CommonTabs.module.scss

@@ -67,7 +67,6 @@
   }
 
   .is-vertical {
-    border-left: 1px solid #868a8c;
     border-top: 0;
   }
 

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);

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;
-    
+
     */
   }
 }