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 cb99e6034..0832472ae 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 94faf9a31..91d3d06d6 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 fa0e5bd6a..85430234c 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 06364f5df..0e0b98fd7 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 c86577aea..2662fff09 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 7dc0c8f5c..fee14913c 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 01111027c..d7830a8ad 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' }}