snapshot of https://github.com/tldraw/tldraw.git (main, 2026-09-23; blobs > 131072B omitted)

apps/examples/e2e/tests/test-style-panel.spec.ts

@@ -0,0 +1,159 @@
+import { expect } from '@playwright/test'
+import { Editor } from 'tldraw'
+import test from '../fixtures/fixtures'
+import { setupOrReset } from '../shared-e2e'
+
+declare const editor: Editor
+
+test.describe('Style selection behaviour', () => {
+	test.beforeEach(setupOrReset)
+	test('selecting a style hints the button', async ({ isMobile, stylePanel, toolbar }) => {
+		const { blue, black } = stylePanel.colors
+		const { solid, none } = stylePanel.fill
+		if (isMobile) {
+			await toolbar.mobileStylesButton.click()
+		}
+		// these are hinted by default
+		await stylePanel.isActive(black)
+		await stylePanel.isActive(none)
+		// these are not hinted by default
+		await stylePanel.isInactive(solid)
+		await stylePanel.isInactive(blue)
+
+		await blue.click()
+		await stylePanel.isActive(blue)
+		await stylePanel.isInactive(black)
+
+		await solid.click()
+		await stylePanel.isActive(solid)
+		await stylePanel.isInactive(none)
+		// this should not change the hint state of color buttons
+		await stylePanel.isActive(blue)
+	})
+
+	test('the fill dropdown trigger tooltip describes the dropdown, not the current fill', async ({
+		isMobile,
+		stylePanel,
+		toolbar,
+	}) => {
+		const { solid } = stylePanel.fill
+		if (isMobile) {
+			await toolbar.mobileStylesButton.click()
+		}
+
+		// when the current fill lives outside the dropdown (the default "none", or "solid"),
+		// the trigger tooltip should just name the style, not a value the dropdown can't show
+		await expect(stylePanel.fillExtra).toHaveAttribute('aria-label', 'Fill')
+		await solid.click()
+		await expect(stylePanel.fillExtra).toHaveAttribute('aria-label', 'Fill')
+	})
+
+	test('selecting a style changes the style of the shapes', async ({
+		page,
+		stylePanel,
+		toolbar,
+		isMobile,
+	}) => {
+		const { blue } = stylePanel.colors
+		const { rectangle } = toolbar.tools
+		const { popoverRectangle } = toolbar.popOverTools
+		const { solid } = stylePanel.fill
+		if (isMobile) {
+			await toolbar.mobileStylesButton.click()
+		}
+		await blue.click()
+		if (isMobile) {
+			await toolbar.moreToolsButton.click()
+			await popoverRectangle.click()
+		} else {
+			await rectangle.click()
+		}
+		await page.mouse.click(150, 150)
+		const shapes1 = await page.evaluate(() => editor.getSelectedShapes())
+		expect(shapes1.every((s: any) => s.props.color === 'blue' && s.props.fill === 'none')).toBe(
+			true
+		)
+		if (isMobile) {
+			await toolbar.mobileStylesButton.click()
+		}
+		await solid.click()
+		await rectangle.click()
+		await page.mouse.click(250, 150)
+		await page.mouse.move(100, 100)
+		await page.mouse.down()
+		await page.mouse.move(400, 400)
+		await page.mouse.up()
+		const shapes2 = await page.evaluate(() => editor.getSelectedShapes())
+		expect(shapes2.every((s: any) => s.props.color === 'blue' && s.props.fill === 'solid')).toBe(
+			true
+		)
+	})
+
+	test('the correct styles are exposed for the selected tool', async ({
+		isMobile,
+		page,
+		toolbar,
+		stylePanel,
+	}) => {
+		const toolsStylesArr = [
+			{
+				name: 'tools.select',
+				styles: ['style.color', 'style.opacity', 'style.fill', 'style.dash', 'style.size'],
+			},
+			{ name: 'tools.more.frame', styles: ['style.opacity'] },
+			{
+				name: 'tools.text',
+				styles: ['style.size', 'style.color', 'style.opacity', 'style.font', 'style.align'],
+			},
+			{ name: 'tools.eraser', styles: [] },
+		]
+
+		for (const tool of toolsStylesArr) {
+			await test.step(`Check tool ${tool.name}`, async () => {
+				// mobile styles button is disabled for the eraser tool
+				if (tool.name === 'tools.eraser' && isMobile) return
+
+				if (tool.name.startsWith('tools.more')) await toolbar.moreToolsButton.click()
+
+				await page.getByTestId(tool.name).click()
+
+				if (isMobile) await toolbar.mobileStylesButton.click()
+
+				for (const style of stylePanel.stylesArray) {
+					const styleElement = page.getByTestId(style)
+					const isVisible = await styleElement.isVisible()
+					const isExpected = tool.styles.includes(style)
+					expect(isVisible).toBe(isExpected)
+				}
+			})
+		}
+	})
+})
+
+test.describe('mobile style panel', () => {
+	test.beforeEach(setupOrReset)
+	test('opens and closes as expected', async ({ isMobile, page, toolbar, stylePanel }) => {
+		test.skip(!isMobile, 'only run on mobile')
+
+		await test.step('clicking the mobile styles button', async () => {
+			await expect(stylePanel.getElement()).toBeHidden()
+			await toolbar.mobileStylesButton.click()
+			await expect(stylePanel.getElement()).toBeVisible()
+			await toolbar.mobileStylesButton.click()
+			await expect(stylePanel.getElement()).toBeHidden()
+		})
+
+		await test.step('clicking off the panel closes it', async () => {
+			await toolbar.mobileStylesButton.click()
+			await expect(stylePanel.getElement()).toBeVisible()
+			page.mouse.click(200, 200)
+			await expect(stylePanel.getElement()).toBeHidden()
+		})
+	})
+	test('style menu button is disabled for the eraser tool', async ({ isMobile, toolbar }) => {
+		test.skip(!isMobile, 'only run on mobile')
+		const { eraser } = toolbar.tools
+		await eraser.click()
+		await expect(toolbar.mobileStylesButton).toBeDisabled()
+	})
+})