diff --git a/.changeset/seven-students-chew.md b/.changeset/seven-students-chew.md
new file mode 100644
index 0000000000..4bddbac337
--- /dev/null
+++ b/.changeset/seven-students-chew.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Prevent Blankslates from having a zero width inside flex containers
diff --git a/app/components/primer/beta/blankslate.pcss b/app/components/primer/beta/blankslate.pcss
index 949d4d43dd..29486ec0c0 100644
--- a/app/components/primer/beta/blankslate.pcss
+++ b/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);
}
}
}
-
\ No newline at end of file
diff --git a/previews/primer/beta/blankslate_preview.rb b/previews/primer/beta/blankslate_preview.rb
index 201986aaa2..998bbedd42 100644
--- a/previews/primer/beta/blankslate_preview.rb
+++ b/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
diff --git a/previews/primer/beta/blankslate_preview/inside_flex_container.html.erb b/previews/primer/beta/blankslate_preview/inside_flex_container.html.erb
new file mode 100644
index 0000000000..d4a801ef4a
--- /dev/null
+++ b/previews/primer/beta/blankslate_preview/inside_flex_container.html.erb
@@ -0,0 +1,6 @@
+
+ <%= render Primer::Beta::Blankslate.new do |component| %>
+ <% component.with_heading(tag: :h2) { "Heading" } %>
+ <% component.with_description { "Description" } %>
+ <% end %>
+
diff --git a/test/system/alpha/action_menu_test.rb b/test/system/alpha/action_menu_test.rb
index c6c366f930..2988e65088 100644
--- a/test/system/alpha/action_menu_test.rb
+++ b/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
diff --git a/test/system/beta/blankslate_test.rb b/test/system/beta/blankslate_test.rb
new file mode 100644
index 0000000000..44c342da26
--- /dev/null
+++ b/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
diff --git a/test/test_helper.rb b/test/test_helper.rb
index 20b4320b12..f3b4c87e3b 100644
--- a/test/test_helper.rb
+++ b/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"
diff --git a/test/test_helpers/js_test_helpers.rb b/test/test_helpers/js_test_helpers.rb
new file mode 100644
index 0000000000..a06888c4c5
--- /dev/null
+++ b/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