Phoenix LiveView 1.0 Bump (#42)

Also: * bump heroicons * bump phoenix_storybook version * accordion tweak
keatz55 · Dec 13, 2024 · 0555dc7 · 0555dc7
1 parent 9c5d2e8
commit 0555dc7
Show file tree

Hide file tree

Showing 15 changed files with 91 additions and 103 deletions.
diff --git a/lib/phoenix_ui_web/components/accordion.ex b/lib/phoenix_ui_web/components/accordion.ex
@@ -16,20 +16,15 @@ defmodule PhoenixUIWeb.Components.Accordion do
   ## Examples
 
   ```heex
-  <.accordion class="w-2 h-2">
-    <:trigger>
-      Accordion
-    </:trigger>
-    <:panel>
-      Content
-    </:panel>
+  <.accordion>
+    <:trigger>Accordion</:trigger>
+    <:panel>Content</:panel>
   </.accordion>
   ```
   """
 
-  attr :class, :any
+  attr :class, :any, doc: "Extend existing component styles"
   attr :controlled, :boolean, default: false
-  attr :default_expanded, :boolean, default: false
   attr :id, :string, required: true
   attr :rest, :global
 
@@ -44,7 +39,7 @@ defmodule PhoenixUIWeb.Components.Accordion do
         <h3>
           <button
             aria-controls={panel_id(@id, idx)}
-            aria-expanded={to_string(@default_expanded)}
+            aria-expanded={to_string(panel[:default_expanded] == true)}
             class={[
               "accordion-trigger relative w-full [&_.accordion-trigger-icon]:aria-expanded:rotate-180",
               trigger[:class]
@@ -54,7 +49,7 @@ defmodule PhoenixUIWeb.Components.Accordion do
             type="button"
             {assigns_to_attributes(trigger, [:class, :icon_name])}
           >
-            <%= render_slot(trigger) %>
+            {render_slot(trigger)}
             <.icon
               class="accordion-trigger-icon h-5 w-5 absolute right-4 transition-all ease-in-out duration-300 top-1/2 -translate-y-1/2"
               name={trigger[:icon_name] || "hero-chevron-down"}
@@ -72,7 +67,7 @@ defmodule PhoenixUIWeb.Components.Accordion do
               class={["accordion-panel-content", panel[:class]]}
               {assigns_to_attributes(panel, [:class, :default_expanded ])}
             >
-              <%= render_slot(panel) %>
+              {render_slot(panel)}
             </div>
           </div>
         </div>

diff --git a/lib/phoenix_ui_web/components/avatar.ex b/lib/phoenix_ui_web/components/avatar.ex
@@ -21,9 +21,9 @@ defmodule PhoenixUIWeb.Components.Avatar do
 
   attr :alt, :string
   attr :border, :boolean, default: false
+  attr :class, :any, doc: "Extend existing component styles"
   attr :color, :string, default: "zinc"
   attr :element, :string, default: "div"
-  attr :extend_class, :string
   attr :rest, :global
   attr :size, :string, default: "md"
   attr :src, :string
@@ -34,21 +34,17 @@ defmodule PhoenixUIWeb.Components.Avatar do
   @spec avatar(Socket.assigns()) :: Rendered.t()
   def avatar(assigns) do
     assigns
-    |> assign(
-      :class,
-      assigns[:class] ||
-        [
-          # Default styles
-          "avatar relative overflow-hidden font-semibold inline-flex items-center justify-center",
-          # Icon default styles
-          "[&_.icon]:absolute [&_.icon]:scale-125 [&_.icon]:top-[15%]",
-          styles(:border, assigns),
-          styles(:color, assigns),
-          styles(:size, assigns),
-          styles(:variant, assigns),
-          assigns[:extend_class]
-        ]
-    )
+    |> assign(:class, [
+      # Default styles
+      "avatar relative overflow-hidden font-semibold inline-flex items-center justify-center",
+      # Icon default styles
+      "[&_.icon]:absolute [&_.icon]:scale-125 [&_.icon]:top-[15%]",
+      styles(:border, assigns),
+      styles(:color, assigns),
+      styles(:size, assigns),
+      styles(:variant, assigns),
+      assigns[:class]
+    ])
     |> generate_markup()
   end
 
@@ -63,7 +59,7 @@ defmodule PhoenixUIWeb.Components.Avatar do
   defp generate_markup(%{alt: alt, inner_block: []} = assigns) when not is_nil(alt) do
     ~H"""
     <.dynamic_tag class={@class} tag_name={@element} {@rest}>
-      <%= build_initials(@alt) %>
+      {build_initials(@alt)}
     </.dynamic_tag>
     """
   end
@@ -79,7 +75,7 @@ defmodule PhoenixUIWeb.Components.Avatar do
   defp generate_markup(assigns) do
     ~H"""
     <.dynamic_tag class={@class} tag_name={@element} {@rest}>
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </.dynamic_tag>
     """
   end

diff --git a/lib/phoenix_ui_web/components/avatar_group.ex b/lib/phoenix_ui_web/components/avatar_group.ex
@@ -26,6 +26,7 @@ defmodule PhoenixUIWeb.Components.AvatarGroup do
   """
 
   attr :border, :boolean, default: true
+  attr :class, :any, doc: "Extend existing component styles"
   attr :color, :string, default: "zinc"
   attr :element, :string, default: "div"
   attr :max, :integer, default: 5
@@ -43,19 +44,16 @@ defmodule PhoenixUIWeb.Components.AvatarGroup do
 
     ~H"""
     <.dynamic_tag
-      class={
-        assigns[:class] ||
-          [
-            "avatar-group inline-flex flex-row-reverse items-center",
-            spacing_styles(@spacing),
-            assigns[:extend_class]
-          ]
-      }
+      class={[
+        "avatar-group inline-flex flex-row-reverse items-center",
+        spacing_styles(@spacing),
+        assigns[:class]
+      ]}
       tag_name={@element}
       {@rest}
     >
       <.avatar :if={@extra > 0} border={@border} color={@color} size={@size} variant={@variant}>
-        +<%= @extra %>
+        +{@extra}
       </.avatar>
       <.avatar
         :for={avatar <- Enum.take(@avatar, @max)}

diff --git a/lib/phoenix_ui_web/components/backdrop.ex b/lib/phoenix_ui_web/components/backdrop.ex
@@ -41,7 +41,7 @@ defmodule PhoenixUIWeb.Components.Backdrop do
       tag_name={@element}
       {@rest}
     >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </.dynamic_tag>
     """
   end

diff --git a/lib/phoenix_ui_web/components/button.ex b/lib/phoenix_ui_web/components/button.ex
@@ -58,7 +58,7 @@ defmodule PhoenixUIWeb.Components.Button do
       type={@element == "button" && @type}
       {@rest}
     >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </.dynamic_tag>
     """
   end

diff --git a/lib/phoenix_ui_web/components/core_components.ex b/lib/phoenix_ui_web/components/core_components.ex
@@ -80,7 +80,7 @@ defmodule PhoenixUIWeb.CoreComponents do
                 </button>
               </div>
               <div id={"#{@id}-content"}>
-                <%= render_slot(@inner_block) %>
+                {render_slot(@inner_block)}
               </div>
             </.focus_wrap>
           </div>
@@ -125,9 +125,9 @@ defmodule PhoenixUIWeb.CoreComponents do
       <p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
         <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
         <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
-        <%= @title %>
+        {@title}
       </p>
-      <p class="mt-2 text-sm leading-5"><%= msg %></p>
+      <p class="mt-2 text-sm leading-5">{msg}</p>
       <button type="button" class="group absolute top-1 right-1 p-2" aria-label={gettext("close")}>
         <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
       </button>
@@ -158,7 +158,7 @@ defmodule PhoenixUIWeb.CoreComponents do
         phx-connected={hide("#client-error")}
         hidden
       >
-        <%= gettext("Attempting to reconnect") %>
+        {gettext("Attempting to reconnect")}
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
       </.flash>
 
@@ -170,7 +170,7 @@ defmodule PhoenixUIWeb.CoreComponents do
         phx-connected={hide("#server-error")}
         hidden
       >
-        <%= gettext("Hang in there while we get back on track") %>
+        {gettext("Hang in there while we get back on track")}
         <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
       </.flash>
     </div>
@@ -204,9 +204,9 @@ defmodule PhoenixUIWeb.CoreComponents do
     ~H"""
     <.form :let={f} for={@for} as={@as} {@rest}>
       <div class="mt-10 space-y-8 bg-white">
-        <%= render_slot(@inner_block, f) %>
+        {render_slot(@inner_block, f)}
         <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
-          <%= render_slot(action, f) %>
+          {render_slot(action, f)}
         </div>
       </div>
     </.form>
@@ -238,7 +238,7 @@ defmodule PhoenixUIWeb.CoreComponents do
       ]}
       {@rest}
     >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </button>
     """
   end
@@ -322,36 +322,36 @@ defmodule PhoenixUIWeb.CoreComponents do
           class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
           {@rest}
         />
-        <%= @label %>
+        {@label}
       </label>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
 
   def input(%{type: "select"} = assigns) do
     ~H"""
     <div>
-      <.label for={@id}><%= @label %></.label>
+      <.label for={@id}>{@label}</.label>
       <select
         id={@id}
         name={@name}
         class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
         multiple={@multiple}
         {@rest}
       >
-        <option :if={@prompt} value=""><%= @prompt %></option>
-        <%= HTML.Form.options_for_select(@options, @value) %>
+        <option :if={@prompt} value="">{@prompt}</option>
+        {HTML.Form.options_for_select(@options, @value)}
       </select>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
 
   def input(%{type: "textarea"} = assigns) do
     ~H"""
     <div>
-      <.label for={@id}><%= @label %></.label>
+      <.label for={@id}>{@label}</.label>
       <textarea
         id={@id}
         name={@name}
@@ -362,7 +362,7 @@ defmodule PhoenixUIWeb.CoreComponents do
         ]}
         {@rest}
       ><%= HTML.Form.normalize_value("textarea", @value) %></textarea>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
@@ -371,7 +371,7 @@ defmodule PhoenixUIWeb.CoreComponents do
   def input(assigns) do
     ~H"""
     <div>
-      <.label for={@id}><%= @label %></.label>
+      <.label for={@id}>{@label}</.label>
       <input
         type={@type}
         name={@name}
@@ -384,7 +384,7 @@ defmodule PhoenixUIWeb.CoreComponents do
         ]}
         {@rest}
       />
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
@@ -398,7 +398,7 @@ defmodule PhoenixUIWeb.CoreComponents do
   def label(assigns) do
     ~H"""
     <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </label>
     """
   end
@@ -412,7 +412,7 @@ defmodule PhoenixUIWeb.CoreComponents do
     ~H"""
     <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) %>
+      {render_slot(@inner_block)}
     </p>
     """
   end
@@ -431,13 +431,13 @@ defmodule PhoenixUIWeb.CoreComponents do
     <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
       <div>
         <h1 class="text-lg font-semibold leading-8 text-zinc-800">
-          <%= render_slot(@inner_block) %>
+          {render_slot(@inner_block)}
         </h1>
         <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
-          <%= render_slot(@subtitle) %>
+          {render_slot(@subtitle)}
         </p>
       </div>
-      <div class="flex-none"><%= render_slot(@actions) %></div>
+      <div class="flex-none">{render_slot(@actions)}</div>
     </header>
     """
   end
@@ -478,9 +478,9 @@ defmodule PhoenixUIWeb.CoreComponents do
       <table class="w-[40rem] mt-11 sm:w-full">
         <thead class="text-sm text-left leading-6 text-zinc-500">
           <tr>
-            <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
+            <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal">{col[:label]}</th>
             <th :if={@action != []} class="relative p-0 pb-4">
-              <span class="sr-only"><%= gettext("Actions") %></span>
+              <span class="sr-only">{gettext("Actions")}</span>
             </th>
           </tr>
         </thead>
@@ -498,7 +498,7 @@ defmodule PhoenixUIWeb.CoreComponents do
               <div class="block py-4 pr-6">
                 <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
                 <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
-                  <%= render_slot(col, @row_item.(row)) %>
+                  {render_slot(col, @row_item.(row))}
                 </span>
               </div>
             </td>
@@ -509,7 +509,7 @@ defmodule PhoenixUIWeb.CoreComponents do
                   :for={action <- @action}
                   class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
                 >
-                  <%= render_slot(action, @row_item.(row)) %>
+                  {render_slot(action, @row_item.(row))}
                 </span>
               </div>
             </td>
@@ -539,8 +539,8 @@ defmodule PhoenixUIWeb.CoreComponents do
     <div class="mt-14">
       <dl class="-my-4 divide-y divide-zinc-100">
         <div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
-          <dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt>
-          <dd class="text-zinc-700"><%= render_slot(item) %></dd>
+          <dt class="w-1/4 flex-none text-zinc-500">{item.title}</dt>
+          <dd class="text-zinc-700">{render_slot(item)}</dd>
         </div>
       </dl>
     </div>
@@ -565,7 +565,7 @@ defmodule PhoenixUIWeb.CoreComponents do
         class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
       >
         <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
-        <%= render_slot(@inner_block) %>
+        {render_slot(@inner_block)}
       </.link>
     </div>
     """

diff --git a/lib/phoenix_ui_web/components/layouts/app.html.heex b/lib/phoenix_ui_web/components/layouts/app.html.heex
@@ -5,7 +5,7 @@
         <img src={~p"/images/logo.svg"} width="36" />
       </a>
       <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        v<%= Application.spec(:phoenix, :vsn) %>
+        v{Application.spec(:phoenix, :vsn)}
       </p>
     </div>
     <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
@@ -27,6 +27,6 @@
 <main class="px-4 py-20 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-2xl">
     <.flash_group flash={@flash} />
-    <%= @inner_content %>
+    {@inner_content}
   </div>
 </main>