diff --git a/e2e/playwright/fixtures/cmdBarFixture.ts b/e2e/playwright/fixtures/cmdBarFixture.ts
index 014eda2c0..362bad730 100644
--- a/e2e/playwright/fixtures/cmdBarFixture.ts
+++ b/e2e/playwright/fixtures/cmdBarFixture.ts
@@ -147,7 +147,7 @@ export class CmdBarFixture {
await expect(this.page.getByPlaceholder('Search commands')).toBeVisible()
if (selectCmd === 'promptToEdit') {
const promptEditCommand = this.page.getByText(
- 'Use Zoo AI to edit your kcl'
+ 'Use Zoo AI to edit your parts and code.'
)
await expect(promptEditCommand.first()).toBeVisible()
await promptEditCommand.first().scrollIntoViewIfNeeded()
diff --git a/src/Toolbar.tsx b/src/Toolbar.tsx
index 872fc9d96..5629fcad7 100644
--- a/src/Toolbar.tsx
+++ b/src/Toolbar.tsx
@@ -95,7 +95,7 @@ export function Toolbar({
const tooltipContentClassName = !showRichContent
? ''
- : '!text-left text-wrap !text-xs !p-0 !pb-2 flex gap-2 !max-w-none !w-72 flex-col items-stretch'
+ : '!text-left text-wrap !text-xs !p-0 !pb-2 flex !max-w-none !w-72 flex-col items-stretch'
const richContentTimeout = useRef(null)
const richContentClearTimeout = useRef(null)
// On mouse enter, show rich content after a 1s delay
@@ -155,9 +155,12 @@ export function Toolbar({
maybeIconConfig: ToolbarItem,
dropdownId?: string
): ToolbarItemResolved {
+ const isConfiguredAvailable = ['available', 'experimental'].includes(
+ maybeIconConfig.status
+ )
const isDisabled =
disableAllButtons ||
- maybeIconConfig.status !== 'available' ||
+ !isConfiguredAvailable ||
maybeIconConfig.disabled?.(state) === true
return {
@@ -248,7 +251,9 @@ export function Toolbar({
onClick: () => itemConfig.onClick(configCallbackProps),
disabled:
disableAllButtons ||
- itemConfig.status !== 'available' ||
+ !['available', 'experimental'].includes(
+ itemConfig.status
+ ) ||
itemConfig.disabled === true,
status: itemConfig.status,
}))}
@@ -276,7 +281,9 @@ export function Toolbar({
aria-pressed={selectedIcon.isActive}
disabled={
disableAllButtons ||
- selectedIcon.status !== 'available' ||
+ !['available', 'experimental'].includes(
+ selectedIcon.status
+ ) ||
selectedIcon.disabled
}
name={selectedIcon.title}
@@ -347,7 +354,7 @@ export function Toolbar({
aria-pressed={itemConfig.isActive}
disabled={
disableAllButtons ||
- itemConfig.status !== 'available' ||
+ !['available', 'experimental'].includes(itemConfig.status) ||
itemConfig.disabled
}
onClick={() => itemConfig.onClick(configCallbackProps)}
@@ -409,7 +416,7 @@ const ToolbarItemTooltip = memo(function ToolbarItemContents({
},
{
enabled:
- itemConfig.status === 'available' &&
+ ['available', 'experimental'].includes(itemConfig.status) &&
!!itemConfig.hotkey &&
!itemConfig.disabled &&
!itemConfig.disableHotkey,
@@ -444,18 +451,28 @@ const ToolbarItemTooltipShortContent = ({
title: string
hotkey?: string | string[]
}) => (
-
- {title}
- {hotkey && (
-
- {displayHotkeys(hotkey)}
-
+ {status === 'experimental' && (
+
+
+ Experimental
+
)}
-
+
+ {title}
+ {hotkey && (
+
+ {displayHotkeys(hotkey)}
+
+ )}
+
+
)
const ToolbarItemTooltipRichContent = ({
@@ -463,9 +480,18 @@ const ToolbarItemTooltipRichContent = ({
}: {
itemConfig: ToolbarItemResolved
}) => {
+ const shouldBeEnabled = ['available', 'experimental'].includes(
+ itemConfig.status
+ )
const { state } = useModelingContext()
return (
<>
+ {itemConfig.status === 'experimental' && (
+
+
+ Experimental
+
+ )}
{itemConfig.icon && (
)}
-
{itemConfig.title}
-
- {itemConfig.status === 'available' && itemConfig.hotkey ? (
+
+ {shouldBeEnabled && itemConfig.hotkey ? (
{displayHotkeys(itemConfig.hotkey)}
@@ -511,12 +535,12 @@ const ToolbarItemTooltipRichContent = ({
)
)}
- {itemConfig.description}
+ {itemConfig.description}
{/* Add disabled reason if item is disabled */}
{itemConfig.disabled && itemConfig.disabledReason && (
<>
-
+
{typeof itemConfig.disabledReason === 'function'
? itemConfig.disabledReason(state)
: itemConfig.disabledReason}
diff --git a/src/components/ActionButtonDropdown.tsx b/src/components/ActionButtonDropdown.tsx
index 15bb7d2c1..a9bb4c7f6 100644
--- a/src/components/ActionButtonDropdown.tsx
+++ b/src/components/ActionButtonDropdown.tsx
@@ -13,7 +13,7 @@ type ActionButtonSplitProps = ActionButtonProps & { Element: 'button' } & {
shortcut?: string
onClick: () => void
disabled?: boolean
- status?: 'available' | 'unavailable' | 'kcl-only'
+ status?: 'available' | 'unavailable' | 'kcl-only' | 'experimental'
}[]
}
@@ -101,6 +101,9 @@ export function ActionButtonDropdown({
{item.shortcut}
) : null}
+ {item.status === 'experimental' ? (
+
+ ) : null}
))}
diff --git a/src/components/CommandBar/CommandBarTextareaInput.tsx b/src/components/CommandBar/CommandBarTextareaInput.tsx
index ab20a9917..66068a499 100644
--- a/src/components/CommandBar/CommandBarTextareaInput.tsx
+++ b/src/components/CommandBar/CommandBarTextareaInput.tsx
@@ -36,8 +36,13 @@ function CommandBarTextareaInput({
}
return (
-
)}
+ {option.status === 'experimental' && (
+
+
+ Experimental
+
+ )}
))}
diff --git a/src/components/CustomIcon.tsx b/src/components/CustomIcon.tsx
index 0d918aef3..8177e7ea5 100644
--- a/src/components/CustomIcon.tsx
+++ b/src/components/CustomIcon.tsx
@@ -106,6 +106,14 @@ const CustomIconMap = {
/>
),
+ beaker: (
+
+ ),
booleanExclude: (