From 77535b0292424d58e4e5e2225e49b8920bdacba7 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Mon, 9 Mar 2026 12:00:35 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20change=20position=20el?= =?UTF-8?q?ements=20toolbar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The AI and comment toolbar buttons are now positioned at the end of the toolbar. They were taking too much space on the left which was not ideal for user experience. --- CHANGELOG.md | 3 ++- .../app-impress/doc-comments.spec.ts | 16 +++++------- .../BlockNoteToolBar/BlockNoteToolbar.tsx | 4 +-- .../comments/CommentToolbarButton.tsx | 26 +++++++------------ 4 files changed, 21 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index de06d483..3c91fe03 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to - 📝(docs) improve README and add documentation hub #1870 - ♿️(frontend) restore focus to triggers after closing menus and modals #1863 +- 🚸(frontend) change position elements toolbar #1957 ### Fixed @@ -21,7 +22,7 @@ and this project adheres to - 🐛(frontend) fix home collapsing panel #1954 - 🐛(frontend) fix disabled color on icon Dropdown #1950 - 🐛(frontend) fix zIndex table of content #1949 -- 🐛(frontend) fix bug when language not supported by BN #1949 +- 🐛(frontend) fix bug when language not supported by BN #1957 ## [v4.6.0] - 2026-03-03 diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts index 93a04094..6c79b9ea 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts @@ -41,7 +41,7 @@ test.describe('Doc Comments', () => { // We add a comment with the first user const editor = await writeInEditor({ page, text: 'Hello World' }); await editor.getByText('Hello').selectText(); - await page.getByRole('button', { name: 'Comment', exact: true }).click(); + await page.getByRole('button', { name: 'Add comment' }).click(); const thread = page.locator('.bn-thread'); await thread.getByRole('paragraph').first().fill('This is a comment'); @@ -124,7 +124,7 @@ test.describe('Doc Comments', () => { // Checks add react reaction const editor = await writeInEditor({ page, text: 'Hello' }); await editor.getByText('Hello').selectText(); - await page.getByRole('button', { name: 'Comment', exact: true }).click(); + await page.getByRole('button', { name: 'Add comment' }).click(); const thread = page.locator('.bn-thread'); await thread.getByRole('paragraph').first().fill('This is a comment'); @@ -191,7 +191,7 @@ test.describe('Doc Comments', () => { /* Delete the last comment remove the thread */ await editor.getByText('Hello').selectText(); - await page.getByRole('button', { name: 'Comment', exact: true }).click(); + await page.getByRole('button', { name: 'Add comment' }).click(); await thread.getByRole('paragraph').first().fill('This is a new comment'); await thread.locator('[data-test="save"]').click(); @@ -249,9 +249,7 @@ test.describe('Doc Comments', () => { editor.getByText('Hello, I can edit the document'), ).toBeVisible(); await otherEditor.getByText('Hello').selectText(); - await otherPage - .getByRole('button', { name: 'Comment', exact: true }) - .click(); + await otherPage.getByRole('button', { name: 'Add comment' }).click(); const otherThread = otherPage.locator('.bn-thread'); await otherThread .getByRole('paragraph') @@ -282,7 +280,7 @@ test.describe('Doc Comments', () => { await expect(otherThread).toBeHidden(); await otherEditor.getByText('Hello').selectText(); await expect( - otherPage.getByRole('button', { name: 'Comment', exact: true }), + otherPage.getByRole('button', { name: 'Add comment' }), ).toBeHidden(); await otherPage.reload(); @@ -336,7 +334,7 @@ test.describe('Doc Comments', () => { // We add a comment in the first document const editor1 = await writeInEditor({ page, text: 'Document One' }); await editor1.getByText('Document One').selectText(); - await page.getByRole('button', { name: 'Comment', exact: true }).click(); + await page.getByRole('button', { name: 'Add comment' }).click(); const thread1 = page.locator('.bn-thread'); await thread1.getByRole('paragraph').first().fill('Comment in Doc One'); @@ -390,7 +388,7 @@ test.describe('Doc Comments mobile', () => { // Checks add react reaction const editor = await writeInEditor({ page, text: 'Hello' }); await editor.getByText('Hello').selectText(); - await page.getByRole('button', { name: 'Comment', exact: true }).click(); + await page.getByRole('button', { name: 'Add comment' }).click(); const thread = page.locator('.bn-thread'); await thread.getByRole('paragraph').first().fill('This is a comment'); diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx index 968a4936..4a1f4b4b 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx @@ -72,11 +72,11 @@ export const BlockNoteToolbar = ({ aiAllowed }: { aiAllowed: boolean }) => { const formattingToolbar = useCallback(() => { return ( - {aiAllowed && AIToolbarButton && } + {toolbarItems} - {toolbarItems} + {aiAllowed && AIToolbarButton && } {/* Extra button to do some AI powered actions - only if AIToolbarButton is not available because of MIT license */} {conf?.AI_FEATURE_ENABLED && conf?.AI_FEATURE_LEGACY_ENABLED && ( diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx index fc1c8057..41d4e6dd 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx @@ -29,7 +29,7 @@ export const CommentToolbarButton = () => { const Components = useComponentsContext(); const { currentDoc } = useDocStore(); const { t } = useTranslation(); - const { spacingsTokens, colorsTokens } = useCunninghamTheme(); + const { colorsTokens } = useCunninghamTheme(); const comments = useExtension('comments') as unknown as ReturnType< ReturnType >; @@ -78,22 +78,16 @@ export const CommentToolbarButton = () => { }} aria-haspopup="dialog" data-test="comment-toolbar-button" + aria-label={t('Add comment')} + mainTooltip={t('Add comment')} > - - - {t('Comment')} - +