Merge pull request #6190 from chaimann/admin-ui-select-component

[Admin][UI] New select component

Author: tvdeyen

admin/app/components/solidus_admin/ui/forms/address/component.js

@@ -54,5 +54,7 @@ export default class extends Controller {
       option.innerText = state.name
       stateSelect.appendChild(option)
     })
+
+    stateSelect.setAttribute("synced", "false");
   }
 }

admin/app/components/solidus_admin/ui/forms/field/component.html.erb

@@ -20,10 +20,10 @@
     <div class="
       font-normal text-xs
       [:disabled~&]:text-gray-300 text-gray-500
-      flex gap-1 flex-col
+      flex gap-1 flex-col [&>.error]:hidden [&>.error]:peer-invalid:block
     ">
       <%= tag.span @hint if @hint.present? %>
-      <%= tag.span safe_join(@error, tag.br), class: "text-red-600" if @error.present? %>
+      <%= tag.span safe_join(@error, tag.br), class: "error text-red-600" if @error.present? %>
     </div>
   <% end %>
 </label>

admin/app/components/solidus_admin/ui/forms/field/component.rb

@@ -36,20 +36,16 @@ def self.text_field(form, method, object: nil, hint: nil, tip: nil, size: :m, **
   def self.select(form, method, choices, object: nil, hint: nil, tip: nil, size: :m, **attributes)
     object_name, object, label, errors = extract_form_details(form, object, method)
 
-    new(
+    component("ui/forms/select").new(
       label:,
       hint:,
       tip:,
-      error: errors,
-      input_attributes: {
-        name: "#{object_name}[#{method}]",
-        tag: :select,
-        choices:,
-        size:,
-        value: (object.public_send(method) if object.respond_to?(method)),
-        error: (errors.to_sentence.capitalize if errors),
-        **attributes,
-      }
+      size: size,
+      name: "#{object_name}[#{method}]",
+      choices:,
+      value: (object.public_send(method) if object.respond_to?(method)),
+      error: (errors.to_sentence.capitalize if errors),
+      **attributes
     )
   end
 

admin/app/components/solidus_admin/ui/forms/input/component.js

@@ -37,7 +37,7 @@ class SolidusAdmin::UI::Forms::Input::Component < SolidusAdmin::BaseComponent
   ]).freeze
 
   def initialize(tag: :input, size: :m, error: nil, **attributes)
-    raise ArgumentError, "unsupported tag: #{tag}" unless %i[input textarea select].include?(tag)
+    raise ArgumentError, "unsupported tag: #{tag}" unless %i[input textarea].include?(tag)
 
     specialized_classes = []
     readonly_classes = "read-only:bg-gray-15 focus:read-only:bg-gray-15 focus:read-only:ring-0
@@ -56,20 +56,11 @@ def initialize(tag: :input, size: :m, error: nil, **attributes)
       specialized_classes << "form-textarea"
       specialized_classes << readonly_classes
       specialized_classes << MULTILINE_HEIGHTS[size]
-    when :select
-      if attributes[:multiple]
-        specialized_classes << "form-multiselect"
-        specialized_classes << MULTILINE_HEIGHTS[size]
-      else
-        specialized_classes << "form-select"
-        specialized_classes << "bg-arrow-down-s-fill-gray-700 invalid:bg-arrow-down-s-fill-red-400 aria-invalid:bg-arrow-down-s-fill-red-400"
-        specialized_classes << HEIGHTS[size]
-      end
     end
 
     attributes[:class] = [
       %w[
-        w-full
+        peer w-full
         text-black bg-white border border-gray-300 rounded-sm placeholder:text-gray-400
         hover:border-gray-500
         focus:ring focus:ring-gray-300 focus:ring-0.5 focus:bg-white focus:ring-offset-0 [&:focus-visible]:outline-none
@@ -89,9 +80,7 @@ def initialize(tag: :input, size: :m, error: nil, **attributes)
   end
 
   def call
-    if @tag == :select && @attributes[:choices]
-      with_content options_for_select(@attributes.delete(:choices), @attributes.delete(:value))
-    elsif @tag == :textarea && @attributes[:value]
+    if @tag == :textarea && @attributes[:value]
       with_content @attributes.delete(:value)
     end
 
@@ -109,9 +98,8 @@ def build_tag
 
   def tag_options
     @tag_options ||= {
-      "data-controller": stimulus_id,
-      "data-#{stimulus_id}-custom-validity-value": @error.presence,
-      "data-action": "#{stimulus_id}#clearCustomValidity",
+      "data-controller": "custom-validity",
+      "data-custom-validity-error-message-value": @error.presence,
       **@attributes
     }
   end

admin/app/components/solidus_admin/ui/forms/input/component.rb

@@ -0,0 +1,21 @@
+<div class="flex flex-col gap-2 w-full">
+  <div class="flex gap-1 items-center">
+    <label class="text-gray-700 font-semibold text-xs" <%= tag.attributes for: @attributes[:id] %>>
+      <%= @label %>
+    </label>
+    <%= render component('ui/toggletip').new(text: @tip) if @tip.present? %>
+  </div>
+
+  <%= tag.select(options_for_select(@choices, @selected), **@attributes) %>
+
+  <% if @hint.present? || @error.present? %>
+    <div class="
+      font-normal text-xs
+      [:disabled~&]:text-gray-300 text-gray-500
+      flex gap-1 flex-col [&>.error]:hidden [&>.error]:peer-invalid:block
+    ">
+      <%= tag.span @hint if @hint.present? %>
+      <%= tag.span safe_join(@error, tag.br), class: "error text-red-600" %>
+    </div>
+  <% end %>
+</div>

admin/app/components/solidus_admin/ui/forms/select/component.html.erb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Select::Component < SolidusAdmin::BaseComponent
+  FONT_SIZES = {
+    s: "[&>.control]:text-xs [&_.dropdown]:text-xs",
+    m: "[&>.control]:text-sm [&_.dropdown]:text-sm",
+    l: "[&>.control]:text-base [&_.dropdown]:text-base",
+  }.freeze
+
+  HEIGHTS = {
+    control: {
+      s: "[&>.control]:min-h-7",
+      m: "[&>.control]:min-h-9",
+      l: "[&>.control]:min-h-12",
+    },
+    option: {
+      s: "[&_.option]:h-7",
+      m: "[&_.option]:h-9",
+      l: "[&_.option]:h-12",
+    },
+    item: {
+      s: "[&_.item]:h-5",
+      m: "[&_.item]:h-5.5",
+      l: "[&_.item]:h-8",
+    },
+  }.freeze
+
+  def initialize(label:, name:, choices:, size: :m, hint: nil, tip: nil, error: nil, **attributes)
+    @label = label
+    @name = name
+    @hint = hint
+    @tip = tip
+    @error = Array.wrap(error)
+
+    @choices = choices
+    @selected = attributes.delete(:value)
+
+    @attributes = attributes
+    @attributes[:name] = @name
+    @attributes[:is] = "solidus-select"
+    @attributes[:id] ||= "#{stimulus_id}_#{@name}"
+    @attributes[:"data-error-message"] = @error.presence
+
+    general_classes = ["w-full relative text-black font-normal #{FONT_SIZES[size]}"]
+    control_classes = ["[&>.control]:peer-invalid:border-red-600 [&>.control]:peer-invalid:hover:border-red-600
+      [&>.control]:peer-invalid:text-red-600 [&>.control]:flex [&>.control]:flex-wrap [&>.control]:items-center
+      [&>.control]:gap-1 [&>.control]:rounded-sm [&>.control]:w-full [&>.control]:rounded-sm [&>.control]:pl-3
+      [&>.control]:pr-10 [&>.control]:py-1.5 [&>.control]:bg-white [&>.control]:border [&>.control]:border-gray-300
+      [&>.control]:hover:border-gray-500 [&>.control]:has-[:disabled]:bg-gray-50 [&>.control]:has-[:disabled]:text-gray-500
+      [&>.control]:has-[:disabled]:cursor-not-allowed [&>.control]:has-[:disabled]:hover:border-gray-300
+      [&>.control]:has-[:focus]:ring [&>.control]:has-[:focus]:ring-gray-300 [&>.control]:has-[:focus]:ring-0.5
+      [&>.control]:has-[:focus]:bg-white [&>.control]:has-[:focus]:ring-offset-0 [&>.control]:has-[:focus]:outline-none
+      #{HEIGHTS[:control][size]}"]
+
+    unless @attributes[:multiple]
+      control_classes << "[&>.control]:peer-invalid:bg-arrow-down-s-fill-red-400 [&>.control]:form-select
+        [&>.control]:bg-arrow-down-s-fill-gray-700"
+    end
+
+    item_classes = []
+    if @attributes[:multiple]
+      item_classes << "[&_.item]:flex [&_.item]:gap-1 [&_.item]:items-center [&_.item]:rounded-full [&_.item]:whitespace-nowrap
+        [&_.item]:px-2 [&_.item]:py-0.5 [&_.item]:bg-graphite-light [&_.item]:peer-invalid:bg-red-100 #{HEIGHTS[:item][size]}
+        [&_.item_.remove-button]:text-xl [&_.item_.remove-button]:pb-0.5 [&_.item_.remove-button]:order-first
+        [&_.item_.remove-button]:has-[:disabled]:cursor-not-allowed"
+    end
+
+    input_classes = ["[&_input]:has-[.item]:placeholder:invisible [&_input:disabled]:cursor-not-allowed [&_input:disabled]:bg-gray-50
+      [&_input]:peer-invalid:placeholder:text-red-400"]
+
+    unless @attributes[:multiple]
+      input_classes << "[&_input]:has-[.item]:opacity-0 [&_input]:has-[.item]:cursor-default"
+    end
+
+    dropdown_classes = ["[&_.dropdown]:w-full [&_.dropdown]:absolute [&_.dropdown]:border [&_.dropdown]:border-gray-100
+      [&_.dropdown]:mt-0.5 [&_.dropdown]:min-w-[10rem] [&_.dropdown]:p-2 [&_.dropdown]:rounded-sm [&_.dropdown]:z-10
+      [&_.dropdown]:shadow-lg [&_.dropdown]:bg-white"]
+
+    dropdown_content_classes = ["[&_.dropdown-content]:flex [&_.dropdown-content]:flex-col [&_.dropdown-content]:max-h-[200px]
+      [&_.dropdown-content]:overflow-x-hidden [&_.dropdown-content]:overflow-y-auto [&_.dropdown-content]:scroll-smooth [&_.no-results]:text-gray-500"]
+
+    option_classes = ["[&_.option]:p-2 [&_.option]:rounded-sm [&_.option]:min-w-fit [&_.option.active]:bg-gray-50
+      [&_.option.active]:text-gray-700 [&_.option_.highlight]:bg-yellow [&_.option_.highlight]:rounded-[1px]
+      #{HEIGHTS[:option][size]}"]
+
+    @attributes[:class] = [
+      "peer",
+      general_classes,
+      control_classes,
+      item_classes,
+      input_classes,
+      dropdown_classes,
+      dropdown_content_classes,
+      option_classes,
+      @attributes[:class]
+    ].compact.join(" ")
+  end
+end

admin/app/components/solidus_admin/ui/forms/select/component.rb

@@ -23,7 +23,7 @@
         </form>
       </header>
 
-      <div class="p-4 overflow-auto">
+      <div class="p-4">
         <%= content %>
       </div>
 

admin/app/components/solidus_admin/ui/modal/component.html.erb

@@ -202,7 +202,7 @@ def ensure_store_credit_reason
       @store_credit_reason = Spree::StoreCreditReason.find_by(id: permitted_resource_params[:store_credit_reason_id])
 
       if @store_credit_reason.blank?
-        @store_credit.errors.add(:store_credit_reason_id, "Store Credit reason must be provided")
+        @store_credit.errors.add(:store_credit_reason_id, "Store credit reason must be provided")
         yield if block_given? # Block is for error template rendering on a per-action basis so this can be re-used.
         return false
       end
@@ -213,7 +213,7 @@ def ensure_store_credit_category
       @store_credit_category = Spree::StoreCreditCategory.find_by(id: permitted_resource_params[:category_id])
 
       if @store_credit_category.blank?
-        @store_credit.errors.add(:category_id, "Store Credit category must be provided")
+        @store_credit.errors.add(:category_id, "Store credit category must be provided")
         yield if block_given? # Block is for error template rendering on a per-action basis so this can be re-used.
         return false
       end

admin/app/controllers/solidus_admin/store_credits_controller.rb

@@ -1,2 +1,4 @@
 import "@hotwired/turbo-rails"
+import "vendor/custom_elements"
 import "solidus_admin/controllers"
+import "solidus_admin/web_components/solidus_select"