Merge pull request #5378 from solidusio/elia/admin/component-fixes

[Admin] Misc. component fixes

admin/app/components/solidus_admin/ui/button/component.rb

@@ -3,19 +3,31 @@
 class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent
   SIZES = {
     s: %w[
-      h-7 px-1.5 py-1
+      h-7 w-7 p-1
       text-xs font-semibold leading-none
     ],
     m: %w[
-      h-9 px-3 py-1.5
+      h-9 w-9 p-1.5
       text-sm font-semibold leading-none
     ],
     l: %w[
-      h-12 px-4 py-2
+      h-12 w-12 p-2
       text-base font-semibold leading-none
     ],
   }
 
+  TEXT_PADDINGS = {
+    s: %w[px-1.5 w-auto],
+    m: %w[px-3 w-auto],
+    l: %w[px-4 w-auto],
+  }
+
+  ICON_SIZES = {
+    s: %w[w-[1.4em] h-[1.4em]],
+    m: %w[w-[1.35em] h-[1.35em]],
+    l: %w[w-[1.5em] h-[1.5em]],
+  }
+
   SCHEMES = {
     primary: %w[
       text-white bg-black
@@ -57,16 +69,22 @@ def initialize(
     @attributes = attributes
 
     @attributes[:class] = [
-      'justify-start items-center gap-1 inline-flex rounded',
+      'justify-start items-center justify-center gap-1 inline-flex rounded',
       SIZES.fetch(size.to_sym),
+      (TEXT_PADDINGS.fetch(size.to_sym) if @text),
       SCHEMES.fetch(scheme.to_sym),
       @attributes[:class],
     ].join(' ')
+
+    @icon_classes = [
+      'fill-current',
+      ICON_SIZES.fetch(size.to_sym),
+    ]
   end
 
   def call
     content = []
-    content << render(component('ui/icon').new(name: @icon, class: 'fill-current w-[1.4em] h-[1.4em]')) if @icon
+    content << render(component('ui/icon').new(name: @icon, class: @icon_classes)) if @icon
     content << @text if @text
 
     content_tag(@tag, safe_join(content), **@attributes)

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

@@ -84,7 +84,7 @@ def field_tag(guidance)
       **field_aria_describedby_attribute(guidance),
       **field_error_attributes(guidance),
       **@attributes.except(:class).merge(
-        "data-target" => "#{stimulus_id}.select",
+        "data-#{stimulus_id}-target" => "select",
         "data-action" => "#{stimulus_id}#refreshSelectClass"
       )
     )
@@ -131,9 +131,10 @@ def field_error_attributes(guidance)
   def arrow_tag(guidance)
     icon_tag(
       "arrow-down-s-fill",
-      class: SIZES.fetch(@size)[:arrow] + [arrow_color_class(guidance)] +
-               %w[absolute right-3 top-1/2 translate-y-[-50%] pointer-events-none],
-      "data-target" => "#{stimulus_id}.arrow"
+      class: SIZES.fetch(@size)[:arrow] + [
+        arrow_color_class(guidance)
+      ] + %w[absolute right-3 top-1/2 translate-y-[-50%] pointer-events-none],
+      "data-#{stimulus_id}-target" => "arrow"
     )
   end
 

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

@@ -63,7 +63,7 @@ def call
       disabled: @attributes[:disabled]
     )
 
-    tag.div(class: "mb-6") do
+    tag.div(class: "w-full mb-6") do
       label_tag + field_tag(guidance) + guidance_tag(guidance)
     end
   end
@@ -81,6 +81,7 @@ def field_tag(guidance)
 
   def field_classes(guidance)
     %w[
+      form-input
       block px-3 py-1.5 w-full
       text-black
       bg-white border border-gray-300 rounded-sm

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

@@ -18,7 +18,7 @@
   <% if @title %>
     <h6 class="mt-0 px-6 w-full">
       <span class="body-title"><%= @title %></span>
-      <%= render component('ui/toggletip').new(guide: @title_hint, position: :left) if @title_hint %>
+      <%= render component('ui/toggletip').new(text: @title_hint, position: :left) if @title_hint %>
     </h6>
   <% end %>
 

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

@@ -19,7 +19,7 @@
     title="<%= t('.close_text') %>"
     data-action="<%= stimulus_id %>#close"
     aria-label="<%= t('.close_text') %>"
-    data-target="<%= stimulus_id %>.closeButton"
+    data-<%= stimulus_id %>-target="closeButton"
   >
     <%= icon_tag('close-line', class: "w-[1.125rem] h-[1.125rem] fill-current") %>
   </button>

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

@@ -0,0 +1,53 @@
+<details
+  data-controller="<%= stimulus_id %>"
+  <%= tag.attributes(**@attributes) %>
+>
+  <summary
+    type="button"
+    class="
+      block
+      w-[1rem]
+      h-[1rem]
+      cursor-pointer
+      [&::marker]:hidden
+      [&::-webkit-details-marker]:hidden
+    "
+    data-<%= stimulus_id %>-target="button"
+    data-action="
+      click:prevent-><%= stimulus_id %>#toggle
+      keydown.esc@window-><%= stimulus_id %>#close
+    "
+    aria-label="<%= t('.get_help') %>"
+  >
+    <%= icon_tag("question-fill", class: "w-[1rem] h-[1rem] #{icon_theme_classes}") %>
+  </summary>
+
+  <div
+    class="
+      absolute
+      inline-block
+      w-[9rem]
+      px-[0.75rem]
+      body-tiny-bold
+      rounded
+      z-10
+      <%= bubble_position_classes %>
+      <%= bubble_theme_classes %>
+    "
+    data-<%= stimulus_id %>-target="bubble"
+  >
+    <span
+      role="status"
+      class="
+        relative
+        block
+        bg-inherit
+        py-[0.5rem]
+        <%= bubble_arrow_pseudo_element %>
+      "
+      data-<%= stimulus_id %>-target="content"
+    >
+      <%= @text %>
+    </span>
+  </div>
+</details>

admin/app/components/solidus_admin/ui/toggletip/component.js

@@ -1,46 +1,26 @@
 import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
 
 export default class extends Controller {
   static targets = ['button', 'bubble', 'content']
 
   connect () {
-    // Progressive enhancement && a11y: the content is visible in plain HTML.
-    // We first remove it and then make it an aria-live region so users are
-    // updated when it's readded.
-    this.contentTarget.textContent = ''
-    this.contentTarget.setAttribute('role', 'status')
+    useClickOutside(this)
+  }
 
-    // Close the bubble when clicking outside of it or pressing escape.
-    document.addEventListener('click', (event) => {
-      if (!this.buttonTarget.contains(event.target) && !this.bubbleTarget.contains(event.target)) {
-        this.close()
-      }
-    })
-    document.addEventListener('keydown', (event) => {
-      if (event.key === 'Escape') {
-        this.close()
-      }
-    })
+  clickOutside () {
+    this.close()
   }
 
-  // Toggle the bubble when clicking the button. The content is added and
-  // remove every time so that the aria-live region is updated and users are
-  // notified..
-  toggle () {
-    if (this.bubbleTarget.classList.contains('hidden')) {
-      this.open()
-    } else {
-      this.close()
-    }
+  toggle (e) {
+    this.element.open = !this.element.open
   }
 
   open () {
-    this.bubbleTarget.classList.remove('hidden')
-    this.contentTarget.textContent = this.bubbleTarget.dataset.content
+    this.element.open = true
   }
 
   close () {
-    this.bubbleTarget.classList.add('hidden')
-    this.contentTarget.textContent = ''
+    this.element.open = false
   }
 }

admin/app/components/solidus_admin/ui/toggletip/component.rb

@@ -54,16 +54,21 @@ class SolidusAdmin::UI::Toggletip::Component < SolidusAdmin::BaseComponent
     }
   }.freeze
 
-  # @param guide [String] The toggletip text
+  # @param text [String] The toggletip text
   # @param position [Symbol] The position of the arrow in relation to the
   #   toggletip. The latter will be positioned accordingly in relation to the
   #   help icon. Defaults to `:up`. See `POSITIONS` for available options.
   # @param theme [Symbol] The theme of the toggletip. Defaults to `:light`. See
   #   `THEMES` for available options.
-  def initialize(guide:, position: :up, theme: :light)
-    @guide = guide
+  def initialize(text:, position: :down, theme: :light, **attributes)
+    @text = text || guide
     @position = position
     @theme = theme
+    @attributes = attributes
+    @attributes[:class] = [
+      "relative inline-block",
+      @attributes[:class],
+    ].join(" ")
   end
 
   def icon_theme_classes

admin/app/views/layouts/solidus_admin/application.html.erb

@@ -15,9 +15,11 @@
       <% end %>
     </div>
 
-    <div class="flex gap-0 h-screen">
-      <div class="flex min-w-[240px] border-r border-r-gray-100">
-        <%= render component("sidebar").new(store: current_store) %>
+    <div class="flex gap-0">
+      <div class="min-w-[240px] border-r border-r-gray-100 relative">
+        <div class="min-h-screen top-0 sticky flex">
+          <%= render component("sidebar").new(store: current_store) %>
+        </div>
       </div>
 
       <main id="main" class="flex-grow">

admin/config/importmap.rb

@@ -5,6 +5,8 @@
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin "@hotwired/turbo-rails", to: "turbo.js"
 
+pin "stimulus-use", to: "https://ga.jspm.io/npm:[email protected]/dist/index.js"
+
 pin "solidus_admin/application", preload: true
 pin "solidus_admin/utils"
 pin_all_from SolidusAdmin::Engine.root.join("app/javascript/solidus_admin/controllers"), under: "solidus_admin/controllers"

admin/spec/components/previews/solidus_admin/ui/button/component_preview/overview.html.erb

@@ -27,6 +27,21 @@
           <% end %>
         </tr>
       <% end %>
+      <% %i[default disabled].each do |state| %>
+        <tr>
+          <td class="font-bold px-3 py-1"><%= state.to_s.humanize %></td>
+          <% current_component::SIZES.keys.each do |size| %>
+            <td class="px-3 py-1 text-center">
+              <%= render current_component.new(
+                size: size,
+                scheme: scheme,
+                icon: ('filter-3-line' if show_icon),
+                disabled: state == :disabled
+              ) %>
+            </td>
+          <% end %>
+        </tr>
+      <% end %>
     </table>
 
   </div>

admin/spec/components/previews/solidus_admin/ui/forms/fieldset/component_preview.rb

@@ -35,7 +35,7 @@ class SolidusAdmin::UI::Forms::Fieldset::ComponentPreview < ViewComponent::Previ
   # <%= render components('ui/forms/fieldset').new(
   #   legend: "My fieldset",
   #   toggletip_attributes: {
-  #     guide: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  #     text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   #     position: :right
   #   }
   # ) do %>

admin/spec/components/previews/solidus_admin/ui/forms/fieldset/component_preview/overview.html.erb

@@ -23,7 +23,7 @@
       <% end %>
     </div>
     <div class="flex-1">
-      <%= render current_component.new(toggletip_attributes: { guide: "Lorem ipsum dolor est." }) do %>
+      <%= render current_component.new(toggletip_attributes: { text: "Lorem ipsum dolor est." }) do %>
         <%=
           render component('ui/forms/text_field').new(
             field: :name,
@@ -34,7 +34,7 @@
       <% end %>
     </div>
     <div class="flex-1">
-      <%= render current_component.new(legend: "Legend & tip", toggletip_attributes: { guide: "Lorem ipsum dolor est.", position: :left, theme: :dark }) do %>
+      <%= render current_component.new(legend: "Legend & tip", toggletip_attributes: { text: "Lorem ipsum dolor est.", position: :left, theme: :dark }) do %>
         <%=
           render component('ui/forms/text_field').new(
             field: :name,

admin/spec/components/previews/solidus_admin/ui/forms/form/component_preview.rb

@@ -66,7 +66,7 @@ class SolidusAdmin::UI::Forms::Form::ComponentPreview < ViewComponent::Preview
   #           )
   #         ],
   #         legend: "Product details",
-  #         toggletip_attributes: { guide: "Minimal info", position: :right }
+  #         toggletip_attributes: { text: "Minimal info", position: :right }
   #       )
   #     ]
   #   )

admin/spec/components/previews/solidus_admin/ui/toggletip/component_preview.rb

@@ -9,23 +9,24 @@ class SolidusAdmin::UI::Toggletip::ComponentPreview < ViewComponent::Preview
   def overview
     render_with_template(
       locals: {
-        guide: DUMMY_TEXT,
+        text: DUMMY_TEXT,
         positions: current_component::POSITIONS.keys,
         themes: current_component::THEMES.keys
       }
     )
   end
 
-  # @param guide text
+  # @param text text
   # @param position select :position_options
   # @param theme select :theme_options
-  def playground(guide: DUMMY_TEXT, position: :up, theme: :light)
-    render_with_template(
-      locals: {
-        guide: guide,
-        position: position,
-        theme: theme
-      }
+  # @param open toggle
+  def playground(text: DUMMY_TEXT, position: :down, theme: :light, open: false)
+    render current_component.new(
+      text: text,
+      position: position,
+      theme: theme,
+      open: open,
+      class: "m-80"
     )
   end