Merge pull request #5444 from solidusio/elia/admin/misc-fixes

SolidusAdmin misc. component fixes
solidusio · Oct 23, 2023 · b2a6f41 · b2a6f41
2 parents e1f59e2 + 5576314
commit b2a6f41
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 62 deletions.
diff --git a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb b/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb
@@ -4,31 +4,31 @@
 
 @layer base {
   .body-tiny {
-    @apply font-sans font-normal text-xs leading-5;
+    @apply font-sans font-normal text-xs;
   }
 
   .body-tiny-bold {
-    @apply font-sans font-semibold text-xs leading-5;
+    @apply font-sans font-semibold text-xs;
   }
 
   .body-small {
-    @apply font-sans font-normal text-sm leading-6;
+    @apply font-sans font-normal text-sm;
   }
 
   .body-small-bold {
-    @apply font-sans font-semibold text-sm leading-6;
+    @apply font-sans font-semibold text-sm;
   }
 
   .body-text {
-    @apply font-sans font-normal text-base leading-6;
+    @apply font-sans font-normal text-base;
   }
 
   .body-text-bold {
-    @apply font-sans font-semibold text-base leading-6;
+    @apply font-sans font-semibold text-base;
   }
 
   .body-title {
-    @apply font-sans font-semibold text-xl leading-5;
+    @apply font-sans font-semibold text-xl;
   }
 }
 

diff --git a/admin/app/components/solidus_admin/products/show/component.html.erb b/admin/app/components/solidus_admin/products/show/component.html.erb
@@ -114,7 +114,13 @@
         <% end %>
 
         <%= render component('ui/panel').new(title: "Product organization") do %>
-          <%= render component("ui/forms/field").select(f, :taxon_ids, taxon_options, multiple: true, "size" => taxon_options.size) %>
+          <%= render component("ui/forms/field").select(
+            f,
+            :taxon_ids,
+            taxon_options,
+            multiple: true,
+            "size" => taxon_options.size, # use a string key to avoid setting the size of the component
+          ) %>
         <% end %>
       <% end %>
     <% end %>

diff --git a/admin/app/components/solidus_admin/ui/badge/component.rb b/admin/app/components/solidus_admin/ui/badge/component.rb
@@ -13,9 +13,9 @@ class SolidusAdmin::UI::Badge::Component < SolidusAdmin::BaseComponent
   }.freeze
 
   SIZES = {
-    s: 'leading-4 px-2 py-0.5 text-3 font-[500]',
-    m: 'leading-5 px-3 py-0.5 text-3.5 font-[500]',
-    l: 'leading-6 px-3 py-0.5 text-4 font-[500]',
+    s: 'px-2 py-0.5 text-xs font-semibold',
+    m: 'px-3 py-0.5 text-sm font-semibold',
+    l: 'px-3 py-0.5 text-base font-semibold',
   }.freeze
 
   def initialize(name:, color: :graphite_light, size: :m)

diff --git a/admin/app/components/solidus_admin/ui/button/component.rb b/admin/app/components/solidus_admin/ui/button/component.rb
@@ -2,65 +2,65 @@
 
 class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent
   SIZES = {
-    s: %w[
+    s: %{
       h-7 w-7 p-1
       text-xs font-semibold leading-none
-    ],
-    m: %w[
+    },
+    m: %{
       h-9 w-9 p-1.5
       text-sm font-semibold leading-none
-    ],
-    l: %w[
+    },
+    l: %{
       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],
+    s: %{px-1.5 w-auto},
+    m: %{px-3 w-auto},
+    l: %{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]],
+    s: %{w-[1.4em] h-[1.4em]},
+    m: %{w-[1.35em] h-[1.35em]},
+    l: %{w-[1.5em] h-[1.5em]},
   }
 
   SCHEMES = {
-    primary: %w[
+    primary: %{
       text-white bg-black
       hover:text-white hover:bg-gray-600
       active:text-white active:bg-gray-800
       focus:text-white focus:bg-gray-700
       disabled:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed
       aria-disabled:text-gray-400 aria-disabled:bg-gray-100 aria-disabled:aria-disabled:cursor-not-allowed
-    ],
-    secondary: %w[
+    },
+    secondary: %{
       text-gray-700 bg-white border border-1 border-gray-200
       hover:bg-gray-50
       active:bg-gray-100
       focus:bg-gray-50
       disabled:text-gray-300 disabled:bg-white disabled:cursor-not-allowed
       aria-disabled:text-gray-300 aria-disabled:bg-white aria-disabled:cursor-not-allowed
-    ],
-    danger: %w[
+    },
+    danger: %{
       text-red-500 bg-white border border-1 border-red-500
       hover:bg-red-500 hover:border-red-600 hover:text-white
       active:bg-red-600 active:border-red-700 active:text-white
       focus:bg-red-50 focus:bg-red-500 focus:border-red-600 focus:text-white
       disabled:text-red-300 disabled:bg-white disabled:border-red-200 disabled:cursor-not-allowed
       aria-disabled:text-red-300 aria-disabled:bg-white aria-disabled:border-red-200 aria-disabled:cursor-not-allowed
-    ],
-    ghost: %w[
+    },
+    ghost: %{
       text-gray-700 bg-transparent
       hover:bg-gray-50
       active:bg-gray-100
       focus:bg-gray-50 focus:ring-gray-300 focus:ring-2
       disabled:text-gray-300 disabled:bg-transparent disabled:border-gray-300 disabled:cursor-not-allowed
       aria-disabled:text-gray-300 aria-disabled:bg-transparent aria-disabled:border-gray-300 aria-disabled:cursor-not-allowed
-    ],
+    },
   }
 
   def initialize(

diff --git a/admin/app/components/solidus_admin/ui/forms/field/component.html.erb b/admin/app/components/solidus_admin/ui/forms/field/component.html.erb
@@ -11,6 +11,8 @@
 
   <% if @input_attributes.present? %>
     <%= render component('ui/forms/input').new(**@input_attributes) %>
+  <% elsif content.respond_to?(:render_in) %>
+    <%= render content %>
   <% else %>
     <%= content %>
   <% end %>

diff --git a/admin/app/components/solidus_admin/ui/forms/input/component.rb b/admin/app/components/solidus_admin/ui/forms/input/component.rb
@@ -71,6 +71,8 @@ def initialize(tag: :input, size: :m, error: nil, **attributes)
         disabled:bg-gray-50 disabled:text-gray-500 disabled:placeholder:text-gray-300 disabled:cursor-not-allowed
         invalid:border-red-400 invalid:hover:border-red-400 invalid:text-red-400
         aria-invalid:border-red-400 aria-invalid:hover:border-red-400 aria-invalid:text-red-400
+        read-only:bg-gray-15 focus:read-only:bg-gray-15 focus:read-only:ring-0 read-only:cursor-not-allowed
+        read-only:focus:border-gray-300 read-only:hover:border-gray-300 read-only:hover:focus:border-gray-300
       ],
       SIZES[size],
       specialized_classes,

diff --git a/admin/app/components/solidus_admin/ui/forms/switch/component.rb b/admin/app/components/solidus_admin/ui/forms/switch/component.rb
@@ -2,24 +2,8 @@
 
 class SolidusAdmin::UI::Forms::Switch::Component < SolidusAdmin::BaseComponent
   SIZES = {
-    s: '
-      w-8 h-5
-
-      after:w-4 after:h-4
-      after:top-0.5 after:left-0.5
-
-      active:after:w-4
-      after:checked:left-[1.875rem]
-    ',
-    m: '
-      w-10 h-6
-
-      after:w-5 after:h-5
-      after:top-0.5 after:left-0.5
-
-      active:after:w-5
-      after:checked:left-[2.375rem]
-    ',
+    s: 'w-8 h-5 after:w-4 after:h-4 after:checked:translate-x-3',
+    m: 'w-10 h-6 after:w-5 after:h-5 after:checked:translate-x-4',
   }.freeze
 
   def initialize(size: :m, **attributes)
@@ -32,14 +16,22 @@ def call
       type: 'checkbox',
       class: "
         #{SIZES.fetch(@size)}
-        appearance-none	outline-0 cursor-pointer bg-gray-200 inline-block rounded-full relative
+        rounded-full after:rounded-full
+        appearance-none	inline-block relative p-0.5 cursor-pointer
+
+        outline-none
+        focus:ring focus:ring-gray-300 focus:ring-0.5 focus:ring-offset-1
+        active:ring active:ring-gray-300 active:ring-0.5 active:ring-offset-1
 
-        after:content-[''] after:absolute after:bg-white
-        after:duration-300 after:rounded-full after:checked:-translate-x-full
+        disabled:cursor-not-allowed
+        after:top-0 after:left-0
+        after:content-[''] after:block
+        after:transition-all after:duration-300 after:ease-in-out
 
+        bg-gray-200 after:bg-white
         hover:bg-gray-300
-        disabled:opacity-40 disabled:cursor-not-allowed
-        checked:bg-gray-500 checked:hover:bg-gray-700
+        checked:bg-gray-500 checked:hover:bg-gray-70
+        disabled:opacity-40
       ",
       **@attributes,
     )

diff --git a/admin/app/javascript/solidus_admin/controllers/hello_controller.js b/admin/app/javascript/solidus_admin/controllers/hello_controller.js
diff --git a/admin/spec/components/previews/solidus_admin/ui/button/component_preview.rb b/admin/spec/components/previews/solidus_admin/ui/button/component_preview.rb
@@ -25,6 +25,6 @@ def group
   private
 
   def icon_options
-    @icon_options ||= ['search-line'] + component('ui/icon')::NAMES.sample(10)
+    @icon_options ||= ['search-line'] + component('ui/icon')::NAMES.to_a.sample(10)
   end
 end
diff --git a/...spec/components/previews/solidus_admin/ui/forms/input/component_preview/overview.html.erb b/...spec/components/previews/solidus_admin/ui/forms/input/component_preview/overview.html.erb
@@ -25,4 +25,9 @@
     <h6 class="text-gray-500 mb-3 mt-0">Disabled filled</h6>
     <%= render current_component.new(value: "My value", disabled: true) %>
   </div>
+
+  <div class="mb-8">
+    <h6 class="text-gray-500 mb-3 mt-0">Readonly</h6>
+    <%= render current_component.new(value: "My value", readonly: true) %>
+  </div>
 </section>