Adapts Blankslate to render proportionally in narrow areas (#2337)

Co-authored-by: mperrotti <[email protected]>

.changeset/new-dolphins-love.md

@@ -0,0 +1,7 @@
+---
+"@primer/view-components": patch
+---
+
+Adapts Blankslate to render proportionally in narrow areas
+
+<!-- Changed components: Blankslate -->

app/components/primer/beta/blankslate.html.erb

@@ -1,19 +1,21 @@
 <%= wrapper do %>
-  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-    <%= visual %>
+  <div class="blankslate-container">
+    <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+      <%= visual %>
 
-    <%= heading %>
-    <%= description %>
+      <%= heading %>
+      <%= description %>
 
-    <% if primary_action.present? %>
-      <div class="blankslate-action">
-        <%= primary_action %>
-      </div>
+      <% if primary_action.present? %>
+        <div class="blankslate-action">
+          <%= primary_action %>
+        </div>
+      <% end %>
+      <% if secondary_action.present? %>
+        <div class="blankslate-action">
+          <%= secondary_action %>
+        </div>
+      <% end %>
     <% end %>
-    <% if secondary_action.present? %>
-      <div class="blankslate-action">
-        <%= secondary_action %>
-      </div>
-    <% end %>
-  <% end %>
+  </div>
 <% end %>

app/components/primer/beta/blankslate.pcss

@@ -1,12 +1,20 @@
 /* blankslate */
 
+.blankslate-container {
+  container-type: inline-size;
+}
+
 .blankslate {
+  --blankslate-outer-padding-block: var(--base-size-32);
+  --blankslate-outer-padding-inline: var(--base-size-32);
+
   position: relative;
-  padding: var(--base-size-32);
+  padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
   text-align: center;
 
   & p {
     color: var(--fgColor-muted);
+    font-size: var(--text-body-size-large);
   }
 
   & code {
@@ -35,6 +43,8 @@
 }
 
 .blankslate-heading {
+  font-size: var(--text-title-size-medium);
+  font-weight: var(--text-title-weight-medium);
   margin-bottom: var(--base-size-4);
 }
 
@@ -55,7 +65,8 @@
 }
 
 .blankslate-spacious {
-  padding: var(--base-size-80) var(--base-size-40);
+  --blankslate-outer-padding-block: var(--base-size-80);
+  --blankslate-outer-padding-inline: var(--base-size-40);
 }
 
 .blankslate-narrow {
@@ -88,3 +99,42 @@
 .blankslate-clean-background {
   border: 0;
 }
+
+/* At the time these styles were written,
+   `34rem` was our "small" breakpoint width */
+@container (max-width: 34rem) {
+  .blankslate {
+    --blankslate-outer-padding-block: var(--base-size-20);
+    --blankslate-outer-padding-inline: var(--base-size-20);
+  }
+
+  .blankslate-spacious {
+    --blankslate-outer-padding-block: var(--base-size-44);
+    --blankslate-outer-padding-inline: var(--base-size-28);
+  }
+
+  .blankslate-icon {
+    margin-bottom: var(--stack-gap-condensed);
+  }
+
+  .blankslate-heading {
+    font-size: var(--text-title-size-small);
+  }
+
+  .blankslate p {
+    font-size: var(--text-body-size-medium);
+  }
+
+  .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);
+    }
+  }
+}
+