🐛(frontend) remove horizontal line when no elements

When no elements are present in the doc share
modals, a horizontal line is still displayed.
This PR removes this line when there are no elements
to display.
This commit is contained in:
Anthony LC
2026-04-21 11:05:07 +02:00
parent e39b03c272
commit aed8ae7181
3 changed files with 42 additions and 27 deletions

View File

@@ -11,6 +11,7 @@ import { createGlobalStyle, css } from 'styled-components';
import { import {
Box, Box,
BoxButton, BoxButton,
HorizontalSeparator,
Icon, Icon,
LoadMoreText, LoadMoreText,
Loading, Loading,
@@ -165,19 +166,25 @@ export const QuickSearchGroupAccessRequest = ({
} }
return ( return (
<Box <>
aria-label={t('List request access card')} <Box
className="--docs--share-access-request" aria-label={t('List request access card')}
$padding={{ horizontal: 'base' }} className="--docs--share-access-request"
> $padding={{ horizontal: 'base' }}
<QuickSearchGroupAccessRequestStyle /> >
<QuickSearchGroup <QuickSearchGroupAccessRequestStyle />
group={accessRequestsData} <QuickSearchGroup
renderElement={(accessRequest) => ( group={accessRequestsData}
<DocShareAccessRequestItem doc={doc} accessRequest={accessRequest} /> renderElement={(accessRequest) => (
)} <DocShareAccessRequestItem
/> doc={doc}
</Box> accessRequest={accessRequest}
/>
)}
/>
</Box>
<HorizontalSeparator $margin={{ vertical: 'sm' }} />
</>
); );
}; };

View File

@@ -6,7 +6,14 @@ import { useMemo } 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, LoadMoreText, Text } from '@/components'; import {
Box,
BoxButton,
HorizontalSeparator,
Icon,
LoadMoreText,
Text,
} from '@/components';
import { QuickSearchData, QuickSearchGroup } from '@/components/quick-search'; import { QuickSearchData, QuickSearchGroup } from '@/components/quick-search';
import { useCunninghamTheme } from '@/cunningham'; import { useCunninghamTheme } from '@/cunningham';
import { Doc, Role } from '@/docs/doc-management'; import { Doc, Role } from '@/docs/doc-management';
@@ -162,16 +169,19 @@ export const QuickSearchGroupInvitation = ({
} }
return ( return (
<Box <>
aria-label={t('List invitation card')} <Box
$padding={{ horizontal: 'base' }} aria-label={t('List invitation card')}
> $padding={{ horizontal: 'base' }}
<QuickSearchGroup >
group={invitationsData} <QuickSearchGroup
renderElement={(invitation) => ( group={invitationsData}
<DocShareInvitationItem doc={doc} invitation={invitation} /> renderElement={(invitation) => (
)} <DocShareInvitationItem doc={doc} invitation={invitation} />
/> )}
</Box> />
</Box>
<HorizontalSeparator $margin={{ vertical: 'sm' }} />
</>
); );
}; };

View File

@@ -291,9 +291,7 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
{showMemberSection && isRootDoc && ( {showMemberSection && isRootDoc && (
<Box $padding={{ top: 'base' }}> <Box $padding={{ top: 'base' }}>
<QuickSearchGroupAccessRequest doc={doc} /> <QuickSearchGroupAccessRequest doc={doc} />
<HorizontalSeparator $margin={{ vertical: 'sm' }} />
<QuickSearchGroupInvitation doc={doc} /> <QuickSearchGroupInvitation doc={doc} />
<HorizontalSeparator $margin={{ vertical: 'sm' }} />
<QuickSearchGroupMember doc={doc} /> <QuickSearchGroupMember doc={doc} />
</Box> </Box>
)} )}