tldraw 3.16.0-next.eafb52d15064 → 3.16.0-next.fe14f1b4181f

package/src/lib/ui/components/SharePanel/UserPresenceColorPicker.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 { TldrawUiGrid } from '../primitives/layout'
 
 export const UserPresenceColorPicker = track(function UserPresenceColorPicker() {
 	const editor = useEditor()
@@ -100,7 +101,7 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 					side="left"
 					sideOffset={8}
 				>
-					<div className={'tlui-buttons__grid'}>
+					<TldrawUiGrid>
 						{USER_COLORS.map((item: string) => (
 							<TldrawUiButton
 								type="icon"
@@ -110,7 +111,6 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 								aria-label={item}
 								isActive={value === item}
 								title={item}
-								className={'tlui-button-grid__button'}
 								style={{ color: item }}
 								onPointerEnter={handleButtonPointerEnter}
 								onPointerDown={handleButtonPointerDown}
@@ -120,7 +120,7 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 								<TldrawUiButtonIcon icon="color" />
 							</TldrawUiButton>
 						))}
-					</div>
+					</TldrawUiGrid>
 				</_Popover.Content>
 			</_Popover.Portal>
 		</_Popover.Root>

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

@@ -139,7 +139,7 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 						{showUiLabels && (
 							<StylePanelSubheading>{msg('style-panel.color')}</StylePanelSubheading>
 						)}
-						<TldrawUiToolbar label={msg('style-panel.color')}>
+						<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.color')}>
 							<TldrawUiButtonPicker
 								title={msg('style-panel.color')}
 								uiType="color"
@@ -162,7 +162,7 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 							{showUiLabels && (
 								<StylePanelSubheading>{msg('style-panel.fill')}</StylePanelSubheading>
 							)}
-							<TldrawUiToolbar label={msg('style-panel.fill')}>
+							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.fill')}>
 								<TldrawUiButtonPicker
 									title={msg('style-panel.fill')}
 									uiType="fill"
@@ -181,7 +181,7 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 							{showUiLabels && (
 								<StylePanelSubheading>{msg('style-panel.dash')}</StylePanelSubheading>
 							)}
-							<TldrawUiToolbar label={msg('style-panel.dash')}>
+							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.dash')}>
 								<TldrawUiButtonPicker
 									title={msg('style-panel.dash')}
 									uiType="dash"
@@ -200,7 +200,7 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 							{showUiLabels && (
 								<StylePanelSubheading>{msg('style-panel.size')}</StylePanelSubheading>
 							)}
-							<TldrawUiToolbar label={msg('style-panel.size')}>
+							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.size')}>
 								<TldrawUiButtonPicker
 									title={msg('style-panel.size')}
 									uiType="size"
@@ -249,7 +249,7 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 			{font === undefined ? null : (
 				<>
 					{labelStr && <StylePanelSubheading>{labelStr}</StylePanelSubheading>}
-					<TldrawUiToolbar label={msg('style-panel.font')}>
+					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.font')}>
 						<TldrawUiButtonPicker
 							title={msg('style-panel.font')}
 							uiType="font"
@@ -267,7 +267,7 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 			{textAlign === undefined ? null : (
 				<>
 					{showUiLabels && <StylePanelSubheading>{msg('style-panel.align')}</StylePanelSubheading>}
-					<TldrawUiToolbar label={msg('style-panel.align')} className="tlui-style-panel__row">
+					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.align')}>
 						<TldrawUiButtonPicker
 							title={msg('style-panel.align')}
 							uiType="align"
@@ -278,16 +278,14 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 							theme={theme}
 							onHistoryMark={onHistoryMark}
 						/>
-						<div className="tlui-style-panel__row__extra-button">
-							<TldrawUiToolbarButton
-								type="icon"
-								title={msg('style-panel.vertical-align')}
-								data-testid="vertical-align"
-								disabled
-							>
-								<TldrawUiButtonIcon icon="vertical-align-middle" />
-							</TldrawUiToolbarButton>
-						</div>
+						<TldrawUiToolbarButton
+							type="icon"
+							title={msg('style-panel.vertical-align')}
+							data-testid="vertical-align"
+							disabled
+						>
+							<TldrawUiButtonIcon icon="vertical-align-middle" />
+						</TldrawUiToolbarButton>
 					</TldrawUiToolbar>
 				</>
 			)}
@@ -297,7 +295,7 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 					{showUiLabels && (
 						<StylePanelSubheading>{msg('style-panel.label-align')}</StylePanelSubheading>
 					)}
-					<TldrawUiToolbar label={msg('style-panel.label-align')} className="tlui-style-panel__row">
+					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.label-align')}>
 						<TldrawUiButtonPicker
 							title={msg('style-panel.label-align')}
 							uiType="align"
@@ -308,29 +306,27 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 							theme={theme}
 							onHistoryMark={onHistoryMark}
 						/>
-						<div className="tlui-style-panel__row__extra-button">
-							{verticalLabelAlign === undefined ? (
-								<TldrawUiToolbarButton
-									type="icon"
-									title={msg('style-panel.vertical-align')}
-									data-testid="vertical-align"
-									disabled
-								>
-									<TldrawUiButtonIcon icon="vertical-align-middle" />
-								</TldrawUiToolbarButton>
-							) : (
-								<DropdownPicker
-									type="icon"
-									id="geo-vertical-alignment"
-									uiType="verticalAlign"
-									stylePanelType="vertical-align"
-									style={DefaultVerticalAlignStyle}
-									items={STYLES.verticalAlign}
-									value={verticalLabelAlign}
-									onValueChange={handleValueChange}
-								/>
-							)}
-						</div>
+						{verticalLabelAlign === undefined ? (
+							<TldrawUiToolbarButton
+								type="icon"
+								title={msg('style-panel.vertical-align')}
+								data-testid="vertical-align"
+								disabled
+							>
+								<TldrawUiButtonIcon icon="vertical-align-middle" />
+							</TldrawUiToolbarButton>
+						) : (
+							<DropdownPicker
+								type="icon"
+								id="geo-vertical-alignment"
+								uiType="verticalAlign"
+								stylePanelType="vertical-align"
+								style={DefaultVerticalAlignStyle}
+								items={STYLES.verticalAlign}
+								value={verticalLabelAlign}
+								onValueChange={handleValueChange}
+							/>
+						)}
 					</TldrawUiToolbar>
 				</>
 			)}
@@ -348,7 +344,7 @@ export function GeoStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar label={msg('style-panel.geo')}>
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.geo')}>
 			<DropdownPicker
 				id="geo"
 				type="menu"
@@ -374,7 +370,7 @@ export function SplineStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar label={msg('style-panel.spline')}>
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.spline')}>
 			<DropdownPicker
 				id="spline"
 				type="menu"
@@ -400,7 +396,7 @@ export function ArrowStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar label={msg('style-panel.arrow-kind')}>
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.arrow-kind')}>
 			<DropdownPicker
 				id="arrow-kind"
 				type="menu"

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

@@ -68,7 +68,7 @@ function DoubleDropdownPickerInner<T extends string>({
 			<div title={msg(label)} className="tlui-style-panel__double-select-picker-label">
 				{msg(label)}
 			</div>
-			<TldrawUiToolbar label={msg(label)} className="tlui-buttons__horizontal">
+			<TldrawUiToolbar orientation="horizontal" label={msg(label)}>
 				<TldrawUiPopover id={idA} open={isOpenA} onOpenChange={setIsOpenA}>
 					<TldrawUiPopoverTrigger>
 						<TldrawUiToolbarButton
@@ -86,7 +86,7 @@ function DoubleDropdownPickerInner<T extends string>({
 						</TldrawUiToolbarButton>
 					</TldrawUiPopoverTrigger>
 					<TldrawUiPopoverContent side="left" align="center" sideOffset={80} alignOffset={0}>
-						<TldrawUiToolbar label={msg(labelA)} className="tlui-buttons__grid">
+						<TldrawUiToolbar orientation="grid" label={msg(labelA)}>
 							<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 								{itemsA.map((item) => {
 									return (
@@ -126,7 +126,7 @@ function DoubleDropdownPickerInner<T extends string>({
 						</TldrawUiToolbarButton>
 					</TldrawUiPopoverTrigger>
 					<TldrawUiPopoverContent side="left" align="center" sideOffset={116} alignOffset={0}>
-						<TldrawUiToolbar label={msg(labelB)} className="tlui-buttons__grid">
+						<TldrawUiToolbar orientation="grid" label={msg(labelB)}>
 							<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 								{itemsB.map((item) => {
 									return (

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

@@ -272,7 +272,7 @@ export const DefaultImageToolbarContent = track(function DefaultImageToolbarCont
 					type="icon"
 					onClick={onManipulatingEnd}
 					data-testid="tool.image-confirm"
-					style={{ borderLeft: '1px solid var(--color-divider)', marginLeft: '2px' }}
+					style={{ borderLeft: '1px solid var(--tl-color-divider)', marginLeft: '2px' }}
 				>
 					<TldrawUiButtonIcon small icon="check" />
 				</TldrawUiButton>

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>
 	)
 })