From d471fd987eaf97d1700727676dfdb2a504b89c0f Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Wed, 16 Sep 2026 16:03:49 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20update=20ui=20to=20fit?= =?UTF-8?q?=20design=20mockups?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Update lightly the ui to match the new design mockups, to fit with what was proposed for the duplicate subdocs feature. It updates: - modal closing position - checkbox style - toast style - create a ButtonLink component, a wrapper above the ui-kit component to fit the Next.js routing system. --- .../apps/impress/src/components/Link.tsx | 37 ++++++++++++++++++- .../src/cunningham/cunningham-style.css | 31 ++++++++++++++++ .../doc-export/components/ModalExport.tsx | 2 +- .../docs/doc-header/components/DocTitle.tsx | 5 +++ .../components/DocMoveModal.tsx | 2 +- .../components/ModalRemoveDoc.tsx | 12 +----- .../components/NewDocButton.tsx | 13 ++----- .../doc-search/components/DocSearchModal.tsx | 2 +- .../components/ConfirmationLeaveModal.tsx | 2 +- 9 files changed, 82 insertions(+), 24 deletions(-) diff --git a/src/frontend/apps/impress/src/components/Link.tsx b/src/frontend/apps/impress/src/components/Link.tsx index 0c90aef90..da9674f03 100644 --- a/src/frontend/apps/impress/src/components/Link.tsx +++ b/src/frontend/apps/impress/src/components/Link.tsx @@ -1,5 +1,8 @@ +import { Button } from '@gouvfr-lasuite/ui-components'; import Link from 'next/link'; -import styled, { RuleSet } from 'styled-components'; +import { useRouter } from 'next/router'; +import { type ComponentProps } from 'react'; +import styled, { type RuleSet } from 'styled-components'; export interface LinkProps { $css?: string | RuleSet; @@ -14,3 +17,35 @@ export const StyledLink = styled(Link)` display: flex; ${({ $css }) => $css && (typeof $css === 'string' ? `${$css};` : $css)} `; + +type ButtonLinkProps = ComponentProps & { + href: string; +}; + +export const ButtonLink = ({ + children, + onClick, + ref, + ...props +}: ButtonLinkProps) => { + const router = useRouter(); + + return ( + + ); +}; diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css index 90e41bc18..a02e0e364 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css @@ -57,6 +57,28 @@ height: auto; } +/** +* Checkbox +*/ +.c__checkbox:focus-within { + border-color: transparent; + box-shadow: none; +} + +.c__checkbox .c__checkbox__wrapper:focus-within { + outline: none; +} + +.c__checkbox__wrapper input:focus, +.c__checkbox__wrapper input:checked:focus { + box-shadow: unset; +} + +.c__checkbox input:focus-visible { + outline: 2px solid var(--c--globals--colors--brand-400); + outline-offset: var(--c--globals--spacings--4xs); +} + /** * Modal */ @@ -104,6 +126,10 @@ /** * Toast */ +.c__toast { + max-width: min(100%, 100vw); +} + .c__toast__container { z-index: -1; } @@ -111,3 +137,8 @@ .c__toast__container:has(.c__toast) { z-index: 10000; } + +.c__toast__content__children { + flex-shrink: 0; + flex-grow: 0; +} diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx index da0261451..c14c54f6d 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx @@ -204,7 +204,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => { > {t('Export')} - + onClose()} diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx index abdc7ee29..2bb6bd2a1 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx @@ -202,6 +202,11 @@ const DocTitleInput = ({ doc, onTitleUpdate }: DocTitleProps) => { $align="center" $gap="4px" $minHeight="40px" + $css={css` + &:focus-within { + outline: none; + } + `} > {!isTopRoot && } {/** diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocMoveModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocMoveModal.tsx index 866c6598d..d7564f9c7 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocMoveModal.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocMoveModal.tsx @@ -187,7 +187,7 @@ export const DocMoveModal = ({ {t('Choose a new parent doc')} - + cancelAnimationFrame(id); }, []); - const keyboardAction = useKeyboardAction(); - const handleDelete = () => { removeDoc({ docId: doc.id }); }; - const handleCloseKeyDown = keyboardAction(onClose); - const handleDeleteKeyDown = keyboardAction(handleDelete); - return ( {t('Cancel')} @@ -106,7 +100,6 @@ export const ModalRemoveDoc = ({ color="error" fullWidth onClick={handleDelete} - onKeyDown={handleDeleteKeyDown} > {t('Delete')} @@ -124,11 +117,10 @@ export const ModalRemoveDoc = ({ > {t('Delete a doc')} - + diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/NewDocButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/NewDocButton.tsx index 8438f9079..83de715d6 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/components/NewDocButton.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/NewDocButton.tsx @@ -8,7 +8,7 @@ import { useRouter } from 'next/router'; import { useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Text } from '@/components'; +import { ButtonLink, Text } from '@/components'; import { useConfig } from '@/core/config/api/useConfig'; import { useLeftPanelStore } from '@/features/left-panel/stores/useLeftPanelStore'; import ArrowDownIcon from '@/icons/arrow-drop-down.svg'; @@ -26,7 +26,6 @@ interface NewDocButtonProps { } export const NewDocButton = ({ onClose }: NewDocButtonProps) => { - const router = useRouter(); const { t } = useTranslation(); const { currentDoc } = useDocStore(); const { data: config } = useConfig(); @@ -34,15 +33,11 @@ export const NewDocButton = ({ onClose }: NewDocButtonProps) => { return ( <> - + {isDropdownEnabled && } ); diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx index 284400564..b8760b915 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx @@ -112,7 +112,7 @@ const DocSearchModalGlobal = ({ 'Search documents by name, navigate using arrows, and select a result with Enter.', )} - + {t('Leave a doc')} - +