polaris_view_components 1.4.4 → 2.0.0

data/app/assets/stylesheets/polaris_view_components.pcss

@@ -1,6 +1,28 @@
+@import "./polaris_view_components/fonts.pcss";
 @import "@shopify/polaris/build/esm/styles.css";
+@import "./polaris_view_components/variables.pcss";
+
+@import "./polaris_view_components/action_list.pcss";
+@import "./polaris_view_components/banner.pcss";
+@import "./polaris_view_components/button.pcss";
+@import "./polaris_view_components/callout_card.pcss";
+@import "./polaris_view_components/card.pcss";
+@import "./polaris_view_components/custom.pcss";
+@import "./polaris_view_components/data_table.pcss";
+@import "./polaris_view_components/footer_help.pcss";
+@import "./polaris_view_components/form_layout.pcss";
+@import "./polaris_view_components/index_table.pcss";
+@import "./polaris_view_components/list.pcss";
+@import "./polaris_view_components/modal.pcss";
+@import "./polaris_view_components/navigation.pcss";
+@import "./polaris_view_components/navigation_list_component.pcss";
+@import "./polaris_view_components/option_list.pcss";
+@import "./polaris_view_components/page.pcss";
+@import "./polaris_view_components/pagination.pcss";
+@import "./polaris_view_components/popover.pcss";
+@import "./polaris_view_components/save_bar.pcss";
 @import "./polaris_view_components/shopify_navigation.pcss";
 @import "./polaris_view_components/spacer_component.pcss";
+@import "./polaris_view_components/tabs.pcss";
+@import "./polaris_view_components/text_fields.pcss";
 @import "./polaris_view_components/tooltip_component.pcss";
-@import "./polaris_view_components/navigation_list_component.pcss";
-@import "./polaris_view_components/custom.pcss";

data/app/components/polaris/action_list/item_component.html.erb

@@ -1,6 +1,6 @@
 <li>
   <%= render Polaris::BaseComponent.new(**system_arguments) do %>
-    <%= polaris_horizontal_stack(block_align: :center, gap: "4") do %>
+    <%= polaris_horizontal_stack(block_align: :center, gap: "2") do %>
       <% if @icon.present? %>
         <span class="Polaris-ActionList__Prefix">
           <%= polaris_icon(name: @icon) %>

data/app/components/polaris/action_list/section_component.html.erb

@@ -1,9 +1,9 @@
 <% section_markup = capture do %>
   <% if @title.present? %>
     <%= polaris_box(
-      padding_block_start: "4",
+      padding_block_start: "3",
       padding_inline_start: "4",
-      padding_block_end: "2",
+      padding_block_end: "1",
       padding_inline_end: "4"
     ) do %>
       <%= polaris_text(as: :p, variant: :headingXs) do %>
@@ -12,16 +12,17 @@
     <% end %>
   <% end %>
   <%= polaris_box(
-    as: :ul,
     padding: "2",
     padding_block_start: @title.present? ? "0" : (@multiple_sections ? "0" : "2"),
   ) do %>
-    <% if items.present? %>
-      <% items.each do |item| %>
-        <%= item %>
+    <%= polaris_vertical_stack(as: :ul, gap: "1") do %>
+      <% if items.present? %>
+        <% items.each do |item| %>
+          <%= item %>
+        <% end %>
+      <% else %>
+        <%= content %>
       <% end %>
-    <% else %>
-      <%= content %>
     <% end %>
   <% end %>
 <% end %>

data/app/components/polaris/banner_component.html.erb

@@ -1,47 +1,101 @@
-<%= render Polaris::BaseComponent.new(tag: 'div', **@system_arguments) do %>
-  <% if dismiss_button %>
-    <div class="Polaris-Banner__Dismiss">
-      <%= dismiss_button %>
-    </div>
-  <% end %>
-  <% unless @hide_icon %>
-    <%= polaris_box(padding_inline_end: "4") do %>
-      <%= render_icon %>
+<% content_with_actions = capture do %>
+  <%= polaris_vertical_stack(classes: "Polaris-Banner__ContentWrapper", gap: within_container? ? "1" : "3") do %>
+    <% if content.present? || action || secondary_action %>
+
+      <% if content.present? %>
+        <%= polaris_box(padding_inline_end: within_container? ? "2" : nil) do %>
+          <%= content %>
+        <% end %>
+      <% end %>
+
+      <% if action || secondary_action %>
+        <%= polaris_box do %>
+          <%= polaris_button_group do |group| %>
+            <% if action %>
+              <% group.with_item do %>
+                <%= polaris_box(padding_inline_end: "1") do %>
+                  <%= action %>
+                <% end %>
+              <% end %>
+            <% end %>
+
+            <% if secondary_action %>
+              <% group.with_item do %>
+                <%= secondary_action %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+
     <% end %>
   <% end %>
-  <div class="Polaris-Banner__ContentWrapper">
-    <% if @title.present? %>
-      <%= polaris_text(as: :h2, variant: :headingMd, break_word: true) do %>
-        <%= @title %>
+<% end %>
+
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <% if has_title? && !within_container? %>
+    <%= polaris_box(width: "100%") do %>
+      <%= polaris_vertical_stack do %>
+        <%= polaris_box(classes: "Polaris-Banner__TopBar") do %>
+          <%= polaris_horizontal_stack(align: :space_between, block_align: :center, wrap: false, gap: "2") do %>
+            <%= polaris_horizontal_stack(wrap: false, gap: "1") do %>
+              <% unless @hide_icon %>
+                <%= polaris_box do %>
+                  <%= render_icon %>
+                <% end %>
+              <% end %>
+              <% if has_title? %>
+                <%= polaris_text(as: :h2, variant: :headingSm, break_word: true) do %>
+                  <%= @title %>
+                <% end %>
+              <% end %>
+            <% end %>
+            <% if dismiss_button %>
+              <%= polaris_box(classes: "Polaris-Banner__DismissButton") do %>
+                <%= dismiss_button %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+        <% if has_content? %>
+          <%= polaris_box(padding: "4") do %>
+            <%= content_with_actions %>
+          <% end %>
+        <% end %>
       <% end %>
     <% end %>
-    <% if content.present? || action || secondary_action %>
-      <%= polaris_box(padding_block_start: "05", padding_block_end: "05") do %>
-        <%= content %>
-
-        <% if action || secondary_action %>
+  <% else %>
+    <%= polaris_box(width: "100%", padding: within_container? ? "2" : "3") do %>
+      <%= polaris_horizontal_stack(align: :space_between, block_align: :start, wrap: false, gap: "2") do %>
+        <%= polaris_horizontal_stack(wrap: false, gap: "1") do %>
+          <% unless @hide_icon %>
+            <%= polaris_box(classes: "Polaris-Banner__InlineIcon") do %>
+              <%= render_icon %>
+            <% end %>
+          <% end %>
           <%= polaris_box(
-            padding_block_start: @within == :container ? "3" : "4",
-            padding_block_end: @within == :container ? "1" : nil
+            padding: within_container? ? nil : "1",
+            padding_block_start: (has_title? || within_container?) ? nil : "1_5",
+            classes: has_title? ? nil : "Polaris-Banner__ContainerContentWrapper"
           ) do %>
-            <%= polaris_button_group do |group| %>
-              <% if action %>
-                <% group.with_item do %>
-                  <%= polaris_box(padding_inline_end: "2") do %>
-                    <%= action %>
-                  <% end %>
+            <%= polaris_vertical_stack(gap: "1") do %>
+              <% if has_title? %>
+                <%= polaris_text(as: :h2, variant: :headingSm, break_word: true) do %>
+                  <%= @title %>
                 <% end %>
               <% end %>
-
-              <% if secondary_action %>
-                <% group.with_item do %>
-                  <%= secondary_action %>
-                <% end %>
+              <% if has_content? %>
+                <%= content_with_actions %>
               <% end %>
             <% end %>
           <% end %>
         <% end %>
+        <% if dismiss_button %>
+          <%= polaris_box(classes: "Polaris-Banner__DismissButton") do %>
+            <%= dismiss_button %>
+          <% end %>
+        <% end %>
       <% end %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>

data/app/components/polaris/banner_component.rb

@@ -4,7 +4,7 @@ module Polaris
   class BannerComponent < Polaris::Component
     STATUS_DEFAULT = :default
     STATUS_MAPPINGS = {
-      STATUS_DEFAULT => "",
+      STATUS_DEFAULT => "Polaris-Banner--statusInfo",
       :success => "Polaris-Banner--statusSuccess",
       :info => "Polaris-Banner--statusInfo",
       :warning => "Polaris-Banner--statusWarning",
@@ -28,12 +28,14 @@ module Polaris
     }
 
     renders_one :action, ->(**system_arguments) do
-      Polaris::ButtonComponent.new(classes: "Polaris-Banner__Button Polaris-Banner__PrimaryAction", **system_arguments)
+      Polaris::ButtonComponent.new(**system_arguments)
+    end
+    renders_one :secondary_action, ->(**system_arguments) do
+      Polaris::ButtonComponent.new(**system_arguments)
     end
-    renders_one :secondary_action, "SecondaryAction"
     renders_one :dismiss_button, ->(**system_arguments) do
       render Polaris::ButtonComponent.new(plain: true, **system_arguments) do |button|
-        button.with_icon(name: "CancelSmallMinor")
+        button.with_icon(name: "XSmallIcon")
       end
     end
 
@@ -46,19 +48,26 @@ module Polaris
       **system_arguments
     )
       @status = status
+      @within = within
       @icon = icon || default_icon(status)
       @hide_icon = hide_icon
       @title = title
-
       @system_arguments = system_arguments
-      @system_arguments[:tabindex] = 0
-      @system_arguments[:role] = "status"
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Banner",
-        STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)],
-        WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, within, WITHIN_DEFAULT)]
-      )
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tabindex] = 0
+        opts[:role] = "status"
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          opts[:classes],
+          "Polaris-Banner",
+          STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, @status, STATUS_DEFAULT)],
+          WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, @within, WITHIN_DEFAULT)],
+          "Polaris-Banner--onlyTitle": has_title? && !has_content?
+        )
+      end
     end
 
     def render_icon
@@ -67,25 +76,24 @@ module Polaris
 
     def default_icon(status)
       case status
-      when :success then "CircleTickMajor"
-      when :critical then "DiamondAlertMajor"
+      when :success then "CheckIcon"
+      when :critical then "AlertDiamondIcon"
+      when :warning then "AlertTriangleIcon"
       else
-        "CircleInformationMajor"
+        "InfoIcon"
       end
     end
 
-    class SecondaryAction < Polaris::Component
-      def initialize(**system_arguments)
-        @system_arguments = system_arguments
-      end
+    def within_container?
+      @within == :container
+    end
 
-      def call
-        render(BaseButton.new(classes: "Polaris-Banner__SecondaryAction", **@system_arguments)) do
-          tag.span(class: "Polaris-Banner__Text") do
-            content
-          end
-        end
-      end
+    def has_title?
+      @title.present?
+    end
+
+    def has_content?
+      content.present? || action || secondary_action
     end
   end
 end

data/app/components/polaris/button_component.html.erb

@@ -25,13 +25,13 @@
       <div class="Polaris-Button__Icon">
         <% case @disclosure %>
         <% when :down %>
-          <%= polaris_icon(name: "CaretDownMinor") %>
+          <%= polaris_icon(name: "CaretDownIcon") %>
         <% when :up %>
-          <%= polaris_icon(name: "CaretUpMinor") %>
+          <%= polaris_icon(name: "CaretUpIcon") %>
         <% when :select %>
-          <%= polaris_icon(name: "SelectMinor") %>
+          <%= polaris_icon(name: "SelectIcon") %>
         <% when :horizontal_dots %>
-          <%= polaris_icon(name: "HorizontalDotsMinor") %>
+          <%= polaris_icon(name: "MenuHorizontalIcon") %>
         <% end %>
       </div>
     <% end %>

data/app/components/polaris/callout_card_component.rb

@@ -8,7 +8,7 @@ module Polaris
     end
     renders_one :dismiss_button, ->(**system_arguments) do
       render Polaris::ButtonComponent.new(plain: true, **system_arguments) do |button|
-        button.with_icon(name: "CancelSmallMinor")
+        button.with_icon(name: "XSmallIcon")
       end
     end
 

data/app/components/polaris/card_component.html.erb

@@ -1,4 +1,4 @@
-<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
   <% if tabs.present? %>
     <%= tabs %>
   <% end %>

data/app/components/polaris/card_component.rb

@@ -28,15 +28,21 @@ module Polaris
       @title = title
       @actions = actions
       @sectioned = sectioned
+      @subdued = subdued
       @footer_action_alignment = footer_action_alignment
-
       @system_arguments = system_arguments
-      @system_arguments[:tag] = :div
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-LegacyCard",
-        "Polaris-LegacyCard--subdued": subdued
-      )
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = :div
+        opts[:classes] = class_names(
+          opts[:classes],
+          "Polaris-LegacyCard",
+          "Polaris-LegacyCard--subdued": @subdued,
+          "Polaris-LegacyCard--withoutTitle": @title.blank?
+        )
+      end
     end
 
     def render_footer?

data/app/components/polaris/checkbox_component.rb

@@ -64,7 +64,7 @@ module Polaris
     end
 
     def icon_name
-      indeterminate? ? "MinusMinor" : "TickSmallMinor"
+      indeterminate? ? "MinusIcon" : "CheckSmallIcon"
     end
 
     def before_render

data/app/components/polaris/data_table/cell_component.html.erb

@@ -3,9 +3,9 @@
     <%= link_to @sort_url, class: "Polaris-DataTable__Heading" do %>
       <span class="Polaris-DataTable__Icon">
         <% if @sorted == :asc %>
-          <%= polaris_icon(name: "CaretUpMinor") %>
+          <%= polaris_icon(name: "CaretUpIcon") %>
         <% else %>
-          <%= polaris_icon(name: "CaretDownMinor") %>
+          <%= polaris_icon(name: "CaretDownIcon") %>
         <% end %>
       </span>
       <%= content %>

data/app/components/polaris/dropzone_component.html.erb

@@ -115,7 +115,7 @@
           data: { target: "icon" },
           style: "border: none; background: none;"
         ) do |thumbnail| %>
-          <%= thumbnail.with_icon(name: "TimelineAttachmentMajor") %>
+          <%= thumbnail.with_icon(name: "AttachmentIcon") %>
         <% end %>
         <%= polaris_thumbnail(source: "#", size: :small, data: { target: "thumbnail" }) %>
       <% else %>
@@ -131,7 +131,7 @@
                 data: { target: "icon" },
                 style: "border: none; background: none;"
               ) do |thumbnail| %>
-                <%= thumbnail.with_icon(name: "TimelineAttachmentMajor") %>
+                <%= thumbnail.with_icon(name: "AttachmentIcon") %>
               <% end %>
               <%= polaris_thumbnail(source: "#", size: :small, data: { target: "thumbnail" }) %>
             <% end %>

data/app/components/polaris/filters_component.rb

@@ -46,7 +46,7 @@ module Polaris
       def call
         polaris_text_field(disabled: @disabled, **@system_arguments) do |text_field|
           text_field.with_prefix do
-            polaris_icon(name: "SearchMinor")
+            polaris_icon(name: "SearchIcon")
           end
         end
       end

data/app/components/polaris/frame/top_bar_component.html.erb

@@ -2,7 +2,7 @@
   <div class="Polaris-TopBar__Container">
     <div class="Polaris-TopBar__LeftContent">
       <button data-action="polaris-frame#openMenu" type="button" class="Polaris-TopBar__NavigationIcon">
-        <%= polaris_icon(name: "MobileHamburgerMajor") %>
+        <%= polaris_icon(name: "MenuIcon") %>
       </button>
 
       <% if @logo.present? %>

data/app/components/polaris/frame_component.html.erb

@@ -14,7 +14,7 @@
         class="Polaris-Frame__NavigationDismiss"
         tabindex="-1"
       >
-        <%= polaris_icon(name: "MobileCancelMajor") %>
+        <%= polaris_icon(name: "XIcon") %>
       </button>
     </div>
   <% end %>

data/app/components/polaris/headless_button.html.erb

@@ -24,13 +24,13 @@
     <div class="Polaris-Button__Icon">
       <% case @disclosure %>
       <% when :down %>
-        <%= polaris_icon(name: "CaretDownMinor") %>
+        <%= polaris_icon(name: "CaretDownIcon") %>
       <% when :up %>
-        <%= polaris_icon(name: "CaretUpMinor") %>
+        <%= polaris_icon(name: "CaretUpIcon") %>
       <% when :select %>
-        <%= polaris_icon(name: "SelectMinor") %>
+        <%= polaris_icon(name: "SelectIcon") %>
       <% when :horizontal_dots %>
-        <%= polaris_icon(name: "HorizontalDotsMinor") %>
+        <%= polaris_icon(name: "MenuHorizontalIcon") %>
       <% end %>
     </div>
   <% end %>

data/app/components/polaris/headless_button.rb

@@ -83,7 +83,7 @@ module Polaris
         "Polaris-Button--loading": loading,
         "Polaris-Button--fullWidth": full_width,
         "Polaris-Button--monochrome": monochrome,
-        "Polaris-Button--outline": outline,
+        # "Polaris-Button--outline": outline,
         "Polaris-Button--plain": plain,
         "Polaris-Button--primary": primary,
         "Polaris-Button--pressed": pressed,

data/app/components/polaris/inline_error_component.html.erb

@@ -1,6 +1,6 @@
 <%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
   <div class="Polaris-InlineError__Icon">
-    <%= polaris_icon(name: "DiamondAlertMinor") %>
+    <%= polaris_icon(name: "InfoIcon") %>
   </div>
   <%= content %>
 <% end %>

data/app/components/polaris/modal/section_component.rb

@@ -15,7 +15,7 @@ class Polaris::Modal::SectionComponent < Polaris::Component
 
   def call
     render(Polaris::BaseComponent.new(**system_arguments)) do
-      render(Polaris::BoxComponent.new(as: :section, padding: "5")) do
+      render(Polaris::BoxComponent.new(as: :section, padding: "4")) do
         content
       end
     end

data/app/components/polaris/modal_component.html.erb

@@ -23,12 +23,13 @@
         <% if @title.present? %>
           <%= polaris_box(
             classes: "Polaris-Modal-Header",
-            padding_block_start: "4",
-            padding_block_end: "4",
-            padding_inline_start: "5",
-            padding_inline_end: "5",
+            padding_block_start: "2",
+            padding_block_end: "2",
+            padding_inline_start: "4",
+            padding_inline_end: "4",
             border_block_end_width: "1",
-            border_color: "border-subdued"
+            border_color: "border-subdued",
+            background: "bg-subdued"
           ) do %>
             <%= polaris_horizontal_grid(
               classes: "Polaris-Modal-Header__Title",
@@ -36,7 +37,7 @@
               gap: "4"
             ) do %>
               <%= polaris_horizontal_stack(gap: "4", block_align: :center) do %>
-                <%= polaris_text(as: :h2, variant: :headingLg, break_word: true) do %>
+                <%= polaris_text(as: :h2, variant: :headingMd, break_word: true) do %>
                   <%= @title %>
                 <% end %>
               <% end %>
@@ -44,7 +45,7 @@
                 <%= close_button %>
               <% else %>
                 <%= render(Polaris::BaseComponent.new(**close_button_arguments)) do %>
-                  <%= polaris_icon(name: "MobileCancelMajor", color: :base) %>
+                  <%= polaris_icon(name: "XIcon", color: :base) %>
                 <% end %>
               <% end %>
             <% end %>
@@ -64,9 +65,9 @@
             <%= polaris_box(
               border_color: "border-subdued",
               border_block_start_width: "1",
-              min_height: "var(--p-space-16)",
+              min_height: "var(--p-space-12)",
               padding: "4",
-              width: "100%"
+              width: "100%",
             ) do %>
               <%= polaris_stack(alignment: :center) do |stack| %>
                 <% stack.with_item(fill: true) do %>

data/app/components/polaris/modal_component.rb

@@ -5,7 +5,7 @@ module Polaris
     renders_one :close_button, ->(**system_arguments) do
       button_arguments = @close_button_arguments.deep_merge(system_arguments)
       render(Polaris::BaseComponent.new(**button_arguments)) do
-        polaris_icon(name: "MobileCancelMajor", color: :base)
+        polaris_icon(name: "XIcon", color: :base)
       end
     end
     renders_many :sections, Polaris::Modal::SectionComponent

data/app/components/polaris/navigation_list_component.html.erb

@@ -1,7 +1,7 @@
 <%= polaris_card(sectioned: false, classes: "NavigationList") do |card| %>
-  <ul>
+  <%= polaris_vertical_stack(as: :ul, gap: "1") do %>
     <% items.each do |item| %>
       <%= item %>
     <% end %>
-  </ul>
+  <% end %>
 <% end %>

data/app/components/polaris/option_list/checkbox_component.html.erb

@@ -1,14 +1,21 @@
 <%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
-  <label class="Polaris-OptionList-Option__Label">
+  <label class="Polaris-OptionList-Option__Label Polaris-OptionList-Option__CheckboxLabel Polaris-OptionList-Option__MultiSelectOption">
     <div class="Polaris-OptionList-Option__Checkbox">
-      <div class="Polaris-OptionList-Checkbox">
-        <%= checkbox %>
-        <div class="Polaris-OptionList-Checkbox__Backdrop"></div>
-        <div class="Polaris-OptionList-Checkbox__Icon">
-          <%= polaris_icon(name: "TickMinor") %>
-        </div>
-      </div>
+      <label class="Polaris-Choice Polaris-Checkbox__ChoiceLabel">
+        <span class="Polaris-Choice__Control">
+          <span class="Polaris-Checkbox">
+            <%= checkbox %>
+            <div class="Polaris-Checkbox__Backdrop"></div>
+            <span class="Polaris-Checkbox__Icon Polaris-Checkbox--animated">
+              <svg viewBox="0 0 16 16" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><path class="Polaris-Checkbox--checked" d="M1.5,5.5L3.44655,8.22517C3.72862,8.62007,4.30578,8.64717,4.62362,8.28044L10.5,1.5" transform="translate(2 2.980376)" opacity="0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" pathLength="1"></path></svg>
+            </span>
+          </span>
+        </span>
+        <span class="Polaris-Choice__Label">
+          <span></span>
+        </span>
+      </label>
     </div>
-    <%= @label %>
+    <span><%= @label %></span>
   </label>
 <% end %>

data/app/components/polaris/option_list/checkbox_component.rb

@@ -26,7 +26,7 @@ class Polaris::OptionList::CheckboxComponent < Polaris::Component
     @system_arguments.tap do |opts|
       opts[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-OptionList-Checkbox__Input"
+        "Polaris-Checkbox__Input"
       )
     end
   end