diff --git a/changelog/unreleased/enhancement-restyle-sharees b/changelog/unreleased/enhancement-restyle-sharees
new file mode 100644
index 00000000000..0cd219a7b4a
--- /dev/null
+++ b/changelog/unreleased/enhancement-restyle-sharees
@@ -0,0 +1,6 @@
+Enhancement: Restyle possible sharees
+
+We've restyled the list of sharee suggestions when sharing files and folders.
+
+https://github.com/owncloud/web/issues/9216
+https://github.com/owncloud/web/pull/9273
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
index 1b414fd6b86..5ef4e33dcc6 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
@@ -38,12 +38,17 @@
/>
@@ -103,4 +108,7 @@ export default {
.vs__dropdown-option--highlight .files-recipient-suggestion-avatar svg {
fill: white !important;
}
+.files-collaborators-autocomplete-additional-info {
+ font-size: var(--oc-font-size-small);
+}
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
index 4c59cb2b81b..5281fbee3d5 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
@@ -61,16 +61,25 @@ describe('AutocompleteItem component', () => {
it('shows additional information when set', () => {
const { wrapper } = createWrapper({ shareWithAdditionalInfo: 'some text' })
expect(wrapper.find('.files-collaborators-autocomplete-additional-info').text()).toEqual(
- '(some text)'
+ 'some text'
)
})
it('does not show additional information when not set', () => {
const { wrapper } = createWrapper({ shareWithAdditionalInfo: undefined })
expect(wrapper.find('.files-collaborators-autocomplete-additional-info').exists()).toBeFalsy()
})
- it('shows the share type', () => {
- const { wrapper } = createWrapper({ shareType: ShareTypes.user.value })
- expect(wrapper.find('.files-collaborators-autocomplete-share-type').text()).toEqual('User')
+ it.each([
+ ShareTypes.user.value,
+ ShareTypes.spaceUser.value,
+ ShareTypes.group.value,
+ ShareTypes.spaceGroup.value
+ ])('hides share type for users and groups', (shareType: number) => {
+ const { wrapper } = createWrapper({ shareType })
+ expect(wrapper.find('.files-collaborators-autocomplete-share-type').exists()).toBeFalsy()
+ })
+ it('shows share type for guests', () => {
+ const { wrapper } = createWrapper({ shareType: ShareTypes.guest.value })
+ expect(wrapper.find('.files-collaborators-autocomplete-share-type').text()).toEqual('(Guest)')
})
})
})