Merge branch 'main' into mp/choice-group

primer · Jan 11, 2022 · fdb2147 · fdb2147
2 parents ce577f2 + a205ce9
commit fdb2147
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 22 deletions.
diff --git a/docs/content/Buttons.md b/docs/content/Buttons.md
@@ -15,10 +15,10 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `
 ```jsx live
 <>
   <Button>Button</Button>
-  <ButtonDanger>Button Danger</ButtonDanger>
-  <ButtonOutline>Button Outline</ButtonOutline>
-  <ButtonPrimary>Button Primary</ButtonPrimary>
-  <ButtonInvisible>Button Invisible</ButtonInvisible>
+  <ButtonDanger>Button danger</ButtonDanger>
+  <ButtonOutline>Button outline</ButtonOutline>
+  <ButtonPrimary>Button primary</ButtonPrimary>
+  <ButtonInvisible>Button invisible</ButtonInvisible>
   <ButtonClose onClick={() => window.alert('button clicked')} />
 
   <ButtonGroup display="block" my={2}>
@@ -27,7 +27,7 @@ To create a button group, wrap `Button` elements in the `ButtonGroup` element. `
     <Button>Button</Button>
   </ButtonGroup>
 
-  <ButtonTableList>Button Table List </ButtonTableList>
+  <ButtonTableList>Button table list </ButtonTableList>
 </>
 ```
 

diff --git a/docs/content/drafts/ActionList2.mdx b/docs/content/drafts/ActionList2.mdx
@@ -452,7 +452,7 @@ render(<SelectFields />)
     noUnnecessaryDeps: true,
     adaptsToThemes: true,
     adaptsToScreenSizes: true,
-    fullTestCoverage: false,
+    fullTestCoverage: true,
     usedInProduction: false,
     usageExamplesDocumented: true,
     hasStorybookStories: true,

diff --git a/docs/content/drafts/ActionMenu2.mdx b/docs/content/drafts/ActionMenu2.mdx
@@ -298,6 +298,27 @@ Use `ActionMenu` to choose an action from a list. If you’re looking for single
 | children\*                               | `React.ReactElement[] | React.ReactElement` | Required. Recommended: [`ActionList`](/drafts/ActionList2)                                    |
 | [OverlayProps](/Overlay#component-props) | -                     |          -          | Optional. Props to be spread on the internal [`AnchoredOverlay`](/AnchoredOverlay) component. |
 
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: true,
+    usedInProduction: true,
+    usageExamplesDocumented: true,
+    hasStorybookStories: true,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: true,
+    hasFigmaComponent: true
+  }}
+/>
+
 ## Further reading
 
 [Interface guidelines: Action List + Menu](https://primer.style/design/components/action-list)

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/__tests__/ActionMenu2.test.tsx b/src/__tests__/ActionMenu2.test.tsx
@@ -23,7 +23,9 @@ function SimpleActionMenu(): JSX.Element {
                 <ActionList.Divider />
                 <ActionList.Item>Copy link</ActionList.Item>
                 <ActionList.Item>Edit file</ActionList.Item>
-                <ActionList.Item variant="danger">Delete file</ActionList.Item>
+                <ActionList.Item variant="danger" onClick={event => event.preventDefault()}>
+                  Delete file
+                </ActionList.Item>
               </ActionList>
             </ActionMenu.Overlay>
           </ActionMenu>
@@ -88,6 +90,19 @@ describe('ActionMenu', () => {
     cleanup()
   })
 
+  it('should not close Menu if event is prevented', async () => {
+    const component = HTMLRender(<SimpleActionMenu />)
+    const button = component.getByText('Toggle Menu')
+
+    fireEvent.click(button)
+    const menuItems = await waitFor(() => component.getAllByRole('menuitem'))
+    fireEvent.click(menuItems[3])
+    // menu should still be open
+    expect(component.getByRole('menu')).toBeInTheDocument()
+
+    cleanup()
+  })
+
   it('should throw when selectionVariant is provided to ActionList within ActionMenu', async () => {
     // we expect console.error to be called, so we suppress that in the test
     const mockError = jest.spyOn(console, 'error').mockImplementation(() => jest.fn())

diff --git a/src/stories/AvatarStack.stories.tsx b/src/stories/AvatarStack.stories.tsx
@@ -1,4 +1,5 @@
 import AvatarStack from '../AvatarStack'
+import Avatar from '../Avatar'
 import {Meta} from '@storybook/react'
 import React from 'react'
 import {ThemeProvider} from '..'
@@ -27,10 +28,10 @@ export default meta
 export function AvatarStackStory(): JSX.Element {
   return (
     <AvatarStack>
-      <img src="https://avatars.githubusercontent.com/primer" alt="" />
-      <img src="https://avatars.githubusercontent.com/github" alt="" />
-      <img src="https://avatars.githubusercontent.com/primer" alt="" />
-      <img src="https://avatars.githubusercontent.com/github" alt="" />
+      <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+      <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+      <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+      <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
     </AvatarStack>
   )
 }