zoedsoupe

zoedsoupe

In my project we have a Text component that respects the design system implementation with different sizes and line-heights. Then our typography has these variations:

  • h1..h5
  • base
  • large
  • medium
  • small

for base, medium and small variations we can use <span /> or <p/> tag. However, for h1..h5 variations it would be better to respect HTML semantics using those exact tags.

So I thought: I can pattern match on the prop size of the text component and then render something based on it. Or use flow control in heex tempaltes, that way:

attr :size, :string, values: ~w(h1 h2 h3 h4 h5 base lg md sm), required: true

def text(assigns) do
  ~H"""
  <h1 :if={@size == "h1"}> ... </h1>
  <h2 :if={@size == "h2"}> ... </h2>
  <h3 :if={@size == "h3"}> ... </h3>
  <!-- go for each variation -->
  """
end

But this code is kinda long… So I tried to render dynamically:

defp text_component(variation) do
  case variation do
    "h1" -> ...
  end
end

def text(assigns) do
  ~H"""
  <!-- what goes here? I want to call text_component(@size) and get a HTML tag rendered -->
   """
end

I know I can render function components dynamically with apply/3 or even with Phoenix.LiveView.HTMLEngine.component/3, but how about native HTML tags? I would need to define a micro component to render the tag? maybe:

def h1(assigns) do
  ~H"<h1 {...@assigns}> ... </h1>"
end

Showing Posts 1 to 4

alexanders

alexanders

You can do something like this:

  attr :size, :string, values: ~w(h1 h2 h3 h4 h5 base lg md sm), required: true

  def text(%{size: "h" <> _} = assigns) do
    ~H"""
    <%= Phoenix.HTML.Tag.content_tag @size do %>
      ...
    <% end %>
    """
  end

  def text(assigns) do
    ~H"""
    <span>...</span>
    """
  end

or

  def text(%{size: "h1"} = assigns) do
    ~H"""
    <h1>...</h1>
    """
  end

  def text(%{size: "h2"} = assigns) do
    ~H"""
    <h2>...</h2>
    """
  end

if you want to avoid using content_tag

al2o3cr

al2o3cr

This seems like an odd approach to me - why is <.text size="h5">words words words</.text> preferable to <h5>words words words</h5>, especially if semantics are important?

A .text component that could be either a block element or an inline element (if some size expands to span) also seems strange to me.

chrismccord

chrismccord

Creator of Phoenix

Phoenix.Component provides <.dynamic_tag name={…}></.dynamic_tag>

12
Post #3
zoedsoupe

zoedsoupe OP

Wow! That’s exactly what I was searching! Thanks @chrismccord!

— All posts loaded —

Where Next? Top

Trending in Questions Top

Blokh
Hey guys, I’ve got a huge CSV ( around 10 GB ) that needs to be processed hourly Do you guys have any suggestions what is the best prac...
New
RSP87
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
New
kszambelanczyk
Hello! Could someone please give me a help/sample code, how to delete a file from s3 using waffle/waffle_ecto from Phoenix app. I creat...
New
RemyXRenard
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
New
velrest
So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...
New
samoloth
Hi, I’ve just set up an application with ash_authentication. There is only magic link strategy for now, so there is no confirmation add o...
New
FlyingNoodle
If a change or preparation module uses Ash.Changeset.get_argument/2 or Ash.Query.get_argument/2 (or any of the other get_argument functio...
New

Other Trending Topics Top

mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
marciok
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Dmk
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge &amp; Solve. They are GUI (Emerge) and State management (S...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews