fix(tabs): add missing target prop. Closes #700

baloise · Oct 10, 2022 · 808d52e · 808d52e
1 parent dda1799
commit 808d52e
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 1 deletion.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -2238,6 +2238,10 @@ export namespace Components {
           * Sets the tab active.
          */
         "setActive": (active: boolean) => Promise<void>;
+        /**
+          * Specifies where to display the linked URL. Only applies when an `href` is provided.
+         */
+        "target": Props.BalButtonTarget;
         /**
           * This is the key of the tab.
          */
@@ -5845,6 +5849,10 @@ declare namespace LocalJSX {
           * Tell's if the linking is done by a router.
          */
         "prevent"?: boolean;
+        /**
+          * Specifies where to display the linked URL. Only applies when an `href` is provided.
+         */
+        "target"?: Props.BalButtonTarget;
         /**
           * This is the key of the tab.
          */

diff --git a/packages/components/src/components/bal-tabs/bal-tab-item/bal-tab-item.tsx b/packages/components/src/components/bal-tabs/bal-tab-item/bal-tab-item.tsx
@@ -1,4 +1,5 @@
 import { Component, Host, h, Prop, Method, State, Element, EventEmitter, Event } from '@stencil/core'
+import { Props } from '../../../types'
 import { BalTabOption } from '../bal-tab.type'
 
 @Component({
@@ -29,6 +30,12 @@ export class TabItem {
    */
   @Prop({ reflect: true }) href = ''
 
+  /**
+   * Specifies where to display the linked URL.
+   * Only applies when an `href` is provided.
+   */
+  @Prop() target: Props.BalButtonTarget = '_self'
+
   /**
    * If `true` a small red bubble is added to the tab.
    */
@@ -91,6 +98,7 @@ export class TabItem {
       icon: this.icon,
       label: this.label,
       href: this.href,
+      target: this.target,
       active: this.active,
       disabled: this.disabled,
       done: this.done,

diff --git a/packages/components/src/components/bal-tabs/bal-tab.type.ts b/packages/components/src/components/bal-tabs/bal-tab.type.ts
@@ -6,6 +6,7 @@ export interface BalTabOption {
   label: string
   icon?: string
   href: string
+  target: Props.BalButtonTarget
   active: boolean
   disabled: boolean
   done: boolean
@@ -60,6 +61,7 @@ export interface TabItemProps {
   disabled: boolean
   bubble: boolean | string
   href: string | undefined
+  target: Props.BalButtonTarget
   label: string | undefined
   context: Props.BalTabsInterface
   iconPosition: Props.BalTabsIconPosition

diff --git a/packages/components/src/components/bal-tabs/components/tab-item.tsx b/packages/components/src/components/bal-tabs/components/tab-item.tsx
@@ -9,6 +9,7 @@ export const TabItem: FunctionalComponent<TabItemProps> = ({
   expanded,
   disabled,
   href,
+  target,
   label,
   vertical,
   iconPosition,
@@ -38,7 +39,8 @@ export const TabItem: FunctionalComponent<TabItemProps> = ({
   if (href) {
     hrefAttribute = {
       href,
-    }
+      target,
+    } as any
   }
 
   const bubbleString = bubble === true || bubble === false ? '' : bubble

diff --git a/packages/components/src/components/bal-tabs/components/tabs.tsx b/packages/components/src/components/bal-tabs/components/tabs.tsx
@@ -84,6 +84,7 @@ export const TabList: FunctionalComponent<TabProps> = ({
               iconPosition={iconPosition}
               disabled={tab.disabled}
               href={tab.href}
+              target={tab.target}
               label={tab.label}
               bubble={tab.bubble}
               onSelectTab={e => onSelectTab(e, tab)}

diff --git a/packages/components/src/components/bal-tabs/stories/bal-tabs.stories.ts b/packages/components/src/components/bal-tabs/stories/bal-tabs.stories.ts
@@ -19,6 +19,7 @@ export const Basic = args => ({
   <bal-tab-item bubble value="tab-c" label="Tab C">Content of Tab C</bal-tab-item>
   <bal-tab-item value="tab-d" label="Tab D" hidden>Hidden Content of Tab D</bal-tab-item>
   <bal-tab-item value="tab-e" label="Tab E" disabled>Content of Tab E</bal-tab-item>
+  <bal-tab-item value="tab-link" label="Tab link" href="https://github.com/baloise-incubator/design-system" target="_blank">Content of Tab link</bal-tab-item>
 </bal-tabs>`,
 })
 Basic.args = {