From b4051f65181e9b5461da2e9fd3d66e515d70e608 Mon Sep 17 00:00:00 2001 From: Eugene Chaikin Date: Fri, 28 Feb 2025 15:21:12 +0100 Subject: [PATCH 1/4] Extract UI checkbox component outside of Forms namespace This is the first step to refactor checkbox component, so it can be used as a separate element or as a form control. --- .../solidus_admin/ui/checkbox/component.rb | 42 ++++++++++++++ .../solidus_admin/ui/table/component.rb | 4 +- .../table/ransack_filter/component.html.erb | 2 +- .../ui/checkbox/component_preview.rb | 58 +++++++++++++++++++ .../component_preview/overview.html.erb | 32 ++++++++++ .../ui/checkbox/component_spec.rb | 9 +++ 6 files changed, 144 insertions(+), 3 deletions(-) create mode 100644 admin/app/components/solidus_admin/ui/checkbox/component.rb create mode 100644 admin/spec/components/previews/solidus_admin/ui/checkbox/component_preview.rb create mode 100644 admin/spec/components/previews/solidus_admin/ui/checkbox/component_preview/overview.html.erb create mode 100644 admin/spec/components/solidus_admin/ui/checkbox/component_spec.rb diff --git a/admin/app/components/solidus_admin/ui/checkbox/component.rb b/admin/app/components/solidus_admin/ui/checkbox/component.rb new file mode 100644 index 0000000000..14619f36a2 --- /dev/null +++ b/admin/app/components/solidus_admin/ui/checkbox/component.rb @@ -0,0 +1,42 @@ +# frozen_string_literal: true + +class SolidusAdmin::UI::Checkbox::Component < SolidusAdmin::BaseComponent + SIZES = { + s: 'w-4 h-4', + m: 'w-5 h-5', + }.freeze + + def initialize(size: :m, **attributes) + @size = size + @attributes = attributes + end + + def call + tag.input( + type: 'checkbox', + class: " + #{SIZES.fetch(@size)} + form-checkbox + cursor-pointer + disabled:cursor-not-allowed + + bg-white rounded border border-2 border-gray-300 + hover:border-gray-700 + focus:ring focus:ring-gray-300 focus:ring-0.5 focus:bg-white focus:ring-offset-0 + active:ring active:ring-gray-300 active:ring-0.5 + disabled:border-gray-300 + + indeterminate:border-gray-700 indeterminate:bg-gray-700 indeterminate:text-white + indeterminate:hover:border-gray-500 indeterminate:hover:bg-gray-500 + indeterminate:focus:bg-gray-700 + indeterminate:disabled:border-gray-300 indeterminate:disabled:bg-gray-300 + + checked:border-gray-700 checked:bg-gray-700 checked:text-white + checked:hover:border-gray-500 checked:hover:bg-gray-500 + checked:focus:bg-gray-700 + checked:disabled:border-gray-300 checked:disabled:bg-gray-300 + ", + **@attributes, + ) + end +end diff --git a/admin/app/components/solidus_admin/ui/table/component.rb b/admin/app/components/solidus_admin/ui/table/component.rb index 640c07da90..d8396aa262 100644 --- a/admin/app/components/solidus_admin/ui/table/component.rb +++ b/admin/app/components/solidus_admin/ui/table/component.rb @@ -71,7 +71,7 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent def selectable_column @selectable_column ||= Column.new( header: -> { - component("ui/forms/checkbox").new( + component("ui/checkbox").new( form: batch_actions_form_id, "data-action": "#{stimulus_id}#selectAllRows", "data-#{stimulus_id}-target": "headerCheckbox", @@ -79,7 +79,7 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent ) }, data: ->(data) { - component("ui/forms/checkbox").new( + component("ui/checkbox").new( name: "id[]", form: batch_actions_form_id, value: data.id, diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb index 5c4a5c051b..b7c03cf6e5 100644 --- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb +++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb @@ -46,7 +46,7 @@ name="<%= selection.predicate.name %>" value="<%= selection.predicate.value %>"> - <%= render component('ui/forms/checkbox').new( + <%= render component('ui/checkbox').new( id: selection.id, name: selection.option.name, value: selection.option.value, diff --git a/admin/spec/components/previews/solidus_admin/ui/checkbox/component_preview.rb b/admin/spec/components/previews/solidus_admin/ui/checkbox/component_preview.rb new file mode 100644 index 0000000000..c4f7c1824d --- /dev/null +++ b/admin/spec/components/previews/solidus_admin/ui/checkbox/component_preview.rb @@ -0,0 +1,58 @@ +# frozen_string_literal: true + +# @component "ui/checkbox" +class SolidusAdmin::UI::Checkbox::ComponentPreview < ViewComponent::Preview + include SolidusAdmin::Preview + + # **With a form builder** + # + # The checkbox component is used to render a checkbox input. + # It can be used with a Rails form builder by setting the `name` attribute + # with `forom.object_name`. + # + # ```erb + # <%= form_for @product do |form| %> + # ... + # <%= render component('ui/checkbox').new( + # name: "#{form.object_name}[accept_tos]", + # checked: form.object.accept_tos, + # ) %> + # ... + # <% end %> + # ``` + # + # **With stimulus** + # + # The checkbox component can be used with stimulus to toggle the `indeterminate` + # state of the checkbox. + # + # ```erb + # <%= render component('ui/checkbox').new( + # "data-action": "click->#{stimulus_id}#toggleIndeterminate", + # "data-#{stimulus_id}-target": "checkbox", + # ) %> + # ``` + # + # ```js + # import { Controller } from "stimulus" + # + # export default class extends Controller { + # static targets = ["checkbox"] + # + # toggleIndeterminate() { + # this.checkboxTarget.indeterminate = !this.checkboxTarget.indeterminate + # } + # } + # ``` + # + def overview + render_with_template + end + + # @param size select { choices: [s, m] } + # @param checked toggle + # @param disabled toggle + def playground(size: :m, checked: false, disabled: false) + render current_component.new(size: size.to_sym, checked:, disabled:) + end +end diff --git a/admin/spec/components/previews/solidus_admin/ui/checkbox/component_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/ui/checkbox/component_preview/overview.html.erb new file mode 100644 index 0000000000..e84c7a691e --- /dev/null +++ b/admin/spec/components/previews/solidus_admin/ui/checkbox/component_preview/overview.html.erb @@ -0,0 +1,32 @@ + + + + <% current_component::SIZES.keys.each do |size| %> + + <% end %> + + + + <% current_component::SIZES.keys.each do |size| %> + <% %i[default disabled].each do |state| %> + + <% end %> + <% end %> + + <% %i[off on intermediate].each do |checked| %> + + + <% current_component::SIZES.keys.each do |size| %> + <% %i[default disabled].each do |state| %> + <% cell_id = SecureRandom.uuid %> + + <% end %> + <% end %> + + <% end %> +
<%= size.to_s.humanize %>
<%= state.to_s.humanize %>
<%= checked.to_s.humanize %> + <%= render current_component.new(size: size, checked: checked == :on, disabled: state == :disabled) %> + +
diff --git a/admin/spec/components/solidus_admin/ui/checkbox/component_spec.rb b/admin/spec/components/solidus_admin/ui/checkbox/component_spec.rb new file mode 100644 index 0000000000..0ed323390d --- /dev/null +++ b/admin/spec/components/solidus_admin/ui/checkbox/component_spec.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +require "spec_helper" + +RSpec.describe SolidusAdmin::UI::Checkbox::Component, type: :component do + it "renders the overview preview" do + render_preview(:overview) + end +end From d21177c307081afef992723f7941b54297afa3e9 Mon Sep 17 00:00:00 2001 From: Eugene Chaikin Date: Fri, 28 Feb 2025 15:42:44 +0100 Subject: [PATCH 2/4] Refactor ui/forms/checkbox component to include common form elements Motivation: We have a couple of places throughout the admin where checkboxes are used as part of a form, with all the same elements being reused to construct a checkbox field: - label with some caption; - hidden input field to support sending a "0" value in request; - optional toggletip hint; Few places however lacked the hidden input, therefore the form was not submitting the "0" value correctly. This updated component builds a reusable form checkbox, that encapsulates all the needed layout and logic for a form checkbox to be displayed and work properly, with an interface to customise it to each form needs. --- .../edit/component.html.erb | 14 +--- .../adjustment_reasons/new/component.html.erb | 14 +--- .../orders/show/address/component.html.erb | 20 ++--- .../products/show/component.html.erb | 12 +-- .../refund_reasons/edit/component.html.erb | 14 +--- .../refund_reasons/new/component.html.erb | 13 +-- .../return_reasons/edit/component.html.erb | 14 +--- .../return_reasons/new/component.html.erb | 14 +--- .../edit/component.html.erb | 14 +--- .../new/component.html.erb | 14 +--- .../tax_categories/edit/component.html.erb | 13 +-- .../tax_categories/new/component.html.erb | 13 +-- .../ui/forms/checkbox/component.html.erb | 14 ++++ .../ui/forms/checkbox/component.rb | 55 ++++++------ .../ui/forms/checkbox/component_preview.rb | 66 ++++++--------- .../component_preview/overview.html.erb | 84 ++++++++++++------- 16 files changed, 168 insertions(+), 220 deletions(-) create mode 100644 admin/app/components/solidus_admin/ui/forms/checkbox/component.html.erb diff --git a/admin/app/components/solidus_admin/adjustment_reasons/edit/component.html.erb b/admin/app/components/solidus_admin/adjustment_reasons/edit/component.html.erb index 8cc79b783f..c1e31857bb 100644 --- a/admin/app/components/solidus_admin/adjustment_reasons/edit/component.html.erb +++ b/admin/app/components/solidus_admin/adjustment_reasons/edit/component.html.erb @@ -4,16 +4,10 @@
<%= render component("ui/forms/field").text_field(f, :name, class: "required") %> <%= render component("ui/forms/field").text_field(f, :code, class: "required") %> - + <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> + <%= checkbox.with_caption(text: Spree::AdjustmentReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_hint(text: t(".hints.active")) %> + <% end %>
<% modal.with_actions do %>
diff --git a/admin/app/components/solidus_admin/adjustment_reasons/new/component.html.erb b/admin/app/components/solidus_admin/adjustment_reasons/new/component.html.erb index 8cc79b783f..c1e31857bb 100644 --- a/admin/app/components/solidus_admin/adjustment_reasons/new/component.html.erb +++ b/admin/app/components/solidus_admin/adjustment_reasons/new/component.html.erb @@ -4,16 +4,10 @@
<%= render component("ui/forms/field").text_field(f, :name, class: "required") %> <%= render component("ui/forms/field").text_field(f, :code, class: "required") %> - + <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> + <%= checkbox.with_caption(text: Spree::AdjustmentReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_hint(text: t(".hints.active")) %> + <% end %>
<% modal.with_actions do %> diff --git a/admin/app/components/solidus_admin/orders/show/address/component.html.erb b/admin/app/components/solidus_admin/orders/show/address/component.html.erb index a6486b43c4..e3a01d35d7 100644 --- a/admin/app/components/solidus_admin/orders/show/address/component.html.erb +++ b/admin/app/components/solidus_admin/orders/show/address/component.html.erb @@ -32,19 +32,13 @@ <% end %> - + <%= render component("ui/forms/checkbox").new( + object_name: form.object_name, + method: use_attribute, + checked: @address == (@type == 'ship' ? @order.bill_address : @order.ship_address) + ) do |checkbox| %> + <%= checkbox.with_caption(text: t(".use_this_address.#{@type}"), size: :xs) %> + <% end %> <% end %> diff --git a/admin/app/components/solidus_admin/products/show/component.html.erb b/admin/app/components/solidus_admin/products/show/component.html.erb index 6504c2661e..0f6e349e85 100644 --- a/admin/app/components/solidus_admin/products/show/component.html.erb +++ b/admin/app/components/solidus_admin/products/show/component.html.erb @@ -117,14 +117,10 @@ type: :date, value: f.object.discontinue_on&.to_date ) %> - + <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :promotionable, checked: f.object.promotionable) do |checkbox| %> + <%= checkbox.with_caption(text: Spree::Product.human_attribute_name(:promotionable), size: :xs) %> + <%= checkbox.with_hint(text: t(".hints.promotionable_html")) %> + <% end %> <% end %> <%= render component("ui/panel").new(title: t(".product_organization")) do %> diff --git a/admin/app/components/solidus_admin/refund_reasons/edit/component.html.erb b/admin/app/components/solidus_admin/refund_reasons/edit/component.html.erb index 630f10dfd1..17405fe692 100644 --- a/admin/app/components/solidus_admin/refund_reasons/edit/component.html.erb +++ b/admin/app/components/solidus_admin/refund_reasons/edit/component.html.erb @@ -4,16 +4,10 @@
<%= render component("ui/forms/field").text_field(f, :name, class: "required") %> <%= render component("ui/forms/field").text_field(f, :code, class: "required") %> - + <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> + <%= checkbox.with_caption(text: Spree::RefundReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_hint(text: t(".hints.active")) %> + <% end %>
<% modal.with_actions do %> diff --git a/admin/app/components/solidus_admin/refund_reasons/new/component.html.erb b/admin/app/components/solidus_admin/refund_reasons/new/component.html.erb index 72a6b996d7..17405fe692 100644 --- a/admin/app/components/solidus_admin/refund_reasons/new/component.html.erb +++ b/admin/app/components/solidus_admin/refund_reasons/new/component.html.erb @@ -4,15 +4,10 @@
<%= render component("ui/forms/field").text_field(f, :name, class: "required") %> <%= render component("ui/forms/field").text_field(f, :code, class: "required") %> - + <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> + <%= checkbox.with_caption(text: Spree::RefundReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_hint(text: t(".hints.active")) %> + <% end %>
<% modal.with_actions do %> diff --git a/admin/app/components/solidus_admin/return_reasons/edit/component.html.erb b/admin/app/components/solidus_admin/return_reasons/edit/component.html.erb index e1c6af09dc..f42cf75e40 100644 --- a/admin/app/components/solidus_admin/return_reasons/edit/component.html.erb +++ b/admin/app/components/solidus_admin/return_reasons/edit/component.html.erb @@ -3,16 +3,10 @@ <%= form_for @return_reason, url: form_url, html: { id: form_id } do |f| %>
<%= render component("ui/forms/field").text_field(f, :name, class: "required") %> - + <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> + <%= checkbox.with_caption(text: Spree::ReturnReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_hint(text: t(".hints.active")) %> + <% end %>
<% modal.with_actions do %> diff --git a/admin/app/components/solidus_admin/return_reasons/new/component.html.erb b/admin/app/components/solidus_admin/return_reasons/new/component.html.erb index e1c6af09dc..f42cf75e40 100644 --- a/admin/app/components/solidus_admin/return_reasons/new/component.html.erb +++ b/admin/app/components/solidus_admin/return_reasons/new/component.html.erb @@ -3,16 +3,10 @@ <%= form_for @return_reason, url: form_url, html: { id: form_id } do |f| %>
<%= render component("ui/forms/field").text_field(f, :name, class: "required") %> - + <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> + <%= checkbox.with_caption(text: Spree::ReturnReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_hint(text: t(".hints.active")) %> + <% end %>
<% modal.with_actions do %> diff --git a/admin/app/components/solidus_admin/store_credit_reasons/edit/component.html.erb b/admin/app/components/solidus_admin/store_credit_reasons/edit/component.html.erb index 432322ba69..705ade1bcf 100644 --- a/admin/app/components/solidus_admin/store_credit_reasons/edit/component.html.erb +++ b/admin/app/components/solidus_admin/store_credit_reasons/edit/component.html.erb @@ -3,16 +3,10 @@ <%= form_for @store_credit_reason, url: form_url, html: { id: form_id } do |f| %>
<%= render component("ui/forms/field").text_field(f, :name, class: "required") %> - + <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> + <%= checkbox.with_caption(text: Spree::StoreCreditReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_hint(text: t(".hints.active")) %> + <% end %>
<% modal.with_actions do %> diff --git a/admin/app/components/solidus_admin/store_credit_reasons/new/component.html.erb b/admin/app/components/solidus_admin/store_credit_reasons/new/component.html.erb index 432322ba69..705ade1bcf 100644 --- a/admin/app/components/solidus_admin/store_credit_reasons/new/component.html.erb +++ b/admin/app/components/solidus_admin/store_credit_reasons/new/component.html.erb @@ -3,16 +3,10 @@ <%= form_for @store_credit_reason, url: form_url, html: { id: form_id } do |f| %>
<%= render component("ui/forms/field").text_field(f, :name, class: "required") %> - + <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> + <%= checkbox.with_caption(text: Spree::StoreCreditReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_hint(text: t(".hints.active")) %> + <% end %>
<% modal.with_actions do %> diff --git a/admin/app/components/solidus_admin/tax_categories/edit/component.html.erb b/admin/app/components/solidus_admin/tax_categories/edit/component.html.erb index d5b8b25115..847a02f6cb 100644 --- a/admin/app/components/solidus_admin/tax_categories/edit/component.html.erb +++ b/admin/app/components/solidus_admin/tax_categories/edit/component.html.erb @@ -5,15 +5,10 @@ <%= render component("ui/forms/field").text_field(f, :name) %> <%= render component("ui/forms/field").text_field(f, :tax_code) %> <%= render component("ui/forms/field").text_field(f, :description) %> - + <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :is_default, checked: f.object.is_default) do |checkbox| %> + <%= checkbox.with_caption(text: Spree::TaxCategory.human_attribute_name(:is_default), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_hint(text: t(".hints.is_default")) %> + <% end %> <% modal.with_actions do %> diff --git a/admin/app/components/solidus_admin/tax_categories/new/component.html.erb b/admin/app/components/solidus_admin/tax_categories/new/component.html.erb index d5b8b25115..847a02f6cb 100644 --- a/admin/app/components/solidus_admin/tax_categories/new/component.html.erb +++ b/admin/app/components/solidus_admin/tax_categories/new/component.html.erb @@ -5,15 +5,10 @@ <%= render component("ui/forms/field").text_field(f, :name) %> <%= render component("ui/forms/field").text_field(f, :tax_code) %> <%= render component("ui/forms/field").text_field(f, :description) %> - + <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :is_default, checked: f.object.is_default) do |checkbox| %> + <%= checkbox.with_caption(text: Spree::TaxCategory.human_attribute_name(:is_default), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_hint(text: t(".hints.is_default")) %> + <% end %> <% modal.with_actions do %> diff --git a/admin/app/components/solidus_admin/ui/forms/checkbox/component.html.erb b/admin/app/components/solidus_admin/ui/forms/checkbox/component.html.erb new file mode 100644 index 0000000000..581e155deb --- /dev/null +++ b/admin/app/components/solidus_admin/ui/forms/checkbox/component.html.erb @@ -0,0 +1,14 @@ +
+ + + <%= hint if hint? %> +
diff --git a/admin/app/components/solidus_admin/ui/forms/checkbox/component.rb b/admin/app/components/solidus_admin/ui/forms/checkbox/component.rb index d9891bcc9f..12ba6f8792 100644 --- a/admin/app/components/solidus_admin/ui/forms/checkbox/component.rb +++ b/admin/app/components/solidus_admin/ui/forms/checkbox/component.rb @@ -1,42 +1,35 @@ # frozen_string_literal: true class SolidusAdmin::UI::Forms::Checkbox::Component < SolidusAdmin::BaseComponent - SIZES = { - s: 'w-4 h-4', - m: 'w-5 h-5', + FONT_WEIGHTS = { + normal: 'font-normal', + semibold: 'font-semibold', }.freeze - def initialize(size: :m, **attributes) - @size = size - @attributes = attributes - end + FONT_SIZES = { + xs: 'text-xs', + s: 'text-sm', + }.freeze - def call - tag.input( - type: 'checkbox', + renders_one :caption, ->(text:, weight: :normal, size: :s, **options) do + tag.span( + text, class: " - #{SIZES.fetch(@size)} - form-checkbox - cursor-pointer - disabled:cursor-not-allowed - - bg-white rounded border border-2 border-gray-300 - hover:border-gray-700 - focus:ring focus:ring-gray-300 focus:ring-0.5 focus:bg-white focus:ring-offset-0 - active:ring active:ring-gray-300 active:ring-0.5 - disabled:border-gray-300 - - indeterminate:border-gray-700 indeterminate:bg-gray-700 indeterminate:text-white - indeterminate:hover:border-gray-500 indeterminate:hover:bg-gray-500 - indeterminate:focus:bg-gray-700 - indeterminate:disabled:border-gray-300 indeterminate:disabled:bg-gray-300 - - checked:border-gray-700 checked:bg-gray-700 checked:text-white - checked:hover:border-gray-500 checked:hover:bg-gray-500 - checked:focus:bg-gray-700 - checked:disabled:border-gray-300 checked:disabled:bg-gray-300 + #{FONT_WEIGHTS.fetch(weight)} + #{FONT_SIZES.fetch(size)} + #{options.delete(:classes)} ", - **@attributes, + **options ) end + + renders_one :hint, ->(text:, position: :above) do + render component("ui/toggletip").new(text:, position:) + end + + def initialize(object_name:, method:, checked:, **attributes) + @name = "#{object_name}[#{method}]" + @checked = !!checked + @attributes = attributes + end end diff --git a/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview.rb b/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview.rb index f83458bd7e..846483a176 100644 --- a/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview.rb +++ b/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview.rb @@ -4,55 +4,39 @@ class SolidusAdmin::UI::Forms::Checkbox::ComponentPreview < ViewComponent::Preview include SolidusAdmin::Preview - # **With a form builder** + # Forms checkbox component utilises regular checkbox component and encapsulates some functionality + # that is shared between admin forms checkboxes: + # - adds `hidden_field_tag` to function properly + # - provides a way to customise label caption (font size/weight, custom styles) + # - optionally include a toggletip hint # - # The checkbox component is used to render a checkbox input. - # It can be used with a Rails form builder by setting the `name` attribute - # with `forom.object_name`. + # Requires `object_name` and `method` parameters that will form a name of the hidden input and checkbox input fields. + # + # Requires `checked` boolean parameter that will be passed directly to `ui/checkbox` component. + # + # Accepts and passes along to `ui/checkbox` component every other attribute that is accepted by it, e.g. `size`. # # ```erb - # <%= form_for @product do |form| %> - # ... - # <%= render component('ui/forms/checkbox').new( - # name: "#{form.object_name}[accept_tos]", - # checked: form.object.accept_tos, - # ) %> - # ... + # <%= render component('ui/forms/checkbox').new(object_name: 'stock_location', method: :default, checked: true) do |checkbox| %> + # <%= checkbox.with_caption(text: "Default") %> + # <%= checkbox.with_hint(text: "Will be used by default") %> # <% end %> # ``` - # - # **With stimulus** - # - # The checkbox component can be used with stimulus to toggle the `indeterminate` - # state of the checkbox. - # - # ```erb - # <%= render component('ui/forms/checkbox').new( - # "data-action": "click->#{stimulus_id}#toggleIndeterminate", - # "data-#{stimulus_id}-target": "checkbox", - # ) %> - # ``` - # - # ```js - # import { Controller } from "stimulus" - # - # export default class extends Controller { - # static targets = ["checkbox"] - # - # toggleIndeterminate() { - # this.checkboxTarget.indeterminate = !this.checkboxTarget.indeterminate - # } - # } - # ``` - # + def overview render_with_template end - # @param size select { choices: [s, m] } - # @param checked toggle - # @param disabled toggle - def playground(size: :m, checked: false, disabled: false) - render current_component.new(size: size.to_sym, checked:, disabled:) + # @param caption_size select { choices: [xs, s] } + # @param caption_weight select { choices: [normal, semibold] } + # @param caption_classes text + # @param hint toggle + # @param hint_text text + # @param hint_position select { choices: [above, below] } + def playground(caption_size: :s, caption_weight: :normal, caption_classes: '', hint: true, hint_text: "This will be helpful", hint_position: :above) + render current_component.new(object_name: "store", method: :active, checked: true) do |component| + component.with_caption(text: "Active", size: caption_size, weight: caption_weight, classes: caption_classes) + component.with_hint(text: hint_text, position: hint_position) if hint + end end end diff --git a/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview/overview.html.erb index e84c7a691e..aaba760089 100644 --- a/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview/overview.html.erb +++ b/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview/overview.html.erb @@ -1,32 +1,56 @@ - - - - <% current_component::SIZES.keys.each do |size| %> - - <% end %> - - - - <% current_component::SIZES.keys.each do |size| %> - <% %i[default disabled].each do |state| %> - +
+
+
+
+ Regular caption +
+ <%= render current_component.new(object_name: 'store', method: :active, checked: true) do |checkbox| %> + <%= checkbox.with_caption(text: 'Active') %> <% end %> - <% end %> -
- <% %i[off on intermediate].each do |checked| %> - - - <% current_component::SIZES.keys.each do |size| %> - <% %i[default disabled].each do |state| %> - <% cell_id = SecureRandom.uuid %> - - <% end %> + +
+
+ Smaller caption +
+ <%= render current_component.new(object_name: 'store', method: :active, checked: true) do |checkbox| %> + <%= checkbox.with_caption(text: 'Active', size: :xs) %> <% end %> -
- <% end %> -
<%= size.to_s.humanize %>
<%= state.to_s.humanize %>
<%= checked.to_s.humanize %> - <%= render current_component.new(size: size, checked: checked == :on, disabled: state == :disabled) %> - -
+ +
+
+ Semibold caption +
+ <%= render current_component.new(object_name: 'store', method: :active, checked: true) do |checkbox| %> + <%= checkbox.with_caption(text: 'Active', weight: :semibold) %> + <% end %> +
+ +
+
+
+ Caption with custom styles applied +
+ <%= render current_component.new(object_name: 'store', method: :active, checked: true) do |checkbox| %> + <%= checkbox.with_caption(text: 'Active', classes: 'text-gray-500') %> + <% end %> +
+
+
+ With caption and hint above +
+ <%= render current_component.new(object_name: 'store', method: :active, checked: true) do |checkbox| %> + <%= checkbox.with_caption(text: 'Active') %> + <%= checkbox.with_hint(text: 'This means something') %> + <% end %> +
+
+
+ With caption and hint below +
+ <%= render current_component.new(object_name: 'store', method: :active, checked: true) do |checkbox| %> + <%= checkbox.with_caption(text: 'Active') %> + <%= checkbox.with_hint(text: 'This means something', position: :below) %> + <% end %> +
+
+ From 1d980ac9562fc53f8de4c2318f5db68135ffaba0 Mon Sep 17 00:00:00 2001 From: Eugene Chaikin Date: Fri, 28 Feb 2025 18:30:17 +0100 Subject: [PATCH 3/4] Update few specs with missing tests --- .../testing_support/feature_helpers.rb | 10 +++++ admin/spec/features/product_spec.rb | 3 ++ admin/spec/features/refund_reasons_spec.rb | 22 ++++++++--- admin/spec/features/tax_categories_spec.rb | 38 +++++++++++++++++++ 4 files changed, 67 insertions(+), 6 deletions(-) diff --git a/admin/lib/solidus_admin/testing_support/feature_helpers.rb b/admin/lib/solidus_admin/testing_support/feature_helpers.rb index 267ed2f264..6f28ad553c 100644 --- a/admin/lib/solidus_admin/testing_support/feature_helpers.rb +++ b/admin/lib/solidus_admin/testing_support/feature_helpers.rb @@ -51,6 +51,16 @@ module SolidusAdmin expect(control).to have_text(val) end end + + def checkbox(locator) + find(:checkbox, locator) + end + + def clear_search + within('div[role="search"]') do + find('button[aria-label="Clear"]').click + end + end end end end diff --git a/admin/spec/features/product_spec.rb b/admin/spec/features/product_spec.rb index 60b4d3ca61..396ab30a2c 100644 --- a/admin/spec/features/product_spec.rb +++ b/admin/spec/features/product_spec.rb @@ -40,9 +40,12 @@ describe "Product", type: :feature do visit "/admin/products/just-a-prod" fill_in "Name", with: "Just a product (updated)" + uncheck 'Promotable' within('header') { click_button "Save" } expect(page).to have_content("Just a product (updated)") + expect(checkbox("Promotable")).not_to be_checked + fill_in "Name", with: "" within('header') { click_button "Save" } diff --git a/admin/spec/features/refund_reasons_spec.rb b/admin/spec/features/refund_reasons_spec.rb index 60aa1c0765..4a9f80d7e8 100644 --- a/admin/spec/features/refund_reasons_spec.rb +++ b/admin/spec/features/refund_reasons_spec.rb @@ -22,7 +22,7 @@ describe "Refund Reasons", type: :feature do end context "when creating a new refund reason" do - let(:query) { "?page=1&q%5Bname_or_description_cont%5D=Ret" } + let(:query) { "?page=1&q%5Bname_or_code_cont%5D=Ret" } before do visit "/admin/refund_reasons/#{query}" @@ -44,10 +44,13 @@ describe "Refund Reasons", type: :feature do context "with valid data" do it "successfully creates a new refund reason, keeping page and q params" do fill_in "Name", with: "Return process" + uncheck "Active" click_on "Add Refund Reason" expect(page).to have_content("Refund reason was successfully created.") + click_on "Return process" + expect(checkbox("Active")).not_to be_checked expect(Spree::RefundReason.find_by(name: "Return process")).to be_present expect(page.current_url).to include(query) end @@ -64,10 +67,10 @@ describe "Refund Reasons", type: :feature do end context "when editing an existing refund reason" do - let(:query) { "?page=1&q%5Bname_or_description_cont%5D=Ret" } + let(:query) { "?page=1&q%5Bname_or_code_cont%5D=Ret" } before do - Spree::RefundReason.create(name: "Return process") + Spree::RefundReason.create(name: "Return process", active: false) visit "/admin/refund_reasons#{query}" click_on "Return process" expect(page).to have_css("dialog") @@ -84,15 +87,22 @@ describe "Refund Reasons", type: :feature do expect(page.current_url).to include(query) end - it "successfully updates the existing refund reason" do + it "successfully updates the existing refund reason", :js do fill_in "Name", with: "Customer complaint" - + check "Active" click_on "Update Refund Reason" + + expect(page.current_url).to include(query) expect(page).to have_content("Refund reason was successfully updated.") + expect(page).to have_content("No Refund Reasons found") # search query still applied, filters out updated name + clear_search + expect(page).to have_content("Customer complaint") expect(page).not_to have_content("Return process") + + click_on "Customer complaint" + expect(checkbox("Active")).to be_checked expect(Spree::RefundReason.find_by(name: "Customer complaint")).to be_present - expect(page.current_url).to include(query) end end end diff --git a/admin/spec/features/tax_categories_spec.rb b/admin/spec/features/tax_categories_spec.rb index 69c267db8e..181370af55 100644 --- a/admin/spec/features/tax_categories_spec.rb +++ b/admin/spec/features/tax_categories_spec.rb @@ -46,10 +46,13 @@ describe "Tax categories", type: :feature do context "with valid data" do it "successfully creates a new tax category, keeping page and q params" do fill_in "Name", with: "Clothing" + check "Default" click_on "Add Tax Category" expect(page).to have_content("Tax category was successfully created.") + click_on "Clothing" + expect(checkbox("Default")).to be_checked expect(Spree::TaxCategory.find_by(name: "Clothing")).to be_present expect(page.current_url).to include(query) end @@ -64,4 +67,39 @@ describe "Tax categories", type: :feature do end end end + + context "when editing an existing tax category" do + let(:query) { "?page=1&q%5Bname_or_description_cont%5D=Cloth" } + + before do + Spree::TaxCategory.create(name: "Clothing", is_default: true) + visit "/admin/tax_categories#{query}" + click_on "Clothing" + expect(page).to have_css("dialog") + expect(page).to have_content("Edit Tax Category") + expect(page).to be_axe_clean + end + + it "closing the modal keeps query params", :js do + within("dialog") { click_on "Cancel" } + expect(page).not_to have_selector("dialog") + expect(page.current_url).to include(query) + end + + it "successfully updates the existing tax category", :js do + fill_in "Name", with: "Other" + uncheck "Default" + click_on "Update Tax Category" + + expect(page.current_url).to include(query) + expect(page).to have_content("Tax category was successfully updated.") + expect(page).to have_content("No Tax Categories found") # search query still applied, filters out updated name + clear_search + + expect(page).to have_content("Other") + expect(page).not_to have_content("Clothing") + click_on "Other" + expect(checkbox("Default")).not_to be_checked + end + end end From c64ed78a53fe258d4e922ebe331d260400fcc59c Mon Sep 17 00:00:00 2001 From: Eugene Chaikin Date: Wed, 11 Jun 2025 12:55:00 +0200 Subject: [PATCH 4/4] Update wording "label" is more suitable here than "caption" --- .../edit/component.html.erb | 2 +- .../adjustment_reasons/new/component.html.erb | 2 +- .../orders/show/address/component.html.erb | 2 +- .../products/show/component.html.erb | 2 +- .../refund_reasons/edit/component.html.erb | 2 +- .../refund_reasons/new/component.html.erb | 2 +- .../return_reasons/edit/component.html.erb | 2 +- .../return_reasons/new/component.html.erb | 2 +- .../edit/component.html.erb | 2 +- .../new/component.html.erb | 2 +- .../tax_categories/edit/component.html.erb | 2 +- .../tax_categories/new/component.html.erb | 2 +- .../ui/forms/checkbox/component.html.erb | 2 +- .../ui/forms/checkbox/component.rb | 2 +- .../ui/forms/checkbox/component_preview.rb | 6 ++--- .../component_preview/overview.html.erb | 24 +++++++++---------- 16 files changed, 29 insertions(+), 29 deletions(-) diff --git a/admin/app/components/solidus_admin/adjustment_reasons/edit/component.html.erb b/admin/app/components/solidus_admin/adjustment_reasons/edit/component.html.erb index c1e31857bb..dbf81e61c3 100644 --- a/admin/app/components/solidus_admin/adjustment_reasons/edit/component.html.erb +++ b/admin/app/components/solidus_admin/adjustment_reasons/edit/component.html.erb @@ -5,7 +5,7 @@ <%= render component("ui/forms/field").text_field(f, :name, class: "required") %> <%= render component("ui/forms/field").text_field(f, :code, class: "required") %> <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> - <%= checkbox.with_caption(text: Spree::AdjustmentReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_label(text: Spree::AdjustmentReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> <%= checkbox.with_hint(text: t(".hints.active")) %> <% end %> diff --git a/admin/app/components/solidus_admin/adjustment_reasons/new/component.html.erb b/admin/app/components/solidus_admin/adjustment_reasons/new/component.html.erb index c1e31857bb..dbf81e61c3 100644 --- a/admin/app/components/solidus_admin/adjustment_reasons/new/component.html.erb +++ b/admin/app/components/solidus_admin/adjustment_reasons/new/component.html.erb @@ -5,7 +5,7 @@ <%= render component("ui/forms/field").text_field(f, :name, class: "required") %> <%= render component("ui/forms/field").text_field(f, :code, class: "required") %> <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> - <%= checkbox.with_caption(text: Spree::AdjustmentReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_label(text: Spree::AdjustmentReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> <%= checkbox.with_hint(text: t(".hints.active")) %> <% end %> diff --git a/admin/app/components/solidus_admin/orders/show/address/component.html.erb b/admin/app/components/solidus_admin/orders/show/address/component.html.erb index e3a01d35d7..dcbdef65c4 100644 --- a/admin/app/components/solidus_admin/orders/show/address/component.html.erb +++ b/admin/app/components/solidus_admin/orders/show/address/component.html.erb @@ -37,7 +37,7 @@ method: use_attribute, checked: @address == (@type == 'ship' ? @order.bill_address : @order.ship_address) ) do |checkbox| %> - <%= checkbox.with_caption(text: t(".use_this_address.#{@type}"), size: :xs) %> + <%= checkbox.with_label(text: t(".use_this_address.#{@type}"), size: :xs) %> <% end %> <% end %> diff --git a/admin/app/components/solidus_admin/products/show/component.html.erb b/admin/app/components/solidus_admin/products/show/component.html.erb index 0f6e349e85..f8095763f0 100644 --- a/admin/app/components/solidus_admin/products/show/component.html.erb +++ b/admin/app/components/solidus_admin/products/show/component.html.erb @@ -118,7 +118,7 @@ value: f.object.discontinue_on&.to_date ) %> <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :promotionable, checked: f.object.promotionable) do |checkbox| %> - <%= checkbox.with_caption(text: Spree::Product.human_attribute_name(:promotionable), size: :xs) %> + <%= checkbox.with_label(text: Spree::Product.human_attribute_name(:promotionable), size: :xs) %> <%= checkbox.with_hint(text: t(".hints.promotionable_html")) %> <% end %> <% end %> diff --git a/admin/app/components/solidus_admin/refund_reasons/edit/component.html.erb b/admin/app/components/solidus_admin/refund_reasons/edit/component.html.erb index 17405fe692..0d7249ab39 100644 --- a/admin/app/components/solidus_admin/refund_reasons/edit/component.html.erb +++ b/admin/app/components/solidus_admin/refund_reasons/edit/component.html.erb @@ -5,7 +5,7 @@ <%= render component("ui/forms/field").text_field(f, :name, class: "required") %> <%= render component("ui/forms/field").text_field(f, :code, class: "required") %> <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> - <%= checkbox.with_caption(text: Spree::RefundReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_label(text: Spree::RefundReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> <%= checkbox.with_hint(text: t(".hints.active")) %> <% end %> diff --git a/admin/app/components/solidus_admin/refund_reasons/new/component.html.erb b/admin/app/components/solidus_admin/refund_reasons/new/component.html.erb index 17405fe692..0d7249ab39 100644 --- a/admin/app/components/solidus_admin/refund_reasons/new/component.html.erb +++ b/admin/app/components/solidus_admin/refund_reasons/new/component.html.erb @@ -5,7 +5,7 @@ <%= render component("ui/forms/field").text_field(f, :name, class: "required") %> <%= render component("ui/forms/field").text_field(f, :code, class: "required") %> <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> - <%= checkbox.with_caption(text: Spree::RefundReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_label(text: Spree::RefundReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> <%= checkbox.with_hint(text: t(".hints.active")) %> <% end %> diff --git a/admin/app/components/solidus_admin/return_reasons/edit/component.html.erb b/admin/app/components/solidus_admin/return_reasons/edit/component.html.erb index f42cf75e40..0feb9fc359 100644 --- a/admin/app/components/solidus_admin/return_reasons/edit/component.html.erb +++ b/admin/app/components/solidus_admin/return_reasons/edit/component.html.erb @@ -4,7 +4,7 @@
<%= render component("ui/forms/field").text_field(f, :name, class: "required") %> <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> - <%= checkbox.with_caption(text: Spree::ReturnReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_label(text: Spree::ReturnReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> <%= checkbox.with_hint(text: t(".hints.active")) %> <% end %>
diff --git a/admin/app/components/solidus_admin/return_reasons/new/component.html.erb b/admin/app/components/solidus_admin/return_reasons/new/component.html.erb index f42cf75e40..0feb9fc359 100644 --- a/admin/app/components/solidus_admin/return_reasons/new/component.html.erb +++ b/admin/app/components/solidus_admin/return_reasons/new/component.html.erb @@ -4,7 +4,7 @@
<%= render component("ui/forms/field").text_field(f, :name, class: "required") %> <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> - <%= checkbox.with_caption(text: Spree::ReturnReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_label(text: Spree::ReturnReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> <%= checkbox.with_hint(text: t(".hints.active")) %> <% end %>
diff --git a/admin/app/components/solidus_admin/store_credit_reasons/edit/component.html.erb b/admin/app/components/solidus_admin/store_credit_reasons/edit/component.html.erb index 705ade1bcf..6c5109803a 100644 --- a/admin/app/components/solidus_admin/store_credit_reasons/edit/component.html.erb +++ b/admin/app/components/solidus_admin/store_credit_reasons/edit/component.html.erb @@ -4,7 +4,7 @@
<%= render component("ui/forms/field").text_field(f, :name, class: "required") %> <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> - <%= checkbox.with_caption(text: Spree::StoreCreditReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_label(text: Spree::StoreCreditReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> <%= checkbox.with_hint(text: t(".hints.active")) %> <% end %>
diff --git a/admin/app/components/solidus_admin/store_credit_reasons/new/component.html.erb b/admin/app/components/solidus_admin/store_credit_reasons/new/component.html.erb index 705ade1bcf..6c5109803a 100644 --- a/admin/app/components/solidus_admin/store_credit_reasons/new/component.html.erb +++ b/admin/app/components/solidus_admin/store_credit_reasons/new/component.html.erb @@ -4,7 +4,7 @@
<%= render component("ui/forms/field").text_field(f, :name, class: "required") %> <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :active, checked: f.object.active) do |checkbox| %> - <%= checkbox.with_caption(text: Spree::StoreCreditReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_label(text: Spree::StoreCreditReason.human_attribute_name(:active), weight: :semibold, size: :xs, classes: 'ml-2') %> <%= checkbox.with_hint(text: t(".hints.active")) %> <% end %>
diff --git a/admin/app/components/solidus_admin/tax_categories/edit/component.html.erb b/admin/app/components/solidus_admin/tax_categories/edit/component.html.erb index 847a02f6cb..e15da96d8c 100644 --- a/admin/app/components/solidus_admin/tax_categories/edit/component.html.erb +++ b/admin/app/components/solidus_admin/tax_categories/edit/component.html.erb @@ -6,7 +6,7 @@ <%= render component("ui/forms/field").text_field(f, :tax_code) %> <%= render component("ui/forms/field").text_field(f, :description) %> <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :is_default, checked: f.object.is_default) do |checkbox| %> - <%= checkbox.with_caption(text: Spree::TaxCategory.human_attribute_name(:is_default), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_label(text: Spree::TaxCategory.human_attribute_name(:is_default), weight: :semibold, size: :xs, classes: 'ml-2') %> <%= checkbox.with_hint(text: t(".hints.is_default")) %> <% end %> diff --git a/admin/app/components/solidus_admin/tax_categories/new/component.html.erb b/admin/app/components/solidus_admin/tax_categories/new/component.html.erb index 847a02f6cb..e15da96d8c 100644 --- a/admin/app/components/solidus_admin/tax_categories/new/component.html.erb +++ b/admin/app/components/solidus_admin/tax_categories/new/component.html.erb @@ -6,7 +6,7 @@ <%= render component("ui/forms/field").text_field(f, :tax_code) %> <%= render component("ui/forms/field").text_field(f, :description) %> <%= render component("ui/forms/checkbox").new(object_name: f.object_name, method: :is_default, checked: f.object.is_default) do |checkbox| %> - <%= checkbox.with_caption(text: Spree::TaxCategory.human_attribute_name(:is_default), weight: :semibold, size: :xs, classes: 'ml-2') %> + <%= checkbox.with_label(text: Spree::TaxCategory.human_attribute_name(:is_default), weight: :semibold, size: :xs, classes: 'ml-2') %> <%= checkbox.with_hint(text: t(".hints.is_default")) %> <% end %> diff --git a/admin/app/components/solidus_admin/ui/forms/checkbox/component.html.erb b/admin/app/components/solidus_admin/ui/forms/checkbox/component.html.erb index 581e155deb..d0b9c567a7 100644 --- a/admin/app/components/solidus_admin/ui/forms/checkbox/component.html.erb +++ b/admin/app/components/solidus_admin/ui/forms/checkbox/component.html.erb @@ -7,7 +7,7 @@ checked: @checked, **@attributes ) %> - <%= caption %> + <%= label %> <%= hint if hint? %> diff --git a/admin/app/components/solidus_admin/ui/forms/checkbox/component.rb b/admin/app/components/solidus_admin/ui/forms/checkbox/component.rb index 12ba6f8792..7dbcaee0e7 100644 --- a/admin/app/components/solidus_admin/ui/forms/checkbox/component.rb +++ b/admin/app/components/solidus_admin/ui/forms/checkbox/component.rb @@ -11,7 +11,7 @@ class SolidusAdmin::UI::Forms::Checkbox::Component < SolidusAdmin::BaseComponent s: 'text-sm', }.freeze - renders_one :caption, ->(text:, weight: :normal, size: :s, **options) do + renders_one :label, ->(text:, weight: :normal, size: :s, **options) do tag.span( text, class: " diff --git a/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview.rb b/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview.rb index 846483a176..54628dfcb4 100644 --- a/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview.rb +++ b/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview.rb @@ -7,7 +7,7 @@ class SolidusAdmin::UI::Forms::Checkbox::ComponentPreview < ViewComponent::Previ # Forms checkbox component utilises regular checkbox component and encapsulates some functionality # that is shared between admin forms checkboxes: # - adds `hidden_field_tag` to function properly - # - provides a way to customise label caption (font size/weight, custom styles) + # - provides a way to customise label (font size/weight, custom styles) # - optionally include a toggletip hint # # Requires `object_name` and `method` parameters that will form a name of the hidden input and checkbox input fields. @@ -18,7 +18,7 @@ class SolidusAdmin::UI::Forms::Checkbox::ComponentPreview < ViewComponent::Previ # # ```erb # <%= render component('ui/forms/checkbox').new(object_name: 'stock_location', method: :default, checked: true) do |checkbox| %> - # <%= checkbox.with_caption(text: "Default") %> + # <%= checkbox.with_label(text: "Default") %> # <%= checkbox.with_hint(text: "Will be used by default") %> # <% end %> # ``` @@ -35,7 +35,7 @@ class SolidusAdmin::UI::Forms::Checkbox::ComponentPreview < ViewComponent::Previ # @param hint_position select { choices: [above, below] } def playground(caption_size: :s, caption_weight: :normal, caption_classes: '', hint: true, hint_text: "This will be helpful", hint_position: :above) render current_component.new(object_name: "store", method: :active, checked: true) do |component| - component.with_caption(text: "Active", size: caption_size, weight: caption_weight, classes: caption_classes) + component.with_label(text: "Active", size: caption_size, weight: caption_weight, classes: caption_classes) component.with_hint(text: hint_text, position: hint_position) if hint end end diff --git a/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview/overview.html.erb index aaba760089..1d323e67bd 100644 --- a/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview/overview.html.erb +++ b/admin/spec/components/previews/solidus_admin/ui/forms/checkbox/component_preview/overview.html.erb @@ -2,53 +2,53 @@
- Regular caption + Regular label
<%= render current_component.new(object_name: 'store', method: :active, checked: true) do |checkbox| %> - <%= checkbox.with_caption(text: 'Active') %> + <%= checkbox.with_label(text: 'Active') %> <% end %>
- Smaller caption + Smaller label
<%= render current_component.new(object_name: 'store', method: :active, checked: true) do |checkbox| %> - <%= checkbox.with_caption(text: 'Active', size: :xs) %> + <%= checkbox.with_label(text: 'Active', size: :xs) %> <% end %>
- Semibold caption + Semibold label
<%= render current_component.new(object_name: 'store', method: :active, checked: true) do |checkbox| %> - <%= checkbox.with_caption(text: 'Active', weight: :semibold) %> + <%= checkbox.with_label(text: 'Active', weight: :semibold) %> <% end %>
- Caption with custom styles applied + Label with custom styles applied
<%= render current_component.new(object_name: 'store', method: :active, checked: true) do |checkbox| %> - <%= checkbox.with_caption(text: 'Active', classes: 'text-gray-500') %> + <%= checkbox.with_label(text: 'Active', classes: 'text-gray-500') %> <% end %>
- With caption and hint above + With label and hint above
<%= render current_component.new(object_name: 'store', method: :active, checked: true) do |checkbox| %> - <%= checkbox.with_caption(text: 'Active') %> + <%= checkbox.with_label(text: 'Active') %> <%= checkbox.with_hint(text: 'This means something') %> <% end %>
- With caption and hint below + With label and hint below
<%= render current_component.new(object_name: 'store', method: :active, checked: true) do |checkbox| %> - <%= checkbox.with_caption(text: 'Active') %> + <%= checkbox.with_label(text: 'Active') %> <%= checkbox.with_hint(text: 'This means something', position: :below) %> <% end %>