From bb3519db26e62b29d3dfff0e43f133f5da49a1eb Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 4 Mar 2022 14:32:27 +0100 Subject: [PATCH 1/4] Allow ActionMenu.Overlay to pass through align prop to AnchoredOverlay --- src/ActionMenu.tsx | 16 ++++--- src/stories/ActionMenu/fixtures.stories.tsx | 51 +++++++++++---------- 2 files changed, 36 insertions(+), 31 deletions(-) diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx index 59735ff01c7..0fe4cced0e8 100644 --- a/src/ActionMenu.tsx +++ b/src/ActionMenu.tsx @@ -81,13 +81,14 @@ const MenuButton = React.forwardRef & { - /** - * Recommended: `ActionList` - */ - children: React.ReactElement[] | React.ReactElement -} -const Overlay: React.FC = ({children, ...overlayProps}) => { +type MenuOverlayProps = Partial & + Pick & { + /** + * Recommended: `ActionList` + */ + children: React.ReactElement[] | React.ReactElement + } +const Overlay: React.FC = ({children, align = 'start', ...overlayProps}) => { // we typecast anchorRef as required instead of optional // because we know that we're setting it in context in Menu const {anchorRef, renderAnchor, anchorId, open, onOpen, onClose} = React.useContext(MenuContext) as MandateProps< @@ -107,6 +108,7 @@ const Overlay: React.FC = ({children, ...overlayProps}) => { open={open} onOpen={openWithFocus} onClose={onClose} + align={align} overlayProps={overlayProps} focusZoneSettings={{focusOutBehavior: 'wrap'}} > diff --git a/src/stories/ActionMenu/fixtures.stories.tsx b/src/stories/ActionMenu/fixtures.stories.tsx index 78ec750b6b6..707e4ef5b28 100644 --- a/src/stories/ActionMenu/fixtures.stories.tsx +++ b/src/stories/ActionMenu/fixtures.stories.tsx @@ -604,30 +604,33 @@ export function OverlayProps(): JSX.Element { Disable `onClickOutside` and `onEscape`. Only way to close is to select an action which takes focus on a TextInput

- - Menu - { - /* do nothing, keep it open*/ - }} - onEscape={() => { - /* do nothing, keep it open*/ - }} - returnFocusRef={inputRef} - > - - Option 1 - Option 2 - Option 2 - Option 2 - Option 2 - Option 2 - Option 2 - Option 2 - - - + + + Menu + { + /* do nothing, keep it open*/ + }} + onEscape={() => { + /* do nothing, keep it open*/ + }} + returnFocusRef={inputRef} + > + + Option 1 + Option 2 + Option 2 + Option 2 + Option 2 + Option 2 + Option 2 + Option 2 + + + +

From b44bc9eb870135f90c0f666766d8040771f05b48 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 4 Mar 2022 14:44:05 +0100 Subject: [PATCH 2/4] Add align prop to docs --- docs/content/ActionMenu.mdx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx index d2ace211ddf..d35878e5216 100644 --- a/docs/content/ActionMenu.mdx +++ b/docs/content/ActionMenu.mdx @@ -305,10 +305,11 @@ render( ### ActionMenu.Overlay -| Name | Type | Default | Description | -| :--------------------------------------- | :-------------------- | :-----------------: | :-------------------------------------------------------------------------------------------- | -| children\* | `React.ReactElement[] | React.ReactElement` | Required. Recommended: [`ActionList`](/ActionList) | -| [OverlayProps](/Overlay#component-props) | - | - | Optional. Props to be spread on the internal [`AnchoredOverlay`](/AnchoredOverlay) component. | +| Name | Type | Default | Description | +| :--------------------------------------- | :------------------------------------------------- | :-----: | :-------------------------------------------------------------------------------------- | +| children\* | `React.ReactElement` | `React.ReactElement[]` | - | Required. Recommended: [`ActionList`](/ActionList) | +| align | 'start' | 'center' | 'end' | 'start' | Optional. Passed down to internal [`AnchoredOverlay`](/AnchoredOverlay#props) component | +| [OverlayProps](/Overlay#component-props) | - | - | Optional. Props to be spread on the internal [`Overlay`](/Overlay) component. | ## Status From 40194c744affa6be4615b9f1d5f8bdb0a12e6dfd Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 4 Mar 2022 14:44:13 +0100 Subject: [PATCH 3/4] Fix AnchoredOverlay docs --- docs/content/AnchoredOverlay.mdx | 6 +++++- docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js | 4 +++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/content/AnchoredOverlay.mdx b/docs/content/AnchoredOverlay.mdx index 92af9e42515..6ccd4cd7b27 100644 --- a/docs/content/AnchoredOverlay.mdx +++ b/docs/content/AnchoredOverlay.mdx @@ -20,7 +20,11 @@ See also [Overlay positioning](/Overlay#positioning). const closeOverlay = React.useCallback(() => setIsOpen(false), [setIsOpen]) return ( Click me to open} + renderAnchor={anchorProps => ( + + )} open={isOpen} onOpen={openOverlay} onClose={closeOverlay} diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js index a9bbaf0e419..6532f85324d 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js @@ -29,7 +29,8 @@ import { TypographyIcon, VersionsIcon, XIcon, - ZapIcon + ZapIcon, + TriangleDownIcon } from '@primer/octicons-react' import * as primerComponents from '@primer/react' import * as drafts from '@primer/react/drafts' @@ -85,6 +86,7 @@ export default function resolveScope(metastring) { IterationsIcon, NumberIcon, SingleSelectIcon, + TriangleDownIcon, Dialog2, ConfirmationDialog, useConfirm, From 469c230a4ead5f824e7a61de92d27b9de11dc2a0 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 4 Mar 2022 14:45:03 +0100 Subject: [PATCH 4/4] add changeset --- .changeset/actionmenu-add-align-prop.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/actionmenu-add-align-prop.md diff --git a/.changeset/actionmenu-add-align-prop.md b/.changeset/actionmenu-add-align-prop.md new file mode 100644 index 00000000000..b790321d604 --- /dev/null +++ b/.changeset/actionmenu-add-align-prop.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Add align prop on ActionMenu.Overlay to pass through to AnchoredOverlay