Adjust spacing on NavigationList component (#347)

baoagency · Dec 18, 2023 · aef9f39 · aef9f39
1 parent 62529d0
commit aef9f39
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/app/assets/stylesheets/polaris_view_components.pcss b/app/assets/stylesheets/polaris_view_components.pcss
@@ -2,4 +2,5 @@
 @import "./polaris_view_components/shopify_navigation.pcss";
 @import "./polaris_view_components/spacer_component.pcss";
 @import "./polaris_view_components/tooltip_component.pcss";
+@import "./polaris_view_components/navigation_list_component.pcss";
 @import "./polaris_view_components/custom.pcss";
diff --git a/app/assets/stylesheets/polaris_view_components/navigation_list_component.pcss b/app/assets/stylesheets/polaris_view_components/navigation_list_component.pcss
@@ -0,0 +1,13 @@
+.NavigationList {
+  padding-top: var(--p-space-3);
+  padding-bottom: var(--p-space-3);
+
+  ul {
+    margin: 0;
+  }
+
+  .Polaris-Navigation__Item {
+    padding-bottom: var(--p-space-1);
+    padding-top: var(--p-space-1);
+  }
+}
diff --git a/app/components/polaris/navigation_list_component.html.erb b/app/components/polaris/navigation_list_component.html.erb
@@ -1,5 +1,7 @@
-<%= polaris_card(sectioned: false, style: "padding-top: 1em; padding-bottom: 1em;") do |card| %>
-  <% items.each do |item| %>
-    <%= item %>
-  <% end %>
+<%= polaris_card(sectioned: false, classes: "NavigationList") do |card| %>
+  <ul>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  </ul>
 <% end %>