DevactionUI.Avatar (devaction_ui v0.1.0)

Copy Markdown View Source

A person as two letters in a circle, and the stack of them overlapping by 8px. The letters come from the name (initials/1); the tone only tells people apart, it never carries meaning. A circle with no name is decoration, so a stack names its people for assistive technology once, as a group.

Around it: five sizes (:xs to :xl), a square shape for what is not a person (a workspace, a repository, a client), a status dot (online, away, busy, offline), the AI agent (agent/1, amber, with its own mark) and the invite slot (avatar_invite/1). A status is never alone: it is also read out.

Summary

Functions

agent(assigns)

The AI agent: amber, with its own mark instead of letters.

avatar(assigns)
avatar_invite(assigns)

The empty place at the end of a group, to invite someone.

avatar_stack(assigns)
initials(name)

Up to two capital letters: the first of the first and of the last word.

Functions

agent(assigns)

The AI agent: amber, with its own mark instead of letters.

Attributes

  • name (:string) (required)
  • size (:atom) - Defaults to :md. Must be one of :xs, :sm, :md, :lg, or :xl.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required) - the mark of the agent, an icon.

avatar(assigns)

Attributes

  • name (:string) (required)
  • tone (:atom) - Defaults to :neutral. Must be one of :ok, :warn, :risk, :info, or :neutral.
  • size (:atom) - 22, 34 (default), 24, 56 and 72 px. Defaults to :md. Must be one of :xs, :sm, :md, :lg, or :xl.
  • shape (:atom) - square is for a workspace, a repository, a client. Defaults to :round. Must be one of :round, or :square.
  • status (:atom) - Defaults to nil.Must be one of nil, :online, :away, :busy, or :offline.
  • status_label (:string) - what the status says, read by screen readers. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

avatar_invite(assigns)

The empty place at the end of a group, to invite someone.

Attributes

  • label (:string) (required) - what pressing it does: Invite a person.
  • size (:atom) - Defaults to :md. Must be one of :xs, :sm, :md, :lg, or :xl.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required) - a plus icon.

avatar_stack(assigns)

Attributes

  • people (:list) (required) - %{name: ..., tone: ...} each, the first on top.
  • label (:string) (required) - what the group is, e.g. Reviewers.
  • max (:integer) - how many are drawn; the rest become a +N chip. Defaults to nil.
  • size (:atom) - Defaults to :md. Must be one of :xs, :sm, :md, :lg, or :xl.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

initials(name)

@spec initials(String.t()) :: String.t()

Up to two capital letters: the first of the first and of the last word.