From 2630800d7905b1004d40481ab4f25517bcc34f5a Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Wed, 19 Jan 2022 21:02:58 +0530 Subject: [PATCH] ActionMenu v2: Use Button v2 as ActionMenu.Button + caret (#1779) * Use Button v2 in ActionMenu v2 * add changeset * update snapshots --- .../actionmenu2-use-button2-as-anchor.md | 5 + docs/content/drafts/ActionMenu2.mdx | 17 ++- src/ActionMenu2.tsx | 5 +- .../__snapshots__/ActionMenu2.test.tsx.snap | 100 +++++++++++++----- src/stories/ActionMenu2.stories.tsx | 29 +++-- 5 files changed, 103 insertions(+), 53 deletions(-) create mode 100644 .changeset/actionmenu2-use-button2-as-anchor.md diff --git a/.changeset/actionmenu2-use-button2-as-anchor.md b/.changeset/actionmenu2-use-button2-as-anchor.md new file mode 100644 index 00000000000..fc62d79876d --- /dev/null +++ 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 index 950a4f5f6c6..56c081b6163 100644 --- 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   ```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( - - - + @@ -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 index fa1e29e1913..38b19ed26ea 100644 --- 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((props, anchorRef) => { return ( - `; diff --git a/src/stories/ActionMenu2.stories.tsx b/src/stories/ActionMenu2.stories.tsx index 7f3d61ec430..7f11b56c1aa 100644 --- 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 {

Actions

- + @@ -309,17 +310,9 @@ export function MemexTableMenu(): JSX.Element { > {name} - - - + + + @@ -399,7 +392,8 @@ const LayoutToggleItem = ({ /* copied from github/memex */ const ViewChangeButtons = ({setOpen}: {setOpen: (open: boolean) => void}) => ( - setOpen(false)} sx={{ flex: 'auto', @@ -416,9 +410,10 @@ const ViewChangeButtons = ({setOpen}: {setOpen: (open: boolean) => void}) => ( }} > Save changes - + - setOpen(false)} sx={{ flex: 'auto', @@ -434,7 +429,7 @@ const ViewChangeButtons = ({setOpen}: {setOpen: (open: boolean) => void}) => ( }} > Discard changes - + )