diff --git a/src/frontend/apps/impress/src/components/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/DropdownMenu.tsx
index 5513ccb7..fcbd9ebe 100644
--- a/src/frontend/apps/impress/src/components/DropdownMenu.tsx
+++ b/src/frontend/apps/impress/src/components/DropdownMenu.tsx
@@ -1,4 +1,5 @@
-import { PropsWithChildren, useRef, useState } from 'react';
+import { HorizontalSeparator } from '@gouvfr-lasuite/ui-kit';
+import { Fragment, PropsWithChildren, useRef, useState } from 'react';
import { css } from 'styled-components';
import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components';
@@ -14,6 +15,7 @@ export type DropdownMenuOption = {
isSelected?: boolean;
disabled?: boolean;
show?: boolean;
+ showSeparator?: boolean;
};
export type DropdownMenuProps = {
@@ -112,71 +114,76 @@ export const DropdownMenu = ({
}
const isDisabled = option.disabled !== undefined && option.disabled;
return (
- {
- event.preventDefault();
- event.stopPropagation();
- onOpenChange?.(false);
- void option.callback?.();
- }}
- key={option.label}
- $align="center"
- $justify="space-between"
- $background={colorsTokens['greyscale-000']}
- $color={colorsTokens['primary-600']}
- $padding={{ vertical: 'xs', horizontal: 'base' }}
- $width="100%"
- $gap={spacingsTokens['base']}
- $css={css`
- border: none;
- ${index === 0 &&
- css`
- border-top-left-radius: 4px;
- border-top-right-radius: 4px;
- `}
- ${index === options.length - 1 &&
- css`
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
- `}
- font-size: var(--c--theme--font--sizes--sm);
- color: var(--c--theme--colors--greyscale-1000);
- font-weight: 500;
- cursor: ${isDisabled ? 'not-allowed' : 'pointer'};
- user-select: none;
-
- &:hover {
- background-color: var(--c--theme--colors--greyscale-050);
- }
- `}
- >
-
+ {
+ event.preventDefault();
+ event.stopPropagation();
+ onOpenChange?.(false);
+ void option.callback?.();
+ }}
+ key={option.label}
$align="center"
+ $justify="space-between"
+ $background={colorsTokens['greyscale-000']}
+ $color={colorsTokens['primary-600']}
+ $padding={{ vertical: 'xs', horizontal: 'base' }}
+ $width="100%"
$gap={spacingsTokens['base']}
+ $css={css`
+ border: none;
+ ${index === 0 &&
+ css`
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ `}
+ ${index === options.length - 1 &&
+ css`
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ `}
+ font-size: var(--c--theme--font--sizes--sm);
+ color: var(--c--theme--colors--greyscale-1000);
+ font-weight: 500;
+ cursor: ${isDisabled ? 'not-allowed' : 'pointer'};
+ user-select: none;
+
+ &:hover {
+ background-color: var(--c--theme--colors--greyscale-050);
+ }
+ `}
>
- {option.icon && (
-
+
+ {option.icon && (
+
+ )}
+
+ {option.label}
+
+
+ {(option.isSelected ||
+ selectedValues?.includes(option.value ?? '')) && (
+
)}
-
- {option.label}
-
-
- {(option.isSelected ||
- selectedValues?.includes(option.value ?? '')) && (
-
+
+ {option.showSeparator && (
+
)}
-
+
);
})}
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx
index 33cffcf8..375bac48 100644
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx
@@ -18,7 +18,7 @@ export const QuickSearchGroup = ({
renderElement,
}: Props) => {
return (
-
+
{!loading && }
{loading && (
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx
index 09330bd5..070126a5 100644
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx
@@ -24,8 +24,9 @@ export const QuickSearchItemContent = ({
{
const { colorsTokens } = useCunninghamTheme();
+ const padding = $withPadding
+ ? (customPadding ?? 'base')
+ : ('none' as Spacings);
+
return (
{
position: fixed;
transform: translateX(${isPanelOpen ? '0' : '-100dvw'});
background-color: var(--c--theme--colors--greyscale-000);
+ overflow-y: auto;
+ overflow-x: hidden;
`}
className="--docs--left-panel-mobile"
>