Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace phx-feedback-for in favor of used_input?/1 #5713

Merged
merged 6 commits into from
May 3, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion guides/howto/file_uploads.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ Once you have a multipart form, you need a `file` input. Here's how you would do
When rendered, here is the HTML for the default `HelloWeb.CoreComponents` `input/1` component:

```html
<div phx-feedback-for="product[photo]">
<div>
<label for="product_photo" class="block text-sm...">Photo</label>
<input type="file" name="product[photo]" id="product_photo" class="mt-2 block w-full...">
</div>
Expand Down
1 change: 0 additions & 1 deletion installer/templates/phx_assets/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ module.exports = {
//
// <div class="phx-click-loading:animate-ping">
//
plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
Expand Down
18 changes: 9 additions & 9 deletions installer/templates/phx_web/components/core_components.ex
Original file line number Diff line number Diff line change
Expand Up @@ -293,9 +293,11 @@ defmodule <%= @web_namespace %>.CoreComponents do
slot :inner_block

def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []

assigns
|> assign(field: nil, id: assigns.id || field.id)
|> assign(:errors, Enum.map(field.errors, &translate_error(&1)))
|> assign(:errors, Enum.map(errors, &translate_error(&1)))
|> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
|> assign_new(:value, fn -> field.value end)
|> input()
Expand All @@ -308,7 +310,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
end)

~H"""
<div phx-feedback-for={@name}>
<div>
<label class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
<input type="hidden" name={@name} value="false" />
<input
Expand All @@ -329,7 +331,7 @@ defmodule <%= @web_namespace %>.CoreComponents do

def input(%{type: "select"} = assigns) do
~H"""
<div phx-feedback-for={@name}>
<div>
<.label for={@id}><%%= @label %></.label>
<select
id={@id}
Expand All @@ -348,14 +350,13 @@ defmodule <%= @web_namespace %>.CoreComponents do

def input(%{type: "textarea"} = assigns) do
~H"""
<div phx-feedback-for={@name}>
<div>
<.label for={@id}><%%= @label %></.label>
<textarea
id={@id}
name={@name}
class={[
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
"min-h-[6rem] phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6 min-h-[6rem]",
@errors == [] && "border-zinc-300 focus:border-zinc-400",
@errors != [] && "border-rose-400 focus:border-rose-400"
]}
Expand All @@ -369,7 +370,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
# All other inputs text, datetime-local, url, password, etc. are handled here...
def input(assigns) do
~H"""
<div phx-feedback-for={@name}>
<div>
<.label for={@id}><%%= @label %></.label>
<input
type={@type}
Expand All @@ -378,7 +379,6 @@ defmodule <%= @web_namespace %>.CoreComponents do
value={Phoenix.HTML.Form.normalize_value(@type, @value)}
class={[
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
"phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
@errors == [] && "border-zinc-300 focus:border-zinc-400",
@errors != [] && "border-rose-400 focus:border-rose-400"
]}
Expand Down Expand Up @@ -410,7 +410,7 @@ defmodule <%= @web_namespace %>.CoreComponents do

def error(assigns) do
~H"""
<p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden">
<p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600">
<.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
<%%= render_slot(@inner_block) %>
</p>
Expand Down
18 changes: 9 additions & 9 deletions priv/templates/phx.gen.live/core_components.ex
Original file line number Diff line number Diff line change
Expand Up @@ -293,9 +293,11 @@ defmodule <%= @web_namespace %>.CoreComponents do
slot :inner_block

def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []

assigns
|> assign(field: nil, id: assigns.id || field.id)
|> assign(:errors, Enum.map(field.errors, &translate_error(&1)))
|> assign(:errors, Enum.map(errors, &translate_error(&1)))
|> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
|> assign_new(:value, fn -> field.value end)
|> input()
Expand All @@ -308,7 +310,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
end)

~H"""
<div phx-feedback-for={@name}>
<div>
<label class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
<input type="hidden" name={@name} value="false" />
<input
Expand All @@ -329,7 +331,7 @@ defmodule <%= @web_namespace %>.CoreComponents do

def input(%{type: "select"} = assigns) do
~H"""
<div phx-feedback-for={@name}>
<div>
<.label for={@id}><%%= @label %></.label>
<select
id={@id}
Expand All @@ -348,14 +350,13 @@ defmodule <%= @web_namespace %>.CoreComponents do

def input(%{type: "textarea"} = assigns) do
~H"""
<div phx-feedback-for={@name}>
<div>
<.label for={@id}><%%= @label %></.label>
<textarea
id={@id}
name={@name}
class={[
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
"min-h-[6rem] phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6 min-h-[6rem]",
@errors == [] && "border-zinc-300 focus:border-zinc-400",
@errors != [] && "border-rose-400 focus:border-rose-400"
]}
Expand All @@ -369,7 +370,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
# All other inputs text, datetime-local, url, password, etc. are handled here...
def input(assigns) do
~H"""
<div phx-feedback-for={@name}>
<div>
<.label for={@id}><%%= @label %></.label>
<input
type={@type}
Expand All @@ -378,7 +379,6 @@ defmodule <%= @web_namespace %>.CoreComponents do
value={Phoenix.HTML.Form.normalize_value(@type, @value)}
class={[
"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
"phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
@errors == [] && "border-zinc-300 focus:border-zinc-400",
@errors != [] && "border-rose-400 focus:border-rose-400"
]}
Expand Down Expand Up @@ -410,7 +410,7 @@ defmodule <%= @web_namespace %>.CoreComponents do

def error(assigns) do
~H"""
<p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden">
<p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600">
<.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
<%%= render_slot(@inner_block) %>
</p>
Expand Down
18 changes: 7 additions & 11 deletions priv/templates/phx.gen.live/form_component.ex
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,13 @@ defmodule <%= inspect context.web_module %>.<%= inspect Module.concat(schema.web
{:ok,
socket
|> assign(assigns)
|> assign_form(changeset)}
|> assign_form(changeset, :validate)}
end

@impl true
def handle_event("validate", %{"<%= schema.singular %>" => <%= schema.singular %>_params}, socket) do
changeset =
socket.assigns.<%= schema.singular %>
|> <%= inspect context.alias %>.change_<%= schema.singular %>(<%= schema.singular %>_params)
|> Map.put(:action, :validate)

{:noreply, assign_form(socket, changeset)}
changeset = <%= inspect context.alias %>.change_<%= schema.singular %>(socket.assigns.<%= schema.singular %>, <%= schema.singular %>_params)
{:noreply, assign_form(socket, changeset, :validate)}
end

def handle_event("save", %{"<%= schema.singular %>" => <%= schema.singular %>_params}, socket) do
Expand All @@ -63,7 +59,7 @@ defmodule <%= inspect context.web_module %>.<%= inspect Module.concat(schema.web
|> push_patch(to: socket.assigns.patch)}

{:error, %Ecto.Changeset{} = changeset} ->
{:noreply, assign_form(socket, changeset)}
{:noreply, assign_form(socket, changeset, :save)}
end
end

Expand All @@ -78,12 +74,12 @@ defmodule <%= inspect context.web_module %>.<%= inspect Module.concat(schema.web
|> push_patch(to: socket.assigns.patch)}

{:error, %Ecto.Changeset{} = changeset} ->
{:noreply, assign_form(socket, changeset)}
{:noreply, assign_form(socket, changeset, :save)}
end
end

defp assign_form(socket, %Ecto.Changeset{} = changeset) do
assign(socket, :form, to_form(changeset))
defp assign_form(socket, %Ecto.Changeset{} = changeset, action) do
assign(socket, :form, to_form(changeset, action: action))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
defp assign_form(socket, %Ecto.Changeset{} = changeset, action) do
assign(socket, :form, to_form(changeset, action: action))
defp assign_form(socket, %Ecto.Changeset{} = changeset, opts \\ []) do
assign(socket, :form, to_form(changeset, opts))

end

defp notify_parent(msg), do: send(self(), {__MODULE__, msg})
Expand Down
Loading