From 12e9207a563cfe60026868396bd63dc5071f291b Mon Sep 17 00:00:00 2001
From: Kirill Platonov <kirill@platonov.net>
Date: Sat, 10 Feb 2024 11:59:53 +0100
Subject: [PATCH] Improve styles for banners within cards

---
 app/assets/stylesheets/polaris_v12_overrides/banner.pcss  | 6 ++++++
 app/assets/stylesheets/polaris_view_components.css        | 4 ++++
 app/components/polaris/banner_component.html.erb          | 1 +
 .../banner_component_preview/within_card.html.erb         | 8 ++------
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/polaris_v12_overrides/banner.pcss b/app/assets/stylesheets/polaris_v12_overrides/banner.pcss
index 2c0cf841..6e6ce51e 100644
--- a/app/assets/stylesheets/polaris_v12_overrides/banner.pcss
+++ b/app/assets/stylesheets/polaris_v12_overrides/banner.pcss
@@ -75,12 +75,18 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner {
     .Polaris-Banner__InlineIcon {
       padding: calc(var(--p-space-100) * -1);
       margin-left: calc(var(--p-space-100) * -1);
+      margin-bottom: calc(var(--p-space-200) * -1);
     }
 
     .Polaris-Banner__DismissButton {
       padding: calc(var(--p-space-100) * -1);
       margin-top: calc(var(--p-space-100) * -1);
       margin-right: calc(var(--p-space-100) * -1);
+      margin-bottom: calc(var(--p-space-100) * -1);
+    }
+
+    .Polaris-Banner__ContainerContentWrapper {
+      margin-top: 2px;
     }
 
     &.Polaris-Banner--statusInfo {
diff --git a/app/assets/stylesheets/polaris_view_components.css b/app/assets/stylesheets/polaris_view_components.css
index 3aeb9aa8..456d5174 100644
--- a/app/assets/stylesheets/polaris_view_components.css
+++ b/app/assets/stylesheets/polaris_view_components.css
@@ -577,10 +577,14 @@
       }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinContentContainer .Polaris-Banner__InlineIcon {
       padding: calc(var(--p-space-100) * -1);
       margin-left: calc(var(--p-space-100) * -1);
+      margin-bottom: calc(var(--p-space-200) * -1);
     }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinContentContainer .Polaris-Banner__DismissButton {
       padding: calc(var(--p-space-100) * -1);
       margin-top: calc(var(--p-space-100) * -1);
       margin-right: calc(var(--p-space-100) * -1);
+      margin-bottom: calc(var(--p-space-100) * -1);
+    }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinContentContainer .Polaris-Banner__ContainerContentWrapper {
+      margin-top: 2px;
     }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinContentContainer.Polaris-Banner--statusInfo {
       background-color: var(--p-color-bg-surface-info);
     }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner.Polaris-Banner--withinContentContainer.Polaris-Banner--statusSuccess {
diff --git a/app/components/polaris/banner_component.html.erb b/app/components/polaris/banner_component.html.erb
index a5c1ff4d..8f61895e 100644
--- a/app/components/polaris/banner_component.html.erb
+++ b/app/components/polaris/banner_component.html.erb
@@ -76,6 +76,7 @@
           <%= polaris_box(
             padding: within_container? ? nil : "1",
             padding_block_start: (has_title? || within_container?) ? nil : "1_5",
+            classes: has_title? ? nil : "Polaris-Banner__ContainerContentWrapper"
           ) do %>
             <%= polaris_vertical_stack(gap: "1") do %>
               <% if has_title? %>
diff --git a/demo/app/previews/banner_component_preview/within_card.html.erb b/demo/app/previews/banner_component_preview/within_card.html.erb
index 0ef282fd..a55f6cec 100644
--- a/demo/app/previews/banner_component_preview/within_card.html.erb
+++ b/demo/app/previews/banner_component_preview/within_card.html.erb
@@ -1,11 +1,7 @@
 <%= polaris_card(title: "Online store dashboard") do %>
   <%= polaris_text_container do %>
-    <%= polaris_banner(within: :container) do |banner| %>
-      <% banner.with_dismiss_button(url: "#") %>
-      <p>
-        Use your finance report to get detailed information about your business.<br>
-        <%= polaris_link(url: "#", monochrome: true) { "Let us know what you think" } %>
-      </p>
+    <%= polaris_banner(within: :container) do %>
+      <p>Use your finance report to get detailed information about your business.</p>
     <% end %>
 
     <p>View a summary of your online store’s performance.</p>