Prevent Blankslates from having a zero width inside flex containers (#…

…2412)

.changeset/seven-students-chew.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Prevent Blankslates from having a zero width inside flex containers

app/components/primer/beta/blankslate.pcss

@@ -2,6 +2,7 @@
 
 .blankslate-container {
   container-type: inline-size;
+  width: 100%;
 }
 
 .blankslate {
@@ -127,14 +128,13 @@
 
   .blankslate-action {
     margin-top: var(--stack-gap-condensed);
-    
+
     &:first-of-type {
       margin-top: var(--stack-gap-normal);
     }
-  
+
     &:last-of-type {
       margin-bottom: calc(var(--stack-gap-condensed) / 2);
     }
   }
 }
-

previews/primer/beta/blankslate_preview.rb

@@ -134,6 +134,9 @@ def full(narrow: false, spacious: false, border: false)
           component.with_secondary_action(href: "#").with_content("Learn more about vulnerabilities")
         end
       end
+
+      def inside_flex_container
+      end
     end
   end
 end

previews/primer/beta/blankslate_preview/inside_flex_container.html.erb

@@ -0,0 +1,6 @@
+<div style="display: flex">
+  <%= render Primer::Beta::Blankslate.new do |component| %>
+    <% component.with_heading(tag: :h2) { "Heading" } %>
+    <% component.with_description { "Description" } %>
+  <% end %>
+</div>

test/system/alpha/action_menu_test.rb

@@ -5,6 +5,7 @@
 module Alpha
   class IntegrationActionMenuTest < System::TestCase
     include Primer::ClipboardTestHelpers
+    include Primer::JsTestHelpers
 
     ###### HELPER METHODS ######
 
@@ -50,12 +51,6 @@ def assert_no_alert(message = nil, &block)
       # expected behavior
     end
 
-    def evaluate_multiline_script(script)
-      page.evaluate_script(<<~JS)
-        (() => { #{script} })()
-      JS
-    end
-
     ########## TESTS ############
 
     def test_dynamic_labels

test/system/beta/blankslate_test.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "system/test_case"
+
+module Beta
+  class IntegrationBlankslateTest < System::TestCase
+    include Primer::JsTestHelpers
+
+    def test_has_a_width_when_inside_a_flex_container
+      visit_preview(:inside_flex_container)
+
+      info = evaluate_multiline_script(<<~JS)
+        const style = window.getComputedStyle(document.querySelector('.blankslate'));
+        return {
+          width: style.getPropertyValue('width'),
+          padding: style.getPropertyValue('padding')
+        }
+      JS
+
+      width = info["width"].to_i
+      padding = info["padding"].to_i
+      calc_width = width - (padding * 2)
+
+      assert calc_width > 0, "Blankslate appears to have zero width"
+    end
+  end
+end

test/test_helper.rb

@@ -20,6 +20,7 @@
 require "view_component/test_helpers"
 require "test_helpers/component_test_helpers"
 require "test_helpers/clipboard_test_helpers"
+require "test_helpers/js_test_helpers"
 require "action_controller/railtie"
 require "rails/test_unit/railtie"
 require "active_model/railtie"

test/test_helpers/js_test_helpers.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Primer
+  module JsTestHelpers
+    def evaluate_multiline_script(script)
+      page.evaluate_script(<<~JS)
+        (() => { #{script} })()
+      JS
+    end
+  end
+end