Add support for borderless cards (#403)

baoagency · Apr 2, 2024 · b56fed7 · b56fed7
1 parent 2d08f9b
commit b56fed7
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 1 deletion.
diff --git a/app/assets/stylesheets/polaris_view_components.css b/app/assets/stylesheets/polaris_view_components.css
diff --git a/app/assets/stylesheets/polaris_view_components/card.pcss b/app/assets/stylesheets/polaris_view_components/card.pcss
@@ -38,4 +38,13 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard {
       padding-top: var(--p-space-400);
     }
   }
+
+  &.Polaris-LegacyCard--borderless {
+    border: none;
+    box-shadow: none;
+
+    &::before {
+      content: none;
+    }
+  }
 }
diff --git a/app/components/polaris/card_component.rb b/app/components/polaris/card_component.rb
@@ -22,13 +22,15 @@ def initialize(
       actions: [],
       sectioned: true,
       subdued: false,
+      borders: true,
       footer_action_alignment: FOOTER_ACTION_ALIGNMENT_DEFAULT,
       **system_arguments
     )
       @title = title
       @actions = actions
       @sectioned = sectioned
       @subdued = subdued
+      @borders = borders
       @footer_action_alignment = footer_action_alignment
       @system_arguments = system_arguments
     end
@@ -40,7 +42,8 @@ def system_arguments
           opts[:classes],
           "Polaris-LegacyCard",
           "Polaris-LegacyCard--subdued": @subdued,
-          "Polaris-LegacyCard--withoutTitle": @title.blank?
+          "Polaris-LegacyCard--withoutTitle": @title.blank?,
+          "Polaris-LegacyCard--borderless": !@borders
         )
       end
     end

diff --git a/demo/app/previews/card_component_preview.rb b/demo/app/previews/card_component_preview.rb
@@ -75,4 +75,7 @@ def section_with_borders
 
   def without_title
   end
+
+  def borderless
+  end
 end
diff --git a/demo/app/previews/card_component_preview/borderless.html.erb b/demo/app/previews/card_component_preview/borderless.html.erb
@@ -0,0 +1,3 @@
+<%= polaris_card(title: "Online store dashboard", borders: false) do %>
+  <p>View a summary of your online store’s performance.</p>
+<% end %>