ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#4469 Improve toolbar ux (#5841)

Browse Source 
* Improve ActionButtonDropdown selection

* center rectangle icon fixed

* ignore Esc key when displaying hotkeys

* add ability to escape 3 point circle tool

* remove focus from ActionButton, ActionButtonDropdown

* remove focus outline from buttons

* remember lastly selected multi action item

* Add tests for toolbar buttons

* fix sketch-tests by turning toolbar dropdown arrays into an object with an id - this got broken because dropdown now remember the last selected option so we cant rely on cant reference the first option in tests

* update other tests with open menu click
This commit is contained in:
Andrew Varga
2025-04-09 14:32:52 +02:00
committed by GitHub
parent e78100eaac
commit e5f23a49b4
10 changed files with 743 additions and 621 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
e2e/playwright/fixtures/toolbarFixture.ts
View File

@ -169,7 +169,7 @@ export class ToolbarFixture {
}
selectCenterRectangle = async () => {
await this.page
.getByRole('button', { name: 'caret down Corner rectangle:' })
.getByRole('button', { name: 'caret down rectangles:' })
.click()
await expect(
this.page.getByTestId('dropdown-center-rectangle')
@ -178,7 +178,7 @@ export class ToolbarFixture {
}
selectBoolean = async (operation: 'union' | 'subtract' | 'intersect') => {
await this.page
.getByRole('button', { name: 'caret down Union: open menu' })
.getByRole('button', { name: 'caret down booleans: open menu' })
.click()
const operationTestId = `dropdown-boolean-${operation}`
await expect(this.page.getByTestId(operationTestId)).toBeVisible()
@ -186,25 +186,19 @@ export class ToolbarFixture {
}
selectCircleThreePoint = async () => {
await this.page
.getByRole('button', { name: 'caret down Center circle:' })
.click()
await this.page.getByRole('button', { name: 'caret down circles:' }).click()
await expect(
this.page.getByTestId('dropdown-circle-three-points')
).toBeVisible()
await this.page.getByTestId('dropdown-circle-three-points').click()
}
selectArc = async () => {
await this.page
.getByRole('button', { name: 'caret down Tangential Arc:' })
.click()
await this.page.getByRole('button', { name: 'caret down arcs:' }).click()
await expect(this.page.getByTestId('dropdown-arc')).toBeVisible()
await this.page.getByTestId('dropdown-arc').click()
}
selectThreePointArc = async () => {
await this.page
.getByRole('button', { name: 'caret down Tangential Arc:' })
.click()
await this.page.getByRole('button', { name: 'caret down arcs:' }).click()
await expect(
this.page.getByTestId('dropdown-three-point-arc')
).toBeVisible()