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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 6 commits into from
May 3, 2024
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5d16d11
Replace phx-feedback-for in favor of used_errors
chrismccord Feb 5, 2024
d7f7318
used_input?/1
chrismccord Feb 6, 2024
322d445
Rework form component
chrismccord Feb 6, 2024
af51f2e
Bump unreleased phoenix_html
chrismccord Feb 6, 2024
7a42afe
Update installer/templates/phx_single/mix.exs
chrismccord May 3, 2024
d73a2a4
Update installer/templates/phx_umbrella/apps/app_name_web/mix.exs
chrismccord May 3, 2024
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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