Skip to content

Commit

Permalink
Refactor Styling for select tag in ui/forms/input component
Browse files Browse the repository at this point in the history
Modified input component styling to prevent select elements from appearing
as readonly by default.
  • Loading branch information
rainerdema committed Oct 30, 2023
1 parent cd87886 commit 954c79d
Showing 1 changed file with 5 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,21 @@ def initialize(tag: :input, size: :m, error: nil, **attributes)
raise ArgumentError, "unsupported tag: #{tag}" unless %i[input textarea select].include?(tag)

specialized_classes = []
readonly_classes = "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"

case tag
when :input
specialized_classes << "form-input"
specialized_classes << readonly_classes
specialized_classes << HEIGHTS[size]
if attributes[:type] && !TYPES.include?(attributes[:type])
raise ArgumentError, "unsupported type attribute: #{attributes[:type]}"
end
when :textarea
specialized_classes << "form-textarea"
specialized_classes << readonly_classes
specialized_classes << MULTILINE_HEIGHTS[size]
when :select
if attributes[:multiple]
Expand All @@ -71,8 +76,6 @@ 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,
Expand Down

0 comments on commit 954c79d

Please sign in to comment.