Add a [readonly] style for input components

solidusio · Oct 23, 2023 · 5576314 · 5576314
1 parent e03df14
commit 5576314
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
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/...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>