From 0f7c157323439ee6b6c06954f359e563a1c41157 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 23 Dec 2024 18:47:19 -0500 Subject: [PATCH 1/6] Ensure items in menu leave menu if there is space --- packages/react/src/ActionBar/ActionBar.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx index 3453017099d..acc34d36370 100644 --- a/packages/react/src/ActionBar/ActionBar.tsx +++ b/packages/react/src/ActionBar/ActionBar.tsx @@ -120,6 +120,7 @@ const overflowEffect = ( childArray: Array, childWidthArray: ChildWidthArray, updateListAndMenu: (props: ResponsiveProps) => void, + hasActiveMenu: boolean, ) => { if (childWidthArray.length === 0) { updateListAndMenu({items: childArray, menuItems: []}) @@ -160,6 +161,9 @@ const overflowEffect = ( } updateListAndMenu({items, menuItems}) + } else if (numberOfItemsPossible >= childArray.length && hasActiveMenu) { + /* If the items fit in the list and there are items in the overflow menu, we need to move them back to the list */ + updateListAndMenu({items: childArray, menuItems: []}) } } @@ -203,7 +207,9 @@ export const ActionBar: React.FC> = prop useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => { const navWidth = resizeObserverEntries[0].contentRect.width const moreMenuWidth = moreMenuRef.current?.getBoundingClientRect().width ?? 0 - navWidth !== 0 && overflowEffect(navWidth, moreMenuWidth, validChildren, childWidthArray, updateListAndMenu) + const hasActiveMenu = menuItems.length > 0 + navWidth !== 0 && + overflowEffect(navWidth, moreMenuWidth, validChildren, childWidthArray, updateListAndMenu, hasActiveMenu) }, navRef as RefObject) const [isWidgetOpen, setIsWidgetOpen] = useState(false) From c9b9b55a5b45569332b0fb840f6aab1c22968c41 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Thu, 26 Dec 2024 17:14:43 -0500 Subject: [PATCH 2/6] Fixes initial check for if menu items should have overflow menu or not; adds new story --- .../react/src/ActionBar/ActionBar.stories.tsx | 33 +++++++++++++++++++ packages/react/src/ActionBar/ActionBar.tsx | 2 +- 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/packages/react/src/ActionBar/ActionBar.stories.tsx b/packages/react/src/ActionBar/ActionBar.stories.tsx index 1d1fb6e8d98..8aebf701801 100644 --- a/packages/react/src/ActionBar/ActionBar.stories.tsx +++ b/packages/react/src/ActionBar/ActionBar.stories.tsx @@ -1,5 +1,6 @@ import React from 'react' import type {Meta} from '@storybook/react' +import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport' import ActionBar from '.' import Text from '../Text' import { @@ -43,6 +44,38 @@ export const Default = () => ( ) +export const WithOverflowMenu = () => ( + + + + + + + + + + + + + +) + +WithOverflowMenu.parameters = { + viewport: { + viewports: { + ...INITIAL_VIEWPORTS, + narrowScreen: { + name: 'Small Screen', + styles: { + width: '310px', + height: '100%', + }, + }, + }, + defaultViewport: 'narrowScreen', + }, +} + export const TextLabels = () => ( diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx index acc34d36370..9dbca23d0e7 100644 --- a/packages/react/src/ActionBar/ActionBar.tsx +++ b/packages/react/src/ActionBar/ActionBar.tsx @@ -136,7 +136,7 @@ const overflowEffect = ( const menuItems: Array = [] // First, we check if we can fit all the items with their icons - if (childArray.length > numberOfItemsPossible) { + if (childArray.length >= numberOfItemsPossible) { /* Below is an accessibility requirement. Never show only one item in the overflow menu. * If there is only one item left to display in the overflow menu according to the calculation, * we need to pull another item from the list into the overflow menu. From 0f2177f7007dda97663b0be48022216adc291b01 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Thu, 26 Dec 2024 17:16:27 -0500 Subject: [PATCH 3/6] Add changeset --- .changeset/thirty-apples-wave.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/thirty-apples-wave.md diff --git a/.changeset/thirty-apples-wave.md b/.changeset/thirty-apples-wave.md new file mode 100644 index 00000000000..fc0f37d1810 --- /dev/null +++ b/.changeset/thirty-apples-wave.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +ActionBar: Fixes issue where `ActionBar` overflow menu would persist even if it was no longer needed; allows overflow menu to appear on initial render if there is no space for all items. From 38be440aea21bb0077cf7bf5ddf5b4276228b9a4 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Fri, 27 Dec 2024 10:24:01 -0500 Subject: [PATCH 4/6] Fix stories file structure --- .../ActionBar/ActionBar.examples.stories.tsx | 287 +++++++++++++++++ .../react/src/ActionBar/ActionBar.stories.tsx | 301 ------------------ 2 files changed, 287 insertions(+), 301 deletions(-) create mode 100644 packages/react/src/ActionBar/ActionBar.examples.stories.tsx diff --git a/packages/react/src/ActionBar/ActionBar.examples.stories.tsx b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx new file mode 100644 index 00000000000..d80446b9d41 --- /dev/null +++ b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx @@ -0,0 +1,287 @@ +import React from 'react' +import type {Meta} from '@storybook/react' +import ActionBar from '.' +import Text from '../Text' +import { + PencilIcon, + BoldIcon, + CodeIcon, + ItalicIcon, + SearchIcon, + LinkIcon, + FileAddedIcon, + HeadingIcon, + QuoteIcon, + ListUnorderedIcon, + ListOrderedIcon, + TasklistIcon, + ReplyIcon, + ThreeBarsIcon, +} from '@primer/octicons-react' +import {Box, Button, Avatar, ActionMenu, IconButton, ActionList, Textarea} from '..' +import {Dialog} from '../DialogV1' +import {Divider} from '../deprecated/ActionList/Divider' +import mockData from '../experimental/SelectPanel2/mock-story-data' + +export default { + title: 'Experimental/Components/ActionBar/Examples', +} as Meta + +export const TextLabels = () => ( + + + + + +) + +export const SmallActionBar = () => ( + + + + + + + + + +) + +type CommentBoxProps = {'aria-label': string} + +export const CommentBox = (props: CommentBoxProps) => { + const {'aria-label': ariaLabel} = props + const [value, setValue] = React.useState('') + const [isOpen, setIsOpen] = React.useState(false) + const buttonRef = React.useRef(null) + const toolBarLabel = `${ariaLabel ? ariaLabel : 'Comment box'} toolbar` + return ( + + + + + + + + + + + + + + + setIsOpen(true)} + icon={ReplyIcon} + aria-label="Saved Replies" + > + + + +