ArgumentError when following readme for Rails

[drewhoffer]

Versions:

class_variants: 1.0
rails: 8.0.1
ruby-3.3.4

Hey I'm trying to get running with a Rails 8 app with this gem.

I've installed and created a StyleHelper taken from the getting started:

module StyleHelper
  def button_classes(classes, **args)
    class_variants(
      base: "inline-flex items-center rounded border border-transparent font-medium text-white hover:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2",
      variants: {
        size: {
          sm: "px-2.5 py-1.5 text-xs",
          md: "px-3 py-2 text-sm",
          lg: "px-4 py-2 text-sm",
          xl: "px-4 py-2 text-base"
        },
        color: {
          indigo: "bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500",
          red: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
          blue: "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500"
        }
      },
      defaults: {
        size: :md,
        color: :indigo
      }
    )
  end
end

But I am now getting an error in my view from:

<%= form.submit "Sign up", class: button_classes.render(size: :sm) %>

The error im getting is:

Figured I would post here in case of newcomers running into same issue.

Any help would be appreciated, I will post the steps I took to resolve this if I do tonight.

[drewhoffer]

I found a fix using:

module StyleHelper
  def button_classes(classes = "", **args)
    ClassVariants.build(
      base: "inline-flex items-center rounded border border-transparent font-medium text-white hover:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2",
      variants: {
        size: {
          sm: "px-2.5 py-1.5 text-xs",
          md: "px-3 py-2 text-sm",
          lg: "px-4 py-2 text-sm",
          xl: "px-4 py-2 text-base"
        },
        color: {
          indigo: "bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500",
          red: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
          blue: "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500"
        }
      },
      compound_variants: [],
      defaults: {
        size: :md,
        color: :indigo
      }
    )
  end
end

<%= form.submit "Sign up", class: button_classes.render(size: :lg) %>

Let me know if this is the best way to do it. Thanks

[javierav]

Good catch @drewhoffer, there's a mistake in the README example and in the view helper implementation. I've uploaded a correction in #30 for @adrianthedev to review.

Can you try this in your Gemfile to verify that it works for you now until a version that fixes this is uploaded to rubygems?

gem "class_variants", github: "javierav/class_variants", branch: "fix-helper"

You should also modify your helper to look like this:

module StyleHelper
  def button_classes
    ClassVariants.build(
      base: "inline-flex items-center rounded border border-transparent font-medium text-white hover:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2",
      variants: {
        size: {
          sm: "px-2.5 py-1.5 text-xs",
          md: "px-3 py-2 text-sm",
          lg: "px-4 py-2 text-sm",
          xl: "px-4 py-2 text-base"
        },
        color: {
          indigo: "bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500",
          red: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
          blue: "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500"
        }
      },
      compound_variants: [],
      defaults: {
        size: :md,
        color: :indigo
      }
    )
  end
end

[drewhoffer]

Works for me, thanks @javierav