Elgato_dark/docs
1
0
Fork 0
mirror of https://github.com/suitenumerique/docs synced 2026-04-21 13:37:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

💄(frontend) replace icons in tree children action

Browse source 
We replace icons with what is used in the ui kit.
By replacing the icons, we also fix the height
problems with Firefox.
This commit is contained in:
Anthony LC 2026-04-08 14:34:52 +02:00
parent c58deb11e8
commit b5d9c58761
No known key found for this signature in database
12 changed files with 74 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -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

6
src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts
View file

@ -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();

8
src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
View file

@ -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();

4
src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts
View file

@ -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();

6
src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts
View file

@ -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' }),

4
src/frontend/apps/impress/src/assets/icons/ui-kit/add.svg
View file

@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 13H5V11H11V5H13V11H19V13H13V19H11V13Z" fill="#222631"/>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 13H5V11H11V5H13V11H19V13H13V19H11V13Z" fill="currentColor" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 172 B

After

Width:  |  Height:  |  Size: 157 B

7
src/frontend/apps/impress/src/assets/icons/ui-kit/add_box.svg
View file

@ -1,3 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 17H13V13H17V11H13V7H11V11H7V13H11V17ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z" fill="#222631"/>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 17H13V13H17V11H13V7H11V11H7V13H11V17ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
fill="currentColor"
/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 476 B

After

Width:  |  Height:  |  Size: 471 B

7
src/frontend/apps/impress/src/assets/icons/ui-kit/more_horiz.svg
View file

@ -1,3 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM18 14C17.45 14 16.9792 13.8042 16.5875 13.4125C16.1958 13.0208 16 12.55 16 12C16 11.45 16.1958 10.9792 16.5875 10.5875C16.9792 10.1958 17.45 10 18 10C18.55 10 19.0208 10.1958 19.4125 10.5875C19.8042 10.9792 20 11.45 20 12C20 12.55 19.8042 13.0208 19.4125 13.4125C19.0208 13.8042 18.55 14 18 14Z" fill="#222631"/>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM18 14C17.45 14 16.9792 13.8042 16.5875 13.4125C16.1958 13.0208 16 12.55 16 12C16 11.45 16.1958 10.9792 16.5875 10.5875C16.9792 10.1958 17.45 10 18 10C18.55 10 19.0208 10.1958 19.4125 10.5875C19.8042 10.9792 20 11.45 20 12C20 12.55 19.8042 13.0208 19.4125 13.4125C19.0208 13.8042 18.55 14 18 14Z"
fill="currentColor"
/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 999 B

After

Width:  |  Height:  |  Size: 994 B

8
src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
View file

@ -1,3 +1,4 @@
import { ButtonElement } from '@gouvfr-lasuite/cunningham-react';
import {
Spinner,
TreeViewDataType,
@ -159,7 +160,7 @@ const DocSubPageItemContent = (props: TreeViewNodeProps<Doc>) => {
const ariaLabel = docTitle;
const isDisabled = !!doc.deleted_at;
const actionsRef = useRef<HTMLDivElement>(null);
const buttonOptionRef = useRef<HTMLButtonElement | null>(null);
const buttonOptionRef = useRef<ButtonElement | null>(null);
const handleKeyDown = (e: React.KeyboardEvent) => {
const target = e.target as HTMLElement | null;
@ -203,9 +204,12 @@ const DocSubPageItemContent = (props: TreeViewNodeProps<Doc>) => {
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;

3
src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx
View file

@ -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<HTMLDivElement>(null);
const rootActionsRef = useRef<HTMLDivElement>(null);
const rootButtonOptionRef = useRef<HTMLButtonElement | null>(null);
const rootButtonOptionRef = useRef<ButtonElement | null>(null);
const { t } = useTranslation();

69
src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx
View file

@ -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<HTMLDivElement | null>;
buttonOptionRef?: React.RefObject<HTMLButtonElement | null>;
buttonOptionRef?: React.RefObject<ButtonElement | null>;
};
export const DocTreeItemActions = ({
@ -48,7 +54,7 @@ export const DocTreeItemActions = ({
}: DocTreeItemActionsProps) => {
const internalActionsRef = useRef<HTMLDivElement | null>(null);
const targetActionsRef = actionsRef ?? internalActionsRef;
const internalButtonRef = useRef<HTMLButtonElement | null>(null);
const internalButtonRef = useRef<ButtonElement | null>(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);
}
}
`}
>
<DropdownMenu
options={options}
isOpen={isOpen}
onOpenChange={onOpenChange}
>
<BoxButton
<Button
ref={targetButtonRef}
onClick={(e) => {
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"
>
<Icon
iconName="more_horiz"
variant="filled"
$theme="brand"
$variation="secondary"
$color="inherit"
icon={<MoreHorizSVG width={16} height={16} aria-hidden="true" />}
/>
</BoxButton>
</Button>
</DropdownMenu>
{doc.abilities.children_create && (
<BoxButton
<Button
onClick={(e) => {
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"
>
<Icon variant="filled" $color="inherit" iconName="add_box" />
</BoxButton>
<Icon
$color="inherit"
icon={<AddSVG width={16} height={16} aria-hidden="true" />}
/>
</Button>
)}
</Box>
{deleteModal.isOpen && (

3
src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
View file

@ -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) => {
>
<Icon
data-testid={`docs-grid-actions-button-${doc.id}`}
iconName="more_horiz"
icon={<MoreHorizSVG width={16} height={16} aria-hidden="true" />}
$theme="brand"
$variation="secondary"
$css={css`