From e48080b27e7c3c3be6102bfa3f4d44a43cd535a3 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 4 Mar 2026 13:58:01 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20refact=20Horizon?=
 =?UTF-8?q?talSeparator=20to=20be=20more=20flexible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We need HorizontalSeparator to be more flexible,
so we can use it in more places. We change the
props to be more generic, we updated the components
that use it.
---
 .../components/dropdown-menu/DropdownMenu.tsx | 15 ++++++++-----
 .../separators/HorizontalSeparator.tsx        | 21 ++++---------------
 .../docs/doc-header/components/DocHeader.tsx  |  2 +-
 .../components/DocInheritedShareContent.tsx   |  2 +-
 .../doc-share/components/DocShareModal.tsx    |  4 +++-
 .../components/DocShareModalFooter.tsx        |  4 ++--
 .../components/LeftPanelFavorites.tsx         |  2 +-
 7 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
index cb99e603..0832472a 100644
--- a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
+++ b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
@@ -1,4 +1,3 @@
-import { HorizontalSeparator } from '@gouvfr-lasuite/ui-kit';
 import {
   Fragment,
   PropsWithChildren,
@@ -10,7 +9,15 @@ import {
 } from 'react';
 import { css } from 'styled-components';
 
-import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components';
+import {
+  Box,
+  BoxButton,
+  BoxProps,
+  DropButton,
+  HorizontalSeparator,
+  Icon,
+  Text,
+} from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { useKeyboardAction } from '@/hooks';
 
@@ -266,9 +273,7 @@ export const DropdownMenu = ({
                   />
                 )}
               </BoxButton>
-              {option.showSeparator && (
-                <HorizontalSeparator withPadding={false} />
-              )}
+              {option.showSeparator && <HorizontalSeparator $margin="none" />}
             </Fragment>
           );
         })}
diff --git a/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx b/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
index 94faf9a3..91d3d06d 100644
--- a/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
+++ b/src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx
@@ -1,27 +1,14 @@
-import { Spacings } from '@/utils';
-
-import { Box } from '../Box';
-
-type Props = {
-  $withPadding?: boolean;
-  customPadding?: Spacings;
-};
-
-export const HorizontalSeparator = ({
-  $withPadding = true,
-  customPadding,
-}: Props) => {
-  const padding = $withPadding
-    ? (customPadding ?? 'base')
-    : ('none' as Spacings);
+import { Box, BoxType } from '../Box';
 
+export const HorizontalSeparator = (props: BoxType) => {
   return (
     <Box
       $height="1px"
       $width="100%"
-      $margin={{ vertical: padding }}
+      $margin={{ vertical: 'base' }}
       $background="var(--c--contextuals--border--surface--primary)"
       className="--docs--horizontal-separator"
+      {...props}
     />
   );
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
index fa0e5bd6..85430234 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
@@ -76,7 +76,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
             )}
           </Box>
         </Box>
-        <HorizontalSeparator $withPadding={false} />
+        <HorizontalSeparator $margin="none" />
       </Box>
     </>
   );
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocInheritedShareContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocInheritedShareContent.tsx
index 06364f5d..0e0b98fd 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocInheritedShareContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocInheritedShareContent.tsx
@@ -33,7 +33,7 @@ export const DocInheritedShareContent = ({
       $padding={{ top: spacingsTokens.sm }}
       className="--docs--doc-inherited-share-content"
     >
-      <HorizontalSeparator $withPadding={false} />
+      <HorizontalSeparator $margin="none" />
       <Box
         $gap={spacingsTokens.sm}
         $padding={{
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
index c86577ae..2662fff0 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
@@ -250,7 +250,9 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
                   />
                 </Box>
               )}
-              {!canViewAccesses && <HorizontalSeparator customPadding="12px" />}
+              {!canViewAccesses && (
+                <HorizontalSeparator $margin={{ vertical: 'sm' }} />
+              )}
             </Box>
 
             <Box data-testid="doc-share-quick-search">
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
index 7dc0c8f5..fee14913 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx
@@ -25,10 +25,10 @@ export const DocShareModalFooter = ({
       `}
       className="--docs--doc-share-modal-footer"
     >
-      <HorizontalSeparator $withPadding={true} customPadding="12px" />
+      <HorizontalSeparator $margin={{ vertical: 'sm' }} />
 
       <DocVisibility doc={doc} />
-      <HorizontalSeparator customPadding="12px" />
+      <HorizontalSeparator $margin={{ vertical: 'sm' }} />
 
       <Box
         $direction="row"
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
index 01111027..d7830a8a 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
@@ -27,7 +27,7 @@ export const LeftPanelFavorites = () => {
       aria-labelledby="pinned-docs-title"
       className="--docs--left-panel-favorites"
     >
-      <HorizontalSeparator $withPadding={false} />
+      <HorizontalSeparator $margin="none" />
       <Box
         $justify="center"
         $padding={{ horizontal: 'sm', top: 'sm' }}