From 578a33d77e68695edd285cd03435d3190d025dfc Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 30 Dec 2024 10:18:56 -0500
Subject: [PATCH] ActionBar: Ensure overflow menu only exists if there is no
 space (#5476)

* Ensure items in menu leave menu if there is space

* Fixes initial check for if menu items should have overflow menu or not; adds new story

* Add changeset

* Fix stories file structure

* Fix ID

* Remove redundant check
---
 .changeset/thirty-apples-wave.md              |   5 +
 e2e/components/drafts/ActionBar.test.ts       |   6 +-
 .../ActionBar/ActionBar.examples.stories.tsx  | 287 ++++++++++++++++++
 .../react/src/ActionBar/ActionBar.stories.tsx | 268 ----------------
 packages/react/src/ActionBar/ActionBar.tsx    |  10 +-
 5 files changed, 303 insertions(+), 273 deletions(-)
 create mode 100644 .changeset/thirty-apples-wave.md
 create mode 100644 packages/react/src/ActionBar/ActionBar.examples.stories.tsx

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.
diff --git a/e2e/components/drafts/ActionBar.test.ts b/e2e/components/drafts/ActionBar.test.ts
index 71d20bd6aa9..d8a183d0392 100644
--- a/e2e/components/drafts/ActionBar.test.ts
+++ b/e2e/components/drafts/ActionBar.test.ts
@@ -9,7 +9,7 @@ test.describe('ActionBar', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'experimental-components-actionbar--comment-box',
+            id: 'experimental-components-actionbar-examples--comment-box',
             globals: {
               colorScheme: theme,
             },
@@ -19,7 +19,7 @@ test.describe('ActionBar', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'experimental-components-actionbar--comment-box',
+            id: 'experimental-components-actionbar-examples--comment-box',
             globals: {
               colorScheme: theme,
             },
@@ -35,7 +35,7 @@ test.describe('ActionBar', () => {
       test.describe(theme, () => {
         test('Overflow interaction @vrt', async ({page}) => {
           await visit(page, {
-            id: 'experimental-components-actionbar--comment-box',
+            id: 'experimental-components-actionbar-examples--comment-box',
             globals: {
               colorScheme: theme,
             },
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<typeof ActionBar>
+
+export const TextLabels = () => (
+  <ActionBar aria-label="Toolbar">
+    <Button>Edit</Button>
+    <Button>Duplicate</Button>
+    <Button>Export to CSV</Button>
+  </ActionBar>
+)
+
+export const SmallActionBar = () => (
+  <ActionBar size="small" aria-label="Toolbar">
+    <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={LinkIcon} aria-label="Link"></ActionBar.IconButton>
+    <ActionBar.Divider />
+    <ActionBar.IconButton icon={FileAddedIcon} aria-label="File Added"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={SearchIcon} aria-label="Search"></ActionBar.IconButton>
+  </ActionBar>
+)
+
+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 (
+    <Box
+      sx={{
+        maxWidth: 800,
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        borderColor: 'border.default',
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderRadius: 2,
+        minInlineSize: 'auto',
+        bg: 'canvas.default',
+        color: 'fg.default',
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          backgroundColor: 'canvas.subtle',
+          borderTopLeftRadius: 2,
+          borderTopRightRadius: 2,
+          justifyContent: 'space-between',
+        }}
+        as="header"
+      >
+        <Box sx={{width: '50%'}}>
+          <ActionBar aria-label={toolBarLabel}>
+            <ActionBar.IconButton icon={HeadingIcon} aria-label="Heading"></ActionBar.IconButton>
+            <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
+            <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
+            <ActionBar.IconButton icon={CodeIcon} aria-label="Insert Code"></ActionBar.IconButton>
+            <ActionBar.IconButton icon={LinkIcon} aria-label="Insert Link"></ActionBar.IconButton>
+            <ActionBar.Divider />
+            <ActionBar.IconButton icon={QuoteIcon} aria-label="Insert Quote"></ActionBar.IconButton>
+            <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
+            <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>
+            <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
+            <ActionBar.IconButton
+              ref={buttonRef}
+              onClick={() => setIsOpen(true)}
+              icon={ReplyIcon}
+              aria-label="Saved Replies"
+            ></ActionBar.IconButton>
+          </ActionBar>
+        </Box>
+      </Box>
+      <Textarea value={value} onChange={e => setValue(e.target.value)} id="markdowninput" aria-label="Markdown value" />
+      <Dialog aria-labelledby="header" returnFocusRef={buttonRef} isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
+        <Dialog.Header id="header">Select a reply</Dialog.Header>
+        <Box p={3}>Show saved replies</Box>
+        <Divider />
+        <Button variant="invisible">Create your own saved reply</Button>
+      </Dialog>
+    </Box>
+  )
+}
+
+export const ActionBarWithMenuTrigger = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const buttonRef = React.useRef(null)
+
+  return (
+    <Box>
+      <ActionBar aria-label="Toolbar">
+        <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
+        <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
+        <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
+        <ActionBar.IconButton
+          ref={buttonRef}
+          onClick={() => setIsOpen(true)}
+          icon={ReplyIcon}
+          aria-label="Saved Replies"
+        ></ActionBar.IconButton>
+      </ActionBar>
+
+      <Dialog aria-labelledby="header" returnFocusRef={buttonRef} isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
+        <Dialog.Header id="header">Select a reply</Dialog.Header>
+        <Box p={3}>Show saved replies</Box>
+        <Divider />
+        <Button variant="invisible">Create your own saved reply</Button>
+      </Dialog>
+    </Box>
+  )
+}
+
+export const ActionbarToggle = () => {
+  const descriptionStyles = {
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'border.default',
+    p: 3,
+  }
+  const topSectionStyles = {
+    bg: 'canvas.subtle',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderBottomWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'border.default',
+    p: 3,
+  }
+  const bottomSectionStyles = {
+    p: 3,
+  }
+  const loginName = mockData.collaborators[1].login
+  const [showEditView, setEditView] = React.useState(false)
+  const [description /*, setDescription*/] = React.useState('')
+  const anchorRef = React.useRef(null)
+  return (
+    <Box sx={descriptionStyles}>
+      <Box sx={topSectionStyles}>
+        <Box>
+          <Avatar src={`https://github.com/${loginName}.png`} size={30} />
+          <Text as="strong" sx={{marginLeft: 2, marginRight: 2}}>
+            {loginName}
+          </Text>
+          <Text>opened this issue 2 hours ago</Text>
+        </Box>
+        <Box>
+          <ActionMenu>
+            <ActionMenu.Anchor ref={anchorRef}>
+              <IconButton icon={ThreeBarsIcon} aria-label="Open Menu" />
+            </ActionMenu.Anchor>
+            <ActionMenu.Overlay>
+              <ActionList>
+                <ActionList.Item>
+                  <ActionList.LeadingVisual>
+                    <LinkIcon />
+                  </ActionList.LeadingVisual>
+                  Copy Link
+                </ActionList.Item>
+                <ActionList.Item>
+                  <ActionList.LeadingVisual>
+                    <QuoteIcon />
+                  </ActionList.LeadingVisual>
+                  Quote reply
+                </ActionList.Item>
+                <ActionList.Divider />
+                <ActionList.Item onClick={() => setEditView(true)}>
+                  <ActionList.LeadingVisual>
+                    <PencilIcon />
+                  </ActionList.LeadingVisual>
+                  Edit
+                </ActionList.Item>
+              </ActionList>
+            </ActionMenu.Overlay>
+          </ActionMenu>
+        </Box>
+      </Box>
+      <Box sx={bottomSectionStyles}>
+        {showEditView ? (
+          <Box>
+            <CommentBox aria-label="Comment box" />
+            <Box sx={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', p: 2, gap: 2}}>
+              <Button
+                variant="primary"
+                onClick={() => {
+                  setEditView(false)
+                }}
+              >
+                Save
+              </Button>
+              <Button variant="danger" onClick={() => setEditView(false)}>
+                Cancel
+              </Button>
+            </Box>
+          </Box>
+        ) : (
+          <Box>{description ? description : 'No description Provided'}</Box>
+        )}
+      </Box>
+    </Box>
+  )
+}
+
+export const MultipleActionBars = () => {
+  const [showFirstCommentBox, setShowFirstCommentBox] = React.useState(false)
+  const [showSecondCommentBox, setShowSecondCommentBox] = React.useState(false)
+  return (
+    <Box>
+      <Box sx={{p: 3}}>
+        {showFirstCommentBox ? (
+          <Box>
+            <CommentBox aria-label="First Comment Box" />
+            <Box sx={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', p: 2, gap: 2}}>
+              <Button
+                variant="primary"
+                onClick={() => {
+                  setShowFirstCommentBox(false)
+                }}
+              >
+                Save
+              </Button>
+              <Button variant="danger" onClick={() => setShowFirstCommentBox(false)}>
+                Cancel
+              </Button>
+            </Box>
+          </Box>
+        ) : (
+          <Button onClick={() => setShowFirstCommentBox(true)}>Show first commentBox</Button>
+        )}
+      </Box>
+      <Box sx={{p: 3}}>
+        {showSecondCommentBox ? (
+          <Box>
+            <CommentBox aria-label="Second Comment Box" />
+            <Box sx={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', p: 2, gap: 2}}>
+              <Button
+                variant="primary"
+                onClick={() => {
+                  setShowSecondCommentBox(false)
+                }}
+              >
+                Save
+              </Button>
+              <Button variant="danger" onClick={() => setShowSecondCommentBox(false)}>
+                Cancel
+              </Button>
+            </Box>
+          </Box>
+        ) : (
+          <Button onClick={() => setShowSecondCommentBox(true)}>Show second commentBox</Button>
+        )}
+      </Box>
+    </Box>
+  )
+}
diff --git a/packages/react/src/ActionBar/ActionBar.stories.tsx b/packages/react/src/ActionBar/ActionBar.stories.tsx
index 1d1fb6e8d98..7314dd64f80 100644
--- a/packages/react/src/ActionBar/ActionBar.stories.tsx
+++ b/packages/react/src/ActionBar/ActionBar.stories.tsx
@@ -1,27 +1,18 @@
 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',
@@ -42,262 +33,3 @@ export const Default = () => (
     <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
   </ActionBar>
 )
-
-export const TextLabels = () => (
-  <ActionBar aria-label="Toolbar">
-    <Button>Edit</Button>
-    <Button>Duplicate</Button>
-    <Button>Export to CSV</Button>
-  </ActionBar>
-)
-
-export const SmallActionBar = () => (
-  <ActionBar size="small" aria-label="Toolbar">
-    <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={LinkIcon} aria-label="Link"></ActionBar.IconButton>
-    <ActionBar.Divider />
-    <ActionBar.IconButton icon={FileAddedIcon} aria-label="File Added"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={SearchIcon} aria-label="Search"></ActionBar.IconButton>
-  </ActionBar>
-)
-
-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 (
-    <Box
-      sx={{
-        maxWidth: 800,
-        display: 'flex',
-        flexDirection: 'column',
-        width: '100%',
-        borderColor: 'border.default',
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderRadius: 2,
-        minInlineSize: 'auto',
-        bg: 'canvas.default',
-        color: 'fg.default',
-      }}
-    >
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'row',
-          backgroundColor: 'canvas.subtle',
-          borderTopLeftRadius: 2,
-          borderTopRightRadius: 2,
-          justifyContent: 'space-between',
-        }}
-        as="header"
-      >
-        <Box sx={{width: '50%'}}>
-          <ActionBar aria-label={toolBarLabel}>
-            <ActionBar.IconButton icon={HeadingIcon} aria-label="Heading"></ActionBar.IconButton>
-            <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
-            <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
-            <ActionBar.IconButton icon={CodeIcon} aria-label="Insert Code"></ActionBar.IconButton>
-            <ActionBar.IconButton icon={LinkIcon} aria-label="Insert Link"></ActionBar.IconButton>
-            <ActionBar.Divider />
-            <ActionBar.IconButton icon={QuoteIcon} aria-label="Insert Quote"></ActionBar.IconButton>
-            <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
-            <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>
-            <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
-            <ActionBar.IconButton
-              ref={buttonRef}
-              onClick={() => setIsOpen(true)}
-              icon={ReplyIcon}
-              aria-label="Saved Replies"
-            ></ActionBar.IconButton>
-          </ActionBar>
-        </Box>
-      </Box>
-      <Textarea value={value} onChange={e => setValue(e.target.value)} id="markdowninput" aria-label="Markdown value" />
-      <Dialog aria-labelledby="header" returnFocusRef={buttonRef} isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
-        <Dialog.Header id="header">Select a reply</Dialog.Header>
-        <Box p={3}>Show saved replies</Box>
-        <Divider />
-        <Button variant="invisible">Create your own saved reply</Button>
-      </Dialog>
-    </Box>
-  )
-}
-
-export const ActionBarWithMenuTrigger = () => {
-  const [isOpen, setIsOpen] = React.useState(false)
-  const buttonRef = React.useRef(null)
-
-  return (
-    <Box>
-      <ActionBar aria-label="Toolbar">
-        <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
-        <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
-        <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
-        <ActionBar.IconButton
-          ref={buttonRef}
-          onClick={() => setIsOpen(true)}
-          icon={ReplyIcon}
-          aria-label="Saved Replies"
-        ></ActionBar.IconButton>
-      </ActionBar>
-
-      <Dialog aria-labelledby="header" returnFocusRef={buttonRef} isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
-        <Dialog.Header id="header">Select a reply</Dialog.Header>
-        <Box p={3}>Show saved replies</Box>
-        <Divider />
-        <Button variant="invisible">Create your own saved reply</Button>
-      </Dialog>
-    </Box>
-  )
-}
-
-export const ActionbarToggle = () => {
-  const descriptionStyles = {
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: 'border.default',
-    p: 3,
-  }
-  const topSectionStyles = {
-    bg: 'canvas.subtle',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    borderBottomWidth: 1,
-    borderStyle: 'solid',
-    borderColor: 'border.default',
-    p: 3,
-  }
-  const bottomSectionStyles = {
-    p: 3,
-  }
-  const loginName = mockData.collaborators[1].login
-  const [showEditView, setEditView] = React.useState(false)
-  const [description /*, setDescription*/] = React.useState('')
-  const anchorRef = React.useRef(null)
-  return (
-    <Box sx={descriptionStyles}>
-      <Box sx={topSectionStyles}>
-        <Box>
-          <Avatar src={`https://github.com/${loginName}.png`} size={30} />
-          <Text as="strong" sx={{marginLeft: 2, marginRight: 2}}>
-            {loginName}
-          </Text>
-          <Text>opened this issue 2 hours ago</Text>
-        </Box>
-        <Box>
-          <ActionMenu>
-            <ActionMenu.Anchor ref={anchorRef}>
-              <IconButton icon={ThreeBarsIcon} aria-label="Open Menu" />
-            </ActionMenu.Anchor>
-            <ActionMenu.Overlay>
-              <ActionList>
-                <ActionList.Item>
-                  <ActionList.LeadingVisual>
-                    <LinkIcon />
-                  </ActionList.LeadingVisual>
-                  Copy Link
-                </ActionList.Item>
-                <ActionList.Item>
-                  <ActionList.LeadingVisual>
-                    <QuoteIcon />
-                  </ActionList.LeadingVisual>
-                  Quote reply
-                </ActionList.Item>
-                <ActionList.Divider />
-                <ActionList.Item onClick={() => setEditView(true)}>
-                  <ActionList.LeadingVisual>
-                    <PencilIcon />
-                  </ActionList.LeadingVisual>
-                  Edit
-                </ActionList.Item>
-              </ActionList>
-            </ActionMenu.Overlay>
-          </ActionMenu>
-        </Box>
-      </Box>
-      <Box sx={bottomSectionStyles}>
-        {showEditView ? (
-          <Box>
-            <CommentBox aria-label="Comment box" />
-            <Box sx={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', p: 2, gap: 2}}>
-              <Button
-                variant="primary"
-                onClick={() => {
-                  setEditView(false)
-                }}
-              >
-                Save
-              </Button>
-              <Button variant="danger" onClick={() => setEditView(false)}>
-                Cancel
-              </Button>
-            </Box>
-          </Box>
-        ) : (
-          <Box>{description ? description : 'No description Provided'}</Box>
-        )}
-      </Box>
-    </Box>
-  )
-}
-
-export const MultipleActionBars = () => {
-  const [showFirstCommentBox, setShowFirstCommentBox] = React.useState(false)
-  const [showSecondCommentBox, setShowSecondCommentBox] = React.useState(false)
-  return (
-    <Box>
-      <Box sx={{p: 3}}>
-        {showFirstCommentBox ? (
-          <Box>
-            <CommentBox aria-label="First Comment Box" />
-            <Box sx={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', p: 2, gap: 2}}>
-              <Button
-                variant="primary"
-                onClick={() => {
-                  setShowFirstCommentBox(false)
-                }}
-              >
-                Save
-              </Button>
-              <Button variant="danger" onClick={() => setShowFirstCommentBox(false)}>
-                Cancel
-              </Button>
-            </Box>
-          </Box>
-        ) : (
-          <Button onClick={() => setShowFirstCommentBox(true)}>Show first commentBox</Button>
-        )}
-      </Box>
-      <Box sx={{p: 3}}>
-        {showSecondCommentBox ? (
-          <Box>
-            <CommentBox aria-label="Second Comment Box" />
-            <Box sx={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', p: 2, gap: 2}}>
-              <Button
-                variant="primary"
-                onClick={() => {
-                  setShowSecondCommentBox(false)
-                }}
-              >
-                Save
-              </Button>
-              <Button variant="danger" onClick={() => setShowSecondCommentBox(false)}>
-                Cancel
-              </Button>
-            </Box>
-          </Box>
-        ) : (
-          <Button onClick={() => setShowSecondCommentBox(true)}>Show second commentBox</Button>
-        )}
-      </Box>
-    </Box>
-  )
-}
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 3453017099d..244539e98a7 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -120,6 +120,7 @@ const overflowEffect = (
   childArray: Array<React.ReactElement>,
   childWidthArray: ChildWidthArray,
   updateListAndMenu: (props: ResponsiveProps) => void,
+  hasActiveMenu: boolean,
 ) => {
   if (childWidthArray.length === 0) {
     updateListAndMenu({items: childArray, menuItems: []})
@@ -135,7 +136,7 @@ const overflowEffect = (
   const menuItems: Array<React.ReactElement> = []
 
   // 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.
@@ -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<React.PropsWithChildren<ActionBarProps>> = 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<HTMLElement>)
 
   const [isWidgetOpen, setIsWidgetOpen] = useState(false)