From cb6795b15fd1eec1b529b8f036692bcecd42eada Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 25 Jan 2024 20:43:55 +1100
Subject: [PATCH 01/16] Add new Actionbar component

---
 src/ActionBar/ActionBar.stories.tsx | 21 ++++++++++++
 src/ActionBar/ActionBar.tsx         | 51 +++++++++++++++++++++++++++++
 src/ActionBar/index.ts              |  9 +++++
 3 files changed, 81 insertions(+)
 create mode 100644 src/ActionBar/ActionBar.stories.tsx
 create mode 100644 src/ActionBar/ActionBar.tsx
 create mode 100644 src/ActionBar/index.ts

diff --git a/src/ActionBar/ActionBar.stories.tsx b/src/ActionBar/ActionBar.stories.tsx
new file mode 100644
index 00000000000..9fabcf133c2
--- /dev/null
+++ b/src/ActionBar/ActionBar.stories.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import {Meta} from '@storybook/react'
+import ActionBar from './'
+import {BoldIcon, CodeIcon, ItalicIcon, SearchIcon, LinkIcon, FileAddedIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Components/ActionBar',
+  component: ActionBar,
+} as Meta<typeof ActionBar>
+
+export const Default = () => (
+  <ActionBar>
+    <ActionBar.IconButton icon={BoldIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={ItalicIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={CodeIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={LinkIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.Divider />
+    <ActionBar.IconButton icon={FileAddedIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={SearchIcon} aria-label="Default"></ActionBar.IconButton>
+  </ActionBar>
+)
diff --git a/src/ActionBar/ActionBar.tsx b/src/ActionBar/ActionBar.tsx
new file mode 100644
index 00000000000..ccc6b507cf4
--- /dev/null
+++ b/src/ActionBar/ActionBar.tsx
@@ -0,0 +1,51 @@
+/*
+TODO
+- Decide props for ActionBar
+- Add api docs
+- Add proper types
+- Size should be based on actionbar size
+- Divider is loopy
+- Add more functionality with responsiveness
+*/
+
+import React from 'react'
+//import styled from 'styled-components'
+import {IconButton, IconButtonProps} from '../Button'
+import Box from '../Box'
+// import {get} from '../constants'
+//import sx, {BetterCssProperties, BetterSystemStyleObject, SxProp, merge} from '../sx'
+// import {ComponentProps} from '../utils/types'
+// import {ResponsiveValue, isResponsiveValue} from '../hooks/useResponsiveValue'
+// import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations'
+// import {defaultSxProp} from '../utils/defaultSxProp'
+
+export type ActionBarProps = {
+  children: any
+}
+
+export type ActionBarIconButtonProps = IconButtonProps
+
+export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = ({children}) => {
+  return <Box>{children}</Box>
+}
+
+export const ActionBarIconButton = (props: ActionBarIconButtonProps) => {
+  //height should be based on actionbar size
+  return <IconButton {...props} variant="invisible" />
+}
+
+export const VerticalDivider = () => {
+  //height should be based on actionbar size
+  return (
+    <Box
+      aria-hidden="true"
+      sx={{
+        display: 'inline-block',
+        borderLeft: '1px solid',
+        borderColor: 'actionListItem.inlineDivider',
+        height: '24px',
+        mx: 2,
+      }}
+    />
+  )
+}
diff --git a/src/ActionBar/index.ts b/src/ActionBar/index.ts
new file mode 100644
index 00000000000..535a1249e15
--- /dev/null
+++ b/src/ActionBar/index.ts
@@ -0,0 +1,9 @@
+import {ActionBar as Bar, ActionBarIconButton, VerticalDivider} from './ActionBar'
+//export type {ActionBarProps} from './ActionBar'
+
+const ActionBar = Object.assign(Bar, {
+  IconButton: ActionBarIconButton,
+  Divider: VerticalDivider,
+})
+
+export default ActionBar

From a88d5931d5f2dbd33e1b90ce77ad82dd1e69bb67 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Fri, 2 Feb 2024 13:58:07 +1100
Subject: [PATCH 02/16] Add size context to ActionBar

---
 src/ActionBar/ActionBar.stories.tsx | 12 +++++++++++
 src/ActionBar/ActionBar.tsx         | 32 +++++++++++++++++++++++------
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/ActionBar/ActionBar.stories.tsx b/src/ActionBar/ActionBar.stories.tsx
index 9fabcf133c2..91181d5b4ba 100644
--- a/src/ActionBar/ActionBar.stories.tsx
+++ b/src/ActionBar/ActionBar.stories.tsx
@@ -19,3 +19,15 @@ export const Default = () => (
     <ActionBar.IconButton icon={SearchIcon} aria-label="Default"></ActionBar.IconButton>
   </ActionBar>
 )
+
+export const SmallActionBar = () => (
+  <ActionBar size="small">
+    <ActionBar.IconButton icon={BoldIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={ItalicIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={CodeIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={LinkIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.Divider />
+    <ActionBar.IconButton icon={FileAddedIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={SearchIcon} aria-label="Default"></ActionBar.IconButton>
+  </ActionBar>
+)
diff --git a/src/ActionBar/ActionBar.tsx b/src/ActionBar/ActionBar.tsx
index ccc6b507cf4..488053fcfc1 100644
--- a/src/ActionBar/ActionBar.tsx
+++ b/src/ActionBar/ActionBar.tsx
@@ -19,31 +19,51 @@ import Box from '../Box'
 // import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations'
 // import {defaultSxProp} from '../utils/defaultSxProp'
 
+const ActionBarContext = React.createContext<{size: Size}>({size: 'medium'})
+
+/*
+small (28px), medium (32px), large (40px)
+*/
+type Size = 'small' | 'medium' | 'large'
+
 export type ActionBarProps = {
+  size?: Size
   children: any
 }
 
 export type ActionBarIconButtonProps = IconButtonProps
 
-export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = ({children}) => {
-  return <Box>{children}</Box>
+export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = props => {
+  const {size = 'medium', children} = props
+  return (
+    <ActionBarContext.Provider value={{size}}>
+      <Box>{children}</Box>
+    </ActionBarContext.Provider>
+  )
 }
 
 export const ActionBarIconButton = (props: ActionBarIconButtonProps) => {
-  //height should be based on actionbar size
-  return <IconButton {...props} variant="invisible" />
+  const {size} = React.useContext(ActionBarContext)
+  return <IconButton data-component="ActionBar.IconButton" size={size} {...props} variant="invisible" />
 }
 
+const sizeToHeight = {
+  small: '24px',
+  medium: '28px',
+  large: '32px',
+}
 export const VerticalDivider = () => {
-  //height should be based on actionbar size
+  const {size} = React.useContext(ActionBarContext)
+
   return (
     <Box
+      data-component="ActionBar.VerticalDivider"
       aria-hidden="true"
       sx={{
         display: 'inline-block',
         borderLeft: '1px solid',
         borderColor: 'actionListItem.inlineDivider',
-        height: '24px',
+        height: sizeToHeight[size],
         mx: 2,
       }}
     />

From 0f006ac997d0bbdd81a41781c0271971e07b2f78 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Fri, 2 Feb 2024 14:01:36 +1100
Subject: [PATCH 03/16] Add parent styles

---
 src/ActionBar/ActionBar.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/ActionBar/ActionBar.tsx b/src/ActionBar/ActionBar.tsx
index 488053fcfc1..8de7c77825c 100644
--- a/src/ActionBar/ActionBar.tsx
+++ b/src/ActionBar/ActionBar.tsx
@@ -35,9 +35,14 @@ export type ActionBarIconButtonProps = IconButtonProps
 
 export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = props => {
   const {size = 'medium', children} = props
+  const sx = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    height: size === 'small' ? '28px' : size === 'medium' ? '32px' : '40px',
+  }
   return (
     <ActionBarContext.Provider value={{size}}>
-      <Box>{children}</Box>
+      <Box sx={sx}>{children}</Box>
     </ActionBarContext.Provider>
   )
 }

From 7668bd9ff82f6843b5ca61a86e915158e681fcd6 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Tue, 6 Feb 2024 17:02:44 +1100
Subject: [PATCH 04/16] Get the overflow somewhat working

---
 .../react/src/UnderlineNav/UnderlineNav.tsx   |   8 +-
 src/ActionBar/ActionBar.tsx                   | 308 +++++++++++++++++-
 2 files changed, 299 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index e7114c1c413..d43ee03cb38 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -34,16 +34,16 @@ export type UnderlineNavProps = {
 }
 // When page is loaded, we don't have ref for the more button as it is not on the DOM yet.
 // However, we need to calculate number of possible items when the more button present as well. So using the width of the more button as a constant.
-const MORE_BTN_WIDTH = 86
+export const MORE_BTN_WIDTH = 86
 // The height is needed to make sure we don't have a layout shift when the more button is the only item in the nav.
 const MORE_BTN_HEIGHT = 45
 
 // Needed this because passing a ref using HTMLULListElement to `Box` causes a type error
-const NavigationList = styled.ul`
+export const NavigationList = styled.ul`
   ${sx};
 `
 
-const MoreMenuListItem = styled.li`
+export const MoreMenuListItem = styled.li`
   display: flex;
   align-items: center;
   height: ${MORE_BTN_HEIGHT}px;
@@ -113,7 +113,7 @@ const overflowEffect = (
   updateListAndMenu({items, menuItems}, iconsVisible)
 }
 
-const getValidChildren = (children: React.ReactNode) => {
+export const getValidChildren = (children: React.ReactNode) => {
   return React.Children.toArray(children).filter(child => React.isValidElement(child)) as React.ReactElement[]
 }
 
diff --git a/src/ActionBar/ActionBar.tsx b/src/ActionBar/ActionBar.tsx
index 8de7c77825c..d780bc608a3 100644
--- a/src/ActionBar/ActionBar.tsx
+++ b/src/ActionBar/ActionBar.tsx
@@ -3,15 +3,26 @@ TODO
 - Decide props for ActionBar
 - Add api docs
 - Add proper types
-- Size should be based on actionbar size
+- Size should be based on actionbar size - done
+- Change size API?
 - Divider is loopy
 - Add more functionality with responsiveness
 */
 
-import React from 'react'
+import React, {useState, useCallback, useRef, forwardRef, RefObject, MutableRefObject} from 'react'
+import VisuallyHidden from '../_VisuallyHidden'
+import {ActionList} from '../ActionList'
+import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
+import {getValidChildren, MORE_BTN_WIDTH, NavigationList, MoreMenuListItem} from '../UnderlineNav/UnderlineNav'
+import {ulStyles, moreBtnStyles, menuStyles, menuItemStyles} from '../UnderlineNav/styles'
+import {useOnEscapePress} from '../hooks/useOnEscapePress'
+import {useResizeObserver, ResizeObserverEntry} from '../hooks/useResizeObserver'
+import {TriangleDownIcon} from '@primer/octicons-react'
+import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
 //import styled from 'styled-components'
-import {IconButton, IconButtonProps} from '../Button'
+import {IconButton, IconButtonProps, Button} from '../Button'
 import Box from '../Box'
+
 // import {get} from '../constants'
 //import sx, {BetterCssProperties, BetterSystemStyleObject, SxProp, merge} from '../sx'
 // import {ComponentProps} from '../utils/types'
@@ -19,7 +30,20 @@ import Box from '../Box'
 // import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations'
 // import {defaultSxProp} from '../utils/defaultSxProp'
 
-const ActionBarContext = React.createContext<{size: Size}>({size: 'medium'})
+type ChildSize = {
+  text: string
+  width: number
+}
+type ChildWidthArray = Array<ChildSize>
+type ResponsiveProps = {
+  items: Array<React.ReactElement>
+  menuItems: Array<React.ReactElement>
+}
+
+const ActionBarContext = React.createContext<{
+  size: Size
+  setChildrenWidth: React.Dispatch<{text: string; width: number}>
+}>({size: 'medium', setChildrenWidth: () => null})
 
 /*
 small (28px), medium (32px), large (40px)
@@ -28,29 +52,287 @@ type Size = 'small' | 'medium' | 'large'
 
 export type ActionBarProps = {
   size?: Size
-  children: any
+  'aria-label'?: React.AriaAttributes['aria-label']
+  children: React.ReactNode
 }
 
-export type ActionBarIconButtonProps = IconButtonProps
+export type ActionBarIconButtonProps = IconButtonProps & {label: string}
+
+const GAP = 8
+
+const calculatePossibleItems = (childWidthArray: ChildWidthArray, navWidth: number, moreMenuWidth = 0) => {
+  const widthToFit = navWidth - moreMenuWidth
+  let breakpoint = childWidthArray.length // assume all items will fit
+  let sumsOfChildWidth = 0
+  for (const [index, childWidth] of childWidthArray.entries()) {
+    sumsOfChildWidth = sumsOfChildWidth + childWidth.width + GAP
+    if (sumsOfChildWidth > widthToFit) {
+      breakpoint = index
+      break
+    } else {
+      continue
+    }
+  }
+  return breakpoint
+}
+
+const overflowEffect = (
+  navWidth: number,
+  moreMenuWidth: number,
+  childArray: Array<React.ReactElement>,
+  childWidthArray: ChildWidthArray,
+  updateListAndMenu: (props: ResponsiveProps) => void,
+) => {
+  if (childWidthArray.length === 0) {
+    updateListAndMenu({items: childArray, menuItems: []})
+  }
+  const numberOfItemsPossible = calculatePossibleItems(childWidthArray, navWidth)
+  const numberOfItemsPossibleWithMoreMenu = calculatePossibleItems(
+    childWidthArray,
+    navWidth,
+    moreMenuWidth || MORE_BTN_WIDTH,
+  )
+  const items: Array<React.ReactElement> = []
+  const menuItems: Array<React.ReactElement> = []
+
+  // First, we check if we can fit all the items with their icons
+  if (childArray.length <= numberOfItemsPossible) {
+    items.push(...childArray)
+  }
+
+  /* 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.
+   */
+  const numberOfItemsInMenu = childArray.length - numberOfItemsPossibleWithMoreMenu
+  const numberOfListItems =
+    numberOfItemsInMenu === 1 ? numberOfItemsPossibleWithMoreMenu - 1 : numberOfItemsPossibleWithMoreMenu
+  for (const [index, child] of childArray.entries()) {
+    if (index < numberOfListItems) {
+      items.push(child)
+    } else {
+      const ariaCurrent = child.props['aria-current']
+      const isCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false'
+      // We need to make sure to keep the selected item always visible.
+      // To do that, we swap the selected item with the last item in the list to make it visible. (When there is at least 1 item in the list to swap.)
+      if (isCurrent && numberOfListItems > 0) {
+        // If selected item couldn't make in to the list, we swap it with the last item in the list.
+        const indexToReplaceAt = numberOfListItems - 1 // because we are replacing the last item in the list
+        // splice method modifies the array by removing 1 item here at the given index and replace it with the "child" element then returns the removed item.
+        const propsectiveAction = items.splice(indexToReplaceAt, 1, child)[0]
+        menuItems.push(propsectiveAction)
+      } else {
+        menuItems.push(child)
+      }
+    }
+  }
+
+  updateListAndMenu({items, menuItems})
+}
 
 export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = props => {
-  const {size = 'medium', children} = props
+  const {size = 'medium', children, 'aria-label': ariaLabel} = props
+  const [childWidthArray, setChildWidthArray] = useState<ChildWidthArray>([])
+  const setChildrenWidth = useCallback((size: ChildSize) => {
+    setChildWidthArray(arr => {
+      const newArr = [...arr, size]
+      return newArr
+    })
+  }, [])
   const sx = {
     display: 'inline-flex',
     alignItems: 'center',
     height: size === 'small' ? '28px' : size === 'medium' ? '32px' : '40px',
   }
+  const navRef = useRef<HTMLElement>(null)
+  const listRef = useRef<HTMLUListElement>(null)
+  const moreMenuRef = useRef<HTMLLIElement>(null)
+  const moreMenuBtnRef = useRef<HTMLButtonElement>(null)
+  const containerRef = React.useRef<HTMLUListElement>(null)
+  const disclosureWidgetId = React.useId()
+
+  const validChildren = getValidChildren(children)
+  // Responsive props object manages which items are in the list and which items are in the menu.
+  const [responsiveProps, setResponsiveProps] = useState<ResponsiveProps>({
+    items: validChildren,
+    menuItems: [],
+  })
+
+  // Make sure to have the fresh props data for list items when children are changed (keeping aria-current up-to-date)
+  const listItems = responsiveProps.items.map(item => {
+    return validChildren.find(child => child.key === item.key) ?? item
+  })
+
+  // Make sure to have the fresh props data for menu items when children are changed (keeping aria-current up-to-date)
+  const menuItems = responsiveProps.menuItems.map(menuItem => {
+    return validChildren.find(child => child.key === menuItem.key) ?? menuItem
+  })
+
+  function getItemsWidth(itemText: string): number {
+    return childWidthArray.find(item => item.text === itemText)?.width ?? 0
+  }
+
+  const swapMenuItemWithListItem = (
+    prospectiveListItem: React.ReactElement,
+    indexOfProspectiveListItem: number,
+    event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>,
+    callback: (props: ResponsiveProps, displayIcons: boolean) => void,
+  ) => {
+    // get the selected menu item's width
+    const widthToFitIntoList = getItemsWidth(prospectiveListItem.props.children)
+    // Check if there is any empty space on the right side of the list
+    const availableSpace =
+      navRef.current.getBoundingClientRect().width - (listRef.current?.getBoundingClientRect().width ?? 0)
+
+    // Calculate how many items need to be pulled in to the menu to make room for the selected menu item
+    // I.e. if we need to pull 2 items in (index 0 and index 1), breakpoint (index) will return 1.
+    const index = getBreakpointForItemSwapping(widthToFitIntoList, availableSpace)
+    const indexToSliceAt = responsiveProps.items.length - 1 - index
+    // Form the new list of items
+    const itemsLeftInList = [...responsiveProps.items].slice(0, indexToSliceAt)
+    const updatedItemList = [...itemsLeftInList, prospectiveListItem]
+    // Form the new menu items
+    const itemsToAddToMenu = [...responsiveProps.items].slice(indexToSliceAt)
+    const updatedMenuItems = [...menuItems]
+    // Add itemsToAddToMenu array's items to the menu at the index of the prospectiveListItem and remove 1 count of items (prospectiveListItem)
+    updatedMenuItems.splice(indexOfProspectiveListItem, 1, ...itemsToAddToMenu)
+    callback({items: updatedItemList, menuItems: updatedMenuItems}, false)
+  }
+  // How many items do we need to pull in to the menu to make room for the selected menu item.
+  function getBreakpointForItemSwapping(widthToFitIntoList: number, availableSpace: number) {
+    let widthToSwap = 0
+    let breakpoint = 0
+    for (const [index, item] of [...responsiveProps.items].reverse().entries()) {
+      widthToSwap += getItemsWidth(item.props.children)
+      if (widthToFitIntoList < widthToSwap + availableSpace) {
+        breakpoint = index
+        break
+      }
+    }
+    return breakpoint
+  }
+
+  const updateListAndMenu = useCallback((props: ResponsiveProps) => {
+    setResponsiveProps(props)
+  }, [])
+
+  useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => {
+    const navWidth = resizeObserverEntries[0].contentRect.width
+    const moreMenuWidth = moreMenuRef.current?.getBoundingClientRect().width ?? 0
+    navWidth !== 0 && overflowEffect(navWidth, moreMenuWidth, validChildren, childWidthArray, updateListAndMenu)
+  }, navRef as RefObject<HTMLElement>)
+
+  const [isWidgetOpen, setIsWidgetOpen] = useState(false)
+
+  const closeOverlay = React.useCallback(() => {
+    setIsWidgetOpen(false)
+  }, [setIsWidgetOpen])
+
+  const focusOnMoreMenuBtn = React.useCallback(() => {
+    moreMenuBtnRef.current?.focus()
+  }, [])
+
+  const onAnchorClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    if (event.defaultPrevented || event.button !== 0) {
+      return
+    }
+    setIsWidgetOpen(isWidgetOpen => !isWidgetOpen)
+  }, [])
+
+  useOnEscapePress(
+    (event: KeyboardEvent) => {
+      if (isWidgetOpen) {
+        event.preventDefault()
+        closeOverlay()
+        focusOnMoreMenuBtn()
+      }
+    },
+    [isWidgetOpen],
+  )
+
+  useOnOutsideClick({onClickOutside: closeOverlay, containerRef, ignoreClickRefs: [moreMenuBtnRef]})
+
   return (
-    <ActionBarContext.Provider value={{size}}>
-      <Box sx={sx}>{children}</Box>
+    <ActionBarContext.Provider value={{size, setChildrenWidth}}>
+      <Box sx={sx} aria-label={ariaLabel} ref={navRef as MutableRefObject<HTMLElement>}>
+        <NavigationList sx={ulStyles} ref={listRef} role="list">
+          {listItems}
+          {menuItems.length > 0 && (
+            <MoreMenuListItem ref={moreMenuRef}>
+              <Button
+                ref={moreMenuBtnRef}
+                sx={moreBtnStyles}
+                aria-controls={disclosureWidgetId}
+                aria-expanded={isWidgetOpen}
+                onClick={onAnchorClick}
+                trailingAction={TriangleDownIcon}
+              >
+                <Box as="span">
+                  More<VisuallyHidden as="span">&nbsp;{`${ariaLabel} items`}</VisuallyHidden>
+                </Box>
+              </Button>
+              <ActionList
+                selectionVariant="single"
+                ref={containerRef}
+                id={disclosureWidgetId}
+                sx={menuStyles}
+                style={{display: isWidgetOpen ? 'block' : 'none'}}
+              >
+                {menuItems.map((menuItem, index) => {
+                  const {
+                    children: menuItemChildren,
+                    //'aria-current': ariaCurrent,
+                    onSelect,
+                    ...menuItemProps
+                  } = menuItem.props
+
+                  return (
+                    <ActionList.LinkItem
+                      key={menuItemChildren}
+                      sx={menuItemStyles}
+                      onClick={(
+                        event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>,
+                      ) => {
+                        // When there are no items in the list, do not run the swap function as we want to keep everything in the menu.
+                        swapMenuItemWithListItem(menuItem, index, event, updateListAndMenu)
+                        closeOverlay()
+                        focusOnMoreMenuBtn()
+                        // fire onSelect event that comes from the UnderlineNav.Item (if it is defined)
+                        typeof onSelect === 'function' && onSelect(event)
+                      }}
+                      {...menuItemProps}
+                    ></ActionList.LinkItem>
+                  )
+                })}
+              </ActionList>
+            </MoreMenuListItem>
+          )}
+        </NavigationList>
+      </Box>
     </ActionBarContext.Provider>
   )
 }
 
-export const ActionBarIconButton = (props: ActionBarIconButtonProps) => {
-  const {size} = React.useContext(ActionBarContext)
-  return <IconButton data-component="ActionBar.IconButton" size={size} {...props} variant="invisible" />
-}
+export const ActionBarIconButton = forwardRef((props: ActionBarIconButtonProps, forwardedRef) => {
+  const backupRef = useRef<HTMLElement>(null)
+  const ref = (forwardedRef ?? backupRef) as RefObject<HTMLAnchorElement>
+  const {size, setChildrenWidth} = React.useContext(ActionBarContext)
+  useIsomorphicLayoutEffect(() => {
+    const text = props.label
+    const domRect = (ref as MutableRefObject<HTMLElement>).current.getBoundingClientRect()
+    setChildrenWidth({text, width: domRect.width})
+  }, [ref, setChildrenWidth])
+  return (
+    <IconButton
+      ref={ref}
+      //ariaLabel={props.label}
+      data-component="ActionBar.IconButton"
+      size={size}
+      {...props}
+      variant="invisible"
+    />
+  )
+})
 
 const sizeToHeight = {
   small: '24px',

From 8ca931e8513e168c53684a96e2fe10a65cedfb8e Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 8 Feb 2024 23:10:21 +1100
Subject: [PATCH 05/16] Fix calculations

---
 .../src}/ActionBar/ActionBar.stories.tsx      |  2 +-
 .../react/src}/ActionBar/ActionBar.tsx        | 75 +++++++++++--------
 .../react/src}/ActionBar/index.ts             |  0
 3 files changed, 43 insertions(+), 34 deletions(-)
 rename {src => packages/react/src}/ActionBar/ActionBar.stories.tsx (98%)
 rename {src => packages/react/src}/ActionBar/ActionBar.tsx (83%)
 rename {src => packages/react/src}/ActionBar/index.ts (100%)

diff --git a/src/ActionBar/ActionBar.stories.tsx b/packages/react/src/ActionBar/ActionBar.stories.tsx
similarity index 98%
rename from src/ActionBar/ActionBar.stories.tsx
rename to packages/react/src/ActionBar/ActionBar.stories.tsx
index 91181d5b4ba..18a95086e4c 100644
--- a/src/ActionBar/ActionBar.stories.tsx
+++ b/packages/react/src/ActionBar/ActionBar.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {Meta} from '@storybook/react'
-import ActionBar from './'
+import ActionBar from '.'
 import {BoldIcon, CodeIcon, ItalicIcon, SearchIcon, LinkIcon, FileAddedIcon} from '@primer/octicons-react'
 
 export default {
diff --git a/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
similarity index 83%
rename from src/ActionBar/ActionBar.tsx
rename to packages/react/src/ActionBar/ActionBar.tsx
index d780bc608a3..4842aea2687 100644
--- a/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -13,7 +13,7 @@ import React, {useState, useCallback, useRef, forwardRef, RefObject, MutableRefO
 import VisuallyHidden from '../_VisuallyHidden'
 import {ActionList} from '../ActionList'
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
-import {getValidChildren, MORE_BTN_WIDTH, NavigationList, MoreMenuListItem} from '../UnderlineNav/UnderlineNav'
+import {MORE_BTN_WIDTH, NavigationList, MoreMenuListItem} from '../UnderlineNav/UnderlineNav'
 import {ulStyles, moreBtnStyles, menuStyles, menuItemStyles} from '../UnderlineNav/styles'
 import {useOnEscapePress} from '../hooks/useOnEscapePress'
 import {useResizeObserver, ResizeObserverEntry} from '../hooks/useResizeObserver'
@@ -56,16 +56,24 @@ export type ActionBarProps = {
   children: React.ReactNode
 }
 
-export type ActionBarIconButtonProps = IconButtonProps & {label: string}
+export type ActionBarIconButtonProps = IconButtonProps
 
 const GAP = 8
 
+const getValidChildren = (children: React.ReactNode) => {
+  return React.Children.toArray(children).filter(child => {
+    console.log({child})
+    // only icon buttons for now. Expand to other buttons later
+    return React.isValidElement(child) && child.props.icon ? true : false
+  }) as React.ReactElement[]
+}
+
 const calculatePossibleItems = (childWidthArray: ChildWidthArray, navWidth: number, moreMenuWidth = 0) => {
   const widthToFit = navWidth - moreMenuWidth
   let breakpoint = childWidthArray.length // assume all items will fit
   let sumsOfChildWidth = 0
   for (const [index, childWidth] of childWidthArray.entries()) {
-    sumsOfChildWidth = sumsOfChildWidth + childWidth.width + GAP
+    sumsOfChildWidth = sumsOfChildWidth + childWidth.width // + GAP
     if (sumsOfChildWidth > widthToFit) {
       breakpoint = index
       break
@@ -87,47 +95,47 @@ const overflowEffect = (
     updateListAndMenu({items: childArray, menuItems: []})
   }
   const numberOfItemsPossible = calculatePossibleItems(childWidthArray, navWidth)
+
   const numberOfItemsPossibleWithMoreMenu = calculatePossibleItems(
     childWidthArray,
     navWidth,
     moreMenuWidth || MORE_BTN_WIDTH,
   )
+  console.log({numberOfItemsPossible, childArray, numberOfItemsPossibleWithMoreMenu})
   const items: Array<React.ReactElement> = []
   const menuItems: Array<React.ReactElement> = []
 
   // First, we check if we can fit all the items with their icons
-  if (childArray.length <= numberOfItemsPossible) {
-    items.push(...childArray)
-  }
-
-  /* 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.
-   */
-  const numberOfItemsInMenu = childArray.length - numberOfItemsPossibleWithMoreMenu
-  const numberOfListItems =
-    numberOfItemsInMenu === 1 ? numberOfItemsPossibleWithMoreMenu - 1 : numberOfItemsPossibleWithMoreMenu
-  for (const [index, child] of childArray.entries()) {
-    if (index < numberOfListItems) {
-      items.push(child)
-    } else {
-      const ariaCurrent = child.props['aria-current']
-      const isCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false'
-      // We need to make sure to keep the selected item always visible.
-      // To do that, we swap the selected item with the last item in the list to make it visible. (When there is at least 1 item in the list to swap.)
-      if (isCurrent && numberOfListItems > 0) {
-        // If selected item couldn't make in to the list, we swap it with the last item in the list.
-        const indexToReplaceAt = numberOfListItems - 1 // because we are replacing the last item in the list
-        // splice method modifies the array by removing 1 item here at the given index and replace it with the "child" element then returns the removed item.
-        const propsectiveAction = items.splice(indexToReplaceAt, 1, child)[0]
-        menuItems.push(propsectiveAction)
+  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.
+     */
+    const numberOfItemsInMenu = childArray.length - numberOfItemsPossibleWithMoreMenu
+    const numberOfListItems =
+      numberOfItemsInMenu === 1 ? numberOfItemsPossibleWithMoreMenu - 1 : numberOfItemsPossibleWithMoreMenu
+    for (const [index, child] of childArray.entries()) {
+      if (index < numberOfListItems) {
+        items.push(child)
       } else {
-        menuItems.push(child)
+        const ariaCurrent = child.props['aria-current']
+        const isCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false'
+        // We need to make sure to keep the selected item always visible.
+        // To do that, we swap the selected item with the last item in the list to make it visible. (When there is at least 1 item in the list to swap.)
+        if (isCurrent && numberOfListItems > 0) {
+          // If selected item couldn't make in to the list, we swap it with the last item in the list.
+          const indexToReplaceAt = numberOfListItems - 1 // because we are replacing the last item in the list
+          // splice method modifies the array by removing 1 item here at the given index and replace it with the "child" element then returns the removed item.
+          const propsectiveAction = items.splice(indexToReplaceAt, 1, child)[0]
+          menuItems.push(propsectiveAction)
+        } else {
+          menuItems.push(child)
+        }
       }
     }
-  }
 
-  updateListAndMenu({items, menuItems})
+    updateListAndMenu({items, menuItems})
+  }
 }
 
 export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = props => {
@@ -144,7 +152,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
     alignItems: 'center',
     height: size === 'small' ? '28px' : size === 'medium' ? '32px' : '40px',
   }
-  const navRef = useRef<HTMLElement>(null)
+  const navRef = useRef<HTMLElement>(null) as MutableRefObject<HTMLElement>
   const listRef = useRef<HTMLUListElement>(null)
   const moreMenuRef = useRef<HTMLLIElement>(null)
   const moreMenuBtnRef = useRef<HTMLButtonElement>(null)
@@ -219,6 +227,7 @@ 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
+    console.log({resizeObserverEntries, navWidth})
     navWidth !== 0 && overflowEffect(navWidth, moreMenuWidth, validChildren, childWidthArray, updateListAndMenu)
   }, navRef as RefObject<HTMLElement>)
 
@@ -254,7 +263,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
 
   return (
     <ActionBarContext.Provider value={{size, setChildrenWidth}}>
-      <Box sx={sx} aria-label={ariaLabel} ref={navRef as MutableRefObject<HTMLElement>}>
+      <Box ref={navRef} sx={sx}>
         <NavigationList sx={ulStyles} ref={listRef} role="list">
           {listItems}
           {menuItems.length > 0 && (
diff --git a/src/ActionBar/index.ts b/packages/react/src/ActionBar/index.ts
similarity index 100%
rename from src/ActionBar/index.ts
rename to packages/react/src/ActionBar/index.ts

From 1748bc0dfd2489aee4e2d66d7a02989d7f4059f0 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Fri, 9 Feb 2024 13:20:30 +1100
Subject: [PATCH 06/16] Show More button appropriately

---
 .../react/src/ActionBar/ActionBar.stories.tsx |  6 ++++
 packages/react/src/ActionBar/ActionBar.tsx    | 29 +++++++++----------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.stories.tsx b/packages/react/src/ActionBar/ActionBar.stories.tsx
index 18a95086e4c..9f9f56456cf 100644
--- a/packages/react/src/ActionBar/ActionBar.stories.tsx
+++ b/packages/react/src/ActionBar/ActionBar.stories.tsx
@@ -17,6 +17,12 @@ export const Default = () => (
     <ActionBar.Divider />
     <ActionBar.IconButton icon={FileAddedIcon} aria-label="Default"></ActionBar.IconButton>
     <ActionBar.IconButton icon={SearchIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={FileAddedIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={SearchIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={FileAddedIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={SearchIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={FileAddedIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={SearchIcon} aria-label="Default"></ActionBar.IconButton>
   </ActionBar>
 )
 
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 4842aea2687..114cad057f2 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -2,11 +2,10 @@
 TODO
 - Decide props for ActionBar
 - Add api docs
-- Add proper types
-- Size should be based on actionbar size - done
-- Change size API?
+- Add proper types\
+Bugs
+- Nothing in More items
 - Divider is loopy
-- Add more functionality with responsiveness
 */
 
 import React, {useState, useCallback, useRef, forwardRef, RefObject, MutableRefObject} from 'react'
@@ -58,11 +57,17 @@ export type ActionBarProps = {
 
 export type ActionBarIconButtonProps = IconButtonProps
 
-const GAP = 8
+const getNavStyles = () => ({
+  display: 'flex',
+  paddingX: 3,
+  justifyContent: 'flex-start',
+  align: 'row',
+  alignItems: 'center',
+  minHeight: '48px',
+})
 
 const getValidChildren = (children: React.ReactNode) => {
   return React.Children.toArray(children).filter(child => {
-    console.log({child})
     // only icon buttons for now. Expand to other buttons later
     return React.isValidElement(child) && child.props.icon ? true : false
   }) as React.ReactElement[]
@@ -101,12 +106,11 @@ const overflowEffect = (
     navWidth,
     moreMenuWidth || MORE_BTN_WIDTH,
   )
-  console.log({numberOfItemsPossible, childArray, numberOfItemsPossibleWithMoreMenu})
   const items: Array<React.ReactElement> = []
   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.
@@ -147,11 +151,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
       return newArr
     })
   }, [])
-  const sx = {
-    display: 'inline-flex',
-    alignItems: 'center',
-    height: size === 'small' ? '28px' : size === 'medium' ? '32px' : '40px',
-  }
+
   const navRef = useRef<HTMLElement>(null) as MutableRefObject<HTMLElement>
   const listRef = useRef<HTMLUListElement>(null)
   const moreMenuRef = useRef<HTMLLIElement>(null)
@@ -227,7 +227,6 @@ 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
-    console.log({resizeObserverEntries, navWidth})
     navWidth !== 0 && overflowEffect(navWidth, moreMenuWidth, validChildren, childWidthArray, updateListAndMenu)
   }, navRef as RefObject<HTMLElement>)
 
@@ -263,7 +262,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
 
   return (
     <ActionBarContext.Provider value={{size, setChildrenWidth}}>
-      <Box ref={navRef} sx={sx}>
+      <Box ref={navRef} sx={getNavStyles()}>
         <NavigationList sx={ulStyles} ref={listRef} role="list">
           {listItems}
           {menuItems.length > 0 && (

From 7affe932df2d95ee6b907579c9c557250df6b798 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Mon, 12 Feb 2024 18:37:58 +1100
Subject: [PATCH 07/16] Enhance overflow behaviour and add proper menu items

---
 packages/react/src/ActionBar/ActionBar.tsx | 68 +++++++++++++---------
 1 file changed, 41 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 114cad057f2..36b1929929d 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -9,17 +9,17 @@ Bugs
 */
 
 import React, {useState, useCallback, useRef, forwardRef, RefObject, MutableRefObject} from 'react'
-import VisuallyHidden from '../_VisuallyHidden'
+import {KebabHorizontalIcon} from '@primer/octicons-react'
 import {ActionList} from '../ActionList'
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 import {MORE_BTN_WIDTH, NavigationList, MoreMenuListItem} from '../UnderlineNav/UnderlineNav'
-import {ulStyles, moreBtnStyles, menuStyles, menuItemStyles} from '../UnderlineNav/styles'
+import {ulStyles, menuStyles} from '../UnderlineNav/styles'
 import {useOnEscapePress} from '../hooks/useOnEscapePress'
 import {useResizeObserver, ResizeObserverEntry} from '../hooks/useResizeObserver'
-import {TriangleDownIcon} from '@primer/octicons-react'
+
 import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
 //import styled from 'styled-components'
-import {IconButton, IconButtonProps, Button} from '../Button'
+import {IconButton, IconButtonProps} from '../Button'
 import Box from '../Box'
 
 // import {get} from '../constants'
@@ -66,6 +66,26 @@ const getNavStyles = () => ({
   minHeight: '48px',
 })
 
+const menuItemStyles = {
+  // This is needed to hide the selected check icon on the menu item. https://github.com/primer/react/blob/main/src/ActionList/Selection.tsx#L32
+  // '& > span': {
+  //   display: 'none',
+  // },
+  // To reset the style when the menu items are rendered as react router links
+  textDecoration: 'none',
+}
+
+const moreBtnStyles = {
+  //set margin 0 here because safari puts extra margin around the button, rest is to reset style to make it look like a list element
+  margin: 0,
+  border: 0,
+  background: 'transparent',
+  fontWeight: 'normal',
+  boxShadow: 'none',
+  paddingY: 1,
+  paddingX: 2,
+}
+
 const getValidChildren = (children: React.ReactNode) => {
   return React.Children.toArray(children).filter(child => {
     // only icon buttons for now. Expand to other buttons later
@@ -267,18 +287,15 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
           {listItems}
           {menuItems.length > 0 && (
             <MoreMenuListItem ref={moreMenuRef}>
-              <Button
+              <IconButton
                 ref={moreMenuBtnRef}
                 sx={moreBtnStyles}
                 aria-controls={disclosureWidgetId}
                 aria-expanded={isWidgetOpen}
                 onClick={onAnchorClick}
-                trailingAction={TriangleDownIcon}
-              >
-                <Box as="span">
-                  More<VisuallyHidden as="span">&nbsp;{`${ariaLabel} items`}</VisuallyHidden>
-                </Box>
-              </Button>
+                aria-label={`More ${ariaLabel} items`}
+                icon={KebabHorizontalIcon}
+              />
               <ActionList
                 selectionVariant="single"
                 ref={containerRef}
@@ -291,9 +308,9 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                     children: menuItemChildren,
                     //'aria-current': ariaCurrent,
                     onSelect,
-                    ...menuItemProps
+                    icon: Icon,
+                    'aria-label': ariaLabel,
                   } = menuItem.props
-
                   return (
                     <ActionList.LinkItem
                       key={menuItemChildren}
@@ -302,14 +319,20 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                         event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>,
                       ) => {
                         // When there are no items in the list, do not run the swap function as we want to keep everything in the menu.
-                        swapMenuItemWithListItem(menuItem, index, event, updateListAndMenu)
+                        // Do we need to swap? swapMenuItemWithListItem(menuItem, index, event, updateListAndMenu)
                         closeOverlay()
                         focusOnMoreMenuBtn()
                         // fire onSelect event that comes from the UnderlineNav.Item (if it is defined)
                         typeof onSelect === 'function' && onSelect(event)
                       }}
-                      {...menuItemProps}
-                    ></ActionList.LinkItem>
+                    >
+                      {Icon ? (
+                        <ActionList.LeadingVisual>
+                          <Icon />
+                        </ActionList.LeadingVisual>
+                      ) : null}
+                      {ariaLabel}
+                    </ActionList.LinkItem>
                   )
                 })}
               </ActionList>
@@ -326,20 +349,11 @@ export const ActionBarIconButton = forwardRef((props: ActionBarIconButtonProps,
   const ref = (forwardedRef ?? backupRef) as RefObject<HTMLAnchorElement>
   const {size, setChildrenWidth} = React.useContext(ActionBarContext)
   useIsomorphicLayoutEffect(() => {
-    const text = props.label
+    const text = props['aria-label'] ? props['aria-label'] : ''
     const domRect = (ref as MutableRefObject<HTMLElement>).current.getBoundingClientRect()
     setChildrenWidth({text, width: domRect.width})
   }, [ref, setChildrenWidth])
-  return (
-    <IconButton
-      ref={ref}
-      //ariaLabel={props.label}
-      data-component="ActionBar.IconButton"
-      size={size}
-      {...props}
-      variant="invisible"
-    />
-  )
+  return <IconButton ref={ref} size={size} {...props} variant="invisible" />
 })
 
 const sizeToHeight = {

From 072d5f0aab42c1c46fae78a20fbbf8ce75feb047 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Wed, 14 Feb 2024 15:39:01 +1100
Subject: [PATCH 08/16] Remove selection variant

---
 packages/react/src/ActionBar/ActionBar.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 36b1929929d..f3d0e8d0625 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -297,13 +297,12 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                 icon={KebabHorizontalIcon}
               />
               <ActionList
-                selectionVariant="single"
                 ref={containerRef}
                 id={disclosureWidgetId}
                 sx={menuStyles}
                 style={{display: isWidgetOpen ? 'block' : 'none'}}
               >
-                {menuItems.map((menuItem, index) => {
+                {menuItems.map(menuItem => {
                   const {
                     children: menuItemChildren,
                     //'aria-current': ariaCurrent,

From 9a01a342060f1595c628b462ad17410469520536 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 15 Feb 2024 20:58:28 +1100
Subject: [PATCH 09/16] Add comment box story as example

---
 .../react/src/ActionBar/ActionBar.stories.tsx | 91 ++++++++++++++++-
 packages/react/src/ActionBar/ActionBar.tsx    | 99 ++++++++++---------
 2 files changed, 140 insertions(+), 50 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.stories.tsx b/packages/react/src/ActionBar/ActionBar.stories.tsx
index 9f9f56456cf..c23b4fea10b 100644
--- a/packages/react/src/ActionBar/ActionBar.stories.tsx
+++ b/packages/react/src/ActionBar/ActionBar.stories.tsx
@@ -1,11 +1,25 @@
 import React from 'react'
 import {Meta} from '@storybook/react'
 import ActionBar from '.'
-import {BoldIcon, CodeIcon, ItalicIcon, SearchIcon, LinkIcon, FileAddedIcon} from '@primer/octicons-react'
+import {
+  BoldIcon,
+  CodeIcon,
+  ItalicIcon,
+  SearchIcon,
+  LinkIcon,
+  FileAddedIcon,
+  HeadingIcon,
+  QuoteIcon,
+  ListUnorderedIcon,
+  ListOrderedIcon,
+  TasklistIcon,
+} from '@primer/octicons-react'
+import {MarkdownInput} from '../drafts/MarkdownEditor/_MarkdownInput'
+import {ViewSwitch, type MarkdownViewMode} from '../drafts/MarkdownEditor/_ViewSwitch'
+import {Box} from '..'
 
 export default {
   title: 'Components/ActionBar',
-  component: ActionBar,
 } as Meta<typeof ActionBar>
 
 export const Default = () => (
@@ -37,3 +51,76 @@ export const SmallActionBar = () => (
     <ActionBar.IconButton icon={SearchIcon} aria-label="Default"></ActionBar.IconButton>
   </ActionBar>
 )
+
+export const CommentBox = () => {
+  const [view, setView] = React.useState<MarkdownViewMode>('edit')
+  const loadPreview = React.useCallback(() => {
+    //console.log('loadPreview')
+  }, [])
+  const [value, setValue] = React.useState('')
+  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%'}}>
+          <ViewSwitch
+            selectedView={view}
+            onViewSelect={setView}
+            //disabled={fileHandler?.uploadProgress !== undefined}
+            onLoadPreview={loadPreview}
+          />
+        </Box>
+        <Box sx={{width: '50%'}}>
+          <ActionBar>
+            <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>
+        </Box>
+      </Box>
+      <MarkdownInput
+        value={value}
+        visible={view === 'edit'}
+        onChange={e => {
+          setValue(e.target.value)
+        }}
+        id={'markdowninput'}
+        isDraggedOver={false}
+        minHeightLines={5}
+        maxHeightLines={35}
+        monospace={false}
+        pasteUrlsAsPlainText={false}
+      />
+    </Box>
+  )
+}
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index f3d0e8d0625..2410af4e20c 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -8,18 +8,21 @@ Bugs
 - Divider is loopy
 */
 
-import React, {useState, useCallback, useRef, forwardRef, RefObject, MutableRefObject} from 'react'
+import type {RefObject, MutableRefObject} from 'react'
+import React, {useState, useCallback, useRef, forwardRef} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
 import {ActionList} from '../ActionList'
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 import {MORE_BTN_WIDTH, NavigationList, MoreMenuListItem} from '../UnderlineNav/UnderlineNav'
 import {ulStyles, menuStyles} from '../UnderlineNav/styles'
 import {useOnEscapePress} from '../hooks/useOnEscapePress'
-import {useResizeObserver, ResizeObserverEntry} from '../hooks/useResizeObserver'
+import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
+import {useResizeObserver} from '../hooks/useResizeObserver'
 
 import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
 //import styled from 'styled-components'
-import {IconButton, IconButtonProps} from '../Button'
+import type {IconButtonProps} from '../Button'
+import {IconButton} from '../Button'
 import Box from '../Box'
 
 // import {get} from '../constants'
@@ -60,10 +63,10 @@ export type ActionBarIconButtonProps = IconButtonProps
 const getNavStyles = () => ({
   display: 'flex',
   paddingX: 3,
-  justifyContent: 'flex-start',
+  justifyContent: 'flex-end',
   align: 'row',
   alignItems: 'center',
-  minHeight: '48px',
+  maxHeight: '32px',
 })
 
 const menuItemStyles = {
@@ -172,7 +175,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
     })
   }, [])
 
-  const navRef = useRef<HTMLElement>(null) as MutableRefObject<HTMLElement>
+  const navRef = useRef<HTMLDivElement>(null)
   const listRef = useRef<HTMLUListElement>(null)
   const moreMenuRef = useRef<HTMLLIElement>(null)
   const moreMenuBtnRef = useRef<HTMLButtonElement>(null)
@@ -196,49 +199,49 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
     return validChildren.find(child => child.key === menuItem.key) ?? menuItem
   })
 
-  function getItemsWidth(itemText: string): number {
-    return childWidthArray.find(item => item.text === itemText)?.width ?? 0
-  }
-
-  const swapMenuItemWithListItem = (
-    prospectiveListItem: React.ReactElement,
-    indexOfProspectiveListItem: number,
-    event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>,
-    callback: (props: ResponsiveProps, displayIcons: boolean) => void,
-  ) => {
-    // get the selected menu item's width
-    const widthToFitIntoList = getItemsWidth(prospectiveListItem.props.children)
-    // Check if there is any empty space on the right side of the list
-    const availableSpace =
-      navRef.current.getBoundingClientRect().width - (listRef.current?.getBoundingClientRect().width ?? 0)
-
-    // Calculate how many items need to be pulled in to the menu to make room for the selected menu item
-    // I.e. if we need to pull 2 items in (index 0 and index 1), breakpoint (index) will return 1.
-    const index = getBreakpointForItemSwapping(widthToFitIntoList, availableSpace)
-    const indexToSliceAt = responsiveProps.items.length - 1 - index
-    // Form the new list of items
-    const itemsLeftInList = [...responsiveProps.items].slice(0, indexToSliceAt)
-    const updatedItemList = [...itemsLeftInList, prospectiveListItem]
-    // Form the new menu items
-    const itemsToAddToMenu = [...responsiveProps.items].slice(indexToSliceAt)
-    const updatedMenuItems = [...menuItems]
-    // Add itemsToAddToMenu array's items to the menu at the index of the prospectiveListItem and remove 1 count of items (prospectiveListItem)
-    updatedMenuItems.splice(indexOfProspectiveListItem, 1, ...itemsToAddToMenu)
-    callback({items: updatedItemList, menuItems: updatedMenuItems}, false)
-  }
+  // function getItemsWidth(itemText: string): number {
+  //   return childWidthArray.find(item => item.text === itemText)?.width ?? 0
+  // }
+
+  // const swapMenuItemWithListItem = (
+  //   prospectiveListItem: React.ReactElement,
+  //   indexOfProspectiveListItem: number,
+  //   event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>,
+  //   callback: (props: ResponsiveProps, displayIcons: boolean) => void,
+  // ) => {
+  //   // get the selected menu item's width
+  //   const widthToFitIntoList = getItemsWidth(prospectiveListItem.props.children)
+  //   // Check if there is any empty space on the right side of the list
+  //   const availableSpace =
+  //     navRef && navRef.current.getBoundingClientRect().width - (listRef.current?.getBoundingClientRect().width ?? 0)
+
+  //   // Calculate how many items need to be pulled in to the menu to make room for the selected menu item
+  //   // I.e. if we need to pull 2 items in (index 0 and index 1), breakpoint (index) will return 1.
+  //   const index = getBreakpointForItemSwapping(widthToFitIntoList, availableSpace)
+  //   const indexToSliceAt = responsiveProps.items.length - 1 - index
+  //   // Form the new list of items
+  //   const itemsLeftInList = [...responsiveProps.items].slice(0, indexToSliceAt)
+  //   const updatedItemList = [...itemsLeftInList, prospectiveListItem]
+  //   // Form the new menu items
+  //   const itemsToAddToMenu = [...responsiveProps.items].slice(indexToSliceAt)
+  //   const updatedMenuItems = [...menuItems]
+  //   // Add itemsToAddToMenu array's items to the menu at the index of the prospectiveListItem and remove 1 count of items (prospectiveListItem)
+  //   updatedMenuItems.splice(indexOfProspectiveListItem, 1, ...itemsToAddToMenu)
+  //   callback({items: updatedItemList, menuItems: updatedMenuItems}, false)
+  // }
   // How many items do we need to pull in to the menu to make room for the selected menu item.
-  function getBreakpointForItemSwapping(widthToFitIntoList: number, availableSpace: number) {
-    let widthToSwap = 0
-    let breakpoint = 0
-    for (const [index, item] of [...responsiveProps.items].reverse().entries()) {
-      widthToSwap += getItemsWidth(item.props.children)
-      if (widthToFitIntoList < widthToSwap + availableSpace) {
-        breakpoint = index
-        break
-      }
-    }
-    return breakpoint
-  }
+  // function getBreakpointForItemSwapping(widthToFitIntoList: number, availableSpace: number) {
+  //   let widthToSwap = 0
+  //   let breakpoint = 0
+  //   for (const [index, item] of [...responsiveProps.items].reverse().entries()) {
+  //     widthToSwap += getItemsWidth(item.props.children)
+  //     if (widthToFitIntoList < widthToSwap + availableSpace) {
+  //       breakpoint = index
+  //       break
+  //     }
+  //   }
+  //   return breakpoint
+  // }
 
   const updateListAndMenu = useCallback((props: ResponsiveProps) => {
     setResponsiveProps(props)

From 86a61b8b84d6d66370a085f2d6997c7bcdac1b78 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Tue, 20 Feb 2024 12:42:12 +1100
Subject: [PATCH 10/16] Add logic to show divider

---
 packages/react/src/ActionBar/ActionBar.tsx | 197 ++++++++++-----------
 1 file changed, 91 insertions(+), 106 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 2410af4e20c..9750dd154b3 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -13,25 +13,17 @@ import React, {useState, useCallback, useRef, forwardRef} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
 import {ActionList} from '../ActionList'
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
-import {MORE_BTN_WIDTH, NavigationList, MoreMenuListItem} from '../UnderlineNav/UnderlineNav'
-import {ulStyles, menuStyles} from '../UnderlineNav/styles'
+import styled from 'styled-components'
+import sx from '../sx'
 import {useOnEscapePress} from '../hooks/useOnEscapePress'
 import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
 import {useResizeObserver} from '../hooks/useResizeObserver'
 
 import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
-//import styled from 'styled-components'
 import type {IconButtonProps} from '../Button'
 import {IconButton} from '../Button'
 import Box from '../Box'
 
-// import {get} from '../constants'
-//import sx, {BetterCssProperties, BetterSystemStyleObject, SxProp, merge} from '../sx'
-// import {ComponentProps} from '../utils/types'
-// import {ResponsiveValue, isResponsiveValue} from '../hooks/useResponsiveValue'
-// import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations'
-// import {defaultSxProp} from '../utils/defaultSxProp'
-
 type ChildSize = {
   text: string
   width: number
@@ -60,6 +52,46 @@ export type ActionBarProps = {
 
 export type ActionBarIconButtonProps = IconButtonProps
 
+const NavigationList = styled.ul`
+  ${sx};
+`
+
+const MORE_BTN_HEIGHT = 45
+const GAP = 8
+const MoreMenuListItem = styled.li`
+  display: flex;
+  align-items: center;
+  height: ${MORE_BTN_HEIGHT}px;
+`
+
+const ulStyles = {
+  display: 'flex',
+  listStyle: 'none',
+  whiteSpace: 'nowrap',
+  paddingY: 0,
+  paddingX: 0,
+  margin: 0,
+  marginBottom: '-1px',
+  alignItems: 'center',
+  gap: `${GAP}px`,
+  position: 'relative',
+}
+
+const menuStyles = {
+  position: 'absolute',
+  zIndex: 1,
+  top: '90%',
+  right: '0',
+  boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
+  borderRadius: '12px',
+  backgroundColor: 'canvas.overlay',
+  listStyle: 'none',
+  // Values are from ActionMenu
+  minWidth: '192px',
+  maxWidth: '640px',
+}
+
+const MORE_BTN_WIDTH = 86
 const getNavStyles = () => ({
   display: 'flex',
   paddingX: 3,
@@ -70,11 +102,6 @@ const getNavStyles = () => ({
 })
 
 const menuItemStyles = {
-  // This is needed to hide the selected check icon on the menu item. https://github.com/primer/react/blob/main/src/ActionList/Selection.tsx#L32
-  // '& > span': {
-  //   display: 'none',
-  // },
-  // To reset the style when the menu items are rendered as react router links
   textDecoration: 'none',
 }
 
@@ -91,8 +118,7 @@ const moreBtnStyles = {
 
 const getValidChildren = (children: React.ReactNode) => {
   return React.Children.toArray(children).filter(child => {
-    // only icon buttons for now. Expand to other buttons later
-    return React.isValidElement(child) && child.props.icon ? true : false
+    return React.isValidElement(child)
   }) as React.ReactElement[]
 }
 
@@ -144,20 +170,16 @@ const overflowEffect = (
     for (const [index, child] of childArray.entries()) {
       if (index < numberOfListItems) {
         items.push(child)
-      } else {
-        const ariaCurrent = child.props['aria-current']
-        const isCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false'
-        // We need to make sure to keep the selected item always visible.
-        // To do that, we swap the selected item with the last item in the list to make it visible. (When there is at least 1 item in the list to swap.)
-        if (isCurrent && numberOfListItems > 0) {
-          // If selected item couldn't make in to the list, we swap it with the last item in the list.
-          const indexToReplaceAt = numberOfListItems - 1 // because we are replacing the last item in the list
-          // splice method modifies the array by removing 1 item here at the given index and replace it with the "child" element then returns the removed item.
-          const propsectiveAction = items.splice(indexToReplaceAt, 1, child)[0]
-          menuItems.push(propsectiveAction)
+        //if the last item is a divider
+      } else if (childWidthArray[index].text === 'divider') {
+        if (index === numberOfListItems - 1 || index === numberOfListItems) {
+          continue
         } else {
-          menuItems.push(child)
+          const divider = React.createElement(ActionList.Divider, {key: index})
+          menuItems.push(divider)
         }
+      } else {
+        menuItems.push(child)
       }
     }
 
@@ -199,50 +221,6 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
     return validChildren.find(child => child.key === menuItem.key) ?? menuItem
   })
 
-  // function getItemsWidth(itemText: string): number {
-  //   return childWidthArray.find(item => item.text === itemText)?.width ?? 0
-  // }
-
-  // const swapMenuItemWithListItem = (
-  //   prospectiveListItem: React.ReactElement,
-  //   indexOfProspectiveListItem: number,
-  //   event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>,
-  //   callback: (props: ResponsiveProps, displayIcons: boolean) => void,
-  // ) => {
-  //   // get the selected menu item's width
-  //   const widthToFitIntoList = getItemsWidth(prospectiveListItem.props.children)
-  //   // Check if there is any empty space on the right side of the list
-  //   const availableSpace =
-  //     navRef && navRef.current.getBoundingClientRect().width - (listRef.current?.getBoundingClientRect().width ?? 0)
-
-  //   // Calculate how many items need to be pulled in to the menu to make room for the selected menu item
-  //   // I.e. if we need to pull 2 items in (index 0 and index 1), breakpoint (index) will return 1.
-  //   const index = getBreakpointForItemSwapping(widthToFitIntoList, availableSpace)
-  //   const indexToSliceAt = responsiveProps.items.length - 1 - index
-  //   // Form the new list of items
-  //   const itemsLeftInList = [...responsiveProps.items].slice(0, indexToSliceAt)
-  //   const updatedItemList = [...itemsLeftInList, prospectiveListItem]
-  //   // Form the new menu items
-  //   const itemsToAddToMenu = [...responsiveProps.items].slice(indexToSliceAt)
-  //   const updatedMenuItems = [...menuItems]
-  //   // Add itemsToAddToMenu array's items to the menu at the index of the prospectiveListItem and remove 1 count of items (prospectiveListItem)
-  //   updatedMenuItems.splice(indexOfProspectiveListItem, 1, ...itemsToAddToMenu)
-  //   callback({items: updatedItemList, menuItems: updatedMenuItems}, false)
-  // }
-  // How many items do we need to pull in to the menu to make room for the selected menu item.
-  // function getBreakpointForItemSwapping(widthToFitIntoList: number, availableSpace: number) {
-  //   let widthToSwap = 0
-  //   let breakpoint = 0
-  //   for (const [index, item] of [...responsiveProps.items].reverse().entries()) {
-  //     widthToSwap += getItemsWidth(item.props.children)
-  //     if (widthToFitIntoList < widthToSwap + availableSpace) {
-  //       breakpoint = index
-  //       break
-  //     }
-  //   }
-  //   return breakpoint
-  // }
-
   const updateListAndMenu = useCallback((props: ResponsiveProps) => {
     setResponsiveProps(props)
   }, [])
@@ -305,37 +283,38 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                 sx={menuStyles}
                 style={{display: isWidgetOpen ? 'block' : 'none'}}
               >
-                {menuItems.map(menuItem => {
-                  const {
-                    children: menuItemChildren,
-                    //'aria-current': ariaCurrent,
-                    onSelect,
-                    icon: Icon,
-                    'aria-label': ariaLabel,
-                  } = menuItem.props
-                  return (
-                    <ActionList.LinkItem
-                      key={menuItemChildren}
-                      sx={menuItemStyles}
-                      onClick={(
-                        event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>,
-                      ) => {
-                        // When there are no items in the list, do not run the swap function as we want to keep everything in the menu.
-                        // Do we need to swap? swapMenuItemWithListItem(menuItem, index, event, updateListAndMenu)
-                        closeOverlay()
-                        focusOnMoreMenuBtn()
-                        // fire onSelect event that comes from the UnderlineNav.Item (if it is defined)
-                        typeof onSelect === 'function' && onSelect(event)
-                      }}
-                    >
-                      {Icon ? (
-                        <ActionList.LeadingVisual>
-                          <Icon />
-                        </ActionList.LeadingVisual>
-                      ) : null}
-                      {ariaLabel}
-                    </ActionList.LinkItem>
-                  )
+                {menuItems.map((menuItem, index) => {
+                  if (menuItem.type === ActionList.Divider) {
+                    return <ActionList.Divider key={index} />
+                  } else {
+                    const {
+                      children: menuItemChildren,
+                      //'aria-current': ariaCurrent,
+                      onSelect,
+                      icon: Icon,
+                      'aria-label': ariaLabel,
+                    } = menuItem.props
+                    return (
+                      <ActionList.LinkItem
+                        key={menuItemChildren}
+                        sx={menuItemStyles}
+                        onClick={(
+                          event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>,
+                        ) => {
+                          closeOverlay()
+                          focusOnMoreMenuBtn()
+                          typeof onSelect === 'function' && onSelect(event)
+                        }}
+                      >
+                        {Icon ? (
+                          <ActionList.LeadingVisual>
+                            <Icon />
+                          </ActionList.LeadingVisual>
+                        ) : null}
+                        {ariaLabel}
+                      </ActionList.LinkItem>
+                    )
+                  }
                 })}
               </ActionList>
             </MoreMenuListItem>
@@ -364,10 +343,16 @@ const sizeToHeight = {
   large: '32px',
 }
 export const VerticalDivider = () => {
-  const {size} = React.useContext(ActionBarContext)
-
+  const ref = useRef<HTMLDivElement>(null)
+  const {size, setChildrenWidth} = React.useContext(ActionBarContext)
+  useIsomorphicLayoutEffect(() => {
+    const text = 'divider'
+    const domRect = (ref as MutableRefObject<HTMLElement>).current.getBoundingClientRect()
+    setChildrenWidth({text, width: domRect.width})
+  }, [ref, setChildrenWidth])
   return (
     <Box
+      ref={ref}
       data-component="ActionBar.VerticalDivider"
       aria-hidden="true"
       sx={{

From 83c2486ca714fd2959eb3bcdffabcc4a2d49c150 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Tue, 20 Feb 2024 23:25:46 +1100
Subject: [PATCH 11/16] Add docs

---
 .../src/drafts/ActionBar/ActionBar.docs.json  | 62 +++++++++++++++++++
 .../ActionBar/ActionBar.stories.tsx           |  9 +--
 .../src/{ => drafts}/ActionBar/ActionBar.tsx  | 32 ++++------
 .../react/src/{ => drafts}/ActionBar/index.ts |  2 +-
 packages/react/src/drafts/index.ts            |  1 +
 5 files changed, 80 insertions(+), 26 deletions(-)
 create mode 100644 packages/react/src/drafts/ActionBar/ActionBar.docs.json
 rename packages/react/src/{ => drafts}/ActionBar/ActionBar.stories.tsx (94%)
 rename packages/react/src/{ => drafts}/ActionBar/ActionBar.tsx (94%)
 rename packages/react/src/{ => drafts}/ActionBar/index.ts (81%)

diff --git a/packages/react/src/drafts/ActionBar/ActionBar.docs.json b/packages/react/src/drafts/ActionBar/ActionBar.docs.json
new file mode 100644
index 00000000000..bd9aad7cf0d
--- /dev/null
+++ b/packages/react/src/drafts/ActionBar/ActionBar.docs.json
@@ -0,0 +1,62 @@
+{
+  "id": "actionbar",
+  "name": "ActionBar",
+  "status": "draft",
+  "a11yReviewed": false,
+  "stories": [
+    {"id": "components-actionbar--default"},
+    {"id": "components-actionbar--small-action-bar"},
+    {"id": "components-actionbar--comment-box"}
+  ],
+  "props": [
+    {
+      "name": "size",
+      "type": "'small' | 'medium' | 'large'",
+      "required": false,
+      "description": "Size of the action bar"
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "description": "When provided, a label is added to the action bar"
+    },
+    {
+      "name": "children",
+      "type": "React.ReactElement",
+      "required": true
+    }
+  ],
+  "subcomponents": [
+    {
+      "name": "ActionBar.Icon",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "defaultValue": "",
+          "required": true,
+          "description": "This will be the Button description."
+        },
+        {
+          "name": "icon",
+          "type": "Component",
+          "defaultValue": "",
+          "description": "provide an octicon. It will be placed in the center of the button"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "defaultValue": "",
+          "description": "Use an aria label to describe the functionality of the button. Please refer to [our guidance on alt text](https://primer.style/guides/accessibility/alternative-text-for-images) for tips on writing good alternative text."
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ]
+    },
+    {
+      "name": "ActionBar.Divider"
+    }
+  ]
+}
diff --git a/packages/react/src/ActionBar/ActionBar.stories.tsx b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
similarity index 94%
rename from packages/react/src/ActionBar/ActionBar.stories.tsx
rename to packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
index c23b4fea10b..32277476a5d 100644
--- a/packages/react/src/ActionBar/ActionBar.stories.tsx
+++ b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react'
 import ActionBar from '.'
 import {
   BoldIcon,
@@ -14,9 +14,10 @@ import {
   ListOrderedIcon,
   TasklistIcon,
 } from '@primer/octicons-react'
-import {MarkdownInput} from '../drafts/MarkdownEditor/_MarkdownInput'
-import {ViewSwitch, type MarkdownViewMode} from '../drafts/MarkdownEditor/_ViewSwitch'
-import {Box} from '..'
+import {MarkdownInput} from '../MarkdownEditor/_MarkdownInput'
+import {ViewSwitch} from '../MarkdownEditor/_ViewSwitch'
+import type {MarkdownViewMode} from '../MarkdownEditor/_ViewSwitch'
+import {Box} from '../..'
 
 export default {
   title: 'Components/ActionBar',
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/drafts/ActionBar/ActionBar.tsx
similarity index 94%
rename from packages/react/src/ActionBar/ActionBar.tsx
rename to packages/react/src/drafts/ActionBar/ActionBar.tsx
index 9750dd154b3..189b5fc8a91 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/drafts/ActionBar/ActionBar.tsx
@@ -1,28 +1,18 @@
-/*
-TODO
-- Decide props for ActionBar
-- Add api docs
-- Add proper types\
-Bugs
-- Nothing in More items
-- Divider is loopy
-*/
-
 import type {RefObject, MutableRefObject} from 'react'
 import React, {useState, useCallback, useRef, forwardRef} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
-import {ActionList} from '../ActionList'
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
+import {ActionList} from '../../ActionList'
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 import styled from 'styled-components'
-import sx from '../sx'
-import {useOnEscapePress} from '../hooks/useOnEscapePress'
-import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
-import {useResizeObserver} from '../hooks/useResizeObserver'
-
-import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
-import type {IconButtonProps} from '../Button'
-import {IconButton} from '../Button'
-import Box from '../Box'
+import sx from '../../sx'
+import {useOnEscapePress} from '../../hooks/useOnEscapePress'
+import type {ResizeObserverEntry} from '../../hooks/useResizeObserver'
+import {useResizeObserver} from '../../hooks/useResizeObserver'
+
+import {useOnOutsideClick} from '../../hooks/useOnOutsideClick'
+import type {IconButtonProps} from '../../Button'
+import {IconButton} from '../../Button'
+import Box from '../../Box'
 
 type ChildSize = {
   text: string
diff --git a/packages/react/src/ActionBar/index.ts b/packages/react/src/drafts/ActionBar/index.ts
similarity index 81%
rename from packages/react/src/ActionBar/index.ts
rename to packages/react/src/drafts/ActionBar/index.ts
index 535a1249e15..ae3069a0ae3 100644
--- a/packages/react/src/ActionBar/index.ts
+++ b/packages/react/src/drafts/ActionBar/index.ts
@@ -1,5 +1,5 @@
 import {ActionBar as Bar, ActionBarIconButton, VerticalDivider} from './ActionBar'
-//export type {ActionBarProps} from './ActionBar'
+export type {ActionBarProps} from './ActionBar'
 
 const ActionBar = Object.assign(Bar, {
   IconButton: ActionBarIconButton,
diff --git a/packages/react/src/drafts/index.ts b/packages/react/src/drafts/index.ts
index 8eca24f45bd..47bc422110a 100644
--- a/packages/react/src/drafts/index.ts
+++ b/packages/react/src/drafts/index.ts
@@ -62,3 +62,4 @@ export type {
 } from '../NavList'
 export * from './SelectPanel2'
 export * from '../TooltipV2'
+export * from './ActionBar'

From 6600908f544ded84d47059873107e25acbc6cc0a Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 22 Feb 2024 15:21:21 +1100
Subject: [PATCH 12/16] Fix builds

---
 packages/react/src/drafts/ActionBar/ActionBar.docs.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/drafts/ActionBar/ActionBar.docs.json b/packages/react/src/drafts/ActionBar/ActionBar.docs.json
index bd9aad7cf0d..695fefa3f1e 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.docs.json
+++ b/packages/react/src/drafts/ActionBar/ActionBar.docs.json
@@ -56,7 +56,8 @@
       ]
     },
     {
-      "name": "ActionBar.Divider"
+      "name": "ActionBar.Divider",
+      "props": []
     }
   ]
 }

From ac0550d5154125953ff17944b2c18e7fac3f996f Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 22 Feb 2024 15:34:06 +1100
Subject: [PATCH 13/16] Switch to drafts

---
 packages/react/src/drafts/ActionBar/ActionBar.docs.json   | 6 +++---
 packages/react/src/drafts/ActionBar/ActionBar.stories.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/drafts/ActionBar/ActionBar.docs.json b/packages/react/src/drafts/ActionBar/ActionBar.docs.json
index 695fefa3f1e..2546057d587 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.docs.json
+++ b/packages/react/src/drafts/ActionBar/ActionBar.docs.json
@@ -4,9 +4,9 @@
   "status": "draft",
   "a11yReviewed": false,
   "stories": [
-    {"id": "components-actionbar--default"},
-    {"id": "components-actionbar--small-action-bar"},
-    {"id": "components-actionbar--comment-box"}
+    {"id": "drafts-components-actionbar--default"},
+    {"id": "drafts-components-actionbar--small-action-bar"},
+    {"id": "drafts-components-actionbar--comment-box"}
   ],
   "props": [
     {
diff --git a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
index 32277476a5d..5b1d020bf07 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
+++ b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
@@ -20,7 +20,7 @@ import type {MarkdownViewMode} from '../MarkdownEditor/_ViewSwitch'
 import {Box} from '../..'
 
 export default {
-  title: 'Components/ActionBar',
+  title: 'Drafts/Components/ActionBar',
 } as Meta<typeof ActionBar>
 
 export const Default = () => (

From d4fb85fb26d64bc373f9ac3874da05982deb21de Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 22 Feb 2024 15:38:07 +1100
Subject: [PATCH 14/16] Remove stories from docs for now

---
 packages/react/src/drafts/ActionBar/ActionBar.docs.json | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/react/src/drafts/ActionBar/ActionBar.docs.json b/packages/react/src/drafts/ActionBar/ActionBar.docs.json
index 2546057d587..0a18045f525 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.docs.json
+++ b/packages/react/src/drafts/ActionBar/ActionBar.docs.json
@@ -3,11 +3,7 @@
   "name": "ActionBar",
   "status": "draft",
   "a11yReviewed": false,
-  "stories": [
-    {"id": "drafts-components-actionbar--default"},
-    {"id": "drafts-components-actionbar--small-action-bar"},
-    {"id": "drafts-components-actionbar--comment-box"}
-  ],
+  "stories": [],
   "props": [
     {
       "name": "size",

From fcf07a8648afc220758d9a6ce813c0a0810e70c1 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Mon, 26 Feb 2024 11:58:25 -0800
Subject: [PATCH 15/16] Update snapshots for exports

---
 .../react/src/__tests__/__snapshots__/exports.test.ts.snap    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
index 037ad161509..64a004651aa 100644
--- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -237,6 +237,7 @@ exports[`@primer/react/deprecated should not update exports without a semver cha
 
 exports[`@primer/react/drafts should not update exports without a semver change 1`] = `
 [
+  "type ActionBarProps",
   "Blankslate",
   "type BlankslateProps",
   "callbackCancelledResult",
@@ -249,6 +250,7 @@ exports[`@primer/react/drafts should not update exports without a semver change
   "type DataTableProps",
   "default",
   "default",
+  "default",
   "Dialog",
   "type DialogButtonProps",
   "type DialogHeaderProps",
@@ -320,6 +322,7 @@ exports[`@primer/react/drafts should not update exports without a semver change
 
 exports[`@primer/react/experimental should not update exports without a semver change 1`] = `
 [
+  "type ActionBarProps",
   "Blankslate",
   "type BlankslateProps",
   "callbackCancelledResult",
@@ -332,6 +335,7 @@ exports[`@primer/react/experimental should not update exports without a semver c
   "type DataTableProps",
   "default",
   "default",
+  "default",
   "Dialog",
   "type DialogButtonProps",
   "type DialogHeaderProps",

From b9f08bd428aff257dfbbe7c2bbe686f99b5fd6a5 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Tue, 27 Feb 2024 07:03:36 +1100
Subject: [PATCH 16/16] Create old-peas-cross.md

---
 .changeset/old-peas-cross.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/old-peas-cross.md

diff --git a/.changeset/old-peas-cross.md b/.changeset/old-peas-cross.md
new file mode 100644
index 00000000000..0c28cf9079f
--- /dev/null
+++ b/.changeset/old-peas-cross.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add a new experimental component ActionBar