@atlaskit/editor-toolbar 0.3.0 → 0.3.1

package/dist/esm/ui/ToolbarDropdownItemSection.js

@@ -1,14 +1,11 @@
-/* ToolbarDropdownItemSection.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./ToolbarDropdownItemSection.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Box } from '@atlaskit/primitives/compiled';
-var styles = {
-  container: "_1e0c1txw _2lx21bp4"
-};
+import { DropdownItemGroup } from '@atlaskit/dropdown-menu';
 export var ToolbarDropdownItemSection = function ToolbarDropdownItemSection(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container
+  var children = _ref.children,
+    hasSeparator = _ref.hasSeparator,
+    title = _ref.title;
+  return /*#__PURE__*/React.createElement(DropdownItemGroup, {
+    hasSeparator: hasSeparator,
+    title: title
   }, children);
 };

package/dist/esm/ui/ToolbarDropdownMenu.compiled.css

@@ -0,0 +1 @@
+._1mou1b66{margin-block:var(--ds-space-050,4px)}

package/dist/esm/ui/ToolbarDropdownMenu.js

@@ -1,11 +1,16 @@
+/* ToolbarDropdownMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ToolbarDropdownMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { useToolbarUI } from '../hooks/ui-context';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
+var styles = {
+  sectionMargin: "_1mou1b66"
+};
 var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
   var iconBefore = _ref.iconBefore,
-    groupLocation = _ref.groupLocation,
     children = _ref.children,
     isDisabled = _ref.isDisabled,
     testId = _ref.testId,
@@ -45,7 +50,6 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
         onFocus: triggerProps.onFocus,
         testId: testId,
         iconBefore: iconBefore,
-        groupLocation: groupLocation,
         isDisabled: isDisabled,
         label: label
       });
@@ -56,16 +60,18 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
 };
 export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
   var iconBefore = _ref2.iconBefore,
-    groupLocation = _ref2.groupLocation,
     children = _ref2.children,
     isDisabled = _ref2.isDisabled,
     testId = _ref2.testId,
-    label = _ref2.label;
+    label = _ref2.label,
+    _ref2$hasSectionMargi = _ref2.hasSectionMargin,
+    hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi;
   return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
     iconBefore: iconBefore,
-    groupLocation: groupLocation,
     isDisabled: isDisabled,
     testId: testId,
     label: label
-  }, children));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([hasSectionMargin && styles.sectionMargin])
+  }, children)));
 };

package/dist/types/index.d.ts

@@ -8,7 +8,6 @@ export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
-export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
@@ -57,5 +56,5 @@ export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
 export { IndentIcon } from './ui/icons/IndentIcon';
 export { OutdentIcon } from './ui/icons/OutdentIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
-export type { IconComponent, ToolbarButtonGroupLocation } from './types';
+export type { IconComponent } from './types';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/types/types.d.ts

@@ -1,3 +1,2 @@
 import { type NewCoreIconProps } from '@atlaskit/icon';
-export type ToolbarButtonGroupLocation = 'start' | 'middle' | 'end';
 export type IconComponent = (props: NewCoreIconProps) => JSX.Element;

package/dist/types/ui/ToolbarButton.d.ts

@@ -1,6 +1,5 @@
 import React, { type ReactNode } from 'react';
 import { type TriggerProps } from '@atlaskit/popup';
-import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarButtonProps = Partial<TriggerProps> & {
     children?: ReactNode;
     isSelected?: boolean;
@@ -9,7 +8,6 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     testId?: string;
     iconBefore: React.ReactNode;
-    groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     ariaKeyshortcuts?: string;
     label?: string;

package/dist/types/ui/ToolbarButtonGroup.d.ts

@@ -1,6 +1,10 @@
-import React, { type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
 type ToolbarButtonGroupProps = {
     children?: ReactNode;
 };
-export declare const ToolbarButtonGroup: ({ children }: ToolbarButtonGroupProps) => React.JSX.Element;
+export declare const ToolbarButtonGroup: ({ children }: ToolbarButtonGroupProps) => JSX.Element;
 export {};

package/dist/types/ui/ToolbarDropdownItemSection.d.ts

@@ -1,6 +1,8 @@
 import React, { type ReactNode } from 'react';
 type ToolbarDropdownItemSectionProps = {
     children?: ReactNode;
+    hasSeparator?: boolean;
+    title?: string;
 };
-export declare const ToolbarDropdownItemSection: ({ children }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
+export declare const ToolbarDropdownItemSection: ({ children, hasSeparator, title, }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
 export {};

package/dist/types/ui/ToolbarDropdownMenu.d.ts

@@ -1,15 +1,18 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { type ReactNode } from 'react';
-import { type OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
-import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarDropdownMenuProps = {
     iconBefore: React.ReactNode;
     children?: ReactNode;
-    groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     testId?: string;
     label?: string;
-    isOpen?: boolean;
-    onOpenChange?: (args: OnOpenChangeArgs) => void;
+    /**
+     * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
+     */
+    hasSectionMargin?: boolean;
 };
-export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, testId, label, }: ToolbarDropdownMenuProps) => React.JSX.Element;
+export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
 export {};

package/dist/types/ui/ToolbarDropdownMenuContext.d.ts

@@ -8,5 +8,5 @@ export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextVal
 interface ToolbarDropdownMenuProviderProps {
     children: React.ReactNode;
 }
-export declare const ToolbarDropdownMenuProvider: ({ children, }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
+export declare const ToolbarDropdownMenuProvider: ({ children }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
 export {};

package/dist/types/ui/ToolbarTooltip.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { PositionType } from '@atlaskit/tooltip';
 type ToolbarTooltipProps = {
-    content: string;
+    content: React.ReactNode;
     children: React.ReactNode;
     position?: PositionType;
 };

package/dist/types-ts4.5/index.d.ts

@@ -8,7 +8,6 @@ export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
-export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
@@ -57,5 +56,5 @@ export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
 export { IndentIcon } from './ui/icons/IndentIcon';
 export { OutdentIcon } from './ui/icons/OutdentIcon';
 export { default as ColorPalette } from './ui/ColorPalette';
-export type { IconComponent, ToolbarButtonGroupLocation } from './types';
+export type { IconComponent } from './types';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/types-ts4.5/types.d.ts

@@ -1,3 +1,2 @@
 import { type NewCoreIconProps } from '@atlaskit/icon';
-export type ToolbarButtonGroupLocation = 'start' | 'middle' | 'end';
 export type IconComponent = (props: NewCoreIconProps) => JSX.Element;

package/dist/types-ts4.5/ui/ToolbarButton.d.ts

@@ -1,6 +1,5 @@
 import React, { type ReactNode } from 'react';
 import { type TriggerProps } from '@atlaskit/popup';
-import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarButtonProps = Partial<TriggerProps> & {
     children?: ReactNode;
     isSelected?: boolean;
@@ -9,7 +8,6 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     testId?: string;
     iconBefore: React.ReactNode;
-    groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     ariaKeyshortcuts?: string;
     label?: string;

package/dist/types-ts4.5/ui/ToolbarButtonGroup.d.ts

@@ -1,6 +1,10 @@
-import React, { type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
 type ToolbarButtonGroupProps = {
     children?: ReactNode;
 };
-export declare const ToolbarButtonGroup: ({ children }: ToolbarButtonGroupProps) => React.JSX.Element;
+export declare const ToolbarButtonGroup: ({ children }: ToolbarButtonGroupProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ToolbarDropdownItemSection.d.ts

@@ -1,6 +1,8 @@
 import React, { type ReactNode } from 'react';
 type ToolbarDropdownItemSectionProps = {
     children?: ReactNode;
+    hasSeparator?: boolean;
+    title?: string;
 };
-export declare const ToolbarDropdownItemSection: ({ children }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
+export declare const ToolbarDropdownItemSection: ({ children, hasSeparator, title, }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ToolbarDropdownMenu.d.ts

@@ -1,15 +1,18 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { type ReactNode } from 'react';
-import { type OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
-import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarDropdownMenuProps = {
     iconBefore: React.ReactNode;
     children?: ReactNode;
-    groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     testId?: string;
     label?: string;
-    isOpen?: boolean;
-    onOpenChange?: (args: OnOpenChangeArgs) => void;
+    /**
+     * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
+     */
+    hasSectionMargin?: boolean;
 };
-export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, testId, label, }: ToolbarDropdownMenuProps) => React.JSX.Element;
+export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ToolbarDropdownMenuContext.d.ts

@@ -8,5 +8,5 @@ export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextVal
 interface ToolbarDropdownMenuProviderProps {
     children: React.ReactNode;
 }
-export declare const ToolbarDropdownMenuProvider: ({ children, }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
+export declare const ToolbarDropdownMenuProvider: ({ children }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ToolbarTooltip.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { PositionType } from '@atlaskit/tooltip';
 type ToolbarTooltipProps = {
-    content: string;
+    content: React.ReactNode;
     children: React.ReactNode;
     position?: PositionType;
 };

package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx

@@ -162,16 +162,12 @@ export const ExampleManuallyComposedToolbar = () => {
 							<ToolbarButton
 								iconBefore={<AIChatIcon label="Ask Rovo" />}
 								onClick={onClick('Ask Rovo')}
-								groupLocation="start"
 								isDisabled={isRovoDisabled}
 							>
 								Ask Rovo
 							</ToolbarButton>
 						</ToolbarTooltip>
-						<ToolbarDropdownMenu
-							iconBefore={<MoreItemsIcon label="More formatting" />}
-							groupLocation="end"
-						>
+						<ToolbarDropdownMenu iconBefore={<MoreItemsIcon label="More formatting" />}>
 							<ToolbarDropdownItemSection>
 								<ToolbarNestedDropdownMenu
 									elemBefore={<AIAdjustLengthIcon label="Adjust length" />}
@@ -380,16 +376,12 @@ export const ExampleManuallyComposedToolbar = () => {
 									formatting.italic && !formatting.bold ? 'Italic' : 'Bold',
 									onToggleFormatting(formatting.italic && !formatting.bold ? 'italic' : 'bold'),
 								)}
-								groupLocation="start"
 								isSelected={formatting.bold || formatting.italic}
 								isDisabled={formatting.italic ? isItalicDisabled : isBoldDisabled}
 								ariaKeyshortcuts={formatting.italic && !formatting.bold ? '⌘I' : '⌘B'}
 							/>
 						</ToolbarTooltip>
-						<ToolbarDropdownMenu
-							iconBefore={<MoreItemsIcon label="More formatting" />}
-							groupLocation="end"
-						>
+						<ToolbarDropdownMenu iconBefore={<MoreItemsIcon label="More formatting" />}>
 							<ToolbarDropdownItemSection>
 								<ToolbarDropdownItem
 									elemBefore={<BoldIcon label="Bold" />}
@@ -471,7 +463,6 @@ export const ExampleManuallyComposedToolbar = () => {
 									listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list',
 									onToggleListOrAlignment(listOrAlignment === 'numbered' ? 'numbered' : 'bulleted'),
 								)}
-								groupLocation="start"
 								isSelected={listOrAlignment !== 'none'}
 								isDisabled={
 									listOrAlignment === 'numbered' ? isNumberedListDisabled : isBulletedListDisabled
@@ -480,7 +471,6 @@ export const ExampleManuallyComposedToolbar = () => {
 						</ToolbarTooltip>
 						<ToolbarDropdownMenu
 							iconBefore={<MoreItemsIcon label="Lists, indentation and alignment" />}
-							groupLocation="end"
 						>
 							<ToolbarDropdownItemSection>
 								<ToolbarDropdownItem

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",

package/src/index.ts

@@ -9,7 +9,6 @@ export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
-export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
 
@@ -61,6 +60,6 @@ export { OutdentIcon } from './ui/icons/OutdentIcon';
 
 export { default as ColorPalette } from './ui/ColorPalette';
 
-export type { IconComponent, ToolbarButtonGroupLocation } from './types';
+export type { IconComponent } from './types';
 
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/src/types.ts

@@ -1,4 +1,3 @@
 import { type NewCoreIconProps } from '@atlaskit/icon';
 
-export type ToolbarButtonGroupLocation = 'start' | 'middle' | 'end';
 export type IconComponent = (props: NewCoreIconProps) => JSX.Element;

package/src/ui/ColorPalette/Color.tsx

@@ -48,63 +48,71 @@ const buttonStyles = css({
  * Individual color palette item component
  * Displays a single color swatch with tooltip and selection state
  */
-export const Color = memo<ColorProps>(({
-	autoFocus,
-	tabIndex,
-	value,
-	label,
-	isSelected,
-	borderColor,
-	checkMarkColor = token('color.icon.inverse', '#FFFFFF'),
-	hexToPaletteColor,
-	decorator,
-	onClick,
-	onKeyDown,
-}) => {
-	const colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
+export const Color = memo<ColorProps>(
+	({
+		autoFocus,
+		tabIndex,
+		value,
+		label,
+		isSelected,
+		borderColor,
+		checkMarkColor = token('color.icon.inverse', '#FFFFFF'),
+		hexToPaletteColor,
+		decorator,
+		onClick,
+		onKeyDown,
+	}) => {
+		const colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
 
-	const handleMouseDown = useCallback((e: React.MouseEvent) => {
-		e.preventDefault();
-	}, []);
+		const handleMouseDown = useCallback((e: React.MouseEvent) => {
+			e.preventDefault();
+		}, []);
 
-	const handleClick = useCallback((e: React.MouseEvent) => {
-		e.preventDefault();
-		onClick(value, label);
-	}, [onClick, value, label]);
+		const handleClick = useCallback(
+			(e: React.MouseEvent) => {
+				e.preventDefault();
+				onClick(value, label);
+			},
+			[onClick, value, label],
+		);
 
-	const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-		if (!onKeyDown) {
-			return;
-		}
-		e.preventDefault();
-		onKeyDown(value, label, e);
-	}, [onKeyDown, value, label]);
+		const handleKeyDown = useCallback(
+			(e: React.KeyboardEvent) => {
+				if (!onKeyDown) {
+					return;
+				}
+				e.preventDefault();
+				onKeyDown(value, label, e);
+			},
+			[onKeyDown, value, label],
+		);
 
-	return (
-		<Tooltip content={label}>
-			<span css={buttonWrapperStyles}>
-				<button
-					type="button"
-					css={buttonStyles}
-					aria-label={label}
-					role="radio"
-					aria-checked={isSelected}
-					onClick={handleClick}
-					onKeyDown={handleKeyDown}
-					onMouseDown={handleMouseDown}
-					tabIndex={tabIndex}
-					style={{
-						backgroundColor: colorStyle || token('color.background.input', '#FFFFFF'),
-						border: `1px solid ${borderColor}`,
-					}}
-					autoFocus={autoFocus}
-				>
-					{!decorator && isSelected && (
-						<EditorDoneIcon LEGACY_primaryColor={checkMarkColor} label="" />
-					)}
-					{decorator}
-				</button>
-			</span>
-		</Tooltip>
-	);
-});
+		return (
+			<Tooltip content={label}>
+				<span css={buttonWrapperStyles}>
+					<button
+						type="button"
+						css={buttonStyles}
+						aria-label={label}
+						role="radio"
+						aria-checked={isSelected}
+						onClick={handleClick}
+						onKeyDown={handleKeyDown}
+						onMouseDown={handleMouseDown}
+						tabIndex={tabIndex}
+						style={{
+							backgroundColor: colorStyle || token('color.background.input', '#FFFFFF'),
+							border: `1px solid ${borderColor}`,
+						}}
+						autoFocus={autoFocus}
+					>
+						{!decorator && isSelected && (
+							<EditorDoneIcon LEGACY_primaryColor={checkMarkColor} label="" />
+						)}
+						{decorator}
+					</button>
+				</span>
+			</Tooltip>
+		);
+	},
+);

package/src/ui/ToolbarButton.tsx

@@ -6,7 +6,6 @@ import { Pressable } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
 import { useToolbarUI } from '../hooks/ui-context';
-import { type ToolbarButtonGroupLocation } from '../types';
 
 const styles = cssMap({
 	button: {
@@ -50,28 +49,6 @@ const styles = cssMap({
 			backgroundColor: token('color.background.selected.pressed'),
 		},
 	},
-	groupStart: {
-		borderTopRightRadius: '0px',
-		borderBottomRightRadius: '0px',
-		justifyContent: 'flex-end',
-		paddingLeft: token('space.075'),
-		paddingRight: token('space.025'),
-	},
-	groupMiddle: {
-		borderTopLeftRadius: '0px',
-		borderBottomLeftRadius: '0px',
-		borderTopRightRadius: '0px',
-		borderBottomRightRadius: '0px',
-		paddingLeft: token('space.050'),
-		paddingRight: token('space.050'),
-	},
-	groupEnd: {
-		borderTopLeftRadius: '0px',
-		borderBottomLeftRadius: '0px',
-		justifyContent: 'flex-start',
-		paddingLeft: token('space.025'),
-		paddingRight: token('space.075'),
-	},
 });
 
 type ToolbarButtonProps = Partial<TriggerProps> & {
@@ -82,7 +59,6 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
 	onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
 	testId?: string;
 	iconBefore: React.ReactNode;
-	groupLocation?: ToolbarButtonGroupLocation;
 	isDisabled?: boolean;
 	ariaKeyshortcuts?: string;
 	label?: string;
@@ -102,7 +78,6 @@ export const ToolbarButton = forwardRef(
 			onBlur,
 			onFocus,
 			testId,
-			groupLocation,
 			isDisabled,
 			ariaKeyshortcuts,
 			label,
@@ -117,9 +92,6 @@ export const ToolbarButton = forwardRef(
 				xcss={cx(
 					styles.button,
 					isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled,
-					groupLocation === 'start' && styles.groupStart,
-					groupLocation === 'middle' && styles.groupMiddle,
-					groupLocation === 'end' && styles.groupEnd,
 				)}
 				aria-pressed={isSelected}
 				aria-expanded={ariaExpanded}

package/src/ui/ToolbarButtonGroup.tsx

@@ -1,12 +1,34 @@
-import React, { type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Children, Fragment, type ReactNode } from 'react';
+
+import { cssMap, jsx } from '@compiled/react';
 
-import { cssMap } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
 
 const styles = cssMap({
 	container: {
 		display: 'flex',
 	},
+	firstChild: {
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+		button: {
+			borderTopRightRadius: 0,
+			borderBottomRightRadius: 0,
+			paddingInline: token('space.050'),
+		},
+	},
+	lastChild: {
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+		button: {
+			borderTopLeftRadius: 0,
+			borderBottomLeftRadius: 0,
+			paddingInline: token('space.075'),
+		},
+	},
 });
 
 type ToolbarButtonGroupProps = {
@@ -14,5 +36,22 @@ type ToolbarButtonGroupProps = {
 };
 
 export const ToolbarButtonGroup = ({ children }: ToolbarButtonGroupProps) => {
-	return <Box xcss={styles.container}>{children}</Box>;
+	const items = Children.toArray(children);
+	const FirstChild = items.at(0);
+	const LastChild = items.at(-1);
+	const middleChildren = items.slice(1, -1);
+
+	return (
+		<Box xcss={styles.container}>
+			{items.length <= 1 ? (
+				children
+			) : (
+				<Fragment>
+					<div css={styles.firstChild}>{FirstChild}</div>
+					{middleChildren}
+					<div css={styles.lastChild}>{LastChild}</div>
+				</Fragment>
+			)}
+		</Box>
+	);
 };

package/src/ui/ToolbarDropdownItem.tsx

@@ -17,12 +17,14 @@ type TextStyle =
 
 const styles = cssMap({
 	toolbarDropdownItem: {
+		display: 'flex',
 		position: 'relative',
 		backgroundColor: token('color.background.neutral.subtle'),
 		width: '100%',
 		minHeight: '36px',
-		paddingLeft: token('space.150'),
-		paddingRight: token('space.150'),
+		minWidth: '230px',
+		paddingInline: token('space.200'),
+		paddingBlock: token('space.100'),
 		'&:focus-visible': {
 			outlineOffset: token('space.negative.025'),
 			borderRadius: token('border.radius'),