diff --git a/.changeset/chilly-dingos-build.md b/.changeset/chilly-dingos-build.md new file mode 100644 index 00000000000..dd8efe3e56f --- /dev/null +++ b/.changeset/chilly-dingos-build.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +chore: fix ActionBar gap issue diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx index 2b220e306dd..73f2a02bddd 100644 --- a/packages/react/src/ActionBar/ActionBar.tsx +++ b/packages/react/src/ActionBar/ActionBar.tsx @@ -15,6 +15,8 @@ import {useFocusZone, FocusKeys} from '../hooks/useFocusZone' import styles from './ActionBar.module.css' import {clsx} from 'clsx' +const ACTIONBAR_ITEM_GAP = 8 + type ChildSize = { text: string width: number @@ -48,7 +50,7 @@ export type ActionBarProps = { export type ActionBarIconButtonProps = {disabled?: boolean} & IconButtonProps -const MORE_BTN_WIDTH = 86 +const MORE_BTN_WIDTH = 32 const getValidChildren = (children: React.ReactNode) => { return React.Children.toArray(children).filter(child => { @@ -61,7 +63,7 @@ const calculatePossibleItems = (childWidthArray: ChildWidthArray, navWidth: numb 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 += index > 0 ? childWidth.width + ACTIONBAR_ITEM_GAP : childWidth.width if (sumsOfChildWidth > widthToFit) { breakpoint = index break @@ -202,7 +204,7 @@ export const ActionBar: React.FC> = prop return (
-
+
{listItems} {menuItems.length > 0 && (