From b5d9c58761675aa7bce6e695341015a06256aef7 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Wed, 8 Apr 2026 14:34:52 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20replace=20icons=20in?= =?UTF-8?q?=20tree=20children=20action?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We replace icons with what is used in the ui kit. By replacing the icons, we also fix the height problems with Firefox. --- CHANGELOG.md | 1 + .../app-impress/doc-grid-move.spec.ts | 6 +- .../__tests__/app-impress/doc-grid.spec.ts | 8 +-- .../__tests__/app-impress/doc-header.spec.ts | 4 +- .../__tests__/app-impress/doc-tree.spec.ts | 6 +- .../impress/src/assets/icons/ui-kit/add.svg | 4 +- .../src/assets/icons/ui-kit/add_box.svg | 7 +- .../src/assets/icons/ui-kit/more_horiz.svg | 7 +- .../doc-tree/components/DocSubPageItem.tsx | 8 ++- .../docs/doc-tree/components/DocTree.tsx | 3 +- .../components/DocTreeItemActions.tsx | 69 +++++++++++-------- .../docs-grid/components/DocsGridActions.tsx | 3 +- 12 files changed, 74 insertions(+), 52 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 49442657..e007e56a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ and this project adheres to - 🐛(frontend) Fix drop cursor creating columns #2185 - 🐛 Fixed side effects between comments and versioning #2183 +- 🐛(frontend) Firefox child doc visual #2188 ## [v4.8.5] - 2026-04-03 diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts index a12dbd61..136488a5 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts @@ -203,7 +203,7 @@ test.describe('Doc grid move', () => { await expect(docsGrid.getByText(titleDoc2)).toBeVisible(); const row = await getGridRow(page, titleDoc1); - await row.getByText(`more_horiz`).click(); + await row.getByRole('button', { name: /Open the menu of actions/ }).click(); await page.getByRole('menuitem', { name: 'Move into a doc' }).click(); @@ -291,7 +291,7 @@ test.describe('Doc grid move', () => { await expect(docsGrid.getByText(titleDoc2)).toBeVisible(); const row = await getGridRow(page, titleDoc1); - await row.getByText(`more_horiz`).click(); + await row.getByRole('button', { name: /Open the menu of actions/ }).click(); await page.getByRole('menuitem', { name: 'Move into a doc' }).click(); @@ -360,7 +360,7 @@ test.describe('Doc grid move', () => { // The first user should now be able to move the doc await page.reload(); - await row.getByText(`more_horiz`).click(); + await row.getByRole('button', { name: /Open the menu of actions/ }).click(); await page.getByRole('menuitem', { name: 'Move into a doc' }).click(); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts index 47000b1f..9b900e0f 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts @@ -97,7 +97,7 @@ test.describe('Document grid item options', () => { await expect(page.getByText(docTitle)).toBeVisible(); const row = await getGridRow(page, docTitle); - await row.getByText(`more_horiz`).click(); + await row.getByRole('button', { name: /Open the menu of actions/ }).click(); await page.getByRole('menuitem', { name: 'Share' }).click(); @@ -114,7 +114,7 @@ test.describe('Document grid item options', () => { const row = await getGridRow(page, docTitle); // Pin - await row.getByText(`more_horiz`).click(); + await row.getByRole('button', { name: /Open the menu of actions/ }).click(); await page.getByRole('menuitem', { name: 'Pin' }).click(); // Check is pinned @@ -123,7 +123,7 @@ test.describe('Document grid item options', () => { await expect(leftPanelFavorites.getByText(docTitle)).toBeVisible(); // Unpin - await row.getByText(`more_horiz`).click(); + await row.getByRole('button', { name: /Open the menu of actions/ }).click(); await page.getByText('Unpin').click(); // Check is unpinned @@ -140,7 +140,7 @@ test.describe('Document grid item options', () => { await expect(page.getByText(docTitle)).toBeVisible(); const row = await getGridRow(page, docTitle); - await row.getByText(`more_horiz`).click(); + await row.getByRole('button', { name: /Open the menu of actions/ }).click(); await page.getByRole('menuitem', { name: 'Delete' }).click(); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts index a1b98768..31fcaafd 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts @@ -603,7 +603,7 @@ test.describe('Doc Header', () => { await expect(row.getByText(duplicateTitle)).toBeVisible(); - await row.getByText(`more_horiz`).click(); + await row.getByRole('button', { name: /Open the menu of actions/ }).click(); await page.getByRole('menuitem', { name: 'Duplicate' }).click(); const duplicateDuplicateTitle = 'Copy of ' + duplicateTitle; await page.getByText(duplicateDuplicateTitle).click(); @@ -633,7 +633,7 @@ test.describe('Doc Header', () => { hasText: childTitle, }); await child.hover(); - await child.getByText(`more_horiz`).click(); + await child.getByRole('button', { name: /More options/ }).click(); const currentUrl = page.url(); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts index e31c246e..a383c152 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts @@ -255,7 +255,7 @@ test.describe('Doc Tree', () => { hasText: docChild, }); await child.hover(); - const menu = child.getByText(`more_horiz`); + const menu = child.getByRole('button', { name: /More options/ }); await menu.click(); await page.getByText('Move to my docs').click(); @@ -317,7 +317,7 @@ test.describe('Doc Tree', () => { hasText: docChild, }); await child.hover(); - const menu = child.getByText(`more_horiz`); + const menu = child.getByRole('button', { name: /More options/ }); await menu.click(); await expect( @@ -464,7 +464,7 @@ test.describe('Doc Tree', () => { // Check Remove emoji is not present initially await row.hover(); - const menu = row.getByText(`more_horiz`); + const menu = row.getByRole('button', { name: /More options/ }); await menu.click(); await expect( page.getByRole('menuitem', { name: 'Remove emoji' }), diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/add.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/add.svg index 096bbe65..efa9baf3 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/add.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/add.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/add_box.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/add_box.svg index 888302a4..6ad760e6 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/add_box.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/add_box.svg @@ -1,3 +1,6 @@ - - + + diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/more_horiz.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/more_horiz.svg index a7fbace3..6398e98a 100644 --- a/src/frontend/apps/impress/src/assets/icons/ui-kit/more_horiz.svg +++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/more_horiz.svg @@ -1,3 +1,6 @@ - - + + diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx index 818b57ec..8f13ffee 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx @@ -1,3 +1,4 @@ +import { ButtonElement } from '@gouvfr-lasuite/cunningham-react'; import { Spinner, TreeViewDataType, @@ -159,7 +160,7 @@ const DocSubPageItemContent = (props: TreeViewNodeProps) => { const ariaLabel = docTitle; const isDisabled = !!doc.deleted_at; const actionsRef = useRef(null); - const buttonOptionRef = useRef(null); + const buttonOptionRef = useRef(null); const handleKeyDown = (e: React.KeyboardEvent) => { const target = e.target as HTMLElement | null; @@ -203,9 +204,12 @@ const DocSubPageItemContent = (props: TreeViewNodeProps) => { display: ${menuOpen || !isDesktop ? 'flex' : 'none'}; right: var(--c--globals--spacings--0); } + .c__tree-view--node { + padding-right: var(--c--globals--spacings--xxxs); + height: 32px; + } .c__tree-view--node.isFocused { outline: none !important; - box-shadow: 0 0 0 2px var(--c--globals--colors--brand-500) !important; border-radius: var(--c--globals--spacings--st); .light-doc-item-actions { display: flex; diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx index 6a907aaa..0b50cae1 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx @@ -1,3 +1,4 @@ +import { ButtonElement } from '@gouvfr-lasuite/cunningham-react'; import { OpenMap, TreeView, @@ -44,7 +45,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => { treeContext?.treeData.selectedNode?.id === treeContext.root.id; const rootItemRef = useRef(null); const rootActionsRef = useRef(null); - const rootButtonOptionRef = useRef(null); + const rootButtonOptionRef = useRef(null); const { t } = useTranslation(); diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx index f5a3a3a9..797c0376 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx @@ -1,4 +1,8 @@ -import { useModal } from '@gouvfr-lasuite/cunningham-react'; +import { + Button, + ButtonElement, + useModal, +} from '@gouvfr-lasuite/cunningham-react'; import { DropdownMenu, DropdownMenuOption, @@ -10,7 +14,9 @@ import { useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { css } from 'styled-components'; -import { Box, BoxButton, Icon } from '@/components'; +import AddSVG from '@/assets/icons/ui-kit/add.svg'; +import MoreHorizSVG from '@/assets/icons/ui-kit/more_horiz.svg'; +import { Box, Icon } from '@/components'; import { Doc, ModalRemoveDoc, @@ -33,7 +39,7 @@ type DocTreeItemActionsProps = { onOpenChange?: (isOpen: boolean) => void; parentId?: string | null; actionsRef?: React.RefObject; - buttonOptionRef?: React.RefObject; + buttonOptionRef?: React.RefObject; }; export const DocTreeItemActions = ({ @@ -48,7 +54,7 @@ export const DocTreeItemActions = ({ }: DocTreeItemActionsProps) => { const internalActionsRef = useRef(null); const targetActionsRef = actionsRef ?? internalActionsRef; - const internalButtonRef = useRef(null); + const internalButtonRef = useRef(null); const targetButtonRef = buttonOptionRef ?? internalButtonRef; const router = useRouter(); const { t } = useTranslation(); @@ -179,15 +185,27 @@ export const DocTreeItemActions = ({ $direction="row" $align="center" className="--docs--doc-tree-item-actions" - $gap="4px" + $gap="4xs" tabIndex={-1} + $css={css` + & button { + height: 24px; + width: 24px; + padding: 0; + justify-content: center; + &:focus-visible { + box-shadow: 0 0 0 2px + var(--c--contextuals--border--semantic--brand--primary); + } + } + `} > - { e.stopPropagation(); @@ -196,25 +214,18 @@ export const DocTreeItemActions = ({ }} aria-label={t('More options')} tabIndex={-1} - $theme="brand" - $variation="secondary" - $css={css` - &:focus-visible { - outline-offset: -2px; - border-radius: var(--c--globals--spacings--st); - } - `} + color="brand" + variant="tertiary" + size="small" > } /> - + {doc.abilities.children_create && ( - { e.stopPropagation(); e.preventDefault(); @@ -223,20 +234,18 @@ export const DocTreeItemActions = ({ parentId: doc.id, }); }} - $theme="brand" - $variation="secondary" aria-label={t('Add a sub page')} data-testid="doc-tree-item-actions-add-child" tabIndex={-1} - $css={css` - &:focus-visible { - outline-offset: -2px; - border-radius: var(--c--globals--spacings--st); - } - `} + color="brand" + variant="tertiary" + size="small" > - - + } + /> + )} {deleteModal.isOpen && ( diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx index 8066ae8a..d290a111 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx @@ -9,6 +9,7 @@ import DocMoveInSVG from '@/assets/icons/ui-kit/doc-move-in.svg'; import GroupSVG from '@/assets/icons/ui-kit/group.svg'; import KeepSVG from '@/assets/icons/ui-kit/keep.svg'; import KeepOffSVG from '@/assets/icons/ui-kit/keep_off.svg'; +import MoreHorizSVG from '@/assets/icons/ui-kit/more_horiz.svg'; import { DropdownMenu, DropdownMenuOption, Icon } from '@/components'; import { Doc, @@ -145,7 +146,7 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => { > } $theme="brand" $variation="secondary" $css={css`