From 5e85447ec418e45de4335a870ba9860e4a277df4 Mon Sep 17 00:00:00 2001
From: Derrick Marcey <demarcey@microsoft.com>
Date: Fri, 30 Aug 2019 13:50:37 -0400
Subject: [PATCH 1/2] Fixing some Tab/UnderlineNav Link types.

---
 index.d.ts                            | 10 ++++++----
 pages/components/docs/TabNav.md       |  1 +
 pages/components/docs/UnderlineNav.md | 28 ++++++++++++++-------------
 src/TabNav.js                         |  5 +++--
 src/UnderlineNav.js                   |  1 +
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index e2557e2e8a2..73dd5380775 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -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
diff --git a/pages/components/docs/TabNav.md b/pages/components/docs/TabNav.md
index 87ed900d2ed..6918d61f7f6 100644
--- a/pages/components/docs/TabNav.md
+++ b/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'}
diff --git a/pages/components/docs/UnderlineNav.md b/pages/components/docs/UnderlineNav.md
index b23c61004c3..4d74cb98d99 100644
--- a/pages/components/docs/UnderlineNav.md
+++ b/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'}
diff --git a/src/TabNav.js b/src/TabNav.js
index ddb64bf1f04..ce4cfee4ff2 100644
--- a/src/TabNav.js
+++ b/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
 }
diff --git a/src/UnderlineNav.js b/src/UnderlineNav.js
index 9509fdb11c6..d6076c3127b 100644
--- a/src/UnderlineNav.js
+++ b/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
 }

From 0d617849142283b1b9bf8fb94f7312aa1e659640 Mon Sep 17 00:00:00 2001
From: Derrick Marcey <demarcey@microsoft.com>
Date: Fri, 30 Aug 2019 21:04:03 -0400
Subject: [PATCH 2/2] Made href optional on Link types.

---
 index.d.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 73dd5380775..1bfcd915472 100644
--- a/index.d.ts
+++ b/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
   }
 
@@ -242,7 +242,7 @@ declare module '@primer/components' {
   }
 
   export interface TabNavLinkProps extends CommonProps {
-    href: string
+    href?: string
     selected?: boolean
   }
 
@@ -286,7 +286,7 @@ declare module '@primer/components' {
   }
 
   export interface UnderlineNavLinkProps extends CommonProps {
-    href: string
+    href?: string
     selected?: boolean
   }