✨ feat(tabs): support brand icons (#1524)

* Create PR for #1522

* feat: extended bal-tabs with brand icons and sublabel

* feature: add dimInactiveElements property for bal-tabs

* chore: add package-lock.json

* chore: typo

* chore: generated new package-lock.json

* chore: fix package-lock.json

* Revert "chore: add package-lock.json"

This reverts commit 155060c.

* Revert "chore: fix package-lock.json"

This reverts commit c01f8e8.

* Revert "chore: generated new package-lock.json"

This reverts commit 95109db.

* Revert "chore: typo"

This reverts commit 8944add.

* chore: fix typo

* chore: regenerate package-lock.json

* chore: fix version cypress in package-lock.json

* chore: fix version cypress in package-lock.json

* Revert "chore: fix version cypress in package-lock.json"

This reverts commit 2039f53.

* chore: revert change package-lock.json

* chore: fix hasSubLabelInGroup

* chore: fix styling issues

* chore: fix styling issues

* update base images

* chore: fix sass for tablet tab-button

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Timo Klüber <[email protected]>
Co-authored-by: tklueber <[email protected]>

.changeset/eleven-flowers-know.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**Tabs**: Added properties `svg` and `sublabel` to `bal-tab-items` component and `dimInactiveElements` to `bal-tabs` and adjusted the appearance of the component.

docs/stories/components/bal-tabs/bal-tabs.stories.ts

@@ -58,3 +58,58 @@ export const Mobile = Story({
   `,
   ),
 })
+
+export const BrandIcons = Story({
+  args: {
+    expanded: true,
+  },
+  ...withRender(
+    ({ ...args }) => `          <bal-tabs expanded data-testid="tabs" value="tab-a" border>
+            <bal-tab-item
+              value="tab-a"
+              label="Peugeot 208"
+              sublabel="1.2 PureTech GT"
+              svg="<svg viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'>
+            <g clip-path='url(#clip0_3088_80882)'>
+              <path d='M36.0194 23.8H7.37986L6.01241 28C5.73992 28.6825 5.59961 29.4144 5.59961 30.1538V37.8H37.7996V30.1538C37.7996 29.4144 37.6593 28.6825 37.3868 28L36.0194 23.8ZM10.4996 33.6C9.33981 33.6 8.39961 32.6598 8.39961 31.5C8.39961 30.3402 9.33981 29.4 10.4996 29.4C11.6594 29.4 12.5996 30.3402 12.5996 31.5C12.5996 32.6598 11.6594 33.6 10.4996 33.6ZM32.8996 33.6C31.7398 33.6 30.7996 32.6598 30.7996 31.5C30.7996 30.3402 31.7398 29.4 32.8996 29.4C34.0594 29.4 34.9996 30.3402 34.9996 31.5C34.9996 32.6598 34.0594 33.6 32.8996 33.6Z' fill='#6C2273'/>
+              <path d='M30.7998 43.4C30.7998 44.1732 31.4266 44.8 32.1998 44.8H36.3998C37.173 44.8 37.7998 44.1732 37.7998 43.4V39.2H30.7998V43.4Z' fill='#000D6E'/>
+              <path d='M5.59961 43.4C5.59961 44.1732 6.22638 44.8 6.99961 44.8H11.1996C11.9728 44.8 12.5996 44.1732 12.5996 43.4V39.2H5.59961V43.4Z' fill='#000D6E'/>
+              <path d='M39.8999 19.6H37.0999C36.7133 19.6 36.3999 19.9134 36.3999 20.3V21.7C36.3999 22.0866 36.7133 22.4 37.0999 22.4H39.8999C40.2865 22.4 40.5999 22.0866 40.5999 21.7V20.3C40.5999 19.9134 40.2865 19.6 39.8999 19.6Z' fill='#6C2273'/>
+              <path d='M6.2998 19.6H3.4998C3.11321 19.6 2.7998 19.9134 2.7998 20.3V21.7C2.7998 22.0866 3.11321 22.4 3.4998 22.4H6.2998C6.6864 22.4 6.9998 22.0866 6.9998 21.7V20.3C6.9998 19.9134 6.6864 19.6 6.2998 19.6Z' fill='#6C2273'/>
+              <path d='M32.1236 13.7846C31.4986 12.2195 30.0332 11.2 28.4083 11.2H14.9915C13.3666 11.2 11.9012 12.2195 11.2762 13.7846L7.83594 22.4H35.5639L32.1236 13.7846Z' fill='#B8B2FF'/>
+              <mask id='path-7-outside-1_3088_80882' maskUnits='userSpaceOnUse' x='33' y='10' width='19' height='36' fill='black'>
+                <rect fill='white' x='33' y='10' width='19' height='36'/>
+                <path d='M46.544 11.64V39.096H50.528V45H34.064V39.096H39.44V22.248H34.16V16.392H39.44V11.64H46.544Z'/>
+              </mask>
+              <path d='M46.544 11.64V39.096H50.528V45H34.064V39.096H39.44V22.248H34.16V16.392H39.44V11.64H46.544Z' fill='#000D6E'/>
+              <path d='M46.544 11.64H47.544V10.64H46.544V11.64ZM46.544 39.096H45.544V40.096H46.544V39.096ZM50.528 39.096H51.528V38.096H50.528V39.096ZM50.528 45V46H51.528V45H50.528ZM34.064 45H33.064V46H34.064V45ZM34.064 39.096V38.096H33.064V39.096H34.064ZM39.44 39.096V40.096H40.44V39.096H39.44ZM39.44 22.248H40.44V21.248H39.44V22.248ZM34.16 22.248H33.16V23.248H34.16V22.248ZM34.16 16.392V15.392H33.16V16.392H34.16ZM39.44 16.392V17.392H40.44V16.392H39.44ZM39.44 11.64V10.64H38.44V11.64H39.44ZM45.544 11.64V39.096H47.544V11.64H45.544ZM46.544 40.096H50.528V38.096H46.544V40.096ZM49.528 39.096V45H51.528V39.096H49.528ZM50.528 44H34.064V46H50.528V44ZM35.064 45V39.096H33.064V45H35.064ZM34.064 40.096H39.44V38.096H34.064V40.096ZM40.44 39.096V22.248H38.44V39.096H40.44ZM39.44 21.248H34.16V23.248H39.44V21.248ZM35.16 22.248V16.392H33.16V22.248H35.16ZM34.16 17.392H39.44V15.392H34.16V17.392ZM40.44 16.392V11.64H38.44V16.392H40.44ZM39.44 12.64H46.544V10.64H39.44V12.64Z' fill='#F9F3FF' mask='url(#path-7-outside-1_3088_80882)'/>
+            </g>
+            </svg>"
+              >Content of Tab A ⛄
+            </bal-tab-item>
+            <bal-tab-item
+              value="tab-b"
+              label="Fahrzeug"
+              sublabel="Nicht ausgewählt"
+              svg="<svg viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'>
+<g clip-path='url(#clip0_3088_80832)'>
+<path d='M36.0194 23.8H7.37986L6.01241 28C5.73992 28.6825 5.59961 29.4145 5.59961 30.1539V37.8H37.7996V30.1539C37.7996 29.4145 37.6593 28.6825 37.3868 28L36.0194 23.8ZM10.4996 33.6C9.33981 33.6 8.39961 32.6598 8.39961 31.5C8.39961 30.3402 9.33981 29.4 10.4996 29.4C11.6594 29.4 12.5996 30.3402 12.5996 31.5C12.5996 32.6598 11.6594 33.6 10.4996 33.6ZM32.8996 33.6C31.7398 33.6 30.7996 32.6598 30.7996 31.5C30.7996 30.3402 31.7398 29.4 32.8996 29.4C34.0594 29.4 34.9996 30.3402 34.9996 31.5C34.9996 32.6598 34.0594 33.6 32.8996 33.6Z' fill='#6C2273'/>
+<path d='M30.7998 43.4C30.7998 44.1732 31.4266 44.8 32.1998 44.8H36.3998C37.173 44.8 37.7998 44.1732 37.7998 43.4V39.2H30.7998V43.4Z' fill='#000D6E'/>
+<path d='M5.59961 43.4C5.59961 44.1732 6.22638 44.8 6.99961 44.8H11.1996C11.9728 44.8 12.5996 44.1732 12.5996 43.4V39.2H5.59961V43.4Z' fill='#000D6E'/>
+<path d='M39.8999 19.6H37.0999C36.7133 19.6 36.3999 19.9134 36.3999 20.3V21.7C36.3999 22.0866 36.7133 22.4 37.0999 22.4H39.8999C40.2865 22.4 40.5999 22.0866 40.5999 21.7V20.3C40.5999 19.9134 40.2865 19.6 39.8999 19.6Z' fill='#6C2273'/>
+<path d='M6.2998 19.6H3.4998C3.11321 19.6 2.7998 19.9134 2.7998 20.3V21.7C2.7998 22.0866 3.11321 22.4 3.4998 22.4H6.2998C6.6864 22.4 6.9998 22.0866 6.9998 21.7V20.3C6.9998 19.9134 6.6864 19.6 6.2998 19.6Z' fill='#6C2273'/>
+<path d='M32.1236 13.7846C31.4986 12.2195 30.0332 11.2 28.4083 11.2H14.9915C13.3666 11.2 11.9012 12.2195 11.2762 13.7846L7.83594 22.4H35.5639L32.1236 13.7846Z' fill='#B8B2FF'/>
+<mask id='path-7-outside-1_3088_80832' maskUnits='userSpaceOnUse' x='23' y='10' width='28' height='36' fill='black'>
+<rect fill='white' x='23' y='10' width='28' height='36'/>
+<path d='M41.816 32.568L34.952 39.096H49.016V45H24.584V40.296L36.248 29.208C38.984 26.712 41.192 23.928 41.192 21.144C41.192 18.744 39.416 17.112 36.68 17.112C34.088 17.112 32.024 18.696 31.256 21.816L24.536 19.656C25.784 14.472 30.632 11.064 36.728 11.064C43.88 11.064 48.44 14.904 48.44 20.808C48.44 25.224 46.04 28.68 41.816 32.568Z'/>
+</mask>
+<path d='M41.816 32.568L34.952 39.096H49.016V45H24.584V40.296L36.248 29.208C38.984 26.712 41.192 23.928 41.192 21.144C41.192 18.744 39.416 17.112 36.68 17.112C34.088 17.112 32.024 18.696 31.256 21.816L24.536 19.656C25.784 14.472 30.632 11.064 36.728 11.064C43.88 11.064 48.44 14.904 48.44 20.808C48.44 25.224 46.04 28.68 41.816 32.568Z' fill='#000D6E'/>
+<path d='M41.816 32.568L41.1388 31.8322L41.1328 31.8378L41.1269 31.8434L41.816 32.568ZM34.952 39.096L34.2629 38.3714L32.4495 40.096H34.952V39.096ZM49.016 39.096H50.016V38.096H49.016V39.096ZM49.016 45V46H50.016V45H49.016ZM24.584 45H23.584V46H24.584V45ZM24.584 40.296L23.895 39.5712L23.584 39.8669V40.296H24.584ZM36.248 29.208L35.574 28.4692L35.5665 28.4762L35.559 28.4832L36.248 29.208ZM31.256 21.816L30.95 22.768L31.9707 23.0961L32.227 22.055L31.256 21.816ZM24.536 19.656L23.5638 19.4219L23.3466 20.3241L24.23 20.608L24.536 19.656ZM41.1269 31.8434L34.2629 38.3714L35.6411 39.8206L42.5051 33.2926L41.1269 31.8434ZM34.952 40.096H49.016V38.096H34.952V40.096ZM48.016 39.096V45H50.016V39.096H48.016ZM49.016 44H24.584V46H49.016V44ZM25.584 45V40.296H23.584V45H25.584ZM25.273 41.0208L36.937 29.9328L35.559 28.4832L23.895 39.5712L25.273 41.0208ZM36.922 29.9468C38.3212 28.6703 39.6233 27.2869 40.5809 25.8344C41.5365 24.385 42.192 22.8014 42.192 21.144H40.192C40.192 22.2706 39.7435 23.471 38.9111 24.7336C38.0807 25.9931 36.9108 27.2497 35.574 28.4692L36.922 29.9468ZM42.192 21.144C42.192 19.6838 41.6444 18.3975 40.6313 17.485C39.6272 16.5806 38.2447 16.112 36.68 16.112V18.112C37.8513 18.112 38.7248 18.4594 39.2927 18.971C39.8516 19.4745 40.192 20.2042 40.192 21.144H42.192ZM36.68 16.112C35.1721 16.112 33.7742 16.5766 32.6409 17.5282C31.5123 18.4759 30.7094 19.853 30.285 21.577L32.227 22.055C32.5706 20.659 33.1837 19.6841 33.9271 19.0598C34.6658 18.4394 35.5959 18.112 36.68 18.112V16.112ZM31.562 20.864L24.842 18.704L24.23 20.608L30.95 22.768L31.562 20.864ZM25.5082 19.8901C26.6275 15.2409 30.9999 12.064 36.728 12.064V10.064C30.2641 10.064 24.9405 13.7031 23.5638 19.4219L25.5082 19.8901ZM36.728 12.064C40.133 12.064 42.8142 12.9778 44.6251 14.4897C46.4179 15.9863 47.44 18.1343 47.44 20.808H49.44C49.44 17.5777 48.1821 14.8537 45.9069 12.9543C43.6498 11.0702 40.475 10.064 36.728 10.064V12.064ZM47.44 20.808C47.44 24.792 45.3054 27.997 41.1388 31.8322L42.4932 33.3038C46.7746 29.363 49.44 25.656 49.44 20.808H47.44Z' fill='#F9F3FF' mask='url(#path-7-outside-1_3088_80832)'/>
+</g>
+</svg>"
+              >Content of Tab 🐦
+            </bal-tab-item>
+          </bal-tabs>
+  `,
+  ),
+})

e2e/cypress/e2e/visual/bal-tabs.visual.cy.ts

@@ -17,6 +17,7 @@ describe('bal-tabs', () => {
       cy.getByTestId('overflow-flex').testVisual('tabs-overflow-flex', errorThreshold)
       cy.getByTestId('vertical-list').testVisual('tabs-vertical-list', errorThreshold)
       cy.getByTestId('without-active-tab').testVisual('tabs-without-active-tab', errorThreshold)
+      cy.getByTestId('brand-icons').testVisual('tabs-with-brand-icons', errorThreshold)
     })
   })
 
@@ -55,6 +56,7 @@ describe('bal-tabs', () => {
       cy.getByTestId('overflow-flex').testVisual('tabs-overflow-flex-mobile', errorThreshold)
       cy.getByTestId('vertical-list').testVisual('tabs-vertical-list-mobile', errorThreshold)
       cy.getByTestId('without-active-tab').testVisual('tabs-without-active-tab-mobile', errorThreshold)
+      cy.getByTestId('brand-icons').testVisual('tabs-with-brand-icons-mobile', errorThreshold)
     })
   })
 })

packages/core/src/components.d.ts

@@ -3141,6 +3141,14 @@ export namespace Components {
           * Sets the tab active.
          */
         "setActive": (active: boolean) => Promise<void>;
+        /**
+          * Sub label for the tab.
+         */
+        "subLabel": string;
+        /**
+          * source for the svg icon
+         */
+        "svg": string;
         /**
           * Specifies where to display the linked URL. Only applies when an `href` is provided.
          */
@@ -3179,6 +3187,10 @@ export namespace Components {
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce": number;
+        /**
+          * if true, inactive elements will have their opacity reduced
+         */
+        "dimInactiveElements": boolean;
         /**
           * If `true` the field expands over the whole width.
          */
@@ -8206,6 +8218,14 @@ declare namespace LocalJSX {
           * Tell's if the linking is done by a router.
          */
         "prevent"?: boolean;
+        /**
+          * Sub label for the tab.
+         */
+        "subLabel"?: string;
+        /**
+          * source for the svg icon
+         */
+        "svg"?: string;
         /**
           * Specifies where to display the linked URL. Only applies when an `href` is provided.
          */
@@ -8242,6 +8262,10 @@ declare namespace LocalJSX {
           * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce"?: number;
+        /**
+          * if true, inactive elements will have their opacity reduced
+         */
+        "dimInactiveElements"?: boolean;
         /**
           * If `true` the field expands over the whole width.
          */

packages/core/src/components/bal-tabs/bal-tab-item/bal-tab-item.tsx

@@ -74,6 +74,16 @@ export class TabItem {
    */
   @Prop() aria?: BalProps.BalTabItemAria = undefined
 
+  /**
+   * Sub label for the tab.
+   */
+  @Prop({ reflect: true }) subLabel = ''
+
+  /**
+   * source for the svg icon
+   */
+  @Prop() svg = ''
+
   /**
    * Emitted when the link element has clicked
    */
@@ -117,6 +127,8 @@ export class TabItem {
       trackingData: this.inheritAttributes,
       noPanel: this.noPanel,
       aria: this.aria,
+      subLabel: this.subLabel,
+      svg: this.svg,
     }
   }
 

packages/core/src/components/bal-tabs/bal-tab.type.ts

@@ -21,6 +21,8 @@ export interface BalTabOption {
   hidden?: boolean // deprecated use invisible instead
   noPanel?: boolean
   aria?: BalProps.BalTabItemAria
+  subLabel?: string
+  svg?: string
 }
 
 export interface TabLineProps {

packages/core/src/components/bal-tabs/bal-tabs.tsx

@@ -186,6 +186,11 @@ export class Tabs
 
   @Prop({ mutable: true }) value?: string = undefined
 
+  /**
+   * if true, inactive elements will have their opacity reduced
+   */
+  @Prop() dimInactiveElements = false
+
   @Watch('value')
   protected async valueChanged(newValue?: string, oldValue?: string) {
     if (newValue !== oldValue) {
@@ -869,6 +874,7 @@ export class Tabs
             iconPosition={this.iconPosition}
             verticalColSize={this.verticalColSize}
             onSelectTab={this.onSelectTab}
+            dimInactiveElements={this.dimInactiveElements}
           ></TabNav>
         )}
         <div

packages/core/src/components/bal-tabs/components/tab-button.sass

@@ -28,6 +28,23 @@
   +tablet
     flex-direction: row
     min-height: 3.5rem
+
+  &--group-has-sub-label
+    +mobile
+      height: 5rem
+
+  &--dim-inactive-elements:not(&--active)
+    opacity: 0.6
+
+  &--display-svg
+    flex-direction: row
+    +mobile
+        &:not(&.bal-tabs__nav__item--active)
+          flex: 0 0 auto
+          min-width: 3rem
+          width: 6rem
+          padding: 0.25rem
+
   &--accordion
     flex-direction: row
   &--hidden
@@ -58,24 +75,24 @@
       &:hover
         .bal-tabs__nav__item__label
           color: var(--bal-tabs-tab-button-label-text-color-hover)
-        .bal-tabs__nav__item__icon
+        .bal-tabs__nav__item__icon:not(&-display-svg)
           +fillSvg(var(--bal-tabs-tab-button-icon-text-color-hover))
     &:active
       .bal-tabs__nav__item__label
         color: var(--bal-tabs-tab-button-label-text-color-active)
-      .bal-tabs__nav__item__icon
+      .bal-tabs__nav__item__icon:not(&-display-svg)
         +fillSvg(var(--bal-tabs-tab-button-icon-text-color-active))
   &:not(&--disabled)#{&}--inverted
     +hover()
       &:hover
         .bal-tabs__nav__item__label
           color: var(--bal-tabs-tab-button-label-text-color-inverted-hover)
-        .bal-tabs__nav__item__icon
+        .bal-tabs__nav__item__icon:not(&-display-svg)
           +fillSvg(var(--bal-tabs-tab-button-icon-text-color-inverted-hover))
     &:active
       .bal-tabs__nav__item__label
         color: var(--bal-tabs-tab-button-label-text-color-inverted-active)
-      .bal-tabs__nav__item__icon
+      .bal-tabs__nav__item__icon:not(&-display-svg)
         +fillSvg(var(--bal-tabs-tab-button-icon-text-color-inverted-active))
   //
   // Vertical layout

packages/core/src/components/bal-tabs/components/tab-button.tsx

@@ -22,6 +22,8 @@ export interface TabButtonProps {
   iconPosition: BalProps.BalTabsIconPosition
   context?: BalProps.BalTabsContext
   onSelectTab: (ev: MouseEvent, item: BalTabOption) => void
+  hasSubLabelInGroup: boolean
+  dimInactiveElements: boolean
 }
 
 export const TabButton: FunctionalComponent<TabButtonProps> = ({
@@ -41,6 +43,8 @@ export const TabButton: FunctionalComponent<TabButtonProps> = ({
   iconPosition,
   context,
   onSelectTab,
+  hasSubLabelInGroup,
+  dimInactiveElements,
 }) => {
   const bemEl = BEM.block('tabs').element('nav').element('item')
 
@@ -102,6 +106,9 @@ export const TabButton: FunctionalComponent<TabButtonProps> = ({
         ...bemEl.modifier('vertical').class(isVertical),
         ...bemEl.modifier(`context-${context}`).class(context !== undefined),
         ...bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal'),
+        ...bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0),
+        ...bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup),
+        ...bemEl.modifier('dim-inactive-elements').class(dimInactiveElements),
         'bal-focusable': !item.disabled && !item.invisible,
       }}
       draggable={false}
@@ -114,7 +121,7 @@ export const TabButton: FunctionalComponent<TabButtonProps> = ({
       {...attrs}
       onClick={(ev: MouseEvent) => onSelectTab(ev, item)}
     >
-      {item.icon ? (
+      {item.icon || item.svg ? (
         <TabIcon
           accordion={false}
           item={item}

packages/core/src/components/bal-tabs/components/tab-icon.tsx

@@ -32,14 +32,19 @@ export const TabIcon: FunctionalComponent<TabIconProps> = ({
         ...bemEl.class(),
         ...bemEl.modifier('active').class(item.active),
         ...bemEl.modifier('disabled').class(item.disabled),
+        ...bemEl.modifier('display-svg').class(item.svg !== undefined),
       }}
     >
-      <bal-icon
-        size={isMobile || accordion ? 'small' : ''}
-        name={accordion ? 'nav-go-down' : item.icon}
-        color={iconColor}
-        turn={accordion && isAccordionOpen === true && item.active}
-      ></bal-icon>
+      {item.svg ? (
+        <bal-icon svg={item.svg} size="large" color="auto"></bal-icon>
+      ) : (
+        <bal-icon
+          size={isMobile || accordion ? 'small' : ''}
+          name={accordion ? 'nav-go-down' : item.icon}
+          color={iconColor}
+          turn={accordion && isAccordionOpen === true && item.active}
+        ></bal-icon>
+      )}
       {hasBubble ? (
         <bal-badge class={{ ...bemEl.element('bubble').class() }} size="small">
           {item.bubble}

packages/core/src/components/bal-tabs/components/tab-label.sass

@@ -14,6 +14,21 @@
   hyphens: auto
   white-space: nowrap
   user-select: none
+  &--with-svg
+    text-align: left
+    display: flex
+    flex-direction: column
+    +mobile
+      &:not(.bal-tabs__nav__item__label--active)
+        position: absolute
+        width: 1px
+        height: 1px
+        padding: 0
+        margin: -1px
+        overflow: hidden
+        white-space: nowrap
+        border: 0
+
   //
   // Color status
   color: var(--bal-tabs-tab-label-text-color)

packages/core/src/components/bal-tabs/components/tab-label.tsx

@@ -23,10 +23,12 @@ export const TabLabel: FunctionalComponent<TabLabelProps> = ({ item, inverted, h
         ...bemEl.modifier('disabled').class(item.disabled),
         ...bemEl.modifier('vertical').class(isVertical),
         ...bemEl.modifier(`context-${context}`).class(context !== undefined),
+        ...bemEl.modifier('with-svg').class(item.svg && item.svg.length > 0),
       }}
       data-testid="bal-tabs-item-label"
     >
       {item.label}
+      {item.subLabel && <span class={bemEl.element('sub-label').class()}>{item.subLabel}</span>}
       {hasBubble ? (
         <bal-badge class={{ ...bemEl.element('bubble').class() }} size="small">
           {item.bubble}

packages/core/src/components/bal-tabs/components/tab-nav.tsx

@@ -22,6 +22,7 @@ export interface TabNavProps {
   spaceless: boolean
   expanded: boolean
   isLinkList: boolean
+  dimInactiveElements: boolean
   verticalColSize: BalProps.BalTabsColSize
   iconPosition: BalProps.BalTabsIconPosition
   context?: BalProps.BalTabsContext
@@ -50,11 +51,15 @@ export const TabNav: FunctionalComponent<TabNavProps> = ({
   iconPosition,
   context,
   onSelectTab,
+  dimInactiveElements,
 }) => {
   const bemEl = BEM.block('tabs').element('nav')
 
   const tabs = items.filter(tab => !tab.invisible)
   const isFullHeight = inNavbar && !isTouch
+  const hasSubLabelInGroup = items.some(item => {
+    return item.subLabel && item.subLabel.length > 0
+  })
 
   const Button: FunctionalComponent<{ item: BalTabOption; index: number }> = ({ item, index }) => (
     <TabButton
@@ -74,6 +79,8 @@ export const TabNav: FunctionalComponent<TabNavProps> = ({
       expanded={expanded}
       clickable={clickable && !item.disabled}
       onSelectTab={onSelectTab}
+      hasSubLabelInGroup={hasSubLabelInGroup}
+      dimInactiveElements={dimInactiveElements}
     ></TabButton>
   )