@atlaskit/editor-toolbar 0.0.0 → 0.0.1

package/CHANGELOG.md

@@ -1 +1,10 @@
 # @atlaskit/editor-toolbar
+
+## 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,6 +1,7 @@
-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';
@@ -35,6 +36,7 @@ import { ToolbarDropdownItem } from '../../../src/ui/ToolbarDropdownItem';
 import { ToolbarDropdownMenu } from '../../../src/ui/ToolbarDropdownMenu';
 import { ToolbarKeyboardShortcutHint } from '../../../src/ui/ToolbarKeyboardShortcutHint';
 import { ToolbarSection } from '../../../src/ui/ToolbarSection';
+import { ToolbarTooltip } from '../../../src/ui/ToolbarTooltip';
 
 import { useExampleToolbarState } from './useExampleToolbarState';
 
@@ -52,23 +54,92 @@ 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>
+						<ToolbarTooltip content="Ask Rovo">
+							<ToolbarButton
+								icon={AIChatIcon}
+								label="Ask Rovo"
+								onClick={onClick('Ask Rovo')}
+								groupLocation="start"
+								isDisabled={isRovoDisabled}
+							>
+								Ask Rovo
+							</ToolbarButton>
+						</ToolbarTooltip>
 						<ToolbarDropdownMenu icon={MoreItemsIcon} label="More formatting" groupLocation="end">
 							<ToolbarDropdownItem
 								elemBefore={<AIAdjustLengthIcon label="Adjust length" />}
 								onClick={onClick('Adjust length')}
+								isDisabled={isAdjustLengthDisabled}
 							>
 								Adjust length
 							</ToolbarDropdownItem>
@@ -76,13 +147,16 @@ export const ExampleManuallyComposedToolbar = () => {
 					</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,114 +164,121 @@ 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"
+						<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}
 							>
-								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>
-						</ToolbarDropdownMenu>
+								<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>
+							</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
 								elemBefore={<BoldIcon label="Bold" />}
 								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘B" />}
 								onClick={onClick('Bold', onToggleFormatting('bold'))}
 								isSelected={formatting.bold}
+								isDisabled={isBoldDisabled}
 							>
 								Bold
 							</ToolbarDropdownItem>
@@ -206,6 +287,7 @@ export const ExampleManuallyComposedToolbar = () => {
 								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘I" />}
 								onClick={onClick('Italic', onToggleFormatting('italic'))}
 								isSelected={formatting.italic}
+								isDisabled={isItalicDisabled}
 							>
 								Italic
 							</ToolbarDropdownItem>
@@ -213,41 +295,47 @@ export const ExampleManuallyComposedToolbar = () => {
 					</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>
+								<ToolbarDropdownItem
+									elemBefore={<TextIcon label="Text color" />}
+									onClick={onClick('Text color')}
+								>
+									Text color
+								</ToolbarDropdownItem>
+							</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"
@@ -258,6 +346,7 @@ export const ExampleManuallyComposedToolbar = () => {
 								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⇧8" />}
 								onClick={onClick('Bulleted list', onToggleListOrAlignment('bulleted'))}
 								isSelected={listOrAlignment === 'bulleted'}
+								isDisabled={isBulletedListDisabled}
 							>
 								Bulleted list
 							</ToolbarDropdownItem>
@@ -266,6 +355,7 @@ export const ExampleManuallyComposedToolbar = () => {
 								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⇧7" />}
 								onClick={onClick('Numbered list', onToggleListOrAlignment('numbered'))}
 								isSelected={listOrAlignment === 'numbered'}
+								isDisabled={isNumberedListDisabled}
 							>
 								Numbered list
 							</ToolbarDropdownItem>
@@ -277,7 +367,9 @@ 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 +377,9 @@ 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 +387,17 @@ 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')}
-							>
-								Create Jira work item
-							</ToolbarDropdownItem>
-						</ToolbarDropdownMenu>
+						<ToolbarTooltip content="Apps and extensions">
+							<ToolbarDropdownMenu icon={AppsIcon} label="Apps and extensions" isDisabled={isAppsAndExtensionsDisabled}>
+								<ToolbarDropdownItem
+									elemBefore={<AddIcon label="Create Jira work item" />}
+									onClick={onClick('Create Jira work item')}
+									isDisabled={isCreateJiraWorkItemDisabled}
+								>
+									Create Jira work item
+								</ToolbarDropdownItem>
+							</ToolbarDropdownMenu>
+						</ToolbarTooltip>
 					</ToolbarButtonGroup>
 				</ToolbarSection>
 
@@ -308,14 +405,16 @@ 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>
@@ -324,13 +423,67 @@ export const ExampleManuallyComposedToolbar = () => {
 Last action: ${lastAction || 'None'}
 Text style:  ${textStyle}
 Formatting:  ${Object.entries(formatting)
-					.filter(([, value]) => value)
-					.map(([key]) => key)
-					.join(', ')}
+						.filter(([, value]) => value)
+						.map(([key]) => key)
+						.join(', ')}
 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.1",
 	"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.2.0",
+		"@atlaskit/icon": "^27.5.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,17 @@ 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,11 +130,12 @@ 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')}
+					color={iconColor}
 				/>
 				{children}
 			</Pressable>

package/src/ui/ToolbarDropdownItem.tsx

@@ -22,23 +22,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'),
 		},
@@ -73,6 +79,7 @@ type ToolbarDropdownItemProps = {
 	isSelected?: boolean;
 	children?: React.ReactNode;
 	textStyle?: TextStyle;
+	isDisabled?: boolean;
 };
 
 export const ToolbarDropdownItem = ({
@@ -82,6 +89,7 @@ export const ToolbarDropdownItem = ({
 	isSelected,
 	children,
 	textStyle = 'normal',
+	isDisabled,
 }: ToolbarDropdownItemProps) => {
 	return (
 		<DropdownItem
@@ -92,7 +100,6 @@ export const ToolbarDropdownItem = ({
 			component={({
 				children,
 				'data-testid': testId,
-				disabled,
 				draggable,
 				onClick,
 				onDragStart,
@@ -102,8 +109,11 @@ export const ToolbarDropdownItem = ({
 			}) => (
 				<Pressable
 					testId={testId}
-					xcss={cx(styles.toolbarDropdownItem, isSelected && styles.selected)}
-					isDisabled={disabled}
+					xcss={cx(
+						styles.toolbarDropdownItem,
+						isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled,
+					)}
+					isDisabled={isDisabled}
 					draggable={draggable}
 					onClick={onClick}
 					onDragStart={onDragStart}

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/ToolbarTooltip.tsx

@@ -0,0 +1,16 @@
+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/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/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"
 		}