tldraw 3.16.0-canary.f60032f16651 → 3.16.0-canary.ffdf566dd0a8

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

@@ -1,4 +1,4 @@
-import { useEditor, usePassThroughWheelEvents } from '@tldraw/editor'
+import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import { ReactNode, memo, useCallback, useEffect, useRef } from 'react'
 import { useRelevantStyles } from '../../hooks/useRelevantStyles'
@@ -16,6 +16,7 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 	children,
 }: TLUiStylePanelProps) {
 	const editor = useEditor()
+	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
 
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughWheelEvents(ref)
@@ -50,6 +51,7 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 			ref={ref}
 			className={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}
 			data-ismobile={isMobile}
+			data-show-ui-labels={showUiLabels}
 			onPointerLeave={handlePointerOut}
 		>
 			{content}

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

@@ -35,6 +35,11 @@ import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiTo
 import { DoubleDropdownPicker } from './DoubleDropdownPicker'
 import { DropdownPicker } from './DropdownPicker'
 
+// Local component for style panel subheadings
+function StylePanelSubheading({ children }: { children: React.ReactNode }) {
+	return <h3 className="tlui-style-panel__subheading">{children}</h3>
+}
+
 /** @public */
 export interface TLUiStylePanelContentProps {
 	styles: ReturnType<typeof useRelevantStyles>
@@ -115,6 +120,7 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 	const editor = useEditor()
 
 	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
+	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
 
 	const handleValueChange = useStyleChangeCallback()
 
@@ -129,70 +135,90 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 		<>
 			<div className="tlui-style-panel__section__common" data-testid="style.panel">
 				{color === undefined ? null : (
-					<TldrawUiToolbar label={msg('style-panel.color')}>
-						<TldrawUiButtonPicker
-							title={msg('style-panel.color')}
-							uiType="color"
-							style={DefaultColorStyle}
-							items={STYLES.color}
-							value={color}
-							onValueChange={handleValueChange}
-							theme={theme}
-							onHistoryMark={onHistoryMark}
-						/>
-					</TldrawUiToolbar>
-				)}
-				<OpacitySlider />
-			</div>
-			{showPickers && (
-				<div className="tlui-style-panel__section">
-					{fill === undefined ? null : (
-						<TldrawUiToolbar label={msg('style-panel.fill')}>
+					<>
+						{showUiLabels && (
+							<StylePanelSubheading>{msg('style-panel.color')}</StylePanelSubheading>
+						)}
+						<TldrawUiToolbar label={msg('style-panel.color')}>
 							<TldrawUiButtonPicker
-								title={msg('style-panel.fill')}
-								uiType="fill"
-								style={DefaultFillStyle}
-								items={STYLES.fill}
-								value={fill}
+								title={msg('style-panel.color')}
+								uiType="color"
+								style={DefaultColorStyle}
+								items={STYLES.color}
+								value={color}
 								onValueChange={handleValueChange}
 								theme={theme}
 								onHistoryMark={onHistoryMark}
 							/>
 						</TldrawUiToolbar>
+					</>
+				)}
+				<OpacitySlider />
+			</div>
+			{showPickers && (
+				<div className="tlui-style-panel__section">
+					{fill === undefined ? null : (
+						<>
+							{showUiLabels && (
+								<StylePanelSubheading>{msg('style-panel.fill')}</StylePanelSubheading>
+							)}
+							<TldrawUiToolbar label={msg('style-panel.fill')}>
+								<TldrawUiButtonPicker
+									title={msg('style-panel.fill')}
+									uiType="fill"
+									style={DefaultFillStyle}
+									items={STYLES.fill}
+									value={fill}
+									onValueChange={handleValueChange}
+									theme={theme}
+									onHistoryMark={onHistoryMark}
+								/>
+							</TldrawUiToolbar>
+						</>
 					)}
 					{dash === undefined ? null : (
-						<TldrawUiToolbar label={msg('style-panel.dash')}>
-							<TldrawUiButtonPicker
-								title={msg('style-panel.dash')}
-								uiType="dash"
-								style={DefaultDashStyle}
-								items={STYLES.dash}
-								value={dash}
-								onValueChange={handleValueChange}
-								theme={theme}
-								onHistoryMark={onHistoryMark}
-							/>
-						</TldrawUiToolbar>
+						<>
+							{showUiLabels && (
+								<StylePanelSubheading>{msg('style-panel.dash')}</StylePanelSubheading>
+							)}
+							<TldrawUiToolbar label={msg('style-panel.dash')}>
+								<TldrawUiButtonPicker
+									title={msg('style-panel.dash')}
+									uiType="dash"
+									style={DefaultDashStyle}
+									items={STYLES.dash}
+									value={dash}
+									onValueChange={handleValueChange}
+									theme={theme}
+									onHistoryMark={onHistoryMark}
+								/>
+							</TldrawUiToolbar>
+						</>
 					)}
 					{size === undefined ? null : (
-						<TldrawUiToolbar label={msg('style-panel.size')}>
-							<TldrawUiButtonPicker
-								title={msg('style-panel.size')}
-								uiType="size"
-								style={DefaultSizeStyle}
-								items={STYLES.size}
-								value={size}
-								onValueChange={(style, value) => {
-									handleValueChange(style, value)
-									const selectedShapeIds = editor.getSelectedShapeIds()
-									if (selectedShapeIds.length > 0) {
-										kickoutOccludedShapes(editor, selectedShapeIds)
-									}
-								}}
-								theme={theme}
-								onHistoryMark={onHistoryMark}
-							/>
-						</TldrawUiToolbar>
+						<>
+							{showUiLabels && (
+								<StylePanelSubheading>{msg('style-panel.size')}</StylePanelSubheading>
+							)}
+							<TldrawUiToolbar label={msg('style-panel.size')}>
+								<TldrawUiButtonPicker
+									title={msg('style-panel.size')}
+									uiType="size"
+									style={DefaultSizeStyle}
+									items={STYLES.size}
+									value={size}
+									onValueChange={(style, value) => {
+										handleValueChange(style, value)
+										const selectedShapeIds = editor.getSelectedShapeIds()
+										if (selectedShapeIds.length > 0) {
+											kickoutOccludedShapes(editor, selectedShapeIds)
+										}
+									}}
+									theme={theme}
+									onHistoryMark={onHistoryMark}
+								/>
+							</TldrawUiToolbar>
+						</>
 					)}
 				</div>
 			)}
@@ -207,6 +233,8 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 
 	const editor = useEditor()
 	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
+	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
+	const labelStr = showUiLabels && msg('style-panel.font')
 
 	const font = styles.get(DefaultFontStyle)
 	const textAlign = styles.get(DefaultTextAlignStyle)
@@ -219,59 +247,38 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 	return (
 		<div className="tlui-style-panel__section">
 			{font === undefined ? null : (
-				<TldrawUiToolbar label={msg('style-panel.font')}>
-					<TldrawUiButtonPicker
-						title={msg('style-panel.font')}
-						uiType="font"
-						style={DefaultFontStyle}
-						items={STYLES.font}
-						value={font}
-						onValueChange={handleValueChange}
-						theme={theme}
-						onHistoryMark={onHistoryMark}
-					/>
-				</TldrawUiToolbar>
+				<>
+					{labelStr && <StylePanelSubheading>{labelStr}</StylePanelSubheading>}
+					<TldrawUiToolbar label={msg('style-panel.font')}>
+						<TldrawUiButtonPicker
+							title={msg('style-panel.font')}
+							uiType="font"
+							style={DefaultFontStyle}
+							items={STYLES.font}
+							value={font}
+							onValueChange={handleValueChange}
+							theme={theme}
+							onHistoryMark={onHistoryMark}
+						/>
+					</TldrawUiToolbar>
+				</>
 			)}
 
 			{textAlign === undefined ? null : (
-				<TldrawUiToolbar label={msg('style-panel.align')} className="tlui-style-panel__row">
-					<TldrawUiButtonPicker
-						title={msg('style-panel.align')}
-						uiType="align"
-						style={DefaultTextAlignStyle}
-						items={STYLES.textAlign}
-						value={textAlign}
-						onValueChange={handleValueChange}
-						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>
-				</TldrawUiToolbar>
-			)}
-
-			{labelAlign === undefined ? null : (
-				<TldrawUiToolbar label={msg('style-panel.label-align')} className="tlui-style-panel__row">
-					<TldrawUiButtonPicker
-						title={msg('style-panel.label-align')}
-						uiType="align"
-						style={DefaultHorizontalAlignStyle}
-						items={STYLES.horizontalAlign}
-						value={labelAlign}
-						onValueChange={handleValueChange}
-						theme={theme}
-						onHistoryMark={onHistoryMark}
-					/>
-					<div className="tlui-style-panel__row__extra-button">
-						{verticalLabelAlign === undefined ? (
+				<>
+					{showUiLabels && <StylePanelSubheading>{msg('style-panel.align')}</StylePanelSubheading>}
+					<TldrawUiToolbar label={msg('style-panel.align')} className="tlui-style-panel__row">
+						<TldrawUiButtonPicker
+							title={msg('style-panel.align')}
+							uiType="align"
+							style={DefaultTextAlignStyle}
+							items={STYLES.textAlign}
+							value={textAlign}
+							onValueChange={handleValueChange}
+							theme={theme}
+							onHistoryMark={onHistoryMark}
+						/>
+						<div className="tlui-style-panel__row__extra-button">
 							<TldrawUiToolbarButton
 								type="icon"
 								title={msg('style-panel.vertical-align')}
@@ -280,20 +287,52 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 							>
 								<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>
-				</TldrawUiToolbar>
+						</div>
+					</TldrawUiToolbar>
+				</>
+			)}
+
+			{labelAlign === undefined ? null : (
+				<>
+					{showUiLabels && (
+						<StylePanelSubheading>{msg('style-panel.label-align')}</StylePanelSubheading>
+					)}
+					<TldrawUiToolbar label={msg('style-panel.label-align')} className="tlui-style-panel__row">
+						<TldrawUiButtonPicker
+							title={msg('style-panel.label-align')}
+							uiType="align"
+							style={DefaultHorizontalAlignStyle}
+							items={STYLES.horizontalAlign}
+							value={labelAlign}
+							onValueChange={handleValueChange}
+							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>
+					</TldrawUiToolbar>
+				</>
 			)}
 		</div>
 	)
@@ -410,6 +449,7 @@ export function OpacitySlider() {
 	const editor = useEditor()
 
 	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
+	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
 
 	const opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])
 	const trackEvent = useUiEvents()
@@ -443,15 +483,18 @@ export function OpacitySlider() {
 				)
 
 	return (
-		<TldrawUiSlider
-			data-testid="style.opacity"
-			value={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}
-			label={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}
-			onValueChange={handleOpacityValueChange}
-			steps={tldrawSupportedOpacities.length - 1}
-			title={msg('style-panel.opacity')}
-			onHistoryMark={onHistoryMark}
-			ariaValueModifier={25}
-		/>
+		<>
+			{showUiLabels && <StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>}
+			<TldrawUiSlider
+				data-testid="style.opacity"
+				value={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}
+				label={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}
+				onValueChange={handleOpacityValueChange}
+				steps={tldrawSupportedOpacities.length - 1}
+				title={msg('style-panel.opacity')}
+				onHistoryMark={onHistoryMark}
+				ariaValueModifier={25}
+			/>
+		</>
 	)
 }

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

@@ -61,13 +61,13 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 		const activeCss = lastActiveOverflowItem ? `:not([data-value="${lastActiveOverflowItem}"])` : ''
 
 		return `
-			#${id}_main > *:nth-child(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)})${activeCss} {
+			#${id}_main > *:nth-of-type(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)}):not([data-radix-popper-content-wrapper])${activeCss} {
 				display: none;
 			}
-			#${id}_more > *:nth-child(-n + ${overflowIndex}) {
+			#${id}_more > *:nth-of-type(-n + ${overflowIndex}):not([data-radix-popper-content-wrapper]) {
 				display: none;
 			}
-			#${id}_more > *:nth-child(-n + ${overflowIndex + 4}) {
+			#${id}_more > *:nth-of-type(-n + ${overflowIndex + 4}):not([data-radix-popper-content-wrapper]) {
 				margin-top: 0;
 			}
         `

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

@@ -5,6 +5,7 @@ import { useBreakpoint } from '../../context/breakpoints'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import { TldrawUiTooltip } from '../primitives/TldrawUiTooltip'
 
 /** @public */
 export interface ToggleToolLockedButtonProps {
@@ -25,16 +26,18 @@ export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonP
 	if (!activeToolId || !tool.isLockable) return null
 
 	return (
-		<TldrawUiButton
-			type="normal"
-			title={msg('action.toggle-tool-lock')}
-			data-testid="tool-lock"
-			className={classNames('tlui-toolbar__lock-button', {
-				'tlui-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
-			})}
-			onClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}
-		>
-			<TldrawUiButtonIcon icon={isToolLocked ? 'lock' : 'unlock'} small />
-		</TldrawUiButton>
+		<TldrawUiTooltip content={msg('action.toggle-tool-lock')}>
+			<TldrawUiButton
+				type="normal"
+				title={msg('action.toggle-tool-lock')}
+				data-testid="tool-lock"
+				className={classNames('tlui-toolbar__lock-button', {
+					'tlui-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
+				})}
+				onClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}
+			>
+				<TldrawUiButtonIcon icon={isToolLocked ? 'lock' : 'unlock'} small />
+			</TldrawUiButton>
+		</TldrawUiTooltip>
 	)
 }

package/src/lib/ui/components/menu-items.tsx

@@ -651,6 +651,14 @@ export function ToggleKeyboardShortcutsItem() {
 	)
 }
 
+/** @public @react */
+export function ToggleUiLabelsItem() {
+	const editor = useEditor()
+	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
+
+	return <TldrawUiMenuActionCheckboxItem actionId="toggle-ui-labels" checked={showUiLabels} />
+}
+
 /** @public @react */
 export function ToggleDebugModeItem() {
 	const editor = useEditor()

package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx

@@ -1,6 +1,7 @@
 import classnames from 'classnames'
 import { Toolbar as _Toolbar } from 'radix-ui'
 import React from 'react'
+import { TldrawUiTooltip } from './TldrawUiTooltip'
 
 /** @public */
 export interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -34,23 +35,30 @@ export interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonE
 	disabled?: boolean
 	isActive?: boolean
 	type: 'icon' | 'tool' | 'menu'
+	tooltip?: string
 }
 
 /** @public @react */
 export const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(
-	({ asChild, children, type, isActive, ...props }: TLUiToolbarButtonProps, ref) => {
-		return (
+	({ asChild, children, type, isActive, tooltip, ...props }: TLUiToolbarButtonProps, ref) => {
+		const button = (
 			<_Toolbar.Button
 				ref={ref}
 				asChild={asChild}
 				draggable={false}
 				data-isactive={isActive}
 				{...props}
+				// The tooltip takes care of this.
+				title={undefined}
 				className={classnames('tlui-button', `tlui-button__${type}`, props.className)}
 			>
 				{children}
 			</_Toolbar.Button>
 		)
+
+		const tooltipContent = tooltip || props.title
+
+		return <TldrawUiTooltip content={tooltipContent}>{button}</TldrawUiTooltip>
 	}
 )
 
@@ -93,6 +101,7 @@ export interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLBut
 	className?: string
 	type: 'icon' | 'tool'
 	value: string
+	tooltip?: string
 }
 
 /** @public @react */
@@ -101,11 +110,14 @@ export const TldrawUiToolbarToggleItem = ({
 	className,
 	type,
 	value,
+	tooltip,
 	...props
 }: TLUiToolbarToggleItemProps) => {
-	return (
+	const toggleItem = (
 		<_Toolbar.ToggleItem
 			{...props}
+			// The tooltip takes care of this.
+			title={undefined}
 			className={classnames(
 				'tlui-button',
 				`tlui-button__${type}`,
@@ -117,4 +129,8 @@ export const TldrawUiToolbarToggleItem = ({
 			{children}
 		</_Toolbar.ToggleItem>
 	)
+
+	const tooltipContent = tooltip || props.title
+
+	return <TldrawUiTooltip content={tooltipContent}>{toggleItem}</TldrawUiTooltip>
 }