BitstylesPhoenix.Component.Error (bitstyles_phoenix v2.3.0) View Source

Component for showing UI errors.

Link to this section Summary

Functions

Generates tag for custom errors.

Render errors from a Phoenix.HTML.Form.

Link to this section Functions

Generates tag for custom errors.

Attributes

  • error (required) - The error to render (expected to be a tuple with {message :: String.t(), opts :: keyword()}).
  • All other attributes are passed to the outer span tag.

Uses the translate_errors MFA from the config to translate field errors (e.g. with gettext).

The error will be rendered with the warning color, as specified in bitstyles colors.

An error tag

iex> assigns = %{}
...> render ~H"""
...> <.ui_error error={{"Foo error", []}} />
...> """
"""
<span class="u-fg-warning">
  Foo error
</span>
"""

An error tag extra options and classes

iex> assigns = %{error: {"Foo error", []}}
...> render ~H"""
...> <.ui_error error={@error} phx-feedback-for="foo" class="bar" />
...> """
"""
<span class="u-fg-warning bar" phx-feedback-for="foo">
  Foo error
</span>
"""

Render errors from a Phoenix.HTML.Form.

Attributes

  • form (required) - The form to render the input form.
  • field (required) - The name of the field for the input.
  • class - Extra classes to pass to the wrapping ul if there are mutliple errors. See BitstylesPhoenix.Helper.classnames/1 for usage.
  • error_class - Extra classes to pass to the error component. See BitstylesPhoenix.Helper.classnames/1 for usage.

See also BitstylesPhoenix.Component.Form.

Uses the translate_errors MFA from the config to translate field errors (e.g. with gettext).

A single error

iex> assigns = %{form: @form_with_errors}
...> render ~H"""
...> <.ui_errors form={@form} field={:single} />
...> """
"""
<span class="u-fg-warning" phx-feedback-for="user[single]">
  is too short
</span>
"""

Multiple errors

iex> assigns = %{form: @form_with_errors}
...> render ~H"""
...> <.ui_errors form={@form} field={:multiple} />
...> """
"""
<ul class="u-padding-xl-left">
  <li>
    <span class="u-fg-warning" phx-feedback-for="user[multiple]">
      is simply bad
    </span>
  </li>
  <li>
    <span class="u-fg-warning" phx-feedback-for="user[multiple]">
      not fun
    </span>
  </li>
</ul>
"""