@atlaskit/editor-toolbar 0.0.4 → 0.0.6

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

@@ -0,0 +1,33 @@
+export { Toolbar } from './ui/Toolbar';
+export { ToolbarButton } from './ui/ToolbarButton';
+export { ToolbarButtonGroup } from './ui/ToolbarButtonGroup';
+export { ToolbarDropdownMenu } from './ui/ToolbarDropdownMenu';
+export { ToolbarDropdownItem } from './ui/ToolbarDropdownItem';
+export { ToolbarDropdownItemSection } from './ui/ToolbarDropdownItemSection';
+export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
+export { ToolbarSection } from './ui/ToolbarSection';
+export { ToolbarTooltip } from './ui/ToolbarTooltip';
+export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
+export { AIChatIcon } from './ui/icons/AIChatIcon';
+export { AICommandIcon } from './ui/icons/AICommandIcon';
+export { AddIcon } from './ui/icons/AddIcon';
+export { AppsIcon } from './ui/icons/AppsIcon';
+export { BoldIcon } from './ui/icons/BoldIcon';
+export { CommentIcon } from './ui/icons/CommentIcon';
+export { HeadingFiveIcon } from './ui/icons/HeadingFiveIcon';
+export { HeadingFourIcon } from './ui/icons/HeadingFourIcon';
+export { HeadingOneIcon } from './ui/icons/HeadingOneIcon';
+export { HeadingSixIcon } from './ui/icons/HeadingSixIcon';
+export { HeadingThreeIcon } from './ui/icons/HeadingThreeIcon';
+export { HeadingTwoIcon } from './ui/icons/HeadingTwoIcon';
+export { ItalicIcon } from './ui/icons/ItalicIcon';
+export { LinkIcon } from './ui/icons/LinkIcon';
+export { ListBulletedIcon } from './ui/icons/ListBulletedIcon';
+export { ListNumberedIcon } from './ui/icons/ListNumberedIcon';
+export { MoreItemsIcon } from './ui/icons/MoreItemsIcon';
+export { PinIcon } from './ui/icons/PinIcon';
+export { PinnedIcon } from './ui/icons/PinnedIcon';
+export { QuoteIcon } from './ui/icons/QuoteIcon';
+export { TextColorIcon } from './ui/icons/TextColorIcon';
+export { TextIcon } from './ui/icons/TextIcon';
+export type { IconComponent, ToolbarButtonGroupLocation } from './types';

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+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/Toolbar.d.ts

@@ -0,0 +1,7 @@
+import React, { type ReactNode } from 'react';
+type ToolbarProps = {
+    children?: ReactNode;
+    label: string;
+};
+export declare const Toolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+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;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    testId?: string;
+    iconBefore: React.ReactNode;
+    groupLocation?: ToolbarButtonGroupLocation;
+    isDisabled?: boolean;
+    ariaKeyshortcuts?: string;
+};
+export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};

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

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

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

@@ -0,0 +1,7 @@
+import React, { type ReactNode } from 'react';
+type ToolbarColorSwatchProps = {
+    children?: ReactNode;
+    highlightColor?: string;
+};
+export declare const ToolbarColorSwatch: ({ children, highlightColor, }: ToolbarColorSwatchProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ToolbarDropdownDivider: () => React.JSX.Element;

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

@@ -0,0 +1,24 @@
+import React, { type ReactNode, type Ref } from 'react';
+import type { CustomItemComponentProps } from '@atlaskit/menu/types';
+type TextStyle = 'normal' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
+export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & {
+    'aria-haspopup'?: boolean;
+    'aria-disabled'?: boolean;
+    'aria-pressed'?: boolean;
+    'aria-keyshortcuts'?: string;
+};
+type ToolbarDropdownItemProps = {
+    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    elemBefore?: ReactNode;
+    elemAfter?: ReactNode;
+    isSelected?: boolean;
+    children?: React.ReactNode;
+    textStyle?: TextStyle;
+    isDisabled?: boolean;
+    hasNestedDropdownMenu?: boolean;
+    triggerRef?: Ref<HTMLButtonElement>;
+    testId?: string;
+    ariaKeyshortcuts?: string;
+};
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, textStyle, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,10 @@
+import React, { type ReactNode } from 'react';
+import { type ToolbarButtonGroupLocation } from '../types';
+type ToolbarDropdownMenuProps = {
+    iconBefore: React.ReactNode;
+    children?: ReactNode;
+    groupLocation?: ToolbarButtonGroupLocation;
+    isDisabled?: boolean;
+};
+export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, }: ToolbarDropdownMenuProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+type ToolbarKeyboardShortcutHintProps = {
+    shortcut: string;
+};
+export declare const ToolbarKeyboardShortcutHint: ({ shortcut }: ToolbarKeyboardShortcutHintProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import React, { type ReactNode } from 'react';
+type ToolbarNestedDropdownMenuProps = {
+    elemBefore: ReactNode;
+    elemAfter: ReactNode;
+    text?: string;
+    children?: ReactNode;
+    isDisabled?: boolean;
+};
+export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, }: ToolbarNestedDropdownMenuProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import React, { type ReactNode } from 'react';
+type ToolbarSectionProps = {
+    children?: ReactNode;
+};
+export declare const ToolbarSection: ({ children }: ToolbarSectionProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type ToolbarTooltipProps = {
+    content: string;
+    children: React.ReactNode;
+};
+export declare const ToolbarTooltip: ({ content, children }: ToolbarTooltipProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/icons/AIAdjustLengthIcon.d.ts

@@ -0,0 +1 @@
+export { default as AIAdjustLengthIcon } from '@atlaskit/icon-lab/core/text-adjust-length';

package/dist/types-ts4.5/ui/icons/AICasualIcon.d.ts

@@ -0,0 +1 @@
+export { default as AICasualIcon } from '@atlaskit/icon/core/emoji-casual';

package/dist/types-ts4.5/ui/icons/AIChangeToneIcon.d.ts

@@ -0,0 +1 @@
+export { default as AIChangeToneIcon } from '@atlaskit/icon-lab/core/ai-generative-chapters';

package/dist/types-ts4.5/ui/icons/AIChatIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type AIChatIconProps = {
+    label: string;
+    testId?: string;
+};
+export declare const AIChatIcon: ({ label, testId }: AIChatIconProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/icons/AICommandIcon.d.ts

@@ -0,0 +1 @@
+export { default as AICommandIcon } from '@atlaskit/icon/core/magic-wand';

package/dist/types-ts4.5/ui/icons/AIHeartIcon.d.ts

@@ -0,0 +1 @@
+export { default as AIHeartIcon } from '@atlaskit/icon/core/heart';

package/dist/types-ts4.5/ui/icons/AILengthenIcon.d.ts

@@ -0,0 +1 @@
+export { default as AILenghtenIcon } from '@atlaskit/icon-lab/core/text-lengthen';

package/dist/types-ts4.5/ui/icons/AIProfessionalIcon.d.ts

@@ -0,0 +1 @@
+export { default as AIBriefcaseIcon } from '@atlaskit/icon/core/briefcase';

package/dist/types-ts4.5/ui/icons/AIShortenIcon.d.ts

@@ -0,0 +1 @@
+export { default as AIShortenIcon } from '@atlaskit/icon/core/text-shorten';

package/dist/types-ts4.5/ui/icons/AISpellcheckIcon.d.ts

@@ -0,0 +1 @@
+export { default as AISpellcheckIcon } from '@atlaskit/icon/core/text-spellcheck';

package/dist/types-ts4.5/ui/icons/AITranslateIcon.d.ts

@@ -0,0 +1 @@
+export { default as AITranslateIcon } from '@atlaskit/icon/core/translate';

package/dist/types-ts4.5/ui/icons/AddIcon.d.ts

@@ -0,0 +1 @@
+export { default as AddIcon } from '@atlaskit/icon/core/add';

package/dist/types-ts4.5/ui/icons/AppsIcon.d.ts

@@ -0,0 +1 @@
+export { default as AppsIcon } from '@atlaskit/icon/core/apps';

package/dist/types-ts4.5/ui/icons/BoldIcon.d.ts

@@ -0,0 +1 @@
+export { default as BoldIcon } from '@atlaskit/icon/core/text-bold';

package/dist/types-ts4.5/ui/icons/ClearFormattingIcon.d.ts

@@ -0,0 +1 @@
+export { default as ClearFormattingIcon } from '@atlaskit/icon/core/table-cell-clear';

package/dist/types-ts4.5/ui/icons/CommentIcon.d.ts

@@ -0,0 +1 @@
+export { default as CommentIcon } from '@atlaskit/icon/core/comment';

package/dist/types-ts4.5/ui/icons/HeadingFiveIcon.d.ts

@@ -0,0 +1 @@
+export { default as HeadingFiveIcon } from '@atlaskit/icon-lab/core/text-heading-five';

package/dist/types-ts4.5/ui/icons/HeadingFourIcon.d.ts

@@ -0,0 +1 @@
+export { default as HeadingFourIcon } from '@atlaskit/icon-lab/core/text-heading-four';

package/dist/types-ts4.5/ui/icons/HeadingOneIcon.d.ts

@@ -0,0 +1 @@
+export { default as HeadingOneIcon } from '@atlaskit/icon-lab/core/text-heading-one';

package/dist/types-ts4.5/ui/icons/HeadingSixIcon.d.ts

@@ -0,0 +1 @@
+export { default as HeadingSixIcon } from '@atlaskit/icon-lab/core/text-heading-six';

package/dist/types-ts4.5/ui/icons/HeadingThreeIcon.d.ts

@@ -0,0 +1 @@
+export { default as HeadingThreeIcon } from '@atlaskit/icon-lab/core/text-heading-three';

package/dist/types-ts4.5/ui/icons/HeadingTwoIcon.d.ts

@@ -0,0 +1 @@
+export { default as HeadingTwoIcon } from '@atlaskit/icon-lab/core/text-heading-two';

package/dist/types-ts4.5/ui/icons/ItalicIcon.d.ts

@@ -0,0 +1 @@
+export { default as ItalicIcon } from '@atlaskit/icon/core/text-italic';

package/dist/types-ts4.5/ui/icons/LinkIcon.d.ts

@@ -0,0 +1 @@
+export { default as LinkIcon } from '@atlaskit/icon/core/link';

package/dist/types-ts4.5/ui/icons/ListBulletedIcon.d.ts

@@ -0,0 +1 @@
+export { default as ListBulletedIcon } from '@atlaskit/icon/core/list-bulleted';

package/dist/types-ts4.5/ui/icons/ListNumberedIcon.d.ts

@@ -0,0 +1 @@
+export { default as ListNumberedIcon } from '@atlaskit/icon/core/list-numbered';

package/dist/types-ts4.5/ui/icons/MoreItemsIcon.d.ts

@@ -0,0 +1,2 @@
+import { type IconComponent } from '../../types';
+export declare const MoreItemsIcon: IconComponent;

package/dist/types-ts4.5/ui/icons/NestedDropdownRightIcon.d.ts

@@ -0,0 +1,2 @@
+import { type IconComponent } from '../../types';
+export declare const NestedDropdownRightIcon: IconComponent;

package/dist/types-ts4.5/ui/icons/PinIcon.d.ts

@@ -0,0 +1 @@
+export { default as PinIcon } from '@atlaskit/icon/core/pin';

package/dist/types-ts4.5/ui/icons/PinnedIcon.d.ts

@@ -0,0 +1 @@
+export { default as PinnedIcon } from '@atlaskit/icon/core/pin-filled';

package/dist/types-ts4.5/ui/icons/QuoteIcon.d.ts

@@ -0,0 +1 @@
+export { default as QuoteIcon } from '@atlaskit/icon/core/quotation-mark';

package/dist/types-ts4.5/ui/icons/TextColorIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type NewCoreIconProps } from '@atlaskit/icon/types';
+import { type IconColor } from '@atlaskit/tokens/css-type-schema';
+type TextColorIconProps = NewCoreIconProps & {
+    iconColor?: IconColor;
+    isDisabled?: boolean;
+};
+export declare const TextColorIcon: ({ label, shouldRecommendSmallIcon, size, spacing, testId, iconColor, isDisabled, }: TextColorIconProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/icons/TextIcon.d.ts

@@ -0,0 +1 @@
+export { default as TextIcon } from '@atlaskit/icon/core/text';

package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx

@@ -3,8 +3,8 @@ import React, { useState } from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 import Toggle from '@atlaskit/toggle';
 import { token } from '@atlaskit/tokens';
+import { type IconColor } from '@atlaskit/tokens/css-type-schema';
 
-import { ColorIndicatorWrapper } from '../../../src/ui/ColorIndicatorWrapper';
 import { AddIcon } from '../../../src/ui/icons/AddIcon';
 import { AIAdjustLengthIcon } from '../../../src/ui/icons/AIAdjustLengthIcon';
 import { AICasualIcon } from '../../../src/ui/icons/AICasualIcon';
@@ -41,8 +41,7 @@ import { TextIcon } from '../../../src/ui/icons/TextIcon';
 import { Toolbar } from '../../../src/ui/Toolbar';
 import { ToolbarButton } from '../../../src/ui/ToolbarButton';
 import { ToolbarButtonGroup } from '../../../src/ui/ToolbarButtonGroup';
-import { ToolbarDivider } from '../../../src/ui/ToolbarDivider';
-import { ToolbarDropdownDivider } from '../../../src/ui/ToolbarDropdownDivider';
+import { ToolbarColorSwatch } from '../../../src/ui/ToolbarColorSwatch';
 import { ToolbarDropdownItem } from '../../../src/ui/ToolbarDropdownItem';
 import { ToolbarDropdownItemSection } from '../../../src/ui/ToolbarDropdownItemSection';
 import { ToolbarDropdownMenu } from '../../../src/ui/ToolbarDropdownMenu';
@@ -139,8 +138,7 @@ export const ExampleManuallyComposedToolbar = () => {
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Ask Rovo">
 							<ToolbarButton
-								icon={AIChatIcon}
-								label="Ask Rovo"
+								iconBefore={<AIChatIcon label="Ask Rovo" />}
 								onClick={onClick('Ask Rovo')}
 								groupLocation="start"
 								isDisabled={isRovoDisabled}
@@ -148,7 +146,10 @@ export const ExampleManuallyComposedToolbar = () => {
 								Ask Rovo
 							</ToolbarButton>
 						</ToolbarTooltip>
-						<ToolbarDropdownMenu icon={MoreItemsIcon} label="More formatting" groupLocation="end">
+						<ToolbarDropdownMenu
+							iconBefore={<MoreItemsIcon label="More formatting" />}
+							groupLocation="end"
+						>
 							<ToolbarDropdownItemSection>
 								<ToolbarNestedDropdownMenu
 									elemBefore={<AIAdjustLengthIcon label="Adjust length" />}
@@ -235,8 +236,7 @@ export const ExampleManuallyComposedToolbar = () => {
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Improve writing">
 							<ToolbarButton
-								icon={AICommandIcon}
-								label="Improve writing"
+								iconBefore={<AICommandIcon label="Improve writing" />}
 								onClick={onClick('Improve writing')}
 								isDisabled={isImproveWritingDisabled}
 							>
@@ -246,26 +246,23 @@ export const ExampleManuallyComposedToolbar = () => {
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
-				<ToolbarDivider />
-
 				<ToolbarSection>
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Text styles">
 							<ToolbarDropdownMenu
-								icon={
+								iconBefore={
 									{
-										none: TextIcon,
-										normal: TextIcon,
-										heading1: HeadingOneIcon,
-										heading2: HeadingTwoIcon,
-										heading3: HeadingThreeIcon,
-										heading4: HeadingFourIcon,
-										heading5: HeadingFiveIcon,
-										heading6: HeadingSixIcon,
-										quote: QuoteIcon,
+										none: <TextIcon label="Normal text" />,
+										normal: <TextIcon label="Normal text" />,
+										heading1: <HeadingOneIcon label="Heading One" />,
+										heading2: <HeadingTwoIcon label="Heading Two" />,
+										heading3: <HeadingThreeIcon label="Heading Three" />,
+										heading4: <HeadingFourIcon label="Heading Four" />,
+										heading5: <HeadingFiveIcon label="Heading Five" />,
+										heading6: <HeadingSixIcon label="Heading Six" />,
+										quote: <QuoteIcon label="Quote" />,
 									}[textStyle]
 								}
-								label="Text styles"
 								isDisabled={isTextStylesDisabled}
 							>
 								<ToolbarDropdownItemSection>
@@ -357,8 +354,13 @@ export const ExampleManuallyComposedToolbar = () => {
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content={formatting.italic && !formatting.bold ? 'Italic' : 'Bold'}>
 							<ToolbarButton
-								icon={formatting.italic && !formatting.bold ? ItalicIcon : BoldIcon}
-								label={formatting.italic && !formatting.bold ? 'Italic' : 'Bold'}
+								iconBefore={
+									formatting.italic && !formatting.bold ? (
+										<ItalicIcon label="Italic" />
+									) : (
+										<BoldIcon label="Bold" />
+									)
+								}
 								onClick={onClick(
 									formatting.italic && !formatting.bold ? 'Italic' : 'Bold',
 									onToggleFormatting(formatting.italic && !formatting.bold ? 'italic' : 'bold'),
@@ -369,7 +371,10 @@ export const ExampleManuallyComposedToolbar = () => {
 								ariaKeyshortcuts={formatting.italic && !formatting.bold ? '⌘I' : '⌘B'}
 							/>
 						</ToolbarTooltip>
-						<ToolbarDropdownMenu icon={MoreItemsIcon} label="More formatting" groupLocation="end">
+						<ToolbarDropdownMenu
+							iconBefore={<MoreItemsIcon label="More formatting" />}
+							groupLocation="end"
+						>
 							<ToolbarDropdownItemSection>
 								<ToolbarDropdownItem
 									elemBefore={<BoldIcon label="Bold" />}
@@ -392,7 +397,6 @@ export const ExampleManuallyComposedToolbar = () => {
 									Italic
 								</ToolbarDropdownItem>
 							</ToolbarDropdownItemSection>
-							<ToolbarDropdownDivider />
 							<ToolbarDropdownItemSection>
 								<ToolbarDropdownItem
 									elemBefore={<ClearFormattingIcon label="Clear formatting" />}
@@ -405,23 +409,23 @@ export const ExampleManuallyComposedToolbar = () => {
 							</ToolbarDropdownItemSection>
 						</ToolbarDropdownMenu>
 					</ToolbarButtonGroup>
-
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Text color">
 							<ToolbarDropdownMenu
-								icon={({ label, color, shouldRecommendSmallIcon, size, spacing, testId }) => (
-									<ColorIndicatorWrapper color={token('color.border.accent.blue')}>
+								iconBefore={
+									<ToolbarColorSwatch
+										highlightColor={token('color.background.accent.blue.subtlest')}
+									>
 										<TextColorIcon
-											label={label}
-											color={color}
-											shouldRecommendSmallIcon={shouldRecommendSmallIcon}
-											size={size}
-											spacing={spacing}
-											testId={testId}
+											label={'Text color'}
+											iconColor={token('color.text.accent.magenta') as IconColor}
+											shouldRecommendSmallIcon={true}
+											size={'small'}
+											isDisabled={isTextColorDisabled}
+											spacing={'compact'}
 										/>
-									</ColorIndicatorWrapper>
-								)}
-								label="Text color"
+									</ToolbarColorSwatch>
+								}
 								isDisabled={isTextColorDisabled}
 							>
 								<ToolbarDropdownItemSection>
@@ -441,8 +445,13 @@ export const ExampleManuallyComposedToolbar = () => {
 							content={listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list'}
 						>
 							<ToolbarButton
-								icon={listOrAlignment === 'numbered' ? ListNumberedIcon : ListBulletedIcon}
-								label={listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list'}
+								iconBefore={
+									listOrAlignment === 'numbered' ? (
+										<ListNumberedIcon label="Numbered list" />
+									) : (
+										<ListBulletedIcon label="Bulleted list" />
+									)
+								}
 								onClick={onClick(
 									listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list',
 									onToggleListOrAlignment(listOrAlignment === 'numbered' ? 'numbered' : 'bulleted'),
@@ -455,8 +464,7 @@ export const ExampleManuallyComposedToolbar = () => {
 							/>
 						</ToolbarTooltip>
 						<ToolbarDropdownMenu
-							icon={MoreItemsIcon}
-							label="Lists, indentation and alignment"
+							iconBefore={<MoreItemsIcon label="Lists, indentation and alignment" />}
 							groupLocation="end"
 						>
 							<ToolbarDropdownItemSection>
@@ -485,14 +493,11 @@ export const ExampleManuallyComposedToolbar = () => {
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
-				<ToolbarDivider />
-
 				<ToolbarSection>
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Link">
 							<ToolbarButton
-								icon={LinkIcon}
-								label="Link"
+								iconBefore={<LinkIcon label="Link" />}
 								onClick={onClick('Link')}
 								isDisabled={isLinkDisabled}
 							/>
@@ -500,29 +505,25 @@ export const ExampleManuallyComposedToolbar = () => {
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
-				<ToolbarDivider />
-
 				<ToolbarSection>
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Comment">
 							<ToolbarButton
-								icon={CommentIcon}
-								label="Comment"
+								iconBefore={<CommentIcon label="Comment" />}
 								onClick={onClick('Comment')}
 								isDisabled={isCommentDisabled}
-							/>
+							>
+								Comment
+							</ToolbarButton>
 						</ToolbarTooltip>
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
-				<ToolbarDivider />
-
 				<ToolbarSection>
 					<ToolbarButtonGroup>
 						<ToolbarTooltip content="Apps and extensions">
 							<ToolbarDropdownMenu
-								icon={AppsIcon}
-								label="Apps and extensions"
+								iconBefore={<AppsIcon label="Apps and extensions" />}
 								isDisabled={isAppsAndExtensionsDisabled}
 							>
 								<ToolbarDropdownItemSection>
@@ -539,16 +540,19 @@ export const ExampleManuallyComposedToolbar = () => {
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
-				<ToolbarDivider />
-
 				<ToolbarSection>
 					<ToolbarButtonGroup>
 						<ToolbarTooltip
 							content={pinning === 'pinned' ? 'Unpin the toolbar' : 'Pin the toolbar at the top'}
 						>
 							<ToolbarButton
-								icon={pinning === 'pinned' ? PinnedIcon : PinIcon}
-								label={pinning === 'pinned' ? 'Unpin toolbar' : 'Pin toolbar'}
+								iconBefore={
+									pinning === 'pinned' ? (
+										<PinnedIcon label="Unpin toolbar" />
+									) : (
+										<PinIcon label="Pin toolbar" />
+									)
+								}
 								onClick={onClick(
 									pinning === 'pinned' ? 'Unpin toolbar' : 'Pin toolbar',
 									onTogglePinning,

package/package.json

@@ -3,12 +3,13 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.0.4",
+	"version": "0.0.6",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
-		"team": "Editor"
+		"team": "Editor: Jenga",
+		"releaseModel": "continuous"
 	},
-	"repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
+	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"main": "dist/cjs/index.js",
@@ -27,8 +28,8 @@
 		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/icon": "^27.8.0",
-		"@atlaskit/icon-lab": "^5.2.0",
+		"@atlaskit/icon": "^27.9.0",
+		"@atlaskit/icon-lab": "^5.3.0",
 		"@atlaskit/logo": "^19.6.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.11.0",

package/src/index.ts

@@ -1,8 +1,10 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 export { Toolbar } from './ui/Toolbar';
 export { ToolbarButton } from './ui/ToolbarButton';
-export { ToolbarDropdownItem } from './ui/ToolbarDropdownItem';
+export { ToolbarButtonGroup } from './ui/ToolbarButtonGroup';
 export { ToolbarDropdownMenu } from './ui/ToolbarDropdownMenu';
+export { ToolbarDropdownItem } from './ui/ToolbarDropdownItem';
+export { ToolbarDropdownItemSection } from './ui/ToolbarDropdownItemSection';
 export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';

package/src/ui/Toolbar.tsx

@@ -10,7 +10,7 @@ const styles = cssMap({
 		paddingLeft: token('space.050'),
 		boxShadow: token('elevation.shadow.overlay'),
 		borderRadius: '6px',
-		height: '40px',
+		height: '36px',
 		width: 'min-content',
 		display: 'flex',
 		alignItems: 'center',