@atlaskit/editor-toolbar 0.0.0 → 0.0.2

package/CHANGELOG.md

@@ -1 +1,19 @@
 # @atlaskit/editor-toolbar
+
+## 0.0.2
+
+### Patch Changes
+
+- [#189216](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189216)
+  [`b4ba899b6cf55`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b4ba899b6cf55) -
+  [ux] ED-28546 add nested flyouts to ui primitive library
+- Updated dependencies
+
+## 0.0.1
+
+### Patch Changes
+
+- [#187668](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/187668)
+  [`83251dd8644c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/83251dd8644c4) -
+  [ux] [ED-28537] add support for tooltips, disabled states and hover states for new toolbar package
+- Updated dependencies

package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx

@@ -1,15 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Box } from '@atlaskit/primitives/compiled';
+import Toggle from '@atlaskit/toggle';
 import { token } from '@atlaskit/tokens';
 
 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';
+import { AIChangeToneIcon } from '../../../src/ui/icons/AIChangeToneIcon';
 import { AIChatIcon } from '../../../src/ui/icons/AIChatIcon';
 import { AICommandIcon } from '../../../src/ui/icons/AICommandIcon';
+import { AIHeartIcon } from '../../../src/ui/icons/AIHeartIcon';
+import { AILenghtenIcon } from '../../../src/ui/icons/AILengthenIcon';
+import { AIBriefcaseIcon } from '../../../src/ui/icons/AIProfessionalIcon';
+import { AIShortenIcon } from '../../../src/ui/icons/AIShortenIcon';
+import { AISpellcheckIcon } from '../../../src/ui/icons/AISpellcheckIcon';
+import { AITranslateIcon } from '../../../src/ui/icons/AITranslateIcon';
 import { AppsIcon } from '../../../src/ui/icons/AppsIcon';
 import { BoldIcon } from '../../../src/ui/icons/BoldIcon';
+import { ClearFormattingIcon } from '../../../src/ui/icons/ClearFormattingIcon';
 import { CommentIcon } from '../../../src/ui/icons/CommentIcon';
 import { HeadingFiveIcon } from '../../../src/ui/icons/HeadingFiveIcon';
 import { HeadingFourIcon } from '../../../src/ui/icons/HeadingFourIcon';
@@ -22,6 +32,7 @@ import { LinkIcon } from '../../../src/ui/icons/LinkIcon';
 import { ListBulletedIcon } from '../../../src/ui/icons/ListBulletedIcon';
 import { ListNumberedIcon } from '../../../src/ui/icons/ListNumberedIcon';
 import { MoreItemsIcon } from '../../../src/ui/icons/MoreItemsIcon';
+import { NestedDropdownRightIcon } from '../../../src/ui/icons/NestedDropdownRightIcon';
 import { PinIcon } from '../../../src/ui/icons/PinIcon';
 import { PinnedIcon } from '../../../src/ui/icons/PinnedIcon';
 import { QuoteIcon } from '../../../src/ui/icons/QuoteIcon';
@@ -31,10 +42,14 @@ 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 { ToolbarDropdownItem } from '../../../src/ui/ToolbarDropdownItem';
+import { ToolbarDropdownItemSection } from '../../../src/ui/ToolbarDropdownItemSection';
 import { ToolbarDropdownMenu } from '../../../src/ui/ToolbarDropdownMenu';
 import { ToolbarKeyboardShortcutHint } from '../../../src/ui/ToolbarKeyboardShortcutHint';
+import { ToolbarNestedDropdownMenu } from '../../../src/ui/ToolbarNestedDropdownMenu';
 import { ToolbarSection } from '../../../src/ui/ToolbarSection';
+import { ToolbarTooltip } from '../../../src/ui/ToolbarTooltip';
 
 import { useExampleToolbarState } from './useExampleToolbarState';
 
@@ -52,37 +67,182 @@ export const ExampleManuallyComposedToolbar = () => {
 		lastAction,
 	} = useExampleToolbarState();
 
+	const [isRovoDisabled, setIsRovoDisabled] = useState(false);
+	const toggleRovoButton = () => {
+		setIsRovoDisabled(!isRovoDisabled);
+	};
+
+	const [isAdjustLengthDisabled, setIsAdjustLengthDisabled] = useState(false);
+	const toggleAdjustLengthButton = () => {
+		setIsAdjustLengthDisabled(!isAdjustLengthDisabled);
+	};
+
+	const [isTextStylesDisabled, setIsTextStylesDisabled] = useState(false);
+	const toggleTextStylesButton = () => {
+		setIsTextStylesDisabled(!isTextStylesDisabled);
+	};
+
+	const [isImproveWritingDisabled, setIsImproveWritingDisabled] = useState(false);
+	const toggleImproveWritingButton = () => {
+		setIsImproveWritingDisabled(!isImproveWritingDisabled);
+	};
+
+	const [isBoldDisabled, setIsBoldDisabled] = useState(false);
+	const toggleBoldStyle = () => {
+		setIsBoldDisabled(!isBoldDisabled);
+	};
+
+	const [isItalicDisabled, setIsItalicDisabled] = useState(false);
+	const toggleItalicStyle = () => {
+		setIsItalicDisabled(!isItalicDisabled);
+	};
+
+	const [isTextColorDisabled, setIsTextColorDisabled] = useState(false);
+	const toggleTextColorButton = () => {
+		setIsTextColorDisabled(!isTextColorDisabled);
+	};
+
+	const [isBulletedListDisabled, setIsBulletedListDisabled] = useState(false);
+	const toggleBulletedListButton = () => {
+		setIsBulletedListDisabled(!isBulletedListDisabled);
+	};
+
+	const [isNumberedListDisabled, setIsNumberedListDisabled] = useState(false);
+	const toggleNumberedListButton = () => {
+		setIsNumberedListDisabled(!isNumberedListDisabled);
+	};
+
+	const [isLinkDisabled, setIsLinkDisabled] = useState(false);
+	const toggleLinkButton = () => {
+		setIsLinkDisabled(!isLinkDisabled);
+	};
+
+	const [isCommentDisabled, setIsCommentDisabled] = useState(false);
+	const toggleCommentButton = () => {
+		setIsCommentDisabled(!isCommentDisabled);
+	};
+
+	const [isCreateJiraWorkItemDisabled, setIsCreateJiraWorkItemDisabled] = useState(false);
+	const toggleCreateJiraWorkItemButton = () => {
+		setIsCreateJiraWorkItemDisabled(!isCreateJiraWorkItemDisabled);
+	};
+
+	const [isAppsAndExtensionsDisabled, setIsAppsAndExtensionsDisabled] = useState(false);
+	const toggleAppsAndExtensionsButton = () => {
+		setIsAppsAndExtensionsDisabled(!isAppsAndExtensionsDisabled);
+	};
+
 	return (
 		<>
 			<Toolbar label="Editor Toolbar">
 				<ToolbarSection>
 					<ToolbarButtonGroup>
-						<ToolbarButton
-							icon={AIChatIcon}
-							label="Ask Rovo"
-							onClick={onClick('Ask Rovo')}
-							groupLocation="start"
-						>
-							Ask Rovo
-						</ToolbarButton>
-						<ToolbarDropdownMenu icon={MoreItemsIcon} label="More formatting" groupLocation="end">
-							<ToolbarDropdownItem
-								elemBefore={<AIAdjustLengthIcon label="Adjust length" />}
-								onClick={onClick('Adjust length')}
+						<ToolbarTooltip content="Ask Rovo">
+							<ToolbarButton
+								icon={AIChatIcon}
+								label="Ask Rovo"
+								onClick={onClick('Ask Rovo')}
+								groupLocation="start"
+								isDisabled={isRovoDisabled}
 							>
-								Adjust length
-							</ToolbarDropdownItem>
+								Ask Rovo
+							</ToolbarButton>
+						</ToolbarTooltip>
+						<ToolbarDropdownMenu icon={MoreItemsIcon} label="More formatting" groupLocation="end">
+							<ToolbarDropdownItemSection>
+								<ToolbarNestedDropdownMenu
+									elemBefore={<AIAdjustLengthIcon label="Adjust length" />}
+									text="Adjust length"
+									elemAfter={<NestedDropdownRightIcon label={'Choose desired tone'}/>}
+									isDisabled={isAdjustLengthDisabled}
+								>
+									<ToolbarDropdownItemSection>
+										<ToolbarDropdownItem
+											elemBefore={<AIShortenIcon label="Make shorter" />}
+											onClick={onClick('Make shorter')}
+										>
+											Make shorter
+										</ToolbarDropdownItem>
+										<ToolbarDropdownItem
+											elemBefore={<AILenghtenIcon label="Make longer" />}
+											onClick={onClick('Make longer')}
+										>
+											Make longer
+										</ToolbarDropdownItem>
+									</ToolbarDropdownItemSection>
+								</ToolbarNestedDropdownMenu>
+								<ToolbarNestedDropdownMenu
+									elemBefore={<AIChangeToneIcon label="Change tone" />}
+									text="Change tone"
+									elemAfter={<NestedDropdownRightIcon label={'Choose desired tone'}/>}
+								>
+									<ToolbarDropdownItemSection>
+										<ToolbarDropdownItem
+											elemBefore={<AIBriefcaseIcon label="More professional" />}
+											onClick={onClick('More professional')}
+										>
+											More professional
+										</ToolbarDropdownItem>
+										<ToolbarDropdownItem
+											elemBefore={<AICasualIcon label="More casual" />}
+											onClick={onClick('More casual')}
+										>
+											More casual
+										</ToolbarDropdownItem>
+										<ToolbarDropdownItem
+											elemBefore={<AIHeartIcon label="More empathetic" />}
+											onClick={onClick('More empathetic')}
+										>
+											More empathetic
+										</ToolbarDropdownItem>
+									</ToolbarDropdownItemSection>
+								</ToolbarNestedDropdownMenu>
+								<ToolbarDropdownItem
+									elemBefore={<AISpellcheckIcon label="Fix spelling and grammar" />}
+									onClick={onClick('Fix spelling and grammar')}
+								>
+									Fix spelling and grammar
+								</ToolbarDropdownItem>
+								<ToolbarNestedDropdownMenu
+									elemBefore={<AITranslateIcon label="Translate" />}
+									text="Translate"
+									elemAfter={<NestedDropdownRightIcon label={'Choose language option'}/>}
+								>
+									<ToolbarDropdownItemSection>
+										<ToolbarDropdownItem
+											elemBefore={<AITranslateIcon label="Language 1" />}
+											onClick={onClick('Language 1')}
+										>
+											Language 1
+										</ToolbarDropdownItem>
+										<ToolbarDropdownItem
+											elemBefore={<AITranslateIcon label="Language 2" />}
+											onClick={onClick('More casual')}
+										>
+											Language 2
+										</ToolbarDropdownItem>
+										<ToolbarDropdownItem
+											elemBefore={<AITranslateIcon label="Language 3" />}
+											onClick={onClick('Language 3')}
+										>
+											Language 3
+										</ToolbarDropdownItem>
+									</ToolbarDropdownItemSection>
+								</ToolbarNestedDropdownMenu>
+							</ToolbarDropdownItemSection>
 						</ToolbarDropdownMenu>
 					</ToolbarButtonGroup>
-
 					<ToolbarButtonGroup>
-						<ToolbarButton
-							icon={AICommandIcon}
-							label="Improve writing"
-							onClick={onClick('Improve writing')}
-						>
-							Improve writing
-						</ToolbarButton>
+						<ToolbarTooltip content="Improve writing">
+							<ToolbarButton
+								icon={AICommandIcon}
+								label="Improve writing"
+								onClick={onClick('Improve writing')}
+								isDisabled={isImproveWritingDisabled}
+							>
+								Improve writing
+							</ToolbarButton>
+						</ToolbarTooltip>
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
@@ -90,185 +250,223 @@ export const ExampleManuallyComposedToolbar = () => {
 
 				<ToolbarSection>
 					<ToolbarButtonGroup>
-						<ToolbarDropdownMenu
-							icon={
-								{
-									none: TextIcon,
-									normal: TextIcon,
-									heading1: HeadingOneIcon,
-									heading2: HeadingTwoIcon,
-									heading3: HeadingThreeIcon,
-									heading4: HeadingFourIcon,
-									heading5: HeadingFiveIcon,
-									heading6: HeadingSixIcon,
-									quote: QuoteIcon,
-								}[textStyle]
-							}
-							label="Text styles"
-						>
-							<ToolbarDropdownItem
-								elemBefore={<TextIcon label="Normal text" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥0" />}
-								onClick={onClick('Normal text', onSetTextStyle('normal'))}
-								isSelected={textStyle === 'normal'}
-								textStyle="normal"
-							>
-								Normal text
-							</ToolbarDropdownItem>
-							<ToolbarDropdownItem
-								elemBefore={<HeadingOneIcon label="Heading One" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥1" />}
-								onClick={onClick('Heading one', onSetTextStyle('heading1'))}
-								isSelected={textStyle === 'heading1'}
-								textStyle="heading1"
-							>
-								Heading 1
-							</ToolbarDropdownItem>
-							<ToolbarDropdownItem
-								elemBefore={<HeadingTwoIcon label="Heading Two" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥2" />}
-								onClick={onClick('Heading two', onSetTextStyle('heading2'))}
-								isSelected={textStyle === 'heading2'}
-								textStyle="heading2"
-							>
-								Heading 2
-							</ToolbarDropdownItem>
-							<ToolbarDropdownItem
-								elemBefore={<HeadingThreeIcon label="Heading Three" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥3" />}
-								onClick={onClick('Heading three', onSetTextStyle('heading3'))}
-								isSelected={textStyle === 'heading3'}
-								textStyle="heading3"
-							>
-								Heading 3
-							</ToolbarDropdownItem>
-							<ToolbarDropdownItem
-								elemBefore={<HeadingFourIcon label="Heading Four" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥4" />}
-								onClick={onClick('Heading four', onSetTextStyle('heading4'))}
-								isSelected={textStyle === 'heading4'}
-								textStyle="heading4"
+						<ToolbarTooltip content="Text styles">
+							<ToolbarDropdownMenu
+								icon={
+									{
+										none: TextIcon,
+										normal: TextIcon,
+										heading1: HeadingOneIcon,
+										heading2: HeadingTwoIcon,
+										heading3: HeadingThreeIcon,
+										heading4: HeadingFourIcon,
+										heading5: HeadingFiveIcon,
+										heading6: HeadingSixIcon,
+										quote: QuoteIcon,
+									}[textStyle]
+								}
+								label="Text styles"
+								isDisabled={isTextStylesDisabled}
 							>
-								Heading 4
-							</ToolbarDropdownItem>
-							<ToolbarDropdownItem
-								elemBefore={<HeadingFiveIcon label="Heading Five" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥5" />}
-								onClick={onClick('Heading five', onSetTextStyle('heading5'))}
-								isSelected={textStyle === 'heading5'}
-								textStyle="heading5"
-							>
-								Heading 5
-							</ToolbarDropdownItem>
-							<ToolbarDropdownItem
-								elemBefore={<HeadingSixIcon label="Heading Six" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥6" />}
-								onClick={onClick('Heading six', onSetTextStyle('heading6'))}
-								isSelected={textStyle === 'heading6'}
-								textStyle="heading6"
-							>
-								Heading 6
-							</ToolbarDropdownItem>
-							<ToolbarDropdownItem
-								elemBefore={<QuoteIcon label="Quote" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥9" />}
-								onClick={onClick('Quote', onSetTextStyle('quote'))}
-								isSelected={textStyle === 'quote'}
-								textStyle="normal"
-							>
-								Quote
-							</ToolbarDropdownItem>
-						</ToolbarDropdownMenu>
+								<ToolbarDropdownItemSection>
+									<ToolbarDropdownItem
+										elemBefore={<TextIcon label="Normal text" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥0" />}
+										onClick={onClick('Normal text', onSetTextStyle('normal'))}
+										isSelected={textStyle === 'normal'}
+										textStyle="normal"
+									>
+										Normal text
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<HeadingOneIcon label="Heading One" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥1" />}
+										onClick={onClick('Heading one', onSetTextStyle('heading1'))}
+										isSelected={textStyle === 'heading1'}
+										textStyle="heading1"
+									>
+										Heading 1
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<HeadingTwoIcon label="Heading Two" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥2" />}
+										onClick={onClick('Heading two', onSetTextStyle('heading2'))}
+										isSelected={textStyle === 'heading2'}
+										textStyle="heading2"
+									>
+										Heading 2
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<HeadingThreeIcon label="Heading Three" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥3" />}
+										onClick={onClick('Heading three', onSetTextStyle('heading3'))}
+										isSelected={textStyle === 'heading3'}
+										textStyle="heading3"
+									>
+										Heading 3
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<HeadingFourIcon label="Heading Four" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥4" />}
+										onClick={onClick('Heading four', onSetTextStyle('heading4'))}
+										isSelected={textStyle === 'heading4'}
+										textStyle="heading4"
+									>
+										Heading 4
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<HeadingFiveIcon label="Heading Five" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥5" />}
+										onClick={onClick('Heading five', onSetTextStyle('heading5'))}
+										isSelected={textStyle === 'heading5'}
+										textStyle="heading5"
+									>
+										Heading 5
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<HeadingSixIcon label="Heading Six" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥6" />}
+										onClick={onClick('Heading six', onSetTextStyle('heading6'))}
+										isSelected={textStyle === 'heading6'}
+										textStyle="heading6"
+									>
+										Heading 6
+									</ToolbarDropdownItem>
+									<ToolbarDropdownItem
+										elemBefore={<QuoteIcon label="Quote" />}
+										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥9" />}
+										onClick={onClick('Quote', onSetTextStyle('quote'))}
+										isSelected={textStyle === 'quote'}
+										textStyle="normal"
+									>
+										Quote
+									</ToolbarDropdownItem>
+								</ToolbarDropdownItemSection>
+							</ToolbarDropdownMenu>
+						</ToolbarTooltip>
 					</ToolbarButtonGroup>
 
 					<ToolbarButtonGroup>
-						<ToolbarButton
-							icon={formatting.italic && !formatting.bold ? ItalicIcon : BoldIcon}
-							label={formatting.italic && !formatting.bold ? 'Italic' : 'Bold'}
-							onClick={onClick(
-								formatting.italic && !formatting.bold ? 'Italic' : 'Bold',
-								onToggleFormatting(formatting.italic && !formatting.bold ? 'italic' : 'bold'),
-							)}
-							groupLocation="start"
-							isSelected={formatting.bold || formatting.italic}
-						/>
+						<ToolbarTooltip content={formatting.italic && !formatting.bold ? 'Italic' : 'Bold'}>
+							<ToolbarButton
+								icon={formatting.italic && !formatting.bold ? ItalicIcon : BoldIcon}
+								label={formatting.italic && !formatting.bold ? 'Italic' : 'Bold'}
+								onClick={onClick(
+									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}
+							/>
+						</ToolbarTooltip>
 						<ToolbarDropdownMenu icon={MoreItemsIcon} label="More formatting" groupLocation="end">
-							<ToolbarDropdownItem
+							<ToolbarDropdownItemSection>
+								<ToolbarDropdownItem
 								elemBefore={<BoldIcon label="Bold" />}
 								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘B" />}
 								onClick={onClick('Bold', onToggleFormatting('bold'))}
 								isSelected={formatting.bold}
-							>
-								Bold
-							</ToolbarDropdownItem>
-							<ToolbarDropdownItem
-								elemBefore={<ItalicIcon label="Italic" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘I" />}
-								onClick={onClick('Italic', onToggleFormatting('italic'))}
-								isSelected={formatting.italic}
-							>
-								Italic
-							</ToolbarDropdownItem>
+								isDisabled={isBoldDisabled}
+								>
+									Bold
+								</ToolbarDropdownItem>
+								<ToolbarDropdownItem
+									elemBefore={<ItalicIcon label="Italic" />}
+									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘I" />}
+									onClick={onClick('Italic', onToggleFormatting('italic'))}
+									isSelected={formatting.italic}
+									isDisabled={isItalicDisabled}
+								>
+									Italic
+								</ToolbarDropdownItem>
+							</ToolbarDropdownItemSection>
+							<ToolbarDropdownDivider/>
+							<ToolbarDropdownItemSection>
+								<ToolbarDropdownItem
+									elemBefore={<ClearFormattingIcon label="Clear formatting" />}
+									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘\" />}
+									onClick={onClick('Clear formatting')}
+								>
+									Clear formatting
+								</ToolbarDropdownItem>
+							</ToolbarDropdownItemSection>
 						</ToolbarDropdownMenu>
 					</ToolbarButtonGroup>
 
 					<ToolbarButtonGroup>
-						<ToolbarDropdownMenu
-							icon={({ label, color, shouldRecommendSmallIcon, size, spacing, testId }) => (
-								<ColorIndicatorWrapper color={token('color.border.accent.blue')}>
-									<TextColorIcon
-										label={label}
-										color={color}
-										shouldRecommendSmallIcon={shouldRecommendSmallIcon}
-										size={size}
-										spacing={spacing}
-										testId={testId}
-									/>
-								</ColorIndicatorWrapper>
-							)}
-							label="Text color"
-						>
-							<ToolbarDropdownItem
-								elemBefore={<TextIcon label="Text color" />}
-								onClick={onClick('Text color')}
+						<ToolbarTooltip content="Text color">
+							<ToolbarDropdownMenu
+								icon={({ label, color, shouldRecommendSmallIcon, size, spacing, testId }) => (
+									<ColorIndicatorWrapper color={token('color.border.accent.blue')}>
+										<TextColorIcon
+											label={label}
+											color={color}
+											shouldRecommendSmallIcon={shouldRecommendSmallIcon}
+											size={size}
+											spacing={spacing}
+											testId={testId}
+										/>
+									</ColorIndicatorWrapper>
+								)}
+								label="Text color"
+								isDisabled={isTextColorDisabled}
 							>
-								Text color
-							</ToolbarDropdownItem>
-						</ToolbarDropdownMenu>
+								<ToolbarDropdownItemSection>
+									<ToolbarDropdownItem
+										elemBefore={<TextIcon label="Text color" />}
+										onClick={onClick('Text color')}
+									>
+										Text color
+									</ToolbarDropdownItem>
+								</ToolbarDropdownItemSection>
+							</ToolbarDropdownMenu>
+						</ToolbarTooltip>
 					</ToolbarButtonGroup>
 
 					<ToolbarButtonGroup>
-						<ToolbarButton
-							icon={listOrAlignment === 'numbered' ? ListNumberedIcon : ListBulletedIcon}
-							label={listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list'}
-							onClick={onClick(
-								listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list',
-								onToggleListOrAlignment(listOrAlignment === 'numbered' ? 'numbered' : 'bulleted'),
-							)}
-							groupLocation="start"
-							isSelected={listOrAlignment !== 'none'}
-						/>
+						<ToolbarTooltip
+							content={listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list'}
+						>
+							<ToolbarButton
+								icon={listOrAlignment === 'numbered' ? ListNumberedIcon : ListBulletedIcon}
+								label={listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list'}
+								onClick={onClick(
+									listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list',
+									onToggleListOrAlignment(listOrAlignment === 'numbered' ? 'numbered' : 'bulleted'),
+								)}
+								groupLocation="start"
+								isSelected={listOrAlignment !== 'none'}
+								isDisabled={
+									listOrAlignment === 'numbered' ? isNumberedListDisabled : isBulletedListDisabled
+								}
+							/>
+						</ToolbarTooltip>
 						<ToolbarDropdownMenu
 							icon={MoreItemsIcon}
 							label="Lists, indentation and alignment"
 							groupLocation="end"
 						>
-							<ToolbarDropdownItem
+							<ToolbarDropdownItemSection>
+								<ToolbarDropdownItem
 								elemBefore={<ListBulletedIcon label="Bulleted list" />}
 								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⇧8" />}
 								onClick={onClick('Bulleted list', onToggleListOrAlignment('bulleted'))}
 								isSelected={listOrAlignment === 'bulleted'}
-							>
-								Bulleted list
-							</ToolbarDropdownItem>
-							<ToolbarDropdownItem
-								elemBefore={<ListNumberedIcon label="Numbered list" />}
-								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⇧7" />}
-								onClick={onClick('Numbered list', onToggleListOrAlignment('numbered'))}
-								isSelected={listOrAlignment === 'numbered'}
-							>
-								Numbered list
-							</ToolbarDropdownItem>
+								isDisabled={isBulletedListDisabled}
+								>
+									Bulleted list
+								</ToolbarDropdownItem>
+								<ToolbarDropdownItem
+									elemBefore={<ListNumberedIcon label="Numbered list" />}
+									elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⇧7" />}
+									onClick={onClick('Numbered list', onToggleListOrAlignment('numbered'))}
+									isSelected={listOrAlignment === 'numbered'}
+									isDisabled={isNumberedListDisabled}
+								>
+									Numbered list
+								</ToolbarDropdownItem>
+							</ToolbarDropdownItemSection>
 						</ToolbarDropdownMenu>
 					</ToolbarButtonGroup>
 				</ToolbarSection>
@@ -277,7 +475,14 @@ export const ExampleManuallyComposedToolbar = () => {
 
 				<ToolbarSection>
 					<ToolbarButtonGroup>
-						<ToolbarButton icon={LinkIcon} label="Link" onClick={onClick('Link')} />
+						<ToolbarTooltip content="Link">
+							<ToolbarButton
+								icon={LinkIcon}
+								label="Link"
+								onClick={onClick('Link')}
+								isDisabled={isLinkDisabled}
+							/>
+						</ToolbarTooltip>
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
@@ -285,7 +490,14 @@ export const ExampleManuallyComposedToolbar = () => {
 
 				<ToolbarSection>
 					<ToolbarButtonGroup>
-						<ToolbarButton icon={CommentIcon} label="Comment" onClick={onClick('Comment')} />
+						<ToolbarTooltip content="Comment">
+							<ToolbarButton
+								icon={CommentIcon}
+								label="Comment"
+								onClick={onClick('Comment')}
+								isDisabled={isCommentDisabled}
+							/>
+						</ToolbarTooltip>
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
@@ -293,14 +505,23 @@ export const ExampleManuallyComposedToolbar = () => {
 
 				<ToolbarSection>
 					<ToolbarButtonGroup>
-						<ToolbarDropdownMenu icon={AppsIcon} label="Apps and extensions">
-							<ToolbarDropdownItem
-								elemBefore={<AddIcon label="Create Jira work item" />}
-								onClick={onClick('Create Jira work item')}
+						<ToolbarTooltip content="Apps and extensions">
+							<ToolbarDropdownMenu
+								icon={AppsIcon}
+								label="Apps and extensions"
+								isDisabled={isAppsAndExtensionsDisabled}
 							>
-								Create Jira work item
-							</ToolbarDropdownItem>
-						</ToolbarDropdownMenu>
+								<ToolbarDropdownItemSection>
+									<ToolbarDropdownItem
+									elemBefore={<AddIcon label="Create Jira work item" />}
+									onClick={onClick('Create Jira work item')}
+									isDisabled={isCreateJiraWorkItemDisabled}
+									>
+										Create Jira work item
+									</ToolbarDropdownItem>
+								</ToolbarDropdownItemSection>
+							</ToolbarDropdownMenu>
+						</ToolbarTooltip>
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
@@ -308,14 +529,18 @@ export const ExampleManuallyComposedToolbar = () => {
 
 				<ToolbarSection>
 					<ToolbarButtonGroup>
-						<ToolbarButton
-							icon={pinning === 'pinned' ? PinnedIcon : PinIcon}
-							label={pinning === 'pinned' ? 'Unpin toolbar' : 'Pin toolbar'}
-							onClick={onClick(
-								pinning === 'pinned' ? 'Unpin toolbar' : 'Pin toolbar',
-								onTogglePinning,
-							)}
-						/>
+						<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'}
+								onClick={onClick(
+									pinning === 'pinned' ? 'Unpin toolbar' : 'Pin toolbar',
+									onTogglePinning,
+								)}
+							/>
+						</ToolbarTooltip>
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 			</Toolbar>
@@ -331,6 +556,60 @@ List/Align:  ${listOrAlignment}
 Pinning:     ${pinning}
 				`}
 			</Box>
+			<Box>
+				<div>
+					Disable Rovo Button
+					<Toggle onChange={toggleRovoButton} />
+				</div>
+				<div>
+					Disable Adjust Length Button
+					<Toggle onChange={toggleAdjustLengthButton} />
+				</div>
+				<div>
+					Disable Improve Writing Button
+					<Toggle onChange={toggleImproveWritingButton} />
+				</div>
+				<div>
+					Disable Text Styles
+					<Toggle onChange={toggleTextStylesButton} />
+				</div>
+				<div>
+					Disable Bold Formatting
+					<Toggle onChange={toggleBoldStyle} />
+				</div>
+				<div>
+					Disable Italic Formatting
+					<Toggle onChange={toggleItalicStyle} />
+				</div>
+				<div>
+					Disable Text Color
+					<Toggle onChange={toggleTextColorButton} />
+				</div>
+				<div>
+					Disable Bulleted List
+					<Toggle onChange={toggleBulletedListButton} />
+				</div>
+				<div>
+					Disable Numbered List
+					<Toggle onChange={toggleNumberedListButton} />
+				</div>
+				<div>
+					Disable Link
+					<Toggle onChange={toggleLinkButton} />
+				</div>
+				<div>
+					Disable Comment
+					<Toggle onChange={toggleCommentButton} />
+				</div>
+				<div>
+					Disable Apps and Extensions
+					<Toggle onChange={toggleAppsAndExtensionsButton} />
+				</div>
+				<div>
+					Disable Create Jira Work Item
+					<Toggle onChange={toggleCreateJiraWorkItemButton} />
+				</div>
+			</Box>
 		</>
 	);
 };

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.0.0",
+	"version": "0.0.2",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor"
@@ -26,13 +26,14 @@
 		"@atlaskit/badge": "^18.1.0",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/css": "^0.12.0",
-		"@atlaskit/dropdown-menu": "^16.1.0",
-		"@atlaskit/icon": "^27.3.0",
-		"@atlaskit/icon-lab": "^5.1.0",
+		"@atlaskit/dropdown-menu": "^16.3.0",
+		"@atlaskit/icon": "^27.7.0",
+		"@atlaskit/icon-lab": "^5.2.0",
 		"@atlaskit/logo": "^19.5.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.10.0",
-		"@atlaskit/tokens": "^5.5.0",
+		"@atlaskit/tokens": "^5.6.0",
+		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},

package/src/ui/ToolbarButton.tsx

@@ -7,6 +7,12 @@ import { token } from '@atlaskit/tokens';
 
 import { type IconComponent, type ToolbarButtonGroupLocation } from '../types';
 
+const ICON_COLOR = {
+	default: token('color.icon.subtle'),
+	disabled: token('color.icon.disabled'),
+	selected: token('color.icon.selected'),
+};
+
 const styles = cssMap({
 	button: {
 		display: 'flex',
@@ -21,22 +27,29 @@ const styles = cssMap({
 		fontWeight: token('font.weight.medium'),
 		paddingLeft: token('space.100'),
 		paddingRight: token('space.100'),
-
+		'&:focus-visible': {
+			outlineOffset: '0',
+			zIndex: 1,
+			position: 'relative',
+		},
+	},
+	enabled: {
 		'&:hover': {
 			backgroundColor: token('color.background.neutral.subtle.hovered'),
 		},
-
 		'&:active': {
 			backgroundColor: token('color.background.neutral.subtle.pressed'),
 		},
 	},
+	disabled: {
+		color: token('color.text.disabled'),
+		cursor: 'not-allowed',
+	},
 	selected: {
 		backgroundColor: token('color.background.selected'),
-
 		'&:hover': {
 			backgroundColor: token('color.background.selected.hovered'),
 		},
-
 		'&:active': {
 			backgroundColor: token('color.background.selected.pressed'),
 		},
@@ -75,6 +88,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
 	label: string;
 	icon: IconComponent;
 	groupLocation?: ToolbarButtonGroupLocation;
+	isDisabled?: boolean;
 };
 
 export const ToolbarButton = forwardRef(
@@ -93,15 +107,21 @@ export const ToolbarButton = forwardRef(
 			onFocus,
 			testId,
 			groupLocation,
+			isDisabled,
 		}: ToolbarButtonProps,
 		ref: Ref<HTMLButtonElement>,
 	) => {
+		const iconColor = isDisabled
+			? ICON_COLOR.disabled
+			: isSelected
+				? ICON_COLOR.selected
+				: ICON_COLOR.default;
 		return (
 			<Pressable
 				ref={ref}
 				xcss={cx(
 					styles.button,
-					isSelected && styles.selected,
+					isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled,
 					groupLocation === 'start' && styles.groupStart,
 					groupLocation === 'middle' && styles.groupMiddle,
 					groupLocation === 'end' && styles.groupEnd,
@@ -114,12 +134,9 @@ export const ToolbarButton = forwardRef(
 				onBlur={onBlur}
 				onFocus={onFocus}
 				testId={testId}
+				isDisabled={isDisabled}
 			>
-				<IconComponent
-					label={label}
-					size="medium"
-					color={isSelected ? token('color.icon.selected') : token('color.icon.subtle')}
-				/>
+				<IconComponent label={label} size="medium" color={iconColor} />
 				{children}
 			</Pressable>
 		);

package/src/ui/ToolbarDropdownDivider.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { cssMap } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+const styles = cssMap({
+	divider: {
+		borderBottomColor: token('color.border'),
+		borderBottomStyle: 'solid',
+		borderBottomWidth: token('border.width'),
+	},
+});
+
+export const ToolbarDropdownDivider = () => {
+	return <Box xcss={styles.divider} />;
+};

package/src/ui/ToolbarDropdownItem.tsx

@@ -1,7 +1,8 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, forwardRef, type Ref } from 'react';
 
 import { cssMap, cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
+import type { CustomItemComponentProps } from '@atlaskit/menu/types';
 import { Box, Pressable } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
@@ -22,23 +23,29 @@ const styles = cssMap({
 		minHeight: '36px',
 		paddingLeft: token('space.150'),
 		paddingRight: token('space.150'),
-
+		'&:focus-visible': {
+			outlineOffset: token('space.negative.025'),
+			borderRadius: token('border.radius'),
+		},
+	},
+	enabled: {
 		'&:hover': {
 			backgroundColor: token('color.background.neutral.subtle.hovered'),
 		},
-
 		'&:active': {
 			backgroundColor: token('color.background.neutral.subtle.pressed'),
 		},
 	},
+	disabled: {
+		color: token('color.text.disabled'),
+		cursor: 'not-allowed',
+	},
 	selected: {
 		backgroundColor: token('color.background.selected'),
 		color: token('color.text.selected'),
-
 		'&:hover': {
 			backgroundColor: token('color.background.selected.hovered'),
 		},
-
 		'&:active': {
 			backgroundColor: token('color.background.selected.pressed'),
 		},
@@ -66,13 +73,48 @@ const styles = cssMap({
 	},
 });
 
+export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & {
+	'aria-haspopup'?: boolean;
+	'aria-disabled'?: boolean;
+	'aria-pressed'?: boolean;
+};
+
+const CustomDropdownMenuItemButton = forwardRef<HTMLButtonElement, CustomDropdownMenuItemButtonProps>(({
+	children,
+	'data-testid': testId,
+	'aria-haspopup': ariaHasPopup,
+	'aria-disabled': ariaDisabled,
+	'aria-pressed': ariaPressed,
+	onClick,
+	tabIndex,
+}, ref) =>
+	<Pressable
+		testId={testId}
+		xcss={cx(styles.toolbarDropdownItem, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled)}
+		onClick={onClick}
+		tabIndex={tabIndex}
+		aria-haspopup={ariaHasPopup}
+		aria-expanded={ariaHasPopup ? ariaPressed ? true : false : undefined}
+		aria-pressed={ariaPressed}
+		aria-disabled={ariaDisabled}
+		ref={ref}
+	>
+		{children}
+	</Pressable>
+)
+
+
 type ToolbarDropdownItemProps = {
-	onClick: () => void;
+	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;
 };
 
 export const ToolbarDropdownItem = ({
@@ -82,40 +124,22 @@ export const ToolbarDropdownItem = ({
 	isSelected,
 	children,
 	textStyle = 'normal',
-}: ToolbarDropdownItemProps) => {
-	return (
-		<DropdownItem
-			onClick={onClick}
-			elemBefore={elemBefore}
-			elemAfter={elemAfter}
-			isSelected={isSelected}
-			component={({
-				children,
-				'data-testid': testId,
-				disabled,
-				draggable,
-				onClick,
-				onDragStart,
-				onMouseDown,
-				ref,
-				tabIndex,
-			}) => (
-				<Pressable
-					testId={testId}
-					xcss={cx(styles.toolbarDropdownItem, isSelected && styles.selected)}
-					isDisabled={disabled}
-					draggable={draggable}
-					onClick={onClick}
-					onDragStart={onDragStart}
-					onMouseDown={onMouseDown}
-					tabIndex={tabIndex}
-					ref={ref}
-				>
-					{children}
-				</Pressable>
-			)}
-		>
-			<Box xcss={styles[textStyle]}>{children}</Box>
-		</DropdownItem>
-	);
-};
+	isDisabled,
+	hasNestedDropdownMenu,
+	triggerRef,
+	testId,
+}: ToolbarDropdownItemProps) =>
+	<DropdownItem
+		onClick={onClick}
+		elemBefore={elemBefore}
+		elemAfter={elemAfter}
+		isSelected={isSelected}
+		isDisabled={isDisabled}
+		aria-haspopup={hasNestedDropdownMenu}
+		aria-pressed={isSelected}
+		ref={triggerRef}
+		component={CustomDropdownMenuItemButton}
+		testId={testId}
+	>
+		<Box xcss={styles[textStyle]}>{children}</Box>
+	</DropdownItem>

package/src/ui/ToolbarDropdownItemSection.tsx

@@ -0,0 +1,19 @@
+import React, { type ReactNode } from 'react';
+
+import { cssMap } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+
+const styles = cssMap({
+	container: {
+		display: 'flex',
+		flexDirection: 'column',
+	},
+});
+
+type ToolbarDropdownItemSectionProps = {
+	children?: ReactNode;
+};
+
+export const ToolbarDropdownItemSection = ({ children }: ToolbarDropdownItemSectionProps) => {
+	return <Box xcss={styles.container}>{children}</Box>;
+};

package/src/ui/ToolbarDropdownMenu.tsx

@@ -11,6 +11,7 @@ type ToolbarDropdownMenuProps = {
 	label: string;
 	children?: ReactNode;
 	groupLocation?: ToolbarButtonGroupLocation;
+	isDisabled?: boolean;
 };
 
 export const ToolbarDropdownMenu = ({
@@ -18,6 +19,7 @@ export const ToolbarDropdownMenu = ({
 	label,
 	groupLocation,
 	children,
+	isDisabled,
 }: ToolbarDropdownMenuProps) => {
 	return (
 		<DropdownMenu<HTMLButtonElement>
@@ -35,6 +37,7 @@ export const ToolbarDropdownMenu = ({
 					icon={icon}
 					label={label}
 					groupLocation={groupLocation}
+					isDisabled={isDisabled}
 				/>
 			)}
 		>

package/src/ui/ToolbarNestedDropdownMenu.tsx

@@ -0,0 +1,43 @@
+import React, { type ReactNode } from 'react';
+
+import DropdownMenu from '@atlaskit/dropdown-menu';
+
+import { ToolbarDropdownItem } from './ToolbarDropdownItem';
+
+type ToolbarNestedDropdownMenuProps = {
+	elemBefore: ReactNode;
+	elemAfter: ReactNode;
+	text?: string;
+	children?: ReactNode;
+	isDisabled?: boolean;
+};
+
+export const ToolbarNestedDropdownMenu = ({
+	elemBefore,
+	text,
+	elemAfter,
+	children,
+	isDisabled,
+}: ToolbarNestedDropdownMenuProps) => {
+	return (
+		<DropdownMenu<HTMLButtonElement>
+			placement="right-start"
+			trigger={(triggerProps) => (
+				<ToolbarDropdownItem
+					elemBefore={elemBefore}
+					elemAfter={elemAfter}
+					isSelected={triggerProps.isSelected}
+					onClick={triggerProps.onClick}
+					testId={triggerProps.testId}
+					triggerRef={triggerProps.triggerRef}
+					hasNestedDropdownMenu={true}
+					isDisabled={isDisabled}
+				>
+					{text}
+				</ToolbarDropdownItem>
+			)}
+		>
+			{children}
+		</DropdownMenu>
+	);
+};

package/src/ui/ToolbarTooltip.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Tooltip from '@atlaskit/tooltip';
+
+type ToolbarTooltipProps = {
+	content: string;
+	children: React.ReactNode;
+};
+
+export const ToolbarTooltip = ({ content, children }: ToolbarTooltipProps) => {
+	return <Tooltip content={content}>{children}</Tooltip>;
+};

package/src/ui/icons/AICasualIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AICasualIcon } from '@atlaskit/icon/core/emoji-casual';

package/src/ui/icons/AIChangeToneIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AIChangeToneIcon } from '@atlaskit/icon-lab/core/ai-generative-chapters';

package/src/ui/icons/AIChatIcon.tsx

@@ -8,5 +8,5 @@ type AIChatIconProps = {
 };
 
 export const AIChatIcon = ({ label, testId }: AIChatIconProps) => (
-	<RovoLogoIcon label={label} testId={testId} size="small" appearance="neutral" />
+	<RovoLogoIcon label={label} testId={testId} size="small" />
 );

package/src/ui/icons/AIHeartIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AIHeartIcon } from '@atlaskit/icon/core/heart';

package/src/ui/icons/AILengthenIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AILenghtenIcon } from '@atlaskit/icon-lab/core/text-lengthen';

package/src/ui/icons/AIProfessionalIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AIBriefcaseIcon } from '@atlaskit/icon/core/briefcase';

package/src/ui/icons/AIShortenIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AIShortenIcon } from '@atlaskit/icon/core/text-shorten';

package/src/ui/icons/AISpellcheckIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AISpellcheckIcon } from '@atlaskit/icon/core/text-spellcheck';

package/src/ui/icons/AITranslateIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AITranslateIcon } from '@atlaskit/icon/core/translate';

package/src/ui/icons/ClearFormattingIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as ClearFormattingIcon } from '@atlaskit/icon/core/table-cell-clear';

package/src/ui/icons/NestedDropdownRightIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Icon from '@atlaskit/icon/core/chevron-right';
+
+import { type IconComponent } from '../../types';
+
+export const NestedDropdownRightIcon: IconComponent = ({
+	label,
+	testId,
+	color,
+	shouldRecommendSmallIcon,
+	spacing,
+}) => (
+	<Icon
+		label={label}
+		testId={testId}
+		color={color}
+		shouldRecommendSmallIcon={shouldRecommendSmallIcon}
+		spacing={spacing}
+		size="small"
+	/>
+);

package/tsconfig.app.json

@@ -57,6 +57,9 @@
 		},
 		{
 			"path": "../../design-system/tokens/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/tooltip/tsconfig.app.json"
 		}
 	],
 	"files": []

package/tsconfig.dev.json

@@ -40,6 +40,9 @@
 		{
 			"path": "../../design-system/primitives/tsconfig.app.json"
 		},
+		{
+			"path": "../../design-system/toggle/tsconfig.app.json"
+		},
 		{
 			"path": "../../design-system/tokens/tsconfig.app.json"
 		}