Improve styles for banners within cards

baoagency · Feb 10, 2024 · 12e9207 · 12e9207
1 parent d85fb0c
commit 12e9207
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git 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
diff --git 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
@@ -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>