From 8b60b9bbd0bdd8bf2428bd6f3f6daeb6dc8142b9 Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Thu, 4 Apr 2024 12:59:10 +1100 Subject: [PATCH 1/4] Add Actionbar.SubMenu component --- .../drafts/ActionBar/ActionBar.stories.tsx | 7 ++++ .../react/src/drafts/ActionBar/ActionBar.tsx | 39 ++++++++++++------- packages/react/src/drafts/ActionBar/index.ts | 3 +- 3 files changed, 35 insertions(+), 14 deletions(-) diff --git a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx index 350085304af..f74b15a6daf 100644 --- a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx +++ b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx @@ -120,6 +120,13 @@ export const CommentBox = () => { icon={ReplyIcon} aria-label="Saved Replies" > + }> + + First Item + Second Item + Third Item + + diff --git a/packages/react/src/drafts/ActionBar/ActionBar.tsx b/packages/react/src/drafts/ActionBar/ActionBar.tsx index d2ecea1b100..bbabf8c6eae 100644 --- a/packages/react/src/drafts/ActionBar/ActionBar.tsx +++ b/packages/react/src/drafts/ActionBar/ActionBar.tsx @@ -13,7 +13,7 @@ import {useOnOutsideClick} from '../../hooks/useOnOutsideClick' import type {IconButtonProps} from '../../Button' import {IconButton} from '../../Button' import Box from '../../Box' -import {ActionMenu} from '../..' +import {ActionMenu} from '../../ActionMenu' type ChildSize = { text: string @@ -43,6 +43,31 @@ export type ActionBarProps = { export type ActionBarIconButtonProps = IconButtonProps +export const ActionBarIconButton = forwardRef((props: ActionBarIconButtonProps, forwardedRef) => { + const backupRef = useRef(null) + const ref = (forwardedRef ?? backupRef) as RefObject + const {size, setChildrenWidth} = React.useContext(ActionBarContext) + useIsomorphicLayoutEffect(() => { + const text = props['aria-label'] ? props['aria-label'] : '' + const domRect = (ref as MutableRefObject).current.getBoundingClientRect() + setChildrenWidth({text, width: domRect.width}) + }, [ref, setChildrenWidth]) + return +}) + +export type ActionBarSubMenuProps = {anchor: React.ReactElement; children: React.ReactElement[] | React.ReactElement} + +export const ActionBarSubMenu = (props: ActionBarSubMenuProps) => { + const {anchor, children} = props + + return ( + + {anchor} + {children} + + ) +} + const NavigationList = styled.div` ${sx}; ` @@ -279,18 +304,6 @@ export const ActionBar: React.FC> = prop ) } -export const ActionBarIconButton = forwardRef((props: ActionBarIconButtonProps, forwardedRef) => { - const backupRef = useRef(null) - const ref = (forwardedRef ?? backupRef) as RefObject - const {size, setChildrenWidth} = React.useContext(ActionBarContext) - useIsomorphicLayoutEffect(() => { - const text = props['aria-label'] ? props['aria-label'] : '' - const domRect = (ref as MutableRefObject).current.getBoundingClientRect() - setChildrenWidth({text, width: domRect.width}) - }, [ref, setChildrenWidth]) - return -}) - const sizeToHeight = { small: '24px', medium: '28px', diff --git a/packages/react/src/drafts/ActionBar/index.ts b/packages/react/src/drafts/ActionBar/index.ts index ae3069a0ae3..d01713da516 100644 --- a/packages/react/src/drafts/ActionBar/index.ts +++ b/packages/react/src/drafts/ActionBar/index.ts @@ -1,8 +1,9 @@ -import {ActionBar as Bar, ActionBarIconButton, VerticalDivider} from './ActionBar' +import {ActionBar as Bar, ActionBarIconButton, ActionBarSubMenu, VerticalDivider} from './ActionBar' export type {ActionBarProps} from './ActionBar' const ActionBar = Object.assign(Bar, { IconButton: ActionBarIconButton, + SubMenu: ActionBarSubMenu, Divider: VerticalDivider, }) From ebaa4289620f1236937072e5f6000945c6257fc5 Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Thu, 4 Apr 2024 13:09:02 +1100 Subject: [PATCH 2/4] Create a submenu when in overflow --- .../react/src/drafts/ActionBar/ActionBar.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/react/src/drafts/ActionBar/ActionBar.tsx b/packages/react/src/drafts/ActionBar/ActionBar.tsx index bbabf8c6eae..8e51b163bb0 100644 --- a/packages/react/src/drafts/ActionBar/ActionBar.tsx +++ b/packages/react/src/drafts/ActionBar/ActionBar.tsx @@ -14,6 +14,7 @@ import type {IconButtonProps} from '../../Button' import {IconButton} from '../../Button' import Box from '../../Box' import {ActionMenu} from '../../ActionMenu' +import {Action} from 'history' type ChildSize = { text: string @@ -264,6 +265,24 @@ export const ActionBar: React.FC> = prop {menuItems.map((menuItem, index) => { if (menuItem.type === ActionList.Divider) { return + } else if (menuItem.type === ActionBarSubMenu) { + const {children: menuItemChildren, anchor} = menuItem.props + const {icon: Icon, 'aria-label': ariaLabel} = anchor.props + return ( + + + + {Icon ? ( + + + + ) : null} + {ariaLabel} + + + {menuItemChildren} + + ) } else { const { children: menuItemChildren, From 27b073094c8e3de2db3b3a867d3e599ec47ac31d Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Thu, 4 Apr 2024 13:12:26 +1100 Subject: [PATCH 3/4] Add docs --- .../react/src/drafts/ActionBar/ActionBar.docs.json | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/react/src/drafts/ActionBar/ActionBar.docs.json b/packages/react/src/drafts/ActionBar/ActionBar.docs.json index 0a18045f525..bd3542378da 100644 --- a/packages/react/src/drafts/ActionBar/ActionBar.docs.json +++ b/packages/react/src/drafts/ActionBar/ActionBar.docs.json @@ -54,6 +54,19 @@ { "name": "ActionBar.Divider", "props": [] + }, + { + "name": "ActionBar.SubMenu", + "description": "Component to be used when having a menu in the actionbar. This facilitates smooth transition to submenu during overflow cases", + "props": [ + { + "name": "anchor", + "type": "React.ReactElement", + "required": true, + "description": "This is the anchor element to be used as menu trigger. Ideally ActionBar.IconButton" + }, + {"name": "children", "type": "React.ReactElement", "required": true} + ] } ] } From 366d598936639510d1d28698470776b76ea2602f Mon Sep 17 00:00:00 2001 From: Pavithra Kodmad Date: Thu, 4 Apr 2024 13:19:59 +1100 Subject: [PATCH 4/4] Create rotten-horses-applaud.md --- .changeset/rotten-horses-applaud.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/rotten-horses-applaud.md diff --git a/.changeset/rotten-horses-applaud.md b/.changeset/rotten-horses-applaud.md new file mode 100644 index 00000000000..489b592235a --- /dev/null +++ b/.changeset/rotten-horses-applaud.md @@ -0,0 +1,6 @@ +--- +"@primer/react": patch +"docs": patch +--- + +ActionBar: Add new component for submenu