Catalog Collaboration

<.collaborate_button>

ConnieUI.Collaboration

HEEx 
<ConnieUI.Collaboration.collaborate_button
  people={@people}
  click={JS.push("collaborate:toggle")}
  active pending={2}
/>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:integer

avatars shown before the group folds into a +N badge

:string

the collaboration link is active. Leads the avatars with a success dot

:integer

access requests waiting on an answer. Above zero the button carries a dot

:string

id for the Collaborate button, so a panel can be anchored to it. See `ConnieUI.Popovers.anchored/1`

:string
:string

Set by the example

people click class

Docs

The document header's collaboration control: who has access and the way into the sharing panel, as one button. The whole pill is the button, so a click anywhere on it opens the panel the host anchors to `button_id`. The avatar stack is a visual summary of who has access, so it is hidden from assistive technology and the button is heard as its label and the number of requests waiting. `people` are rendered in the order given, so the host decides that the team comes before its collaborators. `active` is the share link's own flag: on, a success dot leads the stack. `pending` is the number of access requests waiting on an answer; above zero it marks the button's corner, which is the only place a request is announced outside the sidebar.
Attribute Type Default Description
people * :list
everyone with access, in display order, as `%{name:, image:, online: boolean}`
limit :integer 5
avatars shown before the group folds into a +N badge
size :string "size-6"
active :boolean false
the collaboration link is active. Leads the avatars with a success dot
pending :integer 0
access requests waiting on an answer. Above zero the button carries a dot
click {:struct, Phoenix.LiveView.JS} nil
button_id :string nil
id for the Collaborate button, so a panel can be anchored to it. See `ConnieUI.Popovers.anchored/1`
popovertarget :string nil
popovertargetaction :string nil
class :any nil