fix(ShareAutosuggest): Align correctly loading state

Following the addition of the chips in the sharing input and the cozy-ui updates, the spinner was aligned at the top of the input. This commit allows it to be centred again
cozy · Apr 8, 2024 · 9d93952 · 9d93952
1 parent e62ec59
commit 9d93952
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 5 deletions.
diff --git a/packages/cozy-sharing/.storybook/preview.jsx b/packages/cozy-sharing/.storybook/preview.jsx
@@ -3,6 +3,7 @@ import React from "react";
 import 'cozy-ui/dist/cozy-ui.min.css'
 import 'cozy-ui/dist/cozy-ui.utils.min.css'
 import 'cozy-ui/transpiled/react/stylesheet.css'
+import '../dist/stylesheet.css'
 
 import I18n from 'cozy-ui/transpiled/react/providers/I18n'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'

diff --git a/packages/cozy-sharing/src/components/ShareAutosuggest.jsx b/packages/cozy-sharing/src/components/ShareAutosuggest.jsx
@@ -165,10 +165,7 @@ const ShareAutocomplete = ({
       })}
       <input {...inputProps} onKeyPress={onKeyPress} onKeyUp={onKeyUp} />
       {loading && isLoadingDisplayed ? (
-        <Spinner
-          color={palette.dodgerBlue}
-          className="u-flex u-flex-items-center"
-        />
+        <Spinner color={palette.dodgerBlue} />
       ) : null}
     </div>
   )

diff --git a/packages/cozy-sharing/src/components/ShareAutosuggest.stories.jsx b/packages/cozy-sharing/src/components/ShareAutosuggest.stories.jsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+
+import ShareAutosuggest from './ShareAutosuggest'
+
+const meta = {
+  component: ShareAutosuggest,
+  args: {}
+}
+
+export default meta
+
+const ShareAutosuggestRender = props => {
+  const [recipients, setRecipients] = useState([])
+  const onPick = contactOrGroup => {
+    setRecipients([...recipients, contactOrGroup])
+  }
+
+  const onRemove = contactOrGroup => {
+    setRecipients(recipients.filter(r => r.id !== contactOrGroup.id))
+  }
+  return (
+    <ShareAutosuggest
+      {...props}
+      recipients={recipients}
+      onPick={onPick}
+      onRemove={onRemove}
+    />
+  )
+}
+
+export const Default = {
+  name: 'Default',
+  render: ShareAutosuggestRender,
+  args: {
+    loading: false,
+    contactsAndGroups: [
+      {
+        id: 'group1',
+        name: 'Family',
+        _type: 'io.cozy.contacts.groups',
+        members: [
+          {
+            id: 'contact1',
+            name: 'John Doe',
+            _type: 'io.cozy.contacts'
+          },
+          {
+            id: 'contact2',
+            name: 'Jane Doe',
+            _type: 'io.cozy.contacts'
+          }
+        ]
+      },
+      {
+        id: 'contact3',
+        name: 'Alice Wonderland',
+        _type: 'io.cozy.contacts',
+        email: 'alice@wonder.land'
+      }
+    ],
+    placeholder: 'Type a name or email address'
+  }
+}
diff --git a/packages/cozy-sharing/src/styles/autosuggest.styl b/packages/cozy-sharing/src/styles/autosuggest.styl
@@ -33,6 +33,7 @@
 .recipientsContainer
     display flex
     flex-wrap wrap
+    align-items center
     padding .25rem .5rem
     border-radius .25rem
     border 1px solid var(--borderMainColor)
@@ -55,7 +56,7 @@
         &:hover
         &:focus
             border none
-        &:only-child
+        &:first-child
           padding .25rem .5rem
 
 .recipientChip