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