Overriding the default "client-error" and "server-error" hidden toasts

[apiontek]

My project uses Bootstrap, so I would be overriding the toast components - and I see that is possible, which is great.

However, the module injects replacements for the default client-error and server-error elements, with default JS values for the phx-connected and phx-disconnected attributes. I would also need to override these. Am I missing a way to do that, or could that feature be put on the roadmap?

[srcrip]

We can definitely add that. Can you help my describing to me in what way you need to customize it? That will help a lot in determining what the API should be.

[sergchernata]

I had a similar need and in my case I wanted to reshuffle the layout of the error messages. Maybe the lib could expose 3 functions for generic, no_internet and no_server that we could pass custom layout components to.

[kosciak9]

Hi, for me it's about changing the contents of the toast because my app is not in English and they look out of place :)

[apiontek]

Been months since I looked at this because I ended up making my own limited toast component, but since I'm now trying to figure out how to incorporate flash as well, I'm revisiting.

I think the suggestion from @sergchernata to allow passing full custom layout components would be the solution.

My use case is using Bootstrap's model, including custom LiveView JS for phx-disconnected and phx-connected—example:

<div
  id="client-error"
  class="toast align-items-center text-bg-primary border-0 fade showing"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  aria-hidden="true"
  phx-disconnected={fade_in_toast(".phx-client-error #client-error")}
  phx-connected={fade_out_toast("#client-error")}
  >
  <div
    id="client-error-inner"
    class="d-flex"
    data-bs-theme="dark"
    >
    <div id="client-error-body" class="toast-body d-flex align-items-top">
      <.icon name="bi-arrow-repeat" title="Client error" class="mt-1 me-2 spin" />
      <span class="toast-body-content">Connecting...</span>
    </div>
  </div>
</div>

[srcrip]

Hello, I'm revisiting this now that I've cleaned up some of the other issues. I want to implement something along the lines of what's discussed here but I'm afraid I need some more examples of the kinds of customization you want to do before I can help.

If you want to customize the language itself, someone very graciously implemented gettext support which you can use to do exactly that.

If you want to customize something CSS related about only the "connection lost" flashes, right now I would recommend doing something like this:

def custom_toast_class_fn(assigns) do
  [
    # utility to target *only* the "client-error" flash for instance
    "[&[id=client-error]]:!bg-black",
    # base classes
    "bg-white group/toast z-100 pointer-events-auto relative w-full items-center justify-between origin-center overflow-hidden rounded-lg p-4 shadow-lg border col-start-1 col-end-1 row-start-1 row-end-2",
    # start hidden if javascript is enabled
    "[@media(scripting:enabled)]:opacity-0 [@media(scripting:enabled){[data-phx-main]_&}]:opacity-100",
    # used to hide the disconnected flashes
    if(assigns[:rest][:hidden] == true, do: "hidden", else: "flex"),
    # override styles per severity
    assigns[:kind] == :info && "text-black",
    assigns[:kind] == :error && "!text-red-700 !bg-red-100 border-red-200",
  ]
end

Note that that flash is also one with kind of :error, so you may have to adjust those as needed as well. Hopefully this makes sense. The toast element should have all the necessary things on it to tell them apart in CSS land, so you should be able to style them any way you want.

Now if you want custom markup in those, that's a different matter. But I'm assuming you're talking about one of the two things above. If not let me know and we can figure something out.

[mike1o1]

Chiming in to say that I'd like the ability to customize the markup, or even better (for my case) simply remove the injected flashes, or add the ability to add a significant delay. I find the "Attempting to reconnect" flash to be too distracting, especially on mobile - I'd love to be able to hide them unless disconnected for, say, 5000ms.

[srcrip]

@mike1o1 watch this PR for your issue: #19

I have a fix that I think works well, but I could use some more people testing it before I merge it ideally. if you'd like to test that branch that would be great. If not I'll probably test it myself more soon before merging it into the mainline.

[srcrip]

@mike1o1 That option is merged now, so going to close this for now. Feel free to reopen if you have any questions.