tldraw 3.16.0-canary.56eb315c11ae → 3.16.0-canary.5f82fb812214

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

@@ -1,5 +1,4 @@
 import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'
-import classNames from 'classnames'
 import * as React from 'react'
 import { StyleValuesForUi } from '../../../styles'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
@@ -57,7 +56,12 @@ function DropdownPickerInner<T extends string>({
 
 	const popoverId = `style panel ${id}`
 	return (
-		<TldrawUiPopover id={popoverId} open={isOpen} onOpenChange={setIsOpen}>
+		<TldrawUiPopover
+			id={popoverId}
+			open={isOpen}
+			onOpenChange={setIsOpen}
+			className="tlui-style-panel__dropdown-picker"
+		>
 			<TldrawUiPopoverTrigger>
 				<TldrawUiToolbarButton
 					type={type}
@@ -70,10 +74,7 @@ function DropdownPickerInner<T extends string>({
 				</TldrawUiToolbarButton>
 			</TldrawUiPopoverTrigger>
 			<TldrawUiPopoverContent side="left" align="center">
-				<TldrawUiToolbar
-					label={labelStr}
-					className={classNames('tlui-buttons__grid', `tlui-buttons__${stylePanelType}`)}
-				>
+				<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>
 					<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 						{items.map((item) => {
 							return (

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 {
@@ -76,14 +76,15 @@ export function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps)
 				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>
 			)}
 		</>
 	)

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

@@ -1,4 +1,5 @@
 import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
+import classNames from 'classnames'
 import { ReactNode, memo, useRef } from 'react'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
@@ -6,6 +7,7 @@ import { useTldrawUiComponents } from '../../context/components'
 import { useReadonly } from '../../hooks/useReadonly'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { MobileStylePanel } from '../MobileStylePanel'
+import { TldrawUiOrientationProvider } from '../primitives/layout'
 import { TldrawUiToolbar } from '../primitives/TldrawUiToolbar'
 import { DefaultToolbarContent } from './DefaultToolbarContent'
 import { OverflowingToolbar } from './OverflowingToolbar'
@@ -14,6 +16,11 @@ import { ToggleToolLockedButton } from './ToggleToolLockedButton'
 /** @public */
 export interface DefaultToolbarProps {
 	children?: ReactNode
+	orientation?: 'horizontal' | 'vertical'
+	minItems?: number
+	minSizePx?: number
+	maxItems?: number
+	maxSizePx?: number
 }
 
 /**
@@ -24,7 +31,14 @@ export interface DefaultToolbarProps {
  * @public
  * @react
  */
-export const DefaultToolbar = memo(function DefaultToolbar({ children }: DefaultToolbarProps) {
+export const DefaultToolbar = memo(function DefaultToolbar({
+	children,
+	orientation = 'horizontal',
+	minItems = 4,
+	minSizePx = 310,
+	maxItems = 8,
+	maxSizePx = 470,
+}: DefaultToolbarProps) {
 	const editor = useEditor()
 	const msg = useTranslation()
 	const breakpoint = useBreakpoint()
@@ -44,31 +58,49 @@ export const DefaultToolbar = memo(function DefaultToolbar({ children }: Default
 				: breakpoint < PORTRAIT_BREAKPOINT.TABLET
 
 	return (
-		<div ref={ref} className="tlui-toolbar">
-			<div className="tlui-toolbar__inner">
-				<div className="tlui-toolbar__left">
-					{!isReadonlyMode && (
-						<div className="tlui-toolbar__extras">
-							{showQuickActions && (
-								<TldrawUiToolbar
-									className="tlui-toolbar__extras__controls tlui-buttons__horizontal"
-									label={msg('actions-menu.title')}
-								>
-									{QuickActions && <QuickActions />}
-									{ActionsMenu && <ActionsMenu />}
-								</TldrawUiToolbar>
-							)}
-							<ToggleToolLockedButton activeToolId={activeToolId} />
+		<TldrawUiOrientationProvider
+			orientation={orientation}
+			tooltipSide={orientation === 'horizontal' ? 'top' : 'right'}
+		>
+			<div
+				ref={ref}
+				className={classNames('tlui-main-toolbar', `tlui-main-toolbar--${orientation}`)}
+			>
+				<div className="tlui-main-toolbar__inner">
+					<div className="tlui-main-toolbar__left">
+						{!isReadonlyMode && (
+							<div className="tlui-main-toolbar__extras">
+								{showQuickActions && (
+									<TldrawUiToolbar
+										orientation={orientation}
+										className="tlui-main-toolbar__extras__controls"
+										label={msg('actions-menu.title')}
+									>
+										{QuickActions && <QuickActions />}
+										{ActionsMenu && <ActionsMenu />}
+									</TldrawUiToolbar>
+								)}
+								<ToggleToolLockedButton activeToolId={activeToolId} />
+							</div>
+						)}
+						<OverflowingToolbar
+							orientation={orientation}
+							sizingParentClassName="tlui-main-toolbar"
+							minItems={minItems}
+							maxItems={maxItems}
+							minSizePx={minSizePx}
+							maxSizePx={maxSizePx}
+						>
+							{children ?? <DefaultToolbarContent />}
+						</OverflowingToolbar>
+					</div>
+					{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (
+						<div className="tlui-main-toolbar__tools tlui-main-toolbar__mobile-style-panel">
+							<MobileStylePanel />
 						</div>
 					)}
-					<OverflowingToolbar>{children ?? <DefaultToolbarContent />}</OverflowingToolbar>
 				</div>
-				{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (
-					<div className="tlui-toolbar__tools">
-						<MobileStylePanel />
-					</div>
-				)}
 			</div>
-		</div>
+		</TldrawUiOrientationProvider>
 	)
 })

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

@@ -5,6 +5,7 @@ import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface DefaultVideoToolbarContentProps {
@@ -44,7 +45,12 @@ export const DefaultVideoToolbarContent = track(function DefaultVideoToolbarCont
 	return (
 		<>
 			{!isReadonly && (
-				<TldrawUiButton type="icon" title={msg('tool.replace-media')} onClick={handleVideoReplace}>
+				<TldrawUiButton
+					type="icon"
+					title={msg('tool.replace-media')}
+					onClick={handleVideoReplace}
+					data-testid="tool.video-replace"
+				>
 					<TldrawUiButtonIcon small icon="tool-media" />
 				</TldrawUiButton>
 			)}
@@ -52,21 +58,23 @@ export const DefaultVideoToolbarContent = track(function DefaultVideoToolbarCont
 				type="icon"
 				title={msg('action.download-original')}
 				onClick={handleVideoDownload}
+				data-testid="tool.video-download"
 			>
 				<TldrawUiButtonIcon small icon="download" />
 			</TldrawUiButton>
 			{(altText || !isReadonly) && (
-				<TldrawUiButton
-					type="normal"
+				<TldrawUiToolbarButton
+					type="icon"
 					isActive={!!altText}
 					title={msg('tool.media-alt-text')}
+					data-testid="tool.video-alt-text"
 					onClick={() => {
 						trackEvent('alt-text-start', { source })
 						onEditAltTextStart()
 					}}
 				>
 					<TldrawUiButtonIcon small icon="alt" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
 		</>
 	)

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

@@ -2,9 +2,9 @@ import { preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'
 import { 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 LinkEditorProps {
@@ -76,7 +76,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onCancel={handleLinkCancel}
 				placeholder="example.com"
 			/>
-			<TldrawUiButton
+			<TldrawUiToolbarButton
 				className="tlui-rich-text__toolbar-link-visit"
 				title={msg('tool.rich-text-link-visit')}
 				type="icon"
@@ -85,8 +85,8 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				disabled={!value}
 			>
 				<TldrawUiButtonIcon small icon="external-link" />
-			</TldrawUiButton>
-			<TldrawUiButton
+			</TldrawUiToolbarButton>
+			<TldrawUiToolbarButton
 				className="tlui-rich-text__toolbar-link-remove"
 				title={msg('tool.rich-text-link-remove')}
 				data-testid="rich-text.link-remove"
@@ -95,7 +95,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onClick={handleRemoveLink}
 			>
 				<TldrawUiButtonIcon small icon="trash" />
-			</TldrawUiButton>
+			</TldrawUiToolbarButton>
 		</>
 	)
 }