💄(frontend) Use StyledLink for sub doc tree

Replace ButtonBox by StyledLink in DocSubPageItem
so ctrl+click on the sub document title open a new browser tab

Signed-off-by: Paul Vernin <paul.vernin@gmail.com>
This commit is contained in:
Paul Vernin
2026-04-01 15:55:04 +01:00
committed by Anthony LC
parent b5d9c58761
commit 2ebfa1efbf
3 changed files with 10 additions and 12 deletions

View File

@@ -14,6 +14,7 @@ and this project adheres to
### Changed ### Changed
- ♻️(backend) do not paginate threads list response #2186 - ♻️(backend) do not paginate threads list response #2186
- 💄(frontend) Use StyledLink for sub doc tree #2188
### Fixed ### Fixed

View File

@@ -135,7 +135,7 @@ test.describe('Doc Tree', () => {
await expect(docTree).toBeVisible(); await expect(docTree).toBeVisible();
await docTree.getByText('keyboard_arrow_right').click(); await docTree.getByText('keyboard_arrow_right').click();
await docTree await docTree
.getByRole('button', { .getByRole('link', {
name: `Open document ${titleChild}`, name: `Open document ${titleChild}`,
}) })
.click(); .click();

View File

@@ -12,7 +12,7 @@ import { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { css } from 'styled-components'; import { css } from 'styled-components';
import { Box, BoxButton, Icon, Text } from '@/components'; import { Box, Icon, StyledLink, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham'; import { useCunninghamTheme } from '@/cunningham';
import { import {
Doc, Doc,
@@ -283,17 +283,12 @@ const DocSubPageItemContent = (props: TreeViewNodeProps<Doc>) => {
buttonOptionRef={buttonOptionRef} buttonOptionRef={buttonOptionRef}
/> />
</Box> </Box>
<BoxButton <StyledLink
onClick={(e) => { href={`/docs/${doc.id}`}
e.stopPropagation(); onClick={() => {
handleActivate(); treeContext?.treeData.setSelectedNode(doc);
}} }}
tabIndex={-1} tabIndex={-1}
$width="100%"
$direction="row"
$gap={spacingsTokens['xs']}
$align="center"
$minHeight="24px"
data-testid={`doc-sub-page-item-${doc.id}`} data-testid={`doc-sub-page-item-${doc.id}`}
aria-label={`${t('Open document {{title}}', { title: docTitle })}`} aria-label={`${t('Open document {{title}}', { title: docTitle })}`}
$css={css` $css={css`
@@ -304,6 +299,8 @@ const DocSubPageItemContent = (props: TreeViewNodeProps<Doc>) => {
<Box <Box
$direction="row" $direction="row"
$align="center" $align="center"
$gap={spacingsTokens['xs']}
$minHeight="24px"
$css={css` $css={css`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -326,7 +323,7 @@ const DocSubPageItemContent = (props: TreeViewNodeProps<Doc>) => {
/> />
)} )}
</Box> </Box>
</BoxButton> </StyledLink>
</TreeViewItem> </TreeViewItem>
</Box> </Box>
); );