mirror of
https://github.com/suitenumerique/docs.git
synced 2026-04-25 17:15:01 +02:00
💄(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:
@@ -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
|
||||||
|
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user