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 ( -

-