ActionMenu v2: Use Button v2 as ActionMenu.Button + caret (#1779)

* Use Button v2 in ActionMenu v2 * add changeset * update snapshots
primer · Jan 19, 2022 · 2630800 · 2630800
1 parent 2febaea
commit 2630800
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 53 deletions.
diff --git a/.changeset/actionmenu2-use-button2-as-anchor.md b/.changeset/actionmenu2-use-button2-as-anchor.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionMenu v2: ActionMenu.Button now uses Button v2
diff --git a/docs/content/drafts/ActionMenu2.mdx b/docs/content/drafts/ActionMenu2.mdx
@@ -84,15 +84,13 @@ You can choose to have a different _anchor_ for the Menu dependending on the app
 &nbsp;
 
 ```javascript live noinline
-// import {ActionMenu, ActionList} from '@primer/react/drafts'
-const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+// import {ActionMenu, ActionList, IconButton} from '@primer/react/drafts'
+const {ActionMenu, ActionList, IconButton} = drafts // ignore docs silliness; import like that ↑
 
 render(
   <ActionMenu>
     <ActionMenu.Anchor>
-      <ButtonInvisible aria-label="Open column options">
-        <KebabHorizontalIcon />
-      </ButtonInvisible>
+      <IconButton variant="invisible" icon={KebabHorizontalIcon} aria-label="Open column options" />
     </ActionMenu.Anchor>
 
     <ActionMenu.Overlay>
@@ -196,7 +194,7 @@ To create an anchor outside of the menu, you need to switch to controlled mode f
 
 ```javascript live noinline
 // import {ActionMenu, ActionList} from '@primer/react/drafts'
-const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+const {ActionMenu, ActionList, Button} = drafts // ignore docs silliness; import like that ↑
 
 const Example = () => {
   const [open, setOpen] = React.useState(false)
@@ -281,9 +279,9 @@ Use `ActionMenu` to choose an action from a list. If you’re looking for single
 
 ### ActionMenu.Button
 
-| Type                                    | Default | Description                                                                                                          |
-| :-------------------------------------- | :-----: | :------------------------------------------------------------------------------------------------------------------- |
-| [ButtonProps](/Buttons#component-props) |    -    | Optional. You can pass all of the props that you would pass to a [`Button`](/Buttons) component like `variant`, `sx` |
+| Type                                             | Default | Description                                                                                                       |
+| :----------------------------------------------- | :-----: | :---------------------------------------------------------------------------------------------------------------- |
+| [Button v2 props](/drafts/Button2#api-reference) |    -    | You can pass all of the props that you would pass to a [`Button`](/drafts/Button2) component like `variant`, `sx` |
 
 ### ActionMenu.Anchor
 
@@ -328,3 +326,4 @@ Use `ActionMenu` to choose an action from a list. If you’re looking for single
 - [ActionList](/drafts/ActionList2)
 - [DropdownMenu](/DropdownMenu)
 - [SelectPanel](/SelectPanel)
+- [Button](/drafts/Button2)
diff --git a/src/ActionMenu2.tsx b/src/ActionMenu2.tsx
@@ -1,11 +1,12 @@
-import Button, {ButtonProps} from './Button'
 import React from 'react'
 import {useSSRSafeId} from '@react-aria/ssr'
+import {TriangleDownIcon} from '@primer/octicons-react'
 import {AnchoredOverlay, AnchoredOverlayProps} from './AnchoredOverlay'
 import {OverlayProps} from './Overlay'
 import {useProvidedRefOrCreate, useProvidedStateOrCreate} from './hooks'
 import {Divider} from './ActionList2/Divider'
 import {ActionListContainerContext} from './ActionList2/ActionListContainerContext'
+import {Button, ButtonProps} from './Button2'
 import {MandateProps} from './utils/types'
 
 type MenuContextProps = Pick<
@@ -75,7 +76,7 @@ export type MenuButtonProps = ButtonProps
 const MenuButton = React.forwardRef<AnchoredOverlayProps['anchorRef'], ButtonProps>((props, anchorRef) => {
   return (
     <Anchor ref={anchorRef}>
-      <Button {...props} />
+      <Button trailingIcon={TriangleDownIcon} type="button" {...props} />
     </Anchor>
   )
 })

diff --git a/src/__tests__/__snapshots__/ActionMenu2.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu2.test.tsx.snap
@@ -7,72 +7,90 @@ exports[`ActionMenu renders consistently 1`] = `
   color: #24292f;
 }
 
-.c1 {
-  position: relative;
+.c2 {
   display: inline-block;
-  padding: 6px 16px;
+  margin-left: 8px;
+}
+
+.c1 {
+  border-radius: 6px;
+  border: 1px solid;
+  border-color: rgba(27,31,36,0.15);
   font-family: inherit;
   font-weight: 600;
   line-height: 20px;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  border-radius: 6px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   -webkit-text-decoration: none;
   text-decoration: none;
   text-align: center;
+  display: grid;
+  grid-template-areas: "leadingIcon text trailingIcon";
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 16px;
+  padding-right: 16px;
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(27,31,36,0.15);
   box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
-.c1:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
 .c1:focus {
   outline: none;
 }
 
 .c1:disabled {
   cursor: default;
+  color: #8c959f;
+  background-color: btn.disabledBg;
 }
 
 .c1:disabled svg {
   opacity: 0.6;
 }
 
-.c1:hover {
+.c1 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c1 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
+}
+
+.c1 [data-component="text"] {
+  grid-area: text;
+}
+
+.c1 [data-component="trailingIcon"] {
+  grid-area: trailingIcon;
+}
+
+.c1 [data-component="ButtonCounter"] {
+  font-size: 14px;
+}
+
+.c1:hover:not([disabled]) {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
 }
 
-.c1:focus {
-  border-color: rgba(27,31,36,0.15);
+.c1:focus:not([disabled]) {
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
-.c1:active {
+.c1:active:not([disabled]) {
   background-color: hsla(220,14%,94%,1);
   box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
 }
 
-.c1:disabled {
-  color: #8c959f;
-  background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
-}
-
 <div
   className="c0"
   color="fg.default"
@@ -87,8 +105,40 @@ exports[`ActionMenu renders consistently 1`] = `
     onClick={[Function]}
     onKeyDown={[Function]}
     tabIndex={0}
+    type="button"
   >
-    Toggle Menu
+    <span
+      data-component="text"
+    >
+      Toggle Menu
+    </span>
+    <span
+      className="c2"
+      data-component="trailingIcon"
+    >
+      <svg
+        aria-hidden="true"
+        className="octicon octicon-triangle-down"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "<path d=\\"M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z\\"></path>",
+          }
+        }
+        fill="currentColor"
+        height={16}
+        role="img"
+        style={
+          Object {
+            "display": "inline-block",
+            "overflow": "visible",
+            "userSelect": "none",
+            "verticalAlign": "text-bottom",
+          }
+        }
+        viewBox="0 0 16 16"
+        width={16}
+      />
+    </span>
   </button>
 </div>
 `;
diff --git a/src/stories/ActionMenu2.stories.tsx b/src/stories/ActionMenu2.stories.tsx
@@ -4,7 +4,8 @@ import {ThemeProvider} from '..'
 import BaseStyles from '../BaseStyles'
 import {ActionMenu} from '../ActionMenu2'
 import {ActionList} from '../ActionList2'
-import Button, {ButtonInvisible} from '../Button'
+import {Button} from '../Button2'
+import {IconButton} from '../Button2/IconButton'
 import Box from '../Box'
 import Text from '../Text'
 import TextInput from '../TextInput'
@@ -90,7 +91,7 @@ export function ActionsStory(): JSX.Element {
       <h1>Actions</h1>
 
       <ActionMenu>
-        <ActionMenu.Button aria-label="Open Actions Menu">
+        <ActionMenu.Button aria-label="Open Actions Menu" trailingIcon={null}>
           <ServerIcon />
         </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
@@ -309,17 +310,9 @@ export function MemexTableMenu(): JSX.Element {
       >
         <Text sx={{fontSize: 0, fontWeight: 'bold'}}>{name}</Text>
         <ActionMenu open={open} onOpenChange={setOpen}>
-          <ActionMenu.Button
-            aria-label="Open Estimate column options menu"
-            sx={{
-              p: 0,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center'
-            }}
-          >
-            <TriangleDownIcon />
-          </ActionMenu.Button>
+          <ActionMenu.Anchor>
+            <IconButton icon={TriangleDownIcon} aria-label="Open Estimate column options menu" sx={{padding: 0}} />
+          </ActionMenu.Anchor>
 
           <ActionMenu.Overlay onClickOutside={handleClickOutside}>
             <TextInput ref={inputRef} sx={{m: 2}} defaultValue={name} onKeyPress={handleKeyPress} />
@@ -399,7 +392,8 @@ const LayoutToggleItem = ({
 /* copied from github/memex */
 const ViewChangeButtons = ({setOpen}: {setOpen: (open: boolean) => void}) => (
   <Box sx={{display: 'flex'}}>
-    <ButtonInvisible
+    <Button
+      variant="invisible"
       onClick={() => setOpen(false)}
       sx={{
         flex: 'auto',
@@ -416,9 +410,10 @@ const ViewChangeButtons = ({setOpen}: {setOpen: (open: boolean) => void}) => (
       }}
     >
       Save changes
-    </ButtonInvisible>
+    </Button>
 
-    <ButtonInvisible
+    <Button
+      variant="invisible"
       onClick={() => setOpen(false)}
       sx={{
         flex: 'auto',
@@ -434,7 +429,7 @@ const ViewChangeButtons = ({setOpen}: {setOpen: (open: boolean) => void}) => (
       }}
     >
       Discard changes
-    </ButtonInvisible>
+    </Button>
   </Box>
 )