Merge branch 'main' into depfu/update/yarn/heroicons-2.1.1

Gemfile.lock

@@ -198,7 +198,8 @@ GEM
       ruby2_keywords
     dry-initializer (3.1.1)
     e2mmap (0.1.0)
-    erb-formatter (0.3.0)
+    erb-formatter (0.6.0)
+      syntax_tree (~> 6.0)
     erubi (1.12.0)
     factory_bot (6.4.2)
       activesupport (>= 5.0.0)
@@ -318,6 +319,7 @@ GEM
     prefixed_ids (1.6.1)
       hashids (>= 1.0.0, < 2.0.0)
       rails (>= 6.0.0)
+    prettier_print (1.2.1)
     psych (5.1.2)
       stringio
     public_suffix (5.0.4)
@@ -492,6 +494,8 @@ GEM
       lint_roller (~> 1.1)
       rubocop-performance (~> 1.19.1)
     stringio (3.1.0)
+    syntax_tree (6.2.0)
+      prettier_print (>= 1.2.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     test-prof (1.3.1)

app/components/avo/field_wrapper_component.html.erb

@@ -2,15 +2,24 @@
   class: classes,
   style: style,
   data: data do %>
-  <div class="h-full <% if stacked? %> md:pt-4 md:w-full <% else %> md:pt-0 <% if short? %> md:h-10 <% else %> md:h-14 <% end %> <% end %> pt-4 flex self-start items-center flex-shrink-0 <%= @field.get_html(:classes, view: view, element: :label) %> w-48 <% if compact? %> md:w-48 xl:w-64 <% else %> md:w-64 <% end %> px-6 uppercase font-semibold text-gray-500 text-sm" data-slot="label">
+  <%= content_tag :div, class: class_names("pt-4 flex self-start items-center flex-shrink-0 w-48 px-6 uppercase font-semibold text-gray-500 text-sm", @field.get_html(:classes, view: view, element: :label), {
+    "md:pt-4 md:w-full": stacked?,
+    "h-full md:pt-0": !stacked?,
+    "md:h-10 ": !stacked? && short?,
+    "md:h-14 ": !stacked? && !short?,
+    "md:w-48 xl:w-64": compact?,
+    "md:w-64": !compact?,
+  }), data: {slot: "label"} do %>
     <% if form.present? %>
       <%= form.label field.id, label %>
     <% else %>
       <%= field.name %>
     <% end %>
     <% if on_edit? && field.is_required? %> <span class="text-red-600 ml-1">*</span> <% end %>
-  </div>
-  <div class="flex-1 flex flex-row md:min-h-inherit py-2 <% if stacked? %> pb-4 <% else %><% end %> px-6 <%= @field.get_html(:classes, view: view, element: :content) %>" data-slot="value">
+  <% end %>
+  <%= content_tag :div, class: class_names("flex-1 flex flex-row md:min-h-inherit py-2 px-6", @field.get_html(:classes, view: view, element: :content), {
+    "pb-4": stacked?,
+  }), data: {slot: "value"} do %>
     <div class="self-center w-full <% unless full_width? || compact? || stacked? %> md:w-8/12 <% end %>">
       <% if on_show? %>
         <% if field.value.blank? and dash_if_blank %>
@@ -28,7 +37,7 @@
         <% end %>
       <% end %>
     </div>
-  </div>
+  <% end %>
   <% if params[:avo_debug].present? %>
     <!-- Raw value: -->
     <!-- <%= sanitize field.value.inspect %> -->

app/components/avo/row_component.html.erb

@@ -1,3 +1,3 @@
-<div class="flex flex-col sm:flex-row min-h-14 grow shrink-0" data-component="<%= self.class %>">
+<%= content_tag :div, class: "relative grid auto-cols-fr grid-flow-col min-h-14", data: {component: self.class.to_s} do %>
   <%= body %>
-</div>
+<% end %>

spec/system/avo/app_spec.rb

@@ -24,15 +24,15 @@
 
       expect(find_field("comment_body").value).to eql "hey there"
 
-      fill_in 'comment_body', with: 'yes'
-      click_on 'Save'
+      fill_in "comment_body", with: "yes"
+      click_on "Save"
       wait_for_loaded
 
-      comment.reload
-      expect(comment.body).to eq 'yes'
-
       expect(current_path).to eq "/admin/resources/projects/#{project.id}"
       expect(page).to have_text("Comment was successfully updated.").once
+
+      comment.reload
+      expect(comment.body).to eq "yes"
     end
 
     it "only displays one alert on record destroy from has_many" do