diff --git a/app/assets/stylesheets/polaris_view_components.css b/app/assets/stylesheets/polaris_view_components.css index 66060f89..751765cd 100644 --- a/app/assets/stylesheets/polaris_view_components.css +++ b/app/assets/stylesheets/polaris_view_components.css @@ -361,6 +361,11 @@ padding-top: var(--p-space-100); }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard.Polaris-LegacyCard--withoutTitle .Polaris-LegacyCard__Section:first-child { padding-top: var(--p-space-400); + }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard.Polaris-LegacyCard--borderless { + border: none; + box-shadow: none; + }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard.Polaris-LegacyCard--borderless::before { + content: none; }.Polaris--hidden { display: none !important; }/* Add missing 1/4 section for layout */@media (min-width: 30.625em) { diff --git a/app/assets/stylesheets/polaris_view_components/card.pcss b/app/assets/stylesheets/polaris_view_components/card.pcss index 1fdab2ee..d5ee96fe 100644 --- 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 index e5247ca2..b7b4bd17 100644 --- a/app/components/polaris/card_component.rb +++ b/app/components/polaris/card_component.rb @@ -22,6 +22,7 @@ def initialize( actions: [], sectioned: true, subdued: false, + borders: true, footer_action_alignment: FOOTER_ACTION_ALIGNMENT_DEFAULT, **system_arguments ) @@ -29,6 +30,7 @@ def initialize( @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 index 5b33485d..82a850ca 100644 --- 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 new file mode 100644 index 00000000..42b14962 --- /dev/null +++ b/demo/app/previews/card_component_preview/borderless.html.erb @@ -0,0 +1,3 @@ +<%= polaris_card(title: "Online store dashboard", borders: false) do %> +
View a summary of your online store’s performance.
+<% end %>