diff --git a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb b/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb
index 41b3ae17d89..3a4b2990c81 100644
--- 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
index da4e347bb71..d621b91faac 100644
--- 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
index 332cf74f2cc..3aa1a5ee0be 100644
--- 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
index b3cf234b5fe..39dd4d0d493 100644
--- 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
index 28a3811f2fd..388eaddcef8 100644
--- 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
index 4c6bb2bad05..53ac3ae9a91 100644
--- 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
index d233c2adf7c..3b107c4c80b 100644
--- 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
deleted file mode 100644
index ea795259d92..00000000000
--- a/admin/app/javascript/solidus_admin/controllers/hello_controller.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
- greet() {
- console.log(`Hello World! ${new Date()}`)
- }
-}
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
index 9d55d2d5cdd..e2edd012a46 100644
--- 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/admin/spec/components/previews/solidus_admin/ui/forms/input/component_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/ui/forms/input/component_preview/overview.html.erb
index 33a55354b1d..5684fa782c8 100644
--- a/admin/spec/components/previews/solidus_admin/ui/forms/input/component_preview/overview.html.erb
+++ b/admin/spec/components/previews/solidus_admin/ui/forms/input/component_preview/overview.html.erb
@@ -25,4 +25,9 @@
Disabled filled
<%= render current_component.new(value: "My value", disabled: true) %>
+
+
+
Readonly
+ <%= render current_component.new(value: "My value", readonly: true) %>
+