tldraw 3.16.0-canary.2b8b5023f0a5 → 3.16.0-canary.2b8e5b0ef726

package/src/lib/ui/components/{primitives/TldrawUiButtonPicker.tsx → StylePanel/StylePanelButtonPicker.tsx}

@@ -4,46 +4,52 @@ import {
 	SharedStyle,
 	StyleProp,
 	TLDefaultColorStyle,
-	TLDefaultColorTheme,
 	useEditor,
 } from '@tldraw/editor'
 import { memo, ReactElement, useMemo, useRef } from 'react'
+import { useDefaultColorTheme } from '../../../shapes/shared/useDefaultColorTheme'
 import { StyleValuesForUi } from '../../../styles'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'
-import { TldrawUiToolbarToggleGroup, TldrawUiToolbarToggleItem } from './TldrawUiToolbar'
-import { TldrawUiGrid, TldrawUiRow } from './layout'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import {
+	TldrawUiToolbar,
+	TldrawUiToolbarToggleGroup,
+	TldrawUiToolbarToggleItem,
+} from '../primitives/TldrawUiToolbar'
+import { TldrawUiGrid, TldrawUiRow } from '../primitives/layout'
+import { useStylePanelContext } from './StylePanelContext'
+import { StylePanelSubheading } from './StylePanelSubheading'
 
 /** @public */
-export interface TLUiButtonPickerProps<T extends string> {
+export interface StylePanelButtonPickerProps<T extends string> {
 	title: string
 	uiType: string
 	style: StyleProp<T>
 	value: SharedStyle<T>
 	items: StyleValuesForUi<T>
-	theme: TLDefaultColorTheme
-	onValueChange(style: StyleProp<T>, value: T): void
+	onValueChange?(style: StyleProp<T>, value: T): void
 	onHistoryMark?(id: string): void
 }
 
 /** @public */
-export const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends string>(
-	props: TLUiButtonPickerProps<T>
+export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T extends string>(
+	props: StylePanelButtonPickerProps<T>
 ) {
+	const ctx = useStylePanelContext()
+
 	const {
 		uiType,
 		items,
 		title,
 		style,
 		value,
-		// columns = clamp(items.length, 2, 4),
-		onValueChange,
-		onHistoryMark,
-		theme,
+		onValueChange = ctx.onValueChange,
+		onHistoryMark = ctx.onHistoryMark,
 	} = props
+	const theme = useDefaultColorTheme()
 	const editor = useEditor()
 	const msg = useTranslation()
 	const breakpoint = useBreakpoint()
@@ -117,43 +123,57 @@ export const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends
 		}
 	}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])
 
-	const Wrapper = items.length > 4 ? TldrawUiGrid : TldrawUiRow
+	const Layout = items.length > 4 ? TldrawUiGrid : TldrawUiRow
 
 	return (
-		<Wrapper asChild>
-			<TldrawUiToolbarToggleGroup
-				data-testid={`style.${uiType}`}
-				type="single"
-				value={value.type === 'shared' ? value.value : undefined}
-			>
-				{items.map((item) => {
-					const label = title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
-					return (
-						<TldrawUiToolbarToggleItem
-							type="icon"
-							key={item.value}
-							data-id={item.value}
-							data-testid={`style.${uiType}.${item.value}`}
-							aria-label={label}
-							value={item.value}
-							data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
-							data-isactive={value.type === 'shared' && value.value === item.value}
-							title={label}
-							style={
-								style === (DefaultColorStyle as StyleProp<unknown>)
-									? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }
-									: undefined
-							}
-							onPointerEnter={handleButtonPointerEnter}
-							onPointerDown={handleButtonPointerDown}
-							onPointerUp={handleButtonPointerUp}
-							onClick={handleButtonClick}
-						>
-							<TldrawUiButtonIcon icon={item.icon} />
-						</TldrawUiToolbarToggleItem>
-					)
-				})}
-			</TldrawUiToolbarToggleGroup>
-		</Wrapper>
+		<>
+			{ctx.showUiLabels && <StylePanelSubheading>{title}</StylePanelSubheading>}
+			<TldrawUiToolbar label={title}>
+				<TldrawUiToolbarToggleGroup
+					data-testid={`style.${uiType}`}
+					type="single"
+					value={value.type === 'shared' ? value.value : undefined}
+					asChild
+				>
+					<Layout>
+						{items.map((item) => {
+							const isActive = value.type === 'shared' && value.value === item.value
+							const label =
+								title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
+							return (
+								<TldrawUiToolbarToggleItem
+									type="icon"
+									key={item.value}
+									data-id={item.value}
+									data-testid={`style.${uiType}.${item.value}`}
+									aria-label={label + (isActive ? ` (${msg('style-panel.selected')})` : '')}
+									tooltip={
+										<>
+											<div>{label}</div>
+											{isActive ? <div>({msg('style-panel.selected')})</div> : null}
+										</>
+									}
+									value={item.value}
+									data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
+									data-isactive={isActive}
+									title={label}
+									style={
+										style === (DefaultColorStyle as StyleProp<unknown>)
+											? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }
+											: undefined
+									}
+									onPointerEnter={handleButtonPointerEnter}
+									onPointerDown={handleButtonPointerDown}
+									onPointerUp={handleButtonPointerUp}
+									onClick={handleButtonClick}
+								>
+									<TldrawUiButtonIcon icon={item.icon} />
+								</TldrawUiToolbarToggleItem>
+							)
+						})}
+					</Layout>
+				</TldrawUiToolbarToggleGroup>
+			</TldrawUiToolbar>
+		</>
 	)
-}) as <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement
+}) as <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement

package/src/lib/ui/components/StylePanel/StylePanelContext.tsx

@@ -0,0 +1,63 @@
+import { ReadonlySharedStyleMap, StyleProp, useEditor, useValue } from '@tldraw/editor'
+import { createContext, useCallback, useContext } from 'react'
+import { useUiEvents } from '../../context/events'
+
+/** @public */
+export interface StylePanelContext {
+	styles: ReadonlySharedStyleMap
+	showUiLabels: boolean
+	onHistoryMark(id: string): void
+	onValueChange<T>(style: StyleProp<T>, value: T): void
+}
+const StylePanelContext = createContext<null | StylePanelContext>(null)
+
+/** @public */
+export interface StylePanelContextProviderProps {
+	children: React.ReactNode
+	styles: ReadonlySharedStyleMap
+}
+
+/** @public @react */
+export function StylePanelContextProvider({ children, styles }: StylePanelContextProviderProps) {
+	const editor = useEditor()
+	const trackEvent = useUiEvents()
+
+	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
+	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
+	const onValueChange = useCallback(
+		function <T>(style: StyleProp<T>, value: T) {
+			editor.run(() => {
+				if (editor.isIn('select')) {
+					editor.setStyleForSelectedShapes(style, value)
+				}
+				editor.setStyleForNextShapes(style, value)
+				editor.updateInstanceState({ isChangingStyle: true })
+			})
+
+			trackEvent('set-style', { source: 'style-panel', id: style.id, value: value as string })
+		},
+		[editor, trackEvent]
+	)
+
+	return (
+		<StylePanelContext.Provider
+			value={{
+				styles: styles,
+				showUiLabels,
+				onHistoryMark,
+				onValueChange,
+			}}
+		>
+			{children}
+		</StylePanelContext.Provider>
+	)
+}
+
+/** @public */
+export function useStylePanelContext() {
+	const context = useContext(StylePanelContext)
+	if (!context) {
+		throw new Error('useStylePanelContext must be used within a StylePanelContextProvider')
+	}
+	return context
+}

package/src/lib/ui/components/StylePanel/{DoubleDropdownPicker.tsx → StylePanelDoubleDropdownPicker.tsx}

@@ -11,8 +11,10 @@ import {
 } from '../primitives/TldrawUiPopover'
 import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
+import { useStylePanelContext } from './StylePanelContext'
 
-interface DoubleDropdownPickerProps<T extends string> {
+/** @public */
+export interface StylePanelDoubleDropdownPickerProps<T extends string> {
 	uiTypeA: string
 	uiTypeB: string
 	label: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
@@ -24,23 +26,27 @@ interface DoubleDropdownPickerProps<T extends string> {
 	styleB: StyleProp<T>
 	valueA: SharedStyle<T>
 	valueB: SharedStyle<T>
-	onValueChange(style: StyleProp<T>, value: T): void
+	onValueChange?(style: StyleProp<T>, value: T): void
 }
 
-function DoubleDropdownPickerInner<T extends string>({
-	label,
-	uiTypeA,
-	uiTypeB,
-	labelA,
-	labelB,
-	itemsA,
-	itemsB,
-	styleA,
-	styleB,
-	valueA,
-	valueB,
-	onValueChange,
-}: DoubleDropdownPickerProps<T>) {
+function DoubleDropdownPickerInner<T extends string>(
+	props: StylePanelDoubleDropdownPickerProps<T>
+) {
+	const ctx = useStylePanelContext()
+	const {
+		label,
+		uiTypeA,
+		uiTypeB,
+		labelA,
+		labelB,
+		itemsA,
+		itemsB,
+		styleA,
+		styleB,
+		valueA,
+		valueB,
+		onValueChange = ctx.onValueChange,
+	} = props
 	const editor = useEditor()
 	const msg = useTranslation()
 	const [isOpenA, setIsOpenA] = React.useState(false)
@@ -155,6 +161,9 @@ function DoubleDropdownPickerInner<T extends string>({
 }
 
 // need to memo like this to get generics
-export const DoubleDropdownPicker = React.memo(
-	DoubleDropdownPickerInner
-) as typeof DoubleDropdownPickerInner
+/** @public @react */
+export const StylePanelDoubleDropdownPicker = React.memo(DoubleDropdownPickerInner) as <
+	T extends string,
+>(
+	props: StylePanelDoubleDropdownPickerProps<T>
+) => React.JSX.Element

package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx

@@ -0,0 +1,119 @@
+import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'
+import * as React from 'react'
+import { StyleValuesForUi } from '../../../styles'
+import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TLUiIconType } from '../../icon-types'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'
+import {
+	TldrawUiPopover,
+	TldrawUiPopoverContent,
+	TldrawUiPopoverTrigger,
+} from '../primitives/TldrawUiPopover'
+import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
+import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
+import { useStylePanelContext } from './StylePanelContext'
+
+/** @public */
+export interface StylePanelDropdownPickerProps<T extends string> {
+	id: string
+	label?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
+	uiType: string
+	stylePanelType: string
+	style: StyleProp<T>
+	value: SharedStyle<T>
+	items: StyleValuesForUi<T>
+	type: 'icon' | 'tool' | 'menu'
+	onValueChange?(style: StyleProp<T>, value: T): void
+}
+
+function DropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {
+	const ctx = useStylePanelContext()
+	const {
+		id,
+		label,
+		uiType,
+		stylePanelType,
+		style,
+		items,
+		type,
+		value,
+		onValueChange = ctx.onValueChange,
+	} = props
+	const msg = useTranslation()
+	const editor = useEditor()
+	const [isOpen, setIsOpen] = React.useState(false)
+
+	const icon = React.useMemo(
+		() => items.find((item) => value.type === 'shared' && item.value === value.value)?.icon,
+		[items, value]
+	)
+
+	const stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)
+
+	const titleStr =
+		value.type === 'mixed'
+			? msg('style-panel.mixed')
+			: stylePanelName + ' — ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)
+	const labelStr = label ? msg(label) : ''
+
+	const popoverId = `style panel ${id}`
+	return (
+		<TldrawUiToolbar label={stylePanelName}>
+			<TldrawUiPopover
+				id={popoverId}
+				open={isOpen}
+				onOpenChange={setIsOpen}
+				className="tlui-style-panel__dropdown-picker"
+			>
+				<TldrawUiPopoverTrigger>
+					<TldrawUiToolbarButton
+						type={type}
+						data-testid={`style.${uiType}`}
+						data-direction="left"
+						title={titleStr}
+					>
+						{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}
+						<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />
+					</TldrawUiToolbarButton>
+				</TldrawUiPopoverTrigger>
+				<TldrawUiPopoverContent side="left" align="center">
+					<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>
+						<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
+							{items.map((item) => {
+								return (
+									<TldrawUiToolbarButton
+										key={item.value}
+										type="icon"
+										data-testid={`style.${uiType}.${item.value}`}
+										title={
+											stylePanelName +
+											' — ' +
+											msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
+										}
+										isActive={icon === item.icon}
+										onClick={() => {
+											ctx.onHistoryMark('select style dropdown item')
+											onValueChange(style, item.value)
+											tlmenus.deleteOpenMenu(popoverId, editor.contextId)
+											setIsOpen(false)
+										}}
+									>
+										<TldrawUiButtonIcon icon={item.icon} />
+									</TldrawUiToolbarButton>
+								)
+							})}
+						</TldrawUiMenuContextProvider>
+					</TldrawUiToolbar>
+				</TldrawUiPopoverContent>
+			</TldrawUiPopover>
+		</TldrawUiToolbar>
+	)
+}
+
+// need to export like this to get generics
+/** @public @react */
+export const StylePanelDropdownPicker = React.memo(DropdownPickerInner) as <T extends string>(
+	props: StylePanelDropdownPickerProps<T>
+) => React.JSX.Element

package/src/lib/ui/components/StylePanel/StylePanelSubheading.tsx

@@ -0,0 +1,9 @@
+/** @public */
+export interface StylePanelSubheadingProps {
+	children: React.ReactNode
+}
+
+/** @public @react */
+export function StylePanelSubheading({ children }: StylePanelSubheadingProps) {
+	return <h3 className="tlui-style-panel__subheading">{children}</h3>
+}

package/src/lib/ui/components/Toolbar/AltTextEditor.tsx

@@ -2,9 +2,9 @@ import { preventDefault, TLShape, TLShapeId, useEditor } from '@tldraw/editor'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiInput } from '../primitives/TldrawUiInput'
+import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface AltTextEditorProps {
@@ -70,20 +70,22 @@ export function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps)
 				data-testid="media-toolbar.alt-text-input"
 				value={altText}
 				placeholder={msg('tool.media-alt-text-desc')}
+				aria-label={msg('tool.media-alt-text-desc')}
 				onValueChange={handleValueChange}
 				onComplete={handleComplete}
 				onCancel={handleAltTextCancel}
 				disabled={isReadonly}
 			/>
 			{!isReadonly && (
-				<TldrawUiButton
+				<TldrawUiToolbarButton
 					title={msg('tool.media-alt-text-confirm')}
+					data-testid="tool.media-alt-text-confirm"
 					type="icon"
 					onPointerDown={preventDefault}
 					onClick={handleConfirm}
 				>
 					<TldrawUiButtonIcon small icon="check" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
 		</>
 	)

package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx

@@ -22,7 +22,6 @@ import {
 import { useActions } from '../../context/actions'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'
 import {
@@ -32,6 +31,7 @@ import {
 	TldrawUiDropdownMenuTrigger,
 } from '../primitives/TldrawUiDropdownMenu'
 import { TldrawUiSlider } from '../primitives/TldrawUiSlider'
+import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface DefaultImageToolbarContentProps {
@@ -226,9 +226,13 @@ export const DefaultImageToolbarContent = track(function DefaultImageToolbarCont
 				/>
 				<TldrawUiDropdownMenuRoot id="image-toolbar-aspect-ratio">
 					<TldrawUiDropdownMenuTrigger>
-						<TldrawUiButton title={msg('tool.aspect-ratio')} type="icon">
+						<TldrawUiToolbarButton
+							title={msg('tool.aspect-ratio')}
+							type="icon"
+							data-testid="tool.image-aspect-ratio"
+						>
 							<TldrawUiButtonIcon icon="corners" />
-						</TldrawUiButton>
+						</TldrawUiToolbarButton>
 					</TldrawUiDropdownMenuTrigger>
 					<TldrawUiDropdownMenuContent side="top" align="center">
 						{ASPECT_RATIO_OPTIONS.map((aspectRatio) => {
@@ -268,14 +272,15 @@ export const DefaultImageToolbarContent = track(function DefaultImageToolbarCont
 						})}
 					</TldrawUiDropdownMenuContent>
 				</TldrawUiDropdownMenuRoot>
-				<TldrawUiButton
+				<TldrawUiToolbarButton
 					type="icon"
 					onClick={onManipulatingEnd}
-					data-testid="tool.image-confirm"
-					style={{ borderLeft: '1px solid var(--color-divider)', marginLeft: '2px' }}
+					data-testid="tool.image-crop-confirm"
+					style={{ borderLeft: '1px solid var(--tl-color-divider)', marginLeft: '2px' }}
+					title={msg('tool.image-crop-confirm')}
 				>
 					<TldrawUiButtonIcon small icon="check" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			</>
 		)
 	}
@@ -283,33 +288,45 @@ export const DefaultImageToolbarContent = track(function DefaultImageToolbarCont
 	return (
 		<>
 			{!isReadonly && (
-				<TldrawUiButton type="icon" title={msg('tool.replace-media')} onClick={handleImageReplace}>
+				<TldrawUiToolbarButton
+					type="icon"
+					data-testid="tool.image-replace"
+					onClick={handleImageReplace}
+					title={msg('tool.replace-media')}
+				>
 					<TldrawUiButtonIcon small icon="tool-media" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
 			{!isReadonly && (
-				<TldrawUiButton type="icon" title={msg('tool.image-crop')} onClick={onManipulatingStart}>
+				<TldrawUiToolbarButton
+					type="icon"
+					title={msg('tool.image-crop')}
+					onClick={onManipulatingStart}
+					data-testid="tool.image-crop"
+				>
 					<TldrawUiButtonIcon small icon="crop" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
-			<TldrawUiButton
+			<TldrawUiToolbarButton
 				type="icon"
 				title={msg('action.download-original')}
 				onClick={handleImageDownload}
+				data-testid="tool.image-download"
 			>
 				<TldrawUiButtonIcon small icon="download" />
-			</TldrawUiButton>
+			</TldrawUiToolbarButton>
 			{(altText || !isReadonly) && (
-				<TldrawUiButton
-					type="normal"
+				<TldrawUiToolbarButton
+					type="icon"
 					title={msg('tool.media-alt-text')}
+					data-testid="tool.image-alt-text"
 					onClick={() => {
 						trackEvent('alt-text-start', { source })
 						onEditAltTextStart()
 					}}
 				>
 					<TldrawUiButtonIcon small icon="alt" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
 		</>
 	)