Fixing some Tab/UnderlineNav Link types.

index.d.ts

@@ -211,7 +211,7 @@ declare module '@primer/components' {
   export const Label: React.FunctionComponent<LabelProps>
 
   export interface LinkProps extends CommonProps, TypographyProps {
-    href: string
+    href?: string
     underline?: boolean
   }
 
@@ -241,12 +241,13 @@ declare module '@primer/components' {
     'aria-label'?: string
   }
 
-  export interface TabNavItemProps extends CommonProps {
+  export interface TabNavLinkProps extends CommonProps {
+    href?: string
     selected?: boolean
   }
 
   export const TabNav: React.FunctionComponent<TabNavProps> & {
-    Item: React.FunctionComponent<TabNavItemProps>
+    Link: React.FunctionComponent<TabNavLinkProps>
   }
 
   export interface TextInputProps extends CommonProps {
@@ -284,12 +285,13 @@ declare module '@primer/components' {
     label?: string
   }
 
-  export interface UnderlineNavItemProps extends CommonProps {
+  export interface UnderlineNavLinkProps extends CommonProps {
+    href?: string
     selected?: boolean
   }
 
   export const UnderlineNav: React.FunctionComponent<UnderlineNavProps> & {
-    Item: React.FunctionComponent<UnderlineNavItemProps>
+    Link: React.FunctionComponent<UnderlineNavLinkProps>
   }
 
   export const theme: Object

pages/components/docs/TabNav.md

@@ -41,6 +41,7 @@ TabNav and TabNav.Link components get `COMMON` system props. Read our [System Pr
 | Prop name | Type    | Description                                      |
 | :-------- | :------ | :----------------------------------------------- |
 | as        | String  | sets the HTML tag for the component              |
+| href      | String  | URL to be used for the Link                      |
 | selected  | Boolean | Used to style the link as selected or unselected |
 
 export const meta = {displayName: 'TabNav'}

pages/components/docs/UnderlineNav.md

@@ -4,8 +4,8 @@ Use the UnderlineNav component to style navigation with a minimal underlined sel
 
 To use UnderlineNav with [react-router](https://github.com/ReactTraining/react-router) or
 [react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
-```as={NavLink}``` and omit the ```selected``` prop.
-This ensures that the NavLink gets ```activeClassName='selected'```
+`as={NavLink}` and omit the `selected` prop.
+This ensures that the NavLink gets `activeClassName='selected'`
 
 **Attention:** Make sure to properly label your `UnderlineNav` with an `aria-label` to provide context about the type of navigation contained in `UnderlineNav`.
 
@@ -28,21 +28,23 @@ This ensures that the NavLink gets ```activeClassName='selected'```
 
 UnderlineNav and UnderlineNav.Link components get `COMMON` system props. Read our [System Props](/components/docs/system-props) doc page for a full list of available props.
 
-
 ## Component props
 
 ### UnderlineNav
-| Prop name | Type | Description |
-| :- | :- | :- |
-| actions | Node | Place another element, such as a button, to the opposite side of the navigation items.|
-| align | String | Use `right` to have navigation items aligned right. |
-| full | Boolean | Used to make navigation fill the width of the container. |
-| aria-label | String | Used to set the `aria-label` on the top level `<nav>` element. |
+
+| Prop name  | Type    | Description                                                                            |
+| :--------- | :------ | :------------------------------------------------------------------------------------- |
+| actions    | Node    | Place another element, such as a button, to the opposite side of the navigation items. |
+| align      | String  | Use `right` to have navigation items aligned right.                                    |
+| full       | Boolean | Used to make navigation fill the width of the container.                               |
+| aria-label | String  | Used to set the `aria-label` on the top level `<nav>` element.                         |
 
 ### UnderlineNav.Link
-| Prop name | Type | Description |
-| :- | :- | :- |
-| as | String | sets the HTML tag for the component|
-| selected | Boolean | Used to style the link as selected or unselected |
+
+| Prop name | Type    | Description                                      |
+| :-------- | :------ | :----------------------------------------------- |
+| as        | String  | sets the HTML tag for the component              |
+| href      | String  | URL to be used for the Link                      |
+| selected  | Boolean | Used to style the link as selected or unselected |
 
 export const meta = {displayName: 'UnderlineNav'}

src/TabNav.js

@@ -8,10 +8,10 @@ import theme from './theme'
 const ITEM_CLASS = 'TabNav-item'
 const SELECTED_CLASS = 'selected'
 
-function TabNavBase({actions, className, align, children, full, label, ...rest}) {
+function TabNavBase({actions, className, align, children, full, ...rest}) {
   const classes = classnames(className, 'TabNav')
   return (
-    <nav className={classes} aria-label={label} {...rest}>
+    <nav className={classes} {...rest}>
       <div className="TabNav-body">{children}</div>
     </nav>
   )
@@ -72,6 +72,7 @@ TabNav.Link.defaultProps = {
 
 TabNav.Link.propTypes = {
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  href: PropTypes.string,
   selected: PropTypes.bool,
   ...COMMON.propTypes
 }

src/UnderlineNav.js

@@ -106,6 +106,7 @@ UnderlineNav.Link.defaultProps = {
 
 UnderlineNav.Link.propTypes = {
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  href: PropTypes.string,
   selected: PropTypes.bool,
   ...COMMON.propTypes
 }