shoelace-rails 0.2.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 43863053db02a41a1fd24e9a2b82f72a10ed5ef99e90bedc142b7cb9a3d94696
-  data.tar.gz: 6615e13ecde994ab1e5c029c84cd3e1bdc5be11a5262fe5b887d0b18b86115e1
+  metadata.gz: 4d765c426ef9b3551956028e292d1fe312f04c85b5e1184d2f44193c348809ae
+  data.tar.gz: 662389bc95dc73c15851d9343304da787d70b6f93bff4dcb16124d42fa8fb7c6
 SHA512:
-  metadata.gz: 5fadffcefc1ac4a5be597e5b6274ea8f5463ee375dd535c6b42f4fb34c02fd8ef0c80dfe4fe7bb889c1096968c83d82b6e7ba5c1641dad7c8cf3761b4723447d
-  data.tar.gz: 56398431cd8865bacaae5daf55a4076b0ab2c5857878a89994c13209fae098273c0fe4d2032b890473b71147074884f476a1dd09f86129e58fcab0810e6e4722
+  metadata.gz: 21e95f106d6c8cff0b8edb1cdfec3d3e5d11e1a477a7ba2eff509035194666cdecadeef43465d8f426ea22082b4ce174fb3e47d82e8f7f9be4aa7e257e4a0e76
+  data.tar.gz: 4eeb6447fb6c65179fd0514e58171ca45045069b87835cb993c8935aa4011e267b308308fffebca5fbe2409013d78548904defba33d8f28716d7370569c19b0b

data/.github/workflows/main.yml

@@ -9,22 +9,24 @@ jobs:
     strategy:
       matrix:
         ruby_version:
+          - '3.2'
           - '3.1'
           - '3.0'
           - '2.7'
-          - 'jruby-9.3.3.0'
+          - 'jruby-9.3'
+          - 'jruby-9.4'
         gemfile:
           - gemfiles/rails_70.gemfile
           - gemfiles/rails_61.gemfile
           - gemfiles/rails_60.gemfile
         exclude:
-          - ruby_version: 'jruby-9.3.3.0'
+          - ruby_version: 'jruby-9.3'
             gemfile: gemfiles/rails_70.gemfile
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     env:
       BUNDLE_GEMFILE: ${{ matrix.gemfile }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
@@ -34,13 +36,13 @@ jobs:
 
   system:
     needs: unit
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.1.0
+          ruby-version: 3.2.0
           bundler-cache: true
       - name: Install dependencies
         run: |
@@ -53,11 +55,11 @@ jobs:
 
   rails_edge:
     needs: system
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     env:
       BUNDLE_GEMFILE: gemfiles/rails_edge.gemfile
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
@@ -72,11 +74,11 @@ jobs:
         gemfile:
           - gemfiles/rails_edge.gemfile
           - gemfiles/rails_70.gemfile
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     env:
       BUNDLE_GEMFILE: ${{ matrix.gemfile }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
@@ -85,13 +87,13 @@ jobs:
       - run: bundle exec rake || echo "Ruby edge test is done."
 
 #  browser_tests:
-#    runs-on: ubuntu-18.04
+#    runs-on: ubuntu-22.04
 #    steps:
-#      - uses: actions/checkout@v2
+#      - uses: actions/checkout@v3
 #      - name: Set up Ruby
 #        uses: ruby/setup-ruby@v1
 #        with:
-#          ruby-version: 3.1.0
+#          ruby-version: 3.2.0
 #          bundler-cache: true
 #      - name: Install dependencies
 #        run: |

data/Appraisals

@@ -1,5 +1,5 @@
 appraise "rails_edge" do
-  git "https://github.com/rails/rails.git" do
+  git "https://github.com/rails/rails.git", branch: "main" do
     gem "rails"
     gem "railties"
     gem "activesupport"

data/CHANGELOG.md

@@ -1,4 +1,42 @@
-## v0.2.0
+## v0.4.0
+
+#### 🚨 Breaking Changes
+
+ - No longer works with 2.0.0-beta.88 and below.
+
+#### ⭐️ Features
+
+ - Support Shoelace.style 2.0.0-beta.88
+
+## [v0.3.0](https://github.com/yuki24/shoelace-rails/tree/v0.3.0)
+
+_<sup>released at 2023-01-05 08:49:23 UTC</sup>_
+
+#### Features
+
+- No longer requires the `sl-form` component ([<tt>4fdbfa1</tt>](https://github.com/yuki24/shoelace-rails/commit/4fdbfa15fa10db9e7240378ca34ebcc494d18f1a))
+- The `#text_area` method now accepts a block ([<tt>5092dc1</tt>](https://github.com/yuki24/shoelace-rails/commit/5092dc1cbc7e8e74552451450804baa378ab1f11))
+- Allow overriding the value attribute for `<sl-select>` ([<tt>1f38be7</tt>](https://github.com/yuki24/shoelace-rails/commit/1f38be73e3335c10e846393ebcf5155d155b00b2))
+- Auto-display labels whenever possible ([<tt>c1e3a95</tt>](https://github.com/yuki24/shoelace-rails/commit/c1e3a950c3e8ac4238ed3e83e4d87467a68eb91f))
+- `<sl-select>` now always has a label by default ([<tt>f9fb5f0</tt>](https://github.com/yuki24/shoelace-rails/commit/f9fb5f0cd74d179241be51510fa1c306481946c9))
+- Support Ruby 3.2 ([<tt>b286cbc</tt>](https://github.com/yuki24/shoelace-rails/commit/b286cbc18930218ab5c82bd8648a51e9c6ce53db))
+- Add `#sl_button_to` ([<tt>e1bdedb</tt>](https://github.com/yuki24/shoelace-rails/commit/e1bdedba4656d89a82c78641644490085da1fa37))
+- Add `#sl_icon_tag` ([<tt>8a2187a</tt>](https://github.com/yuki24/shoelace-rails/commit/8a2187a2800771512fccf2c8231378a77be59df4))
+- Add `#sl_avatar_tag` ([<tt>77dccdb</tt>](https://github.com/yuki24/shoelace-rails/commit/77dccdb24cfc014bd997ffb66ad89ff95afb3ef7))
+- Allow using the `Shoelace::FormBuilder` in a cleaner way ([<tt>43dea33</tt>](https://github.com/yuki24/shoelace-rails/commit/43dea3309c3e0cf9d9b43b6957f6e54ad9497c9f))
+
+#### Bug Fixes
+
+- Fixes a bug where the gem rake tasks are not loaded ([<tt>115bfb3</tt>](https://github.com/yuki24/shoelace-rails/commit/115bfb3d81ca19b5b922a5fb32f46adb1d6e8544))
+- Fixes a bug where values are not properly passed in to `<sl-textarea>` ([<tt>3d16384</tt>](https://github.com/yuki24/shoelace-rails/commit/3d16384554bd4a6143e28e483f8d6bee8fb2e073))
+- Make sure yarn install is always executed before copying shoelace assets ([<tt>98018a2</tt>](https://github.com/yuki24/shoelace-rails/commit/98018a27a29ddc9ff2c2fa066bbe986709803a1d))
+- Fixes a bug where the `@object` needs to respond to `#errors` ([<tt>bb981ed</tt>](https://github.com/yuki24/shoelace-rails/commit/bb981ed05825707cef89d70a7d1699c12cd0ba9b))
+- Fixes a bug where the `size` attr is ignored by the `#text_area` method ([<tt>8bc4c37</tt>](https://github.com/yuki24/shoelace-rails/commit/8bc4c3784a458e7fc9c18a143578b2cbf588e9e7))
+- Fixes a bug where unchecked checkbox values are not captured ([<tt>dc658be</tt>](https://github.com/yuki24/shoelace-rails/commit/dc658bea9fc4d4205dacdfe133b091c5a5edf14c))
+
+## [v0.2.0](https://github.com/yuki24/shoelace-rails/tree/v0.2.0)
+
+_<sup>released at 2022-06-24 05:14:01 UTC</sup>_
 
 #### Features
 

data/README.md

@@ -2,11 +2,12 @@
 
 The `shoelace-rails` gem adds useful helper methods for [Shoelace.style](https://shoelace.style), the design system.
 
-## Installation
+## Compatibility with Shoelace
+
+* **For Shoelace version >= 2.0.0-beta.88, use the gem version `0.4.0` or above**.
+* For Shoelace version <= 2.0.0-beta.87, use the gem version `0.3.0`.
 
-This document assumes that you use the [`webpacker`](https://github.com/rails/webpacker) or
-the [`jsbundling-rails`](https://github.com/rails/jsbundling-rails) gem. You may have to tweak the examples here if
-you do not use it. However, the principle here should be the same regardless of the JS bundler you use.
+## Installation
 
 Add this line to your application's Gemfile:
 
@@ -70,7 +71,11 @@ Shoelace icons are automatically set up to load properly, so you don't need to a
 
 ## View Helpers
 
-As explained above, this gem provides drop-in replacements to. Here is a short example of how the form helper works:
+As explained above, this gem provides drop-in replacements to Rails view helpers.
+
+### Form Helpers
+
+The `sl_form_with` or `sl_form_for` method could be used to generate a form with the Shoelace components:
 
 ```erb
 <%= sl_form_for @user do |form| %>
@@ -115,6 +120,81 @@ And this code will produce:
 </form>
 ```
 
+#### Using The `sl-select` component with `multiple`
+
+TDB
+
+#### Using the Shoelace FormBuilder with other gems
+
+Sometimes you want to use the Shoelace FormBuilder with other gems, such as [ransack](https://github.com/activerecord-hackery/ransack).
+In this case, you can not use the `sl_form_for` or `sl_form_with` methods in tandem with `ransack`, but you can use
+the `Shoelace::FormBuilder` with e.g. [the `search_form_for` method](https://activerecord-hackery.github.io/ransack/getting-started/simple-mode/#form-helper):
+
+```erb
+<%= search_form_for @q, builder: Shoelace::FormBuilder do |form| %>
+  ...
+<% end %>
+```
+
+### Tag Helpers
+
+#### `#sl_avatar_tag`
+
+The `@sl_avatar_tag` method behaves just like the `image_tag` method.
+
+```erb
+<%= sl_avatar_tag "/path/to/image.jpg" %>
+```
+
+Will produce:
+
+```html
+<sl-avatar image="/path/to/image.jpg"></sl-avatar>
+```
+
+#### `#sl_button_to`
+
+The `sl_button_to` method behaves just like the `link_to` method. Note that this is slightly different from the
+built-in `button_to` method.
+
+Without a block:
+
+```erb
+<%= sl_button_to "Next Page", "/components?page=2" %>
+```
+
+```html
+<sl-button href="/components?page=2">
+  Next Page
+</sl-button>
+```
+
+With a block:
+
+```erb
+<%= sl_button_to "/components?page=2" do %>
+  Next Page 
+<% end %>
+```
+
+```html
+<sl-button href="/components?page=2">
+ Next Page
+</sl-button>
+```
+
+#### `#sl_icon_tag`
+
+The `sl_icon_tag` method takes the `name` attribute value as the first argument:
+
+```erb
+<%= sl_icon_tag "apple" %>
+```
+
+```html
+<sl-icon name="apple"></sl-icon>
+```
+
 ## Development
 
  1. Run `bundle install`

data/app/helpers/shoelace/form_helper.rb

@@ -2,11 +2,8 @@
 
 module Shoelace
   module FormHelper
-    mattr_accessor :use_sl_form_tag
-    self.use_sl_form_tag = false
-
-    mattr_accessor :remote_form
-    self.remote_form = false
+    mattr_accessor :invalid_input_class_name
+    self.invalid_input_class_name = nil
 
     class ShoelaceInputField < ActionView::Helpers::Tags::TextField #:nodoc:
       attr_reader :field_type
@@ -24,7 +21,8 @@ module Shoelace
 
         options["size"] = options["maxlength"] unless options.key?("size")
         options["type"] ||= field_type
-        options["invalid"] = options.fetch("invalid") { @object.errors[@method_name].presence }
+        options["class"] ||= [options["class"], Shoelace::FormHelper.invalid_input_class_name].compact.join(" ") if @object.respond_to?(:errors) && @object.errors[@method_name].present?
+
         add_default_name_and_id(options)
 
         @template_object.content_tag('sl-input', '', options, &block)
@@ -68,10 +66,12 @@ module Shoelace
     end
 
     class ShoelaceTextArea < ActionView::Helpers::Tags::TextArea #:nodoc:
-      def content_tag(tag_name, content, options)
-        options[:value] = content if content.present?
+      def render(&block)
+        options = @options.stringify_keys
+        options["value"] = options.fetch("value") { value_before_type_cast }
+        add_default_name_and_id(options)
 
-        tag_name.to_s == 'textarea' ? super('sl-textarea', '', options) : super
+        @template_object.content_tag("sl-textarea", '', options, &block)
       end
     end
 
@@ -86,7 +86,7 @@ module Shoelace
 
       def select_content_tag(option_tags, _options, html_options)
         html_options = html_options.stringify_keys
-        html_options['value']= value
+        html_options['value'] ||= value
         add_default_name_and_id(html_options)
 
         @template_object.content_tag("sl-select", option_tags, html_options)
@@ -100,7 +100,7 @@ module Shoelace
 
       def select_content_tag(option_tags, _options, html_options)
         html_options = html_options.stringify_keys
-        html_options['value']= value
+        html_options['value'] ||= value
         add_default_name_and_id(html_options)
 
         @template_object.content_tag("sl-select", option_tags, html_options)
@@ -120,10 +120,18 @@ module Shoelace
           add_default_name_and_id(options)
         end
 
-        if block_given?
-          @template_object.content_tag('sl-checkbox', '', options, &block)
+        include_hidden = options.delete("include_hidden") { true }
+
+        sl_checkbox_tag = if block_given?
+                            @template_object.content_tag('sl-checkbox', '', options, &block)
+                          else
+                            @template_object.content_tag('sl-checkbox', @method_name.to_s.humanize, options)
+                          end
+
+        if include_hidden
+          hidden_field_for_checkbox(options) + sl_checkbox_tag
         else
-          @template_object.content_tag('sl-checkbox', @method_name.to_s.humanize, options)
+          sl_checkbox_tag
         end
       end
     end
@@ -198,7 +206,7 @@ module Shoelace
       alias color_picker color_field
 
       def range_field(method, **options)
-        ShoelaceRange.new(object_name, method, @template, options.with_defaults(object: @object)).render
+        ShoelaceRange.new(object_name, method, @template, options.with_defaults(object: @object, label: method.to_s.humanize)).render
       end
       alias range range_field
 
@@ -207,8 +215,8 @@ module Shoelace
       end
       alias switch switch_field
 
-      def text_area(method, **options)
-        ShoelaceTextArea.new(object_name, method, @template, options.with_defaults(object: @object, resize: 'auto')).render
+      def text_area(method, **options, &block)
+        ShoelaceTextArea.new(object_name, method, @template, options.with_defaults(object: @object, label: method.to_s.humanize, resize: 'auto')).render(&block)
       end
 
       def check_box(method, options = {}, checked_value = "1", unchecked_value = "0", &block)
@@ -216,11 +224,11 @@ module Shoelace
       end
 
       def select(method, choices = nil, options = {}, html_options = {}, &block)
-        ShoelaceSelect.new(object_name, method, @template, choices, options.with_defaults(object: @object), html_options, &block).render
+        ShoelaceSelect.new(object_name, method, @template, choices, options.with_defaults(object: @object), html_options.with_defaults(label: method.to_s.humanize), &block).render
       end
 
       def collection_select(method, collection, value_method, text_method, options = {}, html_options = {}, &block)
-        ShoelaceCollectionSelect.new(object_name, method, @template, collection, value_method, text_method, options.with_defaults(object: @object), html_options, &block).render
+        ShoelaceCollectionSelect.new(object_name, method, @template, collection, value_method, text_method, options.with_defaults(object: @object), html_options.with_defaults(label: method.to_s.humanize), &block).render
       end
 
       def collection_radio_buttons(method, collection, value_method, text_method, options = {}, html_options = {}, &block)
@@ -234,118 +242,19 @@ module Shoelace
       end
     end
 
-    DEFAULT_FORM_PARAMETERS = {
-      builder: ShoelaceFormBuilder,
-      data: {
-        remote: true,
-      }
-    }
-
-    DEFAULT_TURBO_FORM_PARAMETERS = {
-      builder: ShoelaceFormBuilder,
-    }
-
+    DEFAULT_FORM_PARAMETERS = { builder: ShoelaceFormBuilder }
     DIVIDER_TAG = "<sl-divider></sl-divider>".html_safe
-    OPENING_SL_FORM_TAG = '<sl-form'.html_safe
-    CLOSING_SL_FORM_TAG = '</sl-form>'.html_safe
-    OPENING_SL_TURBO_FORM_TAG = '<sl-turbo-form'.html_safe
-    CLOSING_SL_TURBO_FORM_TAG = '</sl-turbo-form>'.html_safe
 
-    private_constant :DEFAULT_FORM_PARAMETERS, :DIVIDER_TAG, :OPENING_SL_FORM_TAG, :CLOSING_SL_FORM_TAG, :OPENING_SL_TURBO_FORM_TAG, :CLOSING_SL_TURBO_FORM_TAG
+    private_constant :DEFAULT_FORM_PARAMETERS, :DIVIDER_TAG
 
     def sl_form_for(*args, **options, &block)
-      form_params = if ::Shoelace::FormHelper.remote_form
-                      DEFAULT_FORM_PARAMETERS.deep_merge(options)
-                    else
-                      DEFAULT_FORM_PARAMETERS.without(:data).merge(options)
-                    end
-
-      content = form_for(*args, **form_params, &block)
-
-      if ::Shoelace::FormHelper.use_sl_form_tag
-        content[0, 5]  = OPENING_SL_FORM_TAG
-        content[-7, 7] = CLOSING_SL_FORM_TAG
-      end
-
-      content
+      form_for(*args, **DEFAULT_FORM_PARAMETERS, **options, &block)
     end
 
     def sl_form_with(**args, &block)
-      content = form_with(**args, **DEFAULT_FORM_PARAMETERS.except(:data), &block)
-
-      if ::Shoelace::FormHelper.use_sl_form_tag
-        content[0, 5]  = OPENING_SL_FORM_TAG
-        content[-7, 7] = CLOSING_SL_FORM_TAG
-      end
-
-      content
+      form_with(**args, **DEFAULT_FORM_PARAMETERS, &block)
     end
 
-    def sl_form_tag(url_for_options = {}, options = {}, &block)
-      content = form_tag(url_for_options, options.with_defaults(DEFAULT_FORM_PARAMETERS.except(:builder)), &block)
-
-      if ::Shoelace::FormHelper.use_sl_form_tag
-        content[0, 5]  = OPENING_SL_FORM_TAG
-        content[-7, 7] = CLOSING_SL_FORM_TAG
-      end
-
-      content
-    end
-
-    def sl_turbo_form_for(*args, **options, &block)
-      content = form_for(*args, **DEFAULT_TURBO_FORM_PARAMETERS.merge(options), &block)
-
-      if ::Shoelace::FormHelper.use_sl_form_tag
-        content[0, 5]  = OPENING_SL_TURBO_FORM_TAG
-        content[-7, 7] = CLOSING_SL_TURBO_FORM_TAG
-      end
-
-      content
-    end
-
-    def sl_turbo_form_with(**args, &block)
-      content = form_with(**args, **DEFAULT_TURBO_FORM_PARAMETERS, &block)
-
-      if ::Shoelace::FormHelper.use_sl_form_tag
-        content[0, 5]  = OPENING_SL_TURBO_FORM_TAG
-        content[-7, 7] = CLOSING_SL_TURBO_FORM_TAG
-      end
-
-      content
-    end
-
-    def sl_turbo_form_tag(url_for_options = {}, options = {}, &block)
-      content = form_tag(url_for_options, options.with_defaults(DEFAULT_TURBO_FORM_PARAMETERS.except(:builder)), &block)
-
-      if ::Shoelace::FormHelper.use_sl_form_tag
-        content[0, 5]  = OPENING_SL_TURBO_FORM_TAG
-        content[-7, 7] = CLOSING_SL_TURBO_FORM_TAG
-      end
-
-      content
-    end
-
-    # Creates a generic +<sl-button>+ element.
-    def sl_button_tag(**attrs, &block)
-      content_tag("sl-button", **attrs, &block)
-    end
-
-    # Not providing this helper for now due to potentially untraceable HTML. E.g.
-    #
-    #   <a href="...">
-    #     <sl-button>...</sl-button>
-    #   </a>
-    #
-    # may be trackable and traceable by search bots and scrapers, but:
-    #
-    #   <sl-button href="...">...</sl-button>
-    #
-    # may not be. In the mean time, it is advisable to wrap a <sl-button> tag with an <a> tag.
-    #
-    # def sl_button_to(href, **attrs, &block)
-    #   sl_button_tag(href: href, **attrs, &block)
-    # end
-
     # Creates a submit button with the text value as the caption, with the +submit+ attribute.
     def sl_submit_tag(value = 'Save changes', **options)
       options = options.deep_stringify_keys
@@ -365,7 +274,7 @@ module Shoelace
       content_tag('sl-input', '', { "type" => "text", "name" => name, "id" => sanitize_to_id(name), "value" => value }.update(options.stringify_keys), &block)
     end
 
-    # Returns a string of +<sl-menu-item>+ tags, like +options_for_select+, but prepends a +<sl-menu-label>+ tag to
+    # Returns a string of +<sl-option>+ tags, like +options_for_select+, but prepends a +<small>+ tag to
     # each group.
     def grouped_sl_options_for_select(grouped_options, options)
       body = "".html_safe
@@ -374,14 +283,14 @@ module Shoelace
         label, values = container
 
         body.safe_concat(DIVIDER_TAG) if index > 0
-        body.safe_concat(content_tag("sl-menu-label", label)) if label.present?
+        body.safe_concat(content_tag("small", label)) if label.present?
         body.safe_concat(sl_options_for_select(values, options))
       end
 
       body
     end
 
-    # Accepts an enumerable (hash, array, enumerable, your type) and returns a string of +sl-menu-item+ tags. Given
+    # Accepts an enumerable (hash, array, enumerable, your type) and returns a string of +sl-option+ tags. Given
     # an enumerable where the elements respond to +first+ and +last+ (such as a two-element array), the “lasts” serve
     # as option values and the “firsts” as option text.
     def sl_options_for_select(enumerable, options = nil)
@@ -397,11 +306,11 @@ module Shoelace
         html_attributes[:disabled] ||= disabled.include?(value)
         html_attributes[:value] = value
 
-        tag_builder.content_tag_string('sl-menu-item', text, html_attributes)
+        tag_builder.content_tag_string('sl-option', text, html_attributes)
       end.join("\n").html_safe
     end
 
-    # Returns a string of +<sl-menu-item>+ tags compiled by iterating over the collection and assigning the result of
+    # Returns a string of +<sl-option>+ tags compiled by iterating over the collection and assigning the result of
     # a call to the +value_method+ as the option value and the +text_method+ as the option text.
     def sl_options_from_collection_for_select(collection, value_method, text_method, selected = nil)
       options = collection.map do |element|
@@ -448,4 +357,6 @@ module Shoelace
       RUBY
     end
   end
+
+  FormBuilder = FormHelper::ShoelaceFormBuilder
 end

data/app/helpers/shoelace/tag_helper.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Shoelace
+  module TagHelper
+    # Creates a generic +<sl-button>+ element.
+    def sl_button_tag(**attrs, &block)
+      content_tag("sl-button", **attrs, &block)
+    end
+
+    # Creates an <sl-button> tag with the href value as the caption.
+    def sl_button_to(body, href = nil, **attrs, &block)
+      if block_given?
+        sl_button_tag(href: body, **(href || {}), **attrs, &block)
+      else
+        sl_button_tag(href: href, **attrs) { body }
+      end
+    end
+
+    def sl_icon_tag(name, **attrs)
+      tag.sl_icon(name: name, **attrs)
+    end
+
+    def sl_avatar_tag(source, **attrs, &block)
+      tag.sl_avatar(image: source, **attrs, &block)
+    end
+  end
+end

data/gemfiles/rails_edge.gemfile

@@ -2,7 +2,7 @@
 
 source "https://rubygems.org"
 
-git "https://github.com/rails/rails.git" do
+git "https://github.com/rails/rails.git", branch: "main" do
   gem "rails"
   gem "railties"
   gem "activesupport"

data/lib/shoelace/rails/version.rb

@@ -2,6 +2,6 @@
 
 module Shoelace
   module Rails
-    VERSION = "0.2.0"
+    VERSION = "0.4.0"
   end
 end

data/lib/shoelace/railtie.rb

@@ -23,18 +23,32 @@ module Shoelace
 
   class Railtie < ::Rails::Railtie #:nodoc:
     config.shoelace = ActiveSupport::OrderedOptions.new
-    config.shoelace.use_sl_form_tag = false
-    config.shoelace.dist_path       = "node_modules/@shoelace-style/shoelace/dist"
+
+    # Path to the shoelace assets.
+    config.shoelace.dist_path = "node_modules/@shoelace-style/shoelace/dist"
+
+    # Class name that is added to a form input when the corresponding attribute has an `ActiveModel` error.
+    config.shoelace.invalid_input_class_name = nil
 
     initializer "shoelace.use_rack_middleware" do |app|
       icon_dir = File.join(app.paths["public"].first, "assets/icons")
 
       if !Dir.exist?(icon_dir)
-        path    = app.root.join(config.shoelace.dist_path).to_s
+        path    = app.root.join(app.config.shoelace.dist_path).to_s
         headers = app.config.public_file_server.headers || {}
 
         app.config.middleware.insert_after ActionDispatch::Static, Shoelace::AssetProvider, path, index: "index.html", headers: headers
       end
     end
+
+    initializer "shoelace.form_helper" do |app|
+      ActiveSupport.on_load :action_view do
+        Shoelace::FormHelper.invalid_input_class_name = app.config.shoelace.invalid_input_class_name
+      end
+    end
+
+    rake_tasks do
+      load "tasks/shoelace.rake"
+    end
   end
 end

data/lib/shoelace/testing.rb

@@ -7,7 +7,7 @@ module Shoelace
       select_element.click
 
       within select_element do
-        find('sl-menu-item', text: option_text).click
+        find('sl-option', text: option_text).click
       end
 
       select_element
@@ -19,7 +19,7 @@ module Shoelace
       select_element.click
       within select_element do
         options_to_select.each do |option_text|
-          find('sl-menu-item', text: option_text).click
+          find('sl-option', text: option_text).click
         end
       end
 

data/lib/tasks/{assets.rake → shoelace.rake}

@@ -12,6 +12,9 @@ namespace :shoelace do
   end
 end
 
+# Make sure `yarn install` is run before running `shoelace:icons:copy`.
+Rake::Task["shoelace:icons:copy"].enhance(["javascript:build"])
+
 if Rake::Task.task_defined?("assets:precompile")
   Rake::Task["assets:precompile"].enhance(["shoelace:icons:copy"])
 end

data/test/dummy_app/app/views/hotwire_forms/form.html.erb

@@ -1,5 +1,5 @@
 <% locations = { tokyo: "Tokyo", new_york: "New York", london: "London" } %>
-<%= sl_turbo_form_for(@user, url: hotwire_forms_path) do |form| %>
+<%= sl_form_for(@user, url: hotwire_forms_path) do |form| %>
   <div>
     <%= form.text_field :name do %>
       <span slot="help-text" style="color: rgb(var(--sl-color-danger-600));">

data/test/dummy_app/app/views/layouts/application.html.erb

@@ -21,8 +21,8 @@
       }
     </style>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.65/dist/themes/light.css">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.65/dist/shoelace.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.88/dist/themes/light.css">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.88/dist/shoelace.js"></script>
 
     <% if request.path.include?("hotwire") %>
       <%= javascript_pack_tag 'hotwire' %>

data/test/dummy_app/test/system/hotwire_form_test.rb

@@ -22,7 +22,6 @@ class HotwireFormTest < ApplicationSystemTestCase
     assert_current_path hotwire_form_path(1)
     assert_text "Name: Yuki Nishijima"
     assert_text "Description: I am a human."
-    assert_text "Color: #ffffff"
     assert_text "Score: 50"
     # assert_text "Current City:"
     assert_text "Previous City: tokyo"
@@ -48,7 +47,6 @@ class HotwireFormTest < ApplicationSystemTestCase
     assert_current_path hotwire_form_path(1)
     assert_text "Name: Yuki Nishijima"
     assert_text "Description: I am a human."
-    assert_text "Color: #ffffff"
     assert_text "Score: 50"
     # assert_text "Current City:"
     assert_text "Previous City: tokyo"

data/test/dummy_app/test/system/turbolinks_form_test.rb

@@ -22,7 +22,6 @@ class TurbolinksFormTest < ApplicationSystemTestCase
     assert_current_path turbolinks_forms_path
     assert_text "Name: Yuki Nishijima"
     assert_text "Description: I am a human."
-    assert_text "Color: #ffffff"
     assert_text "Score: 50"
     # assert_text "Current City:"
     assert_text "Previous City: tokyo"

data/test/helpers/form_helper_test.rb

@@ -44,26 +44,12 @@ class FormHelperTest < ActionView::TestCase
     HTML
   end
 
-  test "#sl_button_tag" do
-    assert_dom_equal(<<~HTML, sl_button_tag { "Submit" })
-      <sl-button>Submit</sl-button>
-    HTML
-  end
-
   test "#sl_radio_button" do
     assert_dom_equal(<<~HTML, sl_radio_button(:user, :name, 'userid-314', checked: true) { "Yuki Nishijima" })
       <sl-radio value="userid-314" checked="checked" name="user[name]" id="user_name_userid-314">Yuki Nishijima</sl-radio>
     HTML
   end
 
-  test "#sl_form_tag" do
-    assert_dom_equal(<<~HTML, sl_form_tag("/posts") { })
-      <form data-remote="true" action="/posts" accept-charset="UTF-8" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" #{AUTOCOMPLETE_ATTRIBUTE} />
-      </sl-form>
-    HTML
-  end
-
   test "#sl_form_with" do
     assert_dom_equal(<<~HTML, sl_form_with(url: "/") {})
       <form action="/" accept-charset="UTF-8" data-remote="true" method="post">
@@ -80,30 +66,6 @@ class FormHelperTest < ActionView::TestCase
     HTML
   end
 
-  test "#sl_turbo_form_tag" do
-    assert_dom_equal(<<~HTML, sl_turbo_form_tag("/posts") { })
-      <form action="/posts" accept-charset="UTF-8" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" #{AUTOCOMPLETE_ATTRIBUTE} />
-      </form>
-    HTML
-  end
-
-  test "#sl_turbo_form_with" do
-    assert_dom_equal(<<~HTML, sl_turbo_form_with(url: "/") {})
-      <form action="/" accept-charset="UTF-8" data-remote="true" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" #{AUTOCOMPLETE_ATTRIBUTE} />
-      </form>
-    HTML
-  end
-
-  test "#sl_turbo_form_for" do
-    assert_dom_equal(<<~HTML, sl_turbo_form_for(User.new, url: "/") { })
-      <form class="new_user" id="new_user" action="/" accept-charset="UTF-8" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" #{AUTOCOMPLETE_ATTRIBUTE} />
-      </form>
-    HTML
-  end
-
   test "#text_field" do
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.text_field(:name)
@@ -195,6 +157,14 @@ class FormHelperTest < ActionView::TestCase
   test "#range_field" do
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.range_field(:name)
+        <sl-range label="Name" name="user[name]" id="user_name"></sl-range>
+      HTML
+    end
+  end
+
+  test "#range_field without a label" do
+    sl_form_for(User.new, url: "/") do |form|
+      assert_dom_equal <<~HTML, form.range_field(:name, label: nil)
         <sl-range name="user[name]" id="user_name"></sl-range>
       HTML
     end
@@ -211,22 +181,92 @@ class FormHelperTest < ActionView::TestCase
   test "#text_area" do
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.text_area(:name)
+        <sl-textarea label="Name" resize="auto" name="user[name]" id="user_name"></sl-textarea>
+      HTML
+    end
+  end
+
+  test "#text_area with a value" do
+    sl_form_for(User.new(name: "Yuki Nishijima"), url: "/") do |form|
+      assert_dom_equal <<~HTML, form.text_area(:name)
+        <sl-textarea label="Name" resize="auto" value="Yuki Nishijima" name="user[name]" id="user_name"></sl-textarea>
+      HTML
+    end
+  end
+
+  test "#text_area with an one-off value" do
+    sl_form_for(User.new(name: "Yuki Nishijima"), url: "/") do |form|
+      assert_dom_equal <<~HTML, form.text_area(:name, value: "Yuki")
+        <sl-textarea label="Name" resize="auto" value="Yuki" name="user[name]" id="user_name"></sl-textarea>
+      HTML
+    end
+  end
+
+  test "#text_area without a label" do
+    sl_form_for(User.new, url: "/") do |form|
+      assert_dom_equal <<~HTML, form.text_area(:name, label: nil)
         <sl-textarea resize="auto" name="user[name]" id="user_name"></sl-textarea>
       HTML
     end
   end
 
-  test "#check_box" do
+  test "#text_area with a size" do
     sl_form_for(User.new, url: "/") do |form|
-      assert_dom_equal <<~HTML, form.check_box(:name)
-        <sl-checkbox value="1" name="user[name]" id="user_name">Name</sl-checkbox>
+      assert_dom_equal <<~HTML, form.text_area(:name, size: "small")
+        <sl-textarea label="Name" resize="auto" size="small" name="user[name]" id="user_name"></sl-textarea>
       HTML
     end
   end
 
+  test "#text_area with a block" do
+    sl_form_for(User.new, url: "/") do |form|
+      expected = <<~HTML
+        <sl-textarea label="Name" resize="auto" name="user[name]" id="user_name">
+          <div slot="help-text">Name can not be blank.</div>
+        </sl-textarea>
+      HTML
+
+      assert_dom_equal(expected, form.text_area(:name) {
+        content_tag(:div, "Name can not be blank.", slot: "help-text")
+      })
+    end
+  end
+
+  test "#check_box" do
+    sl_form_for(User.new, url: "/") do |form|
+      if ActionView::VERSION::STRING >= '6.1.0'
+        assert_dom_equal <<~HTML, form.check_box(:name)
+          <input name="user[name]" type="hidden" value="0" autocomplete="off" />
+          <sl-checkbox value="1" name="user[name]" id="user_name">Name</sl-checkbox>
+        HTML
+      else
+        assert_dom_equal <<~HTML, form.check_box(:name)
+          <input name="user[name]" type="hidden" value="0" />
+          <sl-checkbox value="1" name="user[name]" id="user_name">Name</sl-checkbox>
+        HTML
+      end
+    end
+  end
+
   test "#check_box with a block" do
     sl_form_for(User.new, url: "/") do |form|
-      assert_dom_equal <<~HTML, form.check_box(:name) { "Maintainer Name" }
+      if ActionView::VERSION::STRING >= '6.1.0'
+        assert_dom_equal <<~HTML, form.check_box(:name) { "Maintainer Name" }
+          <input name="user[name]" type="hidden" value="0" autocomplete="off" />
+          <sl-checkbox value="1" name="user[name]" id="user_name">Maintainer Name</sl-checkbox>
+        HTML
+      else
+        assert_dom_equal <<~HTML, form.check_box(:name) { "Maintainer Name" }
+          <input name="user[name]" type="hidden" value="0" />
+          <sl-checkbox value="1" name="user[name]" id="user_name">Maintainer Name</sl-checkbox>
+        HTML
+      end
+    end
+  end
+
+  test "#check_box without a hidden input" do
+    sl_form_for(User.new, url: "/") do |form|
+      assert_dom_equal <<~HTML, form.check_box(:name, include_hidden: false) { "Maintainer Name" }
         <sl-checkbox value="1" name="user[name]" id="user_name">Maintainer Name</sl-checkbox>
       HTML
     end
@@ -241,10 +281,46 @@ class FormHelperTest < ActionView::TestCase
 
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.select(:name, users)
-        <sl-select name="user[name]" id="user_name">
-          <sl-menu-item value="1">Yuki Nishijima</sl-menu-item>
-          <sl-menu-item value="2">Matz</sl-menu-item>
-          <sl-menu-item value="3">Koichi Sasada</sl-menu-item>
+        <sl-select label="Name" name="user[name]" id="user_name">
+          <sl-option value="1">Yuki Nishijima</sl-option>
+          <sl-option value="2">Matz</sl-option>
+          <sl-option value="3">Koichi Sasada</sl-option>
+        </sl-select>
+      HTML
+    end
+  end
+
+  test "#select with a custom value" do
+    users = {
+      "Yuki Nishijima" => 1,
+      "Matz" => 2,
+      "Koichi Sasada" => 3
+    }
+
+    sl_form_for(User.new, url: "/") do |form|
+      assert_dom_equal <<~HTML, form.select(:name, users, {}, { value: 3 })
+        <sl-select label="Name" value="3" name="user[name]" id="user_name">
+          <sl-option value="1">Yuki Nishijima</sl-option>
+          <sl-option value="2">Matz</sl-option>
+          <sl-option value="3">Koichi Sasada</sl-option>
+        </sl-select>
+      HTML
+    end
+  end
+
+  test "#select with custom selected and disabled values" do
+    users = {
+      "Yuki Nishijima" => 1,
+      "Matz" => 2,
+      "Koichi Sasada" => 3
+    }
+
+    sl_form_for(User.new, url: "/") do |form|
+      assert_dom_equal <<~HTML, form.select(:name, users, selected: 3, disabled: 1)
+        <sl-select label="Name" name="user[name]" id="user_name">
+          <sl-option value="1" disabled="disabled">Yuki Nishijima</sl-option>
+          <sl-option value="2">Matz</sl-option>
+          <sl-option value="3" checked="checked">Koichi Sasada</sl-option>
         </sl-select>
       HTML
     end
@@ -259,10 +335,10 @@ class FormHelperTest < ActionView::TestCase
 
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.select(:name, users, {}, { multiple: true })
-        <sl-select name="user[name][]" id="user_name" multiple="multiple">
-          <sl-menu-item value="1">Yuki Nishijima</sl-menu-item>
-          <sl-menu-item value="2">Matz</sl-menu-item>
-          <sl-menu-item value="3">Koichi Sasada</sl-menu-item>
+        <sl-select label="Name" name="user[name][]" id="user_name" multiple="multiple">
+          <sl-option value="1">Yuki Nishijima</sl-option>
+          <sl-option value="2">Matz</sl-option>
+          <sl-option value="3">Koichi Sasada</sl-option>
         </sl-select>
       HTML
     end
@@ -281,13 +357,13 @@ class FormHelperTest < ActionView::TestCase
 
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.select(:name, users)
-        <sl-select name="user[name]" id="user_name">
-          <sl-menu-label>Main maintainers</sl-menu-label>
-          <sl-menu-item value="2">Matz</sl-menu-item>
-          <sl-menu-item value="3">Koichi Sasada</sl-menu-item>
+        <sl-select label="Name" name="user[name]" id="user_name">
+          <small>Main maintainers</small>
+          <sl-option value="2">Matz</sl-option>
+          <sl-option value="3">Koichi Sasada</sl-option>
           <sl-divider></sl-divider>
-          <sl-menu-label>Default gem maintainers</sl-menu-label>
-          <sl-menu-item value="1">Yuki Nishijima</sl-menu-item>
+          <small>Default gem maintainers</small>
+          <sl-option value="1">Yuki Nishijima</sl-option>
         </sl-select>
       HTML
     end
@@ -304,15 +380,15 @@ class FormHelperTest < ActionView::TestCase
       ]
     }
 
-    sl_form_for(User.new(name: "2"), url: "/") do |form|
+    sl_form_for(User.new(name: 2), url: "/") do |form|
       assert_dom_equal <<~HTML, form.select(:name, users)
-        <sl-select name="user[name]" id="user_name" value="2">
-          <sl-menu-label>Main maintainers</sl-menu-label>
-          <sl-menu-item value="2" checked="checked">Matz</sl-menu-item>
-          <sl-menu-item value="3">Koichi Sasada</sl-menu-item>
+        <sl-select label="Name" name="user[name]" id="user_name" value="2">
+          <small>Main maintainers</small>
+          <sl-option value="2" checked="checked">Matz</sl-option>
+          <sl-option value="3">Koichi Sasada</sl-option>
           <sl-divider></sl-divider>
-          <sl-menu-label>Default gem maintainers</sl-menu-label>
-          <sl-menu-item value="1">Yuki Nishijima</sl-menu-item>
+          <small>Default gem maintainers</small>
+          <sl-option value="1">Yuki Nishijima</sl-option>
         </sl-select>
       HTML
     end
@@ -327,10 +403,10 @@ class FormHelperTest < ActionView::TestCase
 
     sl_form_for(User.new, url: "/") do |form|
       assert_dom_equal <<~HTML, form.collection_select(:name, users, :first, :last)
-        <sl-select name="user[name]" id="user_name">
-          <sl-menu-item value="1">Yuki Nishijima</sl-menu-item>
-          <sl-menu-item value="2">Matz</sl-menu-item>
-          <sl-menu-item value="3">Koichi Sasada</sl-menu-item>
+        <sl-select label="Name" name="user[name]" id="user_name">
+          <sl-option value="1">Yuki Nishijima</sl-option>
+          <sl-option value="2">Matz</sl-option>
+          <sl-option value="3">Koichi Sasada</sl-option>
         </sl-select>
       HTML
     end
@@ -345,10 +421,10 @@ class FormHelperTest < ActionView::TestCase
 
     sl_form_for(User.new(name: "2"), url: "/") do |form|
       assert_dom_equal <<~HTML, form.collection_select(:name, users, :first, :last)
-        <sl-select name="user[name]" id="user_name" value="2">
-          <sl-menu-item value="1">Yuki Nishijima</sl-menu-item>
-          <sl-menu-item value="2" checked="checked">Matz</sl-menu-item>
-          <sl-menu-item value="3">Koichi Sasada</sl-menu-item>
+        <sl-select label="Name" name="user[name]" id="user_name" value="2">
+          <sl-option value="1">Yuki Nishijima</sl-option>
+          <sl-option value="2" checked="checked">Matz</sl-option>
+          <sl-option value="3">Koichi Sasada</sl-option>
         </sl-select>
       HTML
     end

data/test/helpers/tag_helper_test.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+require 'test_helper'
+
+require_relative '../../app/helpers/shoelace/tag_helper'
+
+class TagHelperTest < ActionView::TestCase
+  include Shoelace::TagHelper
+
+  test "#sl_button_tag" do
+    assert_dom_equal(<<~HTML, sl_button_tag { "Submit" })
+      <sl-button>Submit</sl-button>
+    HTML
+  end
+
+  test "#sl_button_to" do
+    assert_dom_equal <<~HTML, sl_button_to("Next", "/next")
+      <sl-button href="/next">Next</sl-button>
+    HTML
+
+    assert_dom_equal <<~HTML, sl_button_to("Next", "/next", class: "mt-1")
+      <sl-button href="/next" class="mt-1">Next</sl-button>
+    HTML
+
+    assert_dom_equal(<<~HTML, sl_button_to("/next") { "Next" })
+      <sl-button href="/next">Next</sl-button>
+    HTML
+
+    assert_dom_equal(<<~HTML, sl_button_to("/next", class: "mt-1") { "Next" })
+      <sl-button href="/next" class="mt-1">Next</sl-button>
+    HTML
+
+    assert_dom_equal <<~HTML, sl_button_to("Next")
+      <sl-button>Next</sl-button>
+    HTML
+  end
+
+  test "#sl_icon_tag"do
+    assert_dom_equal <<~HTML, sl_icon_tag("0-circle-fill")
+      <sl-icon name="0-circle-fill"></sl-icon>
+    HTML
+
+    assert_dom_equal <<~HTML, sl_icon_tag("0-circle-fill", slot: "icon")
+      <sl-icon name="0-circle-fill" slot="icon"></sl-icon>
+    HTML
+  end
+
+  test "#sl_avatar_tag"do
+    assert_dom_equal <<~HTML, sl_avatar_tag("/path/to/image.jpg")
+      <sl-avatar image="/path/to/image.jpg"></sl-avatar>
+    HTML
+
+    assert_dom_equal(<<~HTML, sl_avatar_tag("/path/to/image.jpg", slot: "trigger") { "Body" })
+      <sl-avatar image="/path/to/image.jpg" slot="trigger">
+        Body
+      </sl-avatar>
+    HTML
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shoelace-rails
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Yuki Nishijima
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2022-06-24 00:00:00.000000000 Z
+date: 2023-01-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -98,6 +98,7 @@ files:
 - README.md
 - Rakefile
 - app/helpers/shoelace/form_helper.rb
+- app/helpers/shoelace/tag_helper.rb
 - bin/console
 - bin/setup
 - dist/.keep
@@ -114,7 +115,7 @@ files:
 - lib/shoelace/rails/version.rb
 - lib/shoelace/railtie.rb
 - lib/shoelace/testing.rb
-- lib/tasks/assets.rake
+- lib/tasks/shoelace.rake
 - package.json
 - rollup.config.js
 - shoelace-rails.gemspec
@@ -166,6 +167,7 @@ files:
 - test/dummy_app/test/system/turbolinks_form_test.rb
 - test/dummy_app/test/test_helper.rb
 - test/helpers/form_helper_test.rb
+- test/helpers/tag_helper_test.rb
 - test/test_helper.rb
 - tsconfig.json
 - yarn.lock
@@ -191,7 +193,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.7
+rubygems_version: 3.4.2
 signing_key:
 specification_version: 4
 summary: Rails view helpers Shoelace.style, the design system.