feat(editor): group configuration of note styles to panel from toolbar (#12230)

Close [BS-3401](https://linear.app/affine-design/issue/BS-3401/note-style-需要合并同类项)

![CleanShot 2025-05-12 at 14.23.01.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/ddf8623f-aa9c-491e-a7bf-90419fb19848.png)
This commit is contained in:
L-Sun
2025-05-12 09:42:52 +00:00
parent f3ca17fcb3
commit 42ae6e6e40
17 changed files with 685 additions and 462 deletions

View File

@@ -315,8 +315,9 @@ test.describe('edgeless note element toolbar', () => {
},
});
await toolbar.getByRole('button', { name: 'Shadow style' }).click();
await toolbar.getByTestId('affine-note-shadow-film').click();
await toolbar.getByRole('button', { name: 'Note Style' }).click();
const noteStylePanel = page.locator('edgeless-note-style-panel');
await noteStylePanel.getByTestId('affine-note-shadow-film').click();
expect(await getNoteEdgelessProps(page, noteId)).toEqual({
style: {
@@ -327,10 +328,11 @@ test.describe('edgeless note element toolbar', () => {
},
});
await toolbar.getByRole('button', { name: 'Border style' }).click();
await toolbar.locator('.mode-solid').click();
await toolbar.getByRole('button', { name: 'Border style' }).click();
await toolbar.locator('affine-slider').getByLabel('8').click();
const borderStylePanel = noteStylePanel.getByTestId(
'affine-note-border-style-panel'
);
await borderStylePanel.locator('.mode-solid').click();
await borderStylePanel.locator('affine-slider').getByLabel('8').click();
expect(await getNoteEdgelessProps(page, noteId)).toEqual({
style: {
@@ -341,12 +343,10 @@ test.describe('edgeless note element toolbar', () => {
},
});
await toolbar.getByRole('button', { name: 'Corners' }).click();
// TODO(@fundon): delete duplicate components
await toolbar
.locator('affine-size-dropdown-menu')
.getByText('Large')
.click();
const cornerPanel = noteStylePanel.getByTestId(
'affine-note-corner-radius-panel'
);
await cornerPanel.locator('affine-slider').getByLabel('24').click();
expect(await getNoteEdgelessProps(page, noteId)).toEqual({
style: {
@@ -357,6 +357,8 @@ test.describe('edgeless note element toolbar', () => {
},
});
await pressEscape(page);
const headerToolbar = page.getByTestId('edgeless-page-block-header');
const toggleButton = headerToolbar.getByTestId(
'edgeless-note-toggle-button'