[Feature][ActionView] A helper to conditionally add classes

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

[Feature][ActionView] A helper to conditionally add classes

frodsan
Hi,

After doing some React and inspired by https://github.com/JedWatson/classnames, what do you think about adding a helper method to conditionally join classes.

For example, we have this code in our app to conditionally add classes to a div:

<div class="project <%= project.status.active? ? 'active' : '' %> <%= project.owner == current_user ?  'owner' : '' %>

<% content_tag(:div, class: "project #{project.status.active? ? 'active' : ''} #{project.owner == current_user ?  'owner' : ''}"

It will be nice to skip those empty strings with something like this:

<div class="class_names('project', 'active' => project.status.active?, 'owner' => project.owner == current_user)">

content_tag(:div, class: class_names("project", "active" => project.status.active?, "owner" => project.owner == current_user))

Do you think is worth it to put it into Rails?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Core" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/rubyonrails-core.
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: [Feature][ActionView] A helper to conditionally add classes

Andrew Kaspick
Your code will be cleaner if you pass the classes in as an array.  <%= content_tag :div, content, class: ['a', 'b', nil, 'c'] %>; the nil elements will be ignored.  Doing that, you can create the array elsewhere in your code however you want and then pass it in.

On Mon, Oct 15, 2018 at 9:02 AM frodsan via Ruby on Rails: Core <[hidden email]> wrote:
Hi,

After doing some React and inspired by https://github.com/JedWatson/classnames, what do you think about adding a helper method to conditionally join classes.

For example, we have this code in our app to conditionally add classes to a div:

<div class="project <%= project.status.active? ? 'active' : '' %> <%= project.owner == current_user ?  'owner' : '' %>

<% content_tag(:div, class: "project #{project.status.active? ? 'active' : ''} #{project.owner == current_user ?  'owner' : ''}"

It will be nice to skip those empty strings with something like this:

<div class="class_names('project', 'active' => project.status.active?, 'owner' => project.owner == current_user)">

content_tag(:div, class: class_names("project", "active" => project.status.active?, "owner" => project.owner == current_user))

Do you think is worth it to put it into Rails?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Core" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/rubyonrails-core.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Core" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/rubyonrails-core.
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: [Feature][ActionView] A helper to conditionally add classes

Filipe W. Lima
In reply to this post by frodsan
I remembered reading a post about that: A Cleaner Way To Set Multiple Conditional CSS Classes for 'link_to'.

It mentions there's already a gem that does that called css-class-string and the do it yourself implementation is really simple as a helper.

On Monday, October 15, 2018 at 6:02:14 AM UTC-3, [hidden email] wrote:
Hi,

After doing some React and inspired by <a href="https://github.com/JedWatson/classnames" target="_blank" rel="nofollow" onmousedown="this.href=&#39;https://www.google.com/url?q\x3dhttps%3A%2F%2Fgithub.com%2FJedWatson%2Fclassnames\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNGXAdZYBagQycELvjAtj9g1q-jo5A&#39;;return true;" onclick="this.href=&#39;https://www.google.com/url?q\x3dhttps%3A%2F%2Fgithub.com%2FJedWatson%2Fclassnames\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNGXAdZYBagQycELvjAtj9g1q-jo5A&#39;;return true;">https://github.com/JedWatson/classnames, what do you think about adding a helper method to conditionally join classes.

For example, we have this code in our app to conditionally add classes to a div:

<div class="project <%= project.status.active? ? 'active' : '' %> <%= project.owner == current_user ?  'owner' : '' %>

<% content_tag(:div, class: "project #{project.status.active? ? 'active' : ''} #{project.owner == current_user ?  'owner' : ''}"

It will be nice to skip those empty strings with something like this:

<div class="class_names('project', 'active' => project.status.active?, 'owner' => project.owner == current_user)">

content_tag(:div, class: class_names("project", "active" => project.status.active?, "owner" => project.owner == current_user))

Do you think is worth it to put it into Rails?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Core" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/rubyonrails-core.
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: [Feature][ActionView] A helper to conditionally add classes

Jake Niemiec
Here is what I use. It is also based on classNames from JavaScriptland. I might remove the .join() now that I know you can pass a string array to class. Thanks Andrew.
def class_names(*classes)
class_array = [(classes.shift if classes.first.is_a? String), classes.first.select { |_, v| v }.keys]
class_array.compact.join(" ")
end

<% content_tag(:div, class: class_names('btn', 'btn-danger': false, 'btn-success': true, btn_other: true)) %>


On Mon, Oct 15, 2018 at 9:23 AM Filipe W. Lima <[hidden email]> wrote:
I remembered reading a post about that: A Cleaner Way To Set Multiple Conditional CSS Classes for 'link_to'.

It mentions there's already a gem that does that called css-class-string and the do it yourself implementation is really simple as a helper.


On Monday, October 15, 2018 at 6:02:14 AM UTC-3, [hidden email] wrote:
Hi,

After doing some React and inspired by https://github.com/JedWatson/classnames, what do you think about adding a helper method to conditionally join classes.

For example, we have this code in our app to conditionally add classes to a div:

<div class="project <%= project.status.active? ? 'active' : '' %> <%= project.owner == current_user ?  'owner' : '' %>

<% content_tag(:div, class: "project #{project.status.active? ? 'active' : ''} #{project.owner == current_user ?  'owner' : ''}"

It will be nice to skip those empty strings with something like this:

<div class="class_names('project', 'active' => project.status.active?, 'owner' => project.owner == current_user)">

content_tag(:div, class: class_names("project", "active" => project.status.active?, "owner" => project.owner == current_user))

Do you think is worth it to put it into Rails?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Core" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/rubyonrails-core.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Core" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/rubyonrails-core.
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: [Feature][ActionView] A helper to conditionally add classes

Stephen Margheim
In reply to this post by frodsan
I have had similar thoughts. I wrote a generic view helper a while back that I bring into all of my applications:

# Clean-stringify an arbitrary collection of `args`.
# Useful for building the `class` attribute values.
def meld(*args)
  args.flatten
      .compact
      .map(&:to_s)
      .map(&:strip)
      .uniq
      .join(' ')
end

I find this a powerful helper for building the class attribute. I even wrote up a small post on the kinds of use-cases and edge-cases it solves for: http://fractaledmind.com/articles/a-function-for-generating-html-attribute-values/

On Monday, October 15, 2018 at 5:02:14 AM UTC-4, [hidden email] wrote:
Hi,

After doing some React and inspired by <a href="https://github.com/JedWatson/classnames" target="_blank" rel="nofollow" onmousedown="this.href=&#39;https://www.google.com/url?q\x3dhttps%3A%2F%2Fgithub.com%2FJedWatson%2Fclassnames\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNGXAdZYBagQycELvjAtj9g1q-jo5A&#39;;return true;" onclick="this.href=&#39;https://www.google.com/url?q\x3dhttps%3A%2F%2Fgithub.com%2FJedWatson%2Fclassnames\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNGXAdZYBagQycELvjAtj9g1q-jo5A&#39;;return true;">https://github.com/JedWatson/classnames, what do you think about adding a helper method to conditionally join classes.

For example, we have this code in our app to conditionally add classes to a div:

<div class="project <%= project.status.active? ? 'active' : '' %> <%= project.owner == current_user ?  'owner' : '' %>

<% content_tag(:div, class: "project #{project.status.active? ? 'active' : ''} #{project.owner == current_user ?  'owner' : ''}"

It will be nice to skip those empty strings with something like this:

<div class="class_names('project', 'active' => project.status.active?, 'owner' => project.owner == current_user)">

content_tag(:div, class: class_names("project", "active" => project.status.active?, "owner" => project.owner == current_user))

Do you think is worth it to put it into Rails?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Core" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
Visit this group at https://groups.google.com/group/rubyonrails-core.
For more options, visit https://groups.google.com/d/optout.