chore: use li as base nav item for simpler extension of element class

Author: geotrev

packages/chrome/src/styled/nav/StyledBaseNavItem.ts

@@ -26,11 +26,7 @@ const sizeStyles = (props: ThemeProps<DefaultTheme>) => {
   `;
 };
 
-/**
- * 1. Button reset.
- * 2. Anchor reset.
- */
-export const StyledBaseNavItem = styled.button.attrs({
+export const StyledBaseNavItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`
@@ -44,12 +40,7 @@ export const StyledBaseNavItem = styled.button.attrs({
     box-shadow 0.1s ease-in-out,
     background-color 0.1s ease-in-out,
     opacity 0.1s ease-in-out;
-  border: none; /* [1] */
   box-sizing: border-box;
-  background: transparent; /* [1] */
-  text-decoration: none; /* [2] */
-  color: inherit; /* [2] */
-  font-size: inherit; /* [1] */
 
   ${props => sizeStyles(props)}
 `;

packages/chrome/src/styled/nav/StyledBrandmarkNavItem.ts

@@ -13,8 +13,7 @@ const COMPONENT_ID = 'chrome.brandmark_nav_list_item';
 
 export const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION,
-  as: 'li'
+  'data-garden-version': PACKAGE_VERSION
 })`
   flex: 0;
   order: 1;

packages/chrome/src/styled/nav/StyledLogoNavItem.ts

@@ -51,8 +51,7 @@ export interface IStyledLogoNavItemProps extends ThemeProps<DefaultTheme> {
 
 export const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': PACKAGE_VERSION,
-  as: 'li'
+  'data-garden-version': PACKAGE_VERSION
 })<IStyledLogoNavItemProps>`
   flex: 0;
   order: 0;

packages/chrome/src/styled/nav/StyledNavButton.ts

@@ -91,9 +91,14 @@ export const StyledNavButton = styled(StyledBaseNavItem).attrs({
   flex: 1;
   justify-content: ${props => props.isExpanded && 'start'};
   margin: 0; /* [2] */
+  border: none; /* [2] */
+  background: transparent; /* [2] */
   cursor: ${props => (props.isCurrent ? 'default' : 'pointer')};
   min-width: 0; /* [5] */
   text-align: ${props => props.isExpanded && 'inherit'};
+  text-decoration: none; /* [1] */
+  color: inherit; /* [1] */
+  font-size: inherit; /* [2] */
 
   &:hover,
   &:focus {

packages/chrome/src/styled/nav/StyledNavListItem.ts

@@ -7,10 +7,11 @@
 
 import styled from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseNavItem } from './StyledBaseNavItem';
 
 const COMPONENT_ID = 'chrome.nav_list_item';
 
-export const StyledNavListItem = styled.li.attrs({
+export const StyledNavListItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`