Adding href prop to EuiTab

src-docs/src/views/tabs/tabs.js

@@ -11,21 +11,31 @@ class EuiTabsExample extends Component {
         id: 'cobalt',
         name: 'Cobalt',
         disabled: false,
+        href: '',
       },
       {
         id: 'dextrose',
         name: 'Dextrose',
         disabled: false,
+        href: '',
       },
       {
         id: 'hydrogen',
         name: 'Hydrogen',
         disabled: true,
+        href: '',
       },
       {
         id: 'monosodium_glutammate',
         name: 'Monosodium Glutamate',
         disabled: false,
+        href: '',
+      },
+      {
+        id: 'elastic_link',
+        name: 'Elastic Website',
+        disabled: false,
+        href: 'https://www.elastic.co/',
       },
     ];
 
@@ -41,15 +51,25 @@ class EuiTabsExample extends Component {
   };
 
   renderTabs() {
-    return this.tabs.map((tab, index) => (
-      <EuiTab
-        onClick={() => this.onSelectedTabChanged(tab.id)}
-        isSelected={tab.id === this.state.selectedTabId}
-        disabled={tab.disabled}
-        key={index}>
-        {tab.name}
-      </EuiTab>
-    ));
+    return this.tabs.map((tab, index) => {
+      return !tab.href ? (
+        <EuiTab
+          onClick={() => this.onSelectedTabChanged(tab.id)}
+          isSelected={tab.id === this.state.selectedTabId}
+          disabled={tab.disabled}
+          key={index}>
+          {tab.name}
+        </EuiTab>
+      ) : (
+        <EuiTab
+          href={tab.href}
+          key={index}
+          target="_blank"
+          disabled={tab.disabled}>
+          {tab.name}
+        </EuiTab>
+      );
+    });
   }
 
   render() {

src/components/tabs/_tabs.scss

@@ -78,6 +78,10 @@
     }
   }
 
+  &.euiTab-isLink {
+    color: $euiTextColor;
+  }
+
   // Small Tabs Group Modifier
 
   .euiTabs--small & {

src/components/tabs/index.d.ts

@@ -1,22 +1,11 @@
-import {
-  MouseEventHandler,
-  ReactNode,
-  FunctionComponent,
-  HTMLAttributes,
-} from 'react';
+import { ReactNode, FunctionComponent, HTMLAttributes } from 'react';
 import { CommonProps } from '../common';
 
 declare module '@elastic/eui' {
   type TAB_SIZES = 's' | 'm';
 
   type TAB_DISPLAYS = 'default' | 'condensed';
 
-  interface EuiTabProps {
-    onClick: MouseEventHandler<HTMLButtonElement>;
-    isSelected?: boolean;
-    disabled?: boolean;
-  }
-
   interface EuiTabsProps {
     size?: TAB_SIZES;
     display?: TAB_DISPLAYS;
@@ -42,9 +31,6 @@ declare module '@elastic/eui' {
     autoFocus?: TABBED_CONTENT_AUTOFOCUS;
   }
 
-  export const EuiTab: FunctionComponent<
-    EuiTabProps & CommonProps & HTMLAttributes<HTMLDivElement>
-  >;
   export const EuiTabs: FunctionComponent<
     EuiTabsProps & CommonProps & HTMLAttributes<HTMLDivElement>
   >;

src/components/tabs/tab.tsx

@@ -0,0 +1,79 @@
+import React, {
+  MouseEventHandler,
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  FunctionComponent,
+  Ref,
+} from 'react';
+import classNames from 'classnames';
+import { ExclusiveUnion } from '../common';
+import { getSecureRelForTarget } from '../../services';
+
+export interface EuiTabProps {
+  isSelected?: boolean;
+  disabled?: boolean;
+}
+
+type EuiTabPropsForAnchor = EuiTabProps &
+  AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href?: string;
+    buttonRef?: Ref<HTMLAnchorElement>;
+  };
+
+type EuiTabPropsForButton = EuiTabProps &
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    buttonRef?: Ref<HTMLButtonElement>;
+  };
+
+export type Props = ExclusiveUnion<EuiTabPropsForAnchor, EuiTabPropsForButton>;
+
+export const EuiTab: FunctionComponent<Props> = ({
+  isSelected,
+  onClick,
+  children,
+  className,
+  disabled,
+  buttonRef,
+  href,
+  target,
+  rel,
+  ...rest
+}) => {
+  const classes = classNames('euiTab', className, {
+    'euiTab-isSelected': isSelected,
+    'euiTab-isDisabled': disabled,
+    'euiTab-isLink': href && !disabled,
+  });
+
+  //  <a> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
+  //  this is a button and piggyback off its disabled styles.
+  if (href && !disabled) {
+    const secureRel = getSecureRelForTarget({ href, target, rel });
+
+    return (
+      <a
+        className={classes}
+        href={href}
+        target={target}
+        rel={secureRel}
+        ref={buttonRef as Ref<HTMLAnchorElement>}
+        {...rest as AnchorHTMLAttributes<HTMLAnchorElement>}>
+        <span className="euiTab__content">{children}</span>
+      </a>
+    );
+  }
+
+  return (
+    <button
+      role="tab"
+      aria-selected={!!isSelected}
+      type="button"
+      className={classes}
+      onClick={onClick as MouseEventHandler<HTMLButtonElement>}
+      disabled={disabled}
+      {...rest as ButtonHTMLAttributes<HTMLButtonElement>}>
+      <span className="euiTab__content">{children}</span>
+    </button>
+  );
+};

src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap

@@ -85,7 +85,6 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
       >
         <EuiTab
           aria-controls="42"
-          disabled={false}
           id="es"
           isSelected={false}
           key="es"
@@ -95,7 +94,6 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
             aria-controls="42"
             aria-selected={false}
             className="euiTab"
-            disabled={false}
             id="es"
             onClick={[Function]}
             role="tab"
@@ -111,7 +109,6 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
         <EuiTab
           aria-controls="42"
           data-test-subj="kibanaTab"
-          disabled={false}
           id="kibana"
           isSelected={true}
           key="kibana"
@@ -122,7 +119,6 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
             aria-selected={true}
             className="euiTab euiTab-isSelected"
             data-test-subj="kibanaTab"
-            disabled={false}
             id="kibana"
             onClick={[Function]}
             role="tab"