feat(tab): Allow to render Tab as an anchor node (#928)

Author: barteksekula

packages/tab/README.md

@@ -87,6 +87,7 @@ isMinWidthIndicator | boolean | If true will display the `<TabIndicator />` to t
 previousIndicatorClientRect | ClientRect | The indicator's clientRect that was previously activated.
 onInteraction | Function | The function is called if the tab receives any interaction
 stacked | boolean | If true will display the tab icon and label to flow vertically instead of horizontally.
+tag | String | Customizes the tab tag (defaults to `'button'`). The only available options are 'button' or 'a'.
 
 ## Sass Mixins
 

packages/tab/index.tsx

@@ -29,14 +29,16 @@ import {MDCTabAdapter} from '@material/tab/adapter';
 
 import TabRipple, {TabRippleProps} from './TabRipple';
 
-export interface TabProps extends React.HTMLProps<HTMLButtonElement> {
+export interface TabProps
+  extends React.HTMLProps<HTMLButtonElement | HTMLAnchorElement> {
   active?: boolean;
   focusOnActivate?: boolean;
   isFadingIndicator?: boolean;
   indicatorContent?: React.ReactNode;
   minWidth?: boolean;
   isMinWidthIndicator?: boolean;
   stacked?: boolean;
+  tag?: 'button' | 'a';
   previousIndicatorClientRect?: ClientRect;
   onInteraction?: () => void;
 }
@@ -68,6 +70,7 @@ export default class Tab extends React.Component<TabProps, TabState> {
     minWidth: false,
     isMinWidthIndicator: false,
     stacked: false,
+    tag: 'button',
     onInteraction: () => null,
   };
 
@@ -195,6 +198,7 @@ export default class Tab extends React.Component<TabProps, TabState> {
       minWidth,
       onInteraction,
       stacked,
+      tag: Tag,
       /* eslint-enable */
       children,
       isMinWidthIndicator,
@@ -203,7 +207,9 @@ export default class Tab extends React.Component<TabProps, TabState> {
     const {tabIndex, ['aria-selected']: ariaSelected} = this.state;
 
     return (
-      <button
+      // https://github.com/Microsoft/TypeScript/issues/28892
+      // @ts-ignore
+      <Tag
         className={this.classes}
         role='tab'
         aria-selected={ariaSelected}
@@ -219,7 +225,7 @@ export default class Tab extends React.Component<TabProps, TabState> {
         </span>
         {isMinWidthIndicator ? null : this.renderIndicator()}
         <TabRipple ref={this.tabRippleRef} />
-      </button>
+      </Tag>
     );
   }
 

test/unit/tab/index.test.tsx

@@ -25,6 +25,13 @@ test('adds the stacked class if props.stacked is true', () => {
   assert.isTrue(wrapper.hasClass('mdc-tab--stacked'));
 });
 
+test('renders as anchor if props.tag is a and href is set', () => {
+  const wrapper = mount(<Tab tag='a' href='/foobar' />);
+  const node = wrapper.getDOMNode();
+  assert.equal(node.tagName.toLowerCase(), 'a');
+  assert.equal(node.getAttribute('href'), '/foobar');
+});
+
 test('adds the active class if props.active is true on mount', () => {
   const wrapper = shallow(<Tab active />);
   assert.isTrue(wrapper.hasClass('mdc-tab--active'));