Add align='right' prop to SelectMenu.Modal

docs/content/SelectMenu.md

@@ -86,12 +86,36 @@ Used to wrap the content in a `SelectMenu`.
 </SelectMenu.Menu>
 ```
 
+### Right-aligned modal
+
+Use the `align='right'` prop to align the modal to the right. Note that this only aligns the modal contents, and not the SelectMenu itself.
+
+```jsx live
+<Flex justifyContent="flex-end" as={Relative}>
+  <SelectMenu>
+    <Button as="summary">Projects</Button>
+    <SelectMenu.Modal align="right">
+      <SelectMenu.Header>Projects</SelectMenu.Header>
+      <SelectMenu.List>
+        <SelectMenu.Item href="#">Primer Components bugs</SelectMenu.Item>
+        <SelectMenu.Item href="#">Primer Components roadmap</SelectMenu.Item>
+        <SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
+        <SelectMenu.Item href="#">Project 4</SelectMenu.Item>
+      </SelectMenu.List>
+    </SelectMenu.Modal>
+  </SelectMenu>
+</Flex>
+```
+
 ### System Props
 
 SelectMenu.Modal components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
 
 ### Component Props
-SelectMenu.Modal components do not get any additional props besides system props.
+
+| Prop name | Type   | Default | Description                                       |
+| :-------- | :----- | :------ | ------------------------------------------------- |
+| align     | String | 'left'  | Use `right` to align the select menu to the right |
 
 
 ## SelectMenu.List

index.d.ts

@@ -287,7 +287,9 @@ declare module '@primer/components' {
     initialTab?: string
   }
 
-  export interface SelectMenuModalProps extends CommonProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {}
+  export interface SelectMenuModalProps extends CommonProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+    align?: 'left' | 'right'
+  }
 
   export interface SelectMenuListProps extends CommonProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {}
 

src/SelectMenu/SelectMenuModal.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled, {keyframes, css} from 'styled-components'
 import {COMMON, get} from '../constants'
 import theme from '../theme'
@@ -69,7 +70,7 @@ const modalWrapperStyles = css`
   @media (min-width: ${get('breakpoints.0')}) {
     position: absolute;
     top: auto;
-    right: auto;
+    right: ${props => (props.align === 'right' ? '0' : 'auto')};
     bottom: auto;
     left: auto;
     padding: 0;
@@ -95,10 +96,12 @@ const SelectMenuModal = ({children, theme, ...rest}) => {
 }
 
 SelectMenuModal.defaultProps = {
+  align: 'left',
   theme
 }
-
 SelectMenuModal.propTypes = {
+  align: PropTypes.oneOf(['left', 'right']),
+  theme: PropTypes.object,
   ...COMMON.propTypes,
   ...sx.propTypes
 }

src/__tests__/SelectMenu.js

@@ -1,17 +1,17 @@
 import React from 'react'
 import {SelectMenu, Button} from '..'
-import {mount, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports} from '../utils/testing'
+import {mount, render, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports} from '../utils/testing'
 import {COMMON} from '../constants'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
 expect.extend(toHaveNoViolations)
 
-const BasicSelectMenu = ({onClick, as}) => {
+const BasicSelectMenu = ({onClick, as, align = 'left'}) => {
   return (
     <SelectMenu as={as}>
       <Button as="summary">Projects</Button>
-      <SelectMenu.Modal title="Projects">
+      <SelectMenu.Modal title="Projects" align={align}>
         <SelectMenu.List>
           <SelectMenu.Item selected href="#">
             Primer Components bugs
@@ -128,4 +128,8 @@ describe('SelectMenu', () => {
     item.simulate('click')
     expect(component.getDOMNode().attributes.open).toBeFalsy()
   })
+
+  it('right-aligned modal has right: 0px', () => {
+    expect(render(<BasicSelectMenu align="right" />)).toMatchSnapshot()
+  })
 })