Allow SelectMenu.Item to be a or button

docs/content/SelectMenu.md

@@ -114,10 +114,12 @@ SelectMenu.List components do not get any additional props besides system props.
 
 ## SelectMenu.Item
 
-Individual items in a select menu.
+Individual items in a select menu. SelectMenu.Item renders an anchor tag by default, you'll need to make sure to provide the appropriate `href`. 
+
+You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#the-as-prop). Be sure to consider [which HTML element is the right choice](https://marcysutton.com/links-vs-buttons-in-modern-web-applications) for your usage of the component. 
 
 ```jsx
-<SelectMenu.Item selected={true}>
+<SelectMenu.Item href="/link/to/thing" selected={true}>
   {/* wraps an individual list item*/}
 </SelectMenu.Item>
 ```

index.d.ts

@@ -302,10 +302,16 @@ declare module '@primer/components' {
 
   export interface SelectMenuListProps extends CommonProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {}
 
-  export interface SelectMenuItemProps extends Omit<CommonProps, 'as'>,
-    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
-    selected?: boolean
+  interface SelectMenuItemCommonProps extends CommonProps {
+    selected?: boolean;
+  }
+  interface SelectMenuItemAsButtonProps extends SelectMenuItemCommonProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+    as: "button"
+  }
+  interface SelectMenuItemAsAnchorProps extends SelectMenuItemCommonProps, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+    as: "a"
   }
+  export type SelectMenuItemProps = SelectMenuItemAsButtonProps | SelectMenuItemAsAnchorProps;
 
   export interface SelectMenuFooterProps extends CommonProps, Omit<React.HTMLAttributes<HTMLElement>, 'color'> {}
 

src/SelectMenu/SelectMenuItem.js

@@ -19,6 +19,8 @@ export const listItemStyles = css`
   border-bottom: ${get('borders.1')} ${get('colors.border.grayLight')};
   color: ${get('colors.text.gray')};
   text-decoration: none;
+  font-size: ${get('fontSizes.0')};
+  width: 100%;
 
   &:hover {
     text-decoration: none;
@@ -95,9 +97,7 @@ const StyledItem = styled.a.attrs(() => ({
   ${COMMON}
 `
 
-// 'as' is spread out because we don't want users to be able to change the tag. using something
-// other than 'a' will break a11y.
-const SelectMenuItem = ({children, selected, theme, onClick, as, ...rest}) => {
+const SelectMenuItem = ({children, selected, theme, onClick, ...rest}) => {
   const menuContext = useContext(MenuContext)
 
   // close the menu when an item is clicked

src/__tests__/SelectMenu.js

@@ -74,16 +74,6 @@ describe('SelectMenu', () => {
     expect(component.find('details').length).toEqual(1)
   })
 
-  it('does not allow the "as" prop on SelectMenu.Item', () => {
-    const component = mount(<BasicSelectMenu as="span" />)
-    expect(
-      component
-        .find("[data-test='menu-item']")
-        .first()
-        .getDOMNode().tagName
-    ).toEqual('A')
-  })
-
   it('shows correct initial tab', () => {
     const testInstance = renderRoot(<MenuWithTabs />)
     expect(testInstance.findByProps({'aria-selected': true}).props.children).toBe('Organization')