Fix tab-group vertical scroll bar jittering.

six-group · Mar 20, 2024 · c46a91f · c46a91f
1 parent 90d31fc
commit c46a91f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## Upcoming
+
+### Added
+
+### Changed
+
+### Fixed
+
+- tab group animation smoothing when using left / right layout
+
 ## 4.2.1 - 2024-03-14
 
 ### Fixed

diff --git a/libraries/ui-library/src/components/six-tab/six-tab.scss b/libraries/ui-library/src/components/six-tab/six-tab.scss
@@ -43,6 +43,22 @@
   &:hover:not(.tab--disabled) {
     color: var(--six-tab-color-hover);
   }
+
+  &.tab--left,
+  &.tab--right {
+    display: inline-block;
+    text-align: left;
+  }
+
+  &.tab--left::before,
+  &.tab--right::before {
+    display: block;
+    font-weight: var(--six-font-weight-bold);
+    content: attr(title);
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
 }
 
 .tab__close-button {

diff --git a/libraries/ui-library/src/components/six-tab/six-tab.tsx b/libraries/ui-library/src/components/six-tab/six-tab.tsx
@@ -88,6 +88,7 @@ export class SixTab {
           aria-disabled={this.disabled ? 'true' : 'false'}
           aria-selected={this.active ? 'true' : 'false'}
           tabindex={this.disabled || !this.active ? '-1' : '0'}
+          title={this.host.innerHTML}
         >
           <slot />
           {this.closable && (