polaris_view_components 0.10.1 → 0.12.0

data/app/assets/stylesheets/polaris_view_components/custom.css

@@ -36,15 +36,16 @@ a.Polaris-Tag__Button {
   font-size: 1.25rem;
 }
 
-/* Remove box-shadow from buttons and links */
-.Polaris-Button::after,
-.Polaris-Button:focus::after,
-.Polaris-Breadcrumbs__Breadcrumb::after {
-  box-shadow: none !important;
+/* Remove focus styles for non-keyboard focus from buttons and links */
+.Polaris-Button, .Polaris-Breadcrumbs__Breadcrumb {
+  &:focus:not(:focus-visible)::after {
+    box-shadow: none !important;
+  }
 }
-
-.Polaris-Tabs__Tab:focus > .Polaris-Tabs__Title::after {
-  box-shadow: none !important;
+.Polaris-Tabs__Tab {
+  &:focus:not(:focus-visible) > .Polaris-Tabs__Title::after {
+    box-shadow: none !important;
+  }
 }
 
 /* ResourceItem */
@@ -176,3 +177,21 @@ a.Polaris-Tag__Button {
     display: none;
   }
 }
+
+/* EmptySearchResults */
+.Polaris-EmptySearchResults {
+  padding: 84px 0;
+
+  &__Content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+}
+
+/* ActionList */
+
+.Polaris-ActionList__Item {
+  border: none !important;
+}

data/app/assets/stylesheets/polaris_view_components.css

@@ -2268,15 +2268,13 @@ a.Polaris-Tag__Button {
 .Polaris-TextStyle--sizeSmall {
   font-size: 1.25rem;
 }
-/* Remove box-shadow from buttons and links */
-.Polaris-Button::after,
-.Polaris-Button:focus::after,
-.Polaris-Breadcrumbs__Breadcrumb::after {
-  box-shadow: none !important;
-}
-.Polaris-Tabs__Tab:focus > .Polaris-Tabs__Title::after {
-  box-shadow: none !important;
-}
+/* Remove focus styles for non-keyboard focus from buttons and links */
+.Polaris-Button:focus:not(:focus-visible)::after, .Polaris-Breadcrumbs__Breadcrumb:focus:not(:focus-visible)::after {
+    box-shadow: none !important;
+  }
+.Polaris-Tabs__Tab:focus:not(:focus-visible) > .Polaris-Tabs__Title::after {
+    box-shadow: none !important;
+  }
 /* ResourceItem */
 .Polaris-ResourceItem__Owned--offset {
   padding-left: 2rem;
@@ -2373,3 +2371,17 @@ a.Polaris-Tag__Button {
     display: none;
   }
 }
+/* EmptySearchResults */
+.Polaris-EmptySearchResults {
+  padding: 84px 0;
+}
+.Polaris-EmptySearchResults__Content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+/* ActionList */
+.Polaris-ActionList__Item {
+  border: none !important;
+}

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

@@ -2,6 +2,9 @@
   <%= render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover| %>
     <% popover.activator do %>
       <%= text_field %>
+      <% if @name.present? %>
+        <%= hidden_field_tag @name, nil, data: {polaris_autocomplete_target: "hiddenInput"} %>
+      <% end %>
     <% end %>
 
     <% if empty_state.present? %>

data/app/components/polaris/autocomplete_component.rb

@@ -24,11 +24,13 @@ module Polaris
     def initialize(
       multiple: false,
       url: nil,
+      name: nil,
       selected: [],
       **system_arguments
     )
       @multiple = multiple
       @url = url
+      @name = name
       @selected = selected
       @system_arguments = system_arguments
     end
@@ -42,6 +44,7 @@ module Polaris
           opts[:data][:polaris_autocomplete_url_value] = @url
         end
         opts[:data][:polaris_autocomplete_selected_value] = @selected
+        opts[:data][:polaris_autocomplete_multiple_value] = @multiple if @multiple.present?
       end
     end
 

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

@@ -30,6 +30,8 @@
           <%= polaris_icon(name: "CaretUpMinor") %>
         <% when :select %>
           <%= polaris_icon(name: "SelectMinor") %>
+        <% when :horizontal_dots %>
+          <%= polaris_icon(name: "HorizontalDotsMinor") %>
         <% end %>
       </div>
     <% end %>

data/app/components/polaris/card/header_component.html.erb

@@ -17,8 +17,10 @@
         <% end %>
       <% end %>
 
-      <% stack.item do %>
-        <%= content %>
+      <% if content.present? %>
+        <% stack.item do %>
+          <%= content %>
+        <% end %>
       <% end %>
     <% end %>
   <% end %>

data/app/components/polaris/data_table/column_component.rb

@@ -2,7 +2,7 @@ class Polaris::DataTable::ColumnComponent < Polaris::Component
   SORT_DEFAULT = false
   SORT_OPTIONS = [false, :asc, :desc]
 
-  attr_reader :title, :numeric, :total, :sorted, :sort_url
+  attr_reader :title, :numeric, :total, :sorted, :sort_url, :system_arguments
 
   def initialize(title, numeric: false, total: nil, sorted: SORT_DEFAULT, sort_url: nil, **system_arguments, &block)
     @title = title
@@ -11,6 +11,7 @@ class Polaris::DataTable::ColumnComponent < Polaris::Component
     @sorted = fetch_or_fallback(SORT_OPTIONS, sorted, SORT_DEFAULT)
     @sort_url = sort_url
     @block = block
+    @system_arguments = system_arguments
   end
 
   def call(row)

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

@@ -12,6 +12,7 @@
               header: true,
               sort_url: column.sort_url,
               sorted: column.sorted,
+              **column.system_arguments
             ) do %>
               <%= column.title %>
             <% end %>
@@ -26,6 +27,7 @@
                 tag: (index.zero? ? "th" : "td"),
                 scope: ("row" if index.zero?),
                 total: true,
+                **column.system_arguments
               ) do %>
                 <%= column.total %>
               <% end %>
@@ -35,18 +37,19 @@
       </thead>
       <tbody>
         <% @data.each do |row| %>
-          <tr class="Polaris-DataTable__TableRow <%= "Polaris-DataTable--hoverable" if @hoverable %>">
+          <%= render Polaris::BaseComponent.new(**row_arguments(row)) do %>
             <% columns.each_with_index do |column, index| %>
               <%= render_cell(
                 first: index.zero?,
                 numeric: column.numeric,
                 tag: (index.zero? ? "th" : "td"),
                 scope: ("row" if index.zero?),
+                **column.system_arguments
               ) do %>
                 <%= column.call(row) %>
               <% end %>
             <% end %>
-          </tr>
+          <% end %>
         <% end %>
       </tbody>
       <% if @totals_in_footer %>
@@ -60,6 +63,7 @@
                 scope: ("row" if index.zero?),
                 total: true,
                 total_footer: true,
+                **column.system_arguments
               ) do %>
                 <%= column.total %>
               <% end %>

data/app/components/polaris/data_table_component.rb

@@ -35,6 +35,16 @@ module Polaris
       end
     end
 
+    def row_arguments(row)
+      {tag: "tr"}.tap do |args|
+        args[:classes] = class_names(
+          "Polaris-DataTable__TableRow",
+          "Polaris-DataTable--hoverable": @hoverable
+        )
+        args[:id] = dom_id(row) if row.respond_to?(:to_key)
+      end
+    end
+
     def render_cell(**arguments, &block)
       render(DataTable::CellComponent.new(vertical_alignment: @vertical_alignment, **arguments), &block)
     end

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

@@ -30,48 +30,54 @@
 
     <div class="Polaris-DropZone__Container" data-polaris-dropzone-target="container">
       <%= render Polaris::BaseComponent.new(**file_upload_arguments) do %>
-        <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
-          <% unless @size == :medium %>
-            <% stack.item do %>
-              <img width="<%= @size == :small ? 20 : 40 %>" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt="">
+        <% if content.present? %>
+          <%= content %>
+        <% else %>
+          <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
+            <% unless @size == :medium %>
+              <% stack.item do %>
+                <img width="<%= @size == :small ? 20 : 40 %>" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt="">
+              <% end %>
             <% end %>
-          <% end %>
 
-          <% unless @size == :small %>
-            <% stack.item do %>
-              <% if @size == :medium %>
-                <div class="Polaris-DropZone-FileUpload__ActionTitle">
-                  <%= @file_upload_button %>
-                </div>
-              <% else %>
-                <div class="Polaris-DropZone-FileUpload__Button">
-                  <%= @file_upload_button %>
-                </div>
+            <% unless @size == :small %>
+              <% stack.item do %>
+                <% if @size == :medium %>
+                  <div class="Polaris-DropZone-FileUpload__ActionTitle">
+                    <%= @file_upload_button %>
+                  </div>
+                <% else %>
+                  <div class="Polaris-DropZone-FileUpload__Button">
+                    <%= @file_upload_button %>
+                  </div>
+                <% end %>
               <% end %>
             <% end %>
-          <% end %>
 
-          <% unless @size == :small %>
-            <% stack.item do %>
-              <% help_text = capture do %>
-                <%= render Polaris::TextStyleComponent.new(variation: :subdued) do %>
-                  <%= @file_upload_help %>
+            <% unless @size == :small %>
+              <% stack.item do %>
+                <% help_text = capture do %>
+                  <%= render Polaris::TextStyleComponent.new(variation: :subdued) do %>
+                    <%= @file_upload_help %>
+                  <% end %>
                 <% end %>
-              <% end %>
 
-              <% if @size == :medium %>
-                <%= polaris_caption { help_text } %>
-              <% else %>
-                <%= help_text %>
+                <% if @size == :medium %>
+                  <%= polaris_caption { help_text } %>
+                <% else %>
+                  <%= help_text %>
+                <% end %>
               <% end %>
             <% end %>
           <% end %>
         <% end %>
       <% end %>
 
-      <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader">
-        <%= polaris_spinner(size: (@size == :small) ? :small : :large) %>
-      </div>
+      <% if @preview %>
+        <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader">
+          <%= polaris_spinner(size: (@size == :small) ? :small : :large) %>
+        </div>
+      <% end %>
     </div>
 
     <%= render Polaris::VisuallyHiddenComponent.new do %>
@@ -85,12 +91,12 @@
     <template data-polaris-dropzone-target="previewTemplate">
       <%= tag.div(
         data: { polaris_dropzone_target: "preview" },
-        class: [
-          "Polaris-DropZone__Preview",
+        class: {
+          "Polaris-DropZone__Preview": true,
           "Polaris-DropZone__Preview--singleFile": !@multiple,
           "Polaris-DropZone__Preview--sizeMedium": @size == :medium,
           "Polaris-DropZone__Preview--sizeSmall": @size == :small,
-        ]
+        }
       ) do %>
         <% if @size.in?(%i[small]) %>
           <span class="target"></span>

data/app/components/polaris/dropzone_component.rb

@@ -37,6 +37,7 @@ module Polaris
       label_action: nil,
       disabled: false,
       error: false,
+      remove_previews_after_upload: true,
       file_upload_button: nil,
       file_upload_help: "or drop files to upload",
       file_upload_arguments: {},
@@ -62,6 +63,7 @@ module Polaris
       @label_action = label_action
       @disabled = disabled
       @error = error
+      @remove_previews_after_upload = remove_previews_after_upload
       @file_upload_button = file_upload_button
       @file_upload_button ||= "Add #{multiple ? "files" : "file"}"
       @file_upload_help = file_upload_help
@@ -82,7 +84,8 @@ module Polaris
           polaris_dropzone_focused_value: "false",
           polaris_dropzone_drop_on_page_value: @drop_on_page,
           polaris_dropzone_render_preview_value: @preview,
-          polaris_dropzone_size_value: @size
+          polaris_dropzone_size_value: @size,
+          polaris_dropzone_remove_previews_after_upload_value: @remove_previews_after_upload
         }
       }.deep_merge(@system_arguments).tap do |opts|
         prepend_option(opts[:data], :controller, "polaris-dropzone")

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

@@ -0,0 +1,15 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <div class="Polaris-EmptySearchResults__Content">
+    <%= polaris_text_container do %>
+      <% if image.present? %>
+        <div><%= image %></div>
+      <% end %>
+      <%= polaris_display_text(size: :small) do %>
+        <%= @title %>
+      <% end %>
+      <% if @description.present? %>
+        <div><%= polaris_text_subdued { @description } %></div>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/polaris/empty_search_results_component.rb

@@ -0,0 +1,21 @@
+module Polaris
+  class EmptySearchResultsComponent < Polaris::Component
+    renders_one :image
+
+    def initialize(title:, description: nil, **system_arguments)
+      @title = title
+      @description = description
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |args|
+        args[:tag] = "div"
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-EmptySearchResults"
+        )
+      end
+    end
+  end
+end

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

@@ -29,6 +29,8 @@
         <%= polaris_icon(name: "CaretUpMinor") %>
       <% when :select %>
         <%= polaris_icon(name: "SelectMinor") %>
+      <% when :horizontal_dots %>
+        <%= polaris_icon(name: "HorizontalDotsMinor") %>
       <% end %>
     </div>
   <% end %>

data/app/components/polaris/headless_button.rb

@@ -20,7 +20,7 @@ module Polaris
     TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
 
     DISCLOSURE_DEFAULT = false
-    DISCLOSURE_OPTIONS = [true, false, :down, :up, :select]
+    DISCLOSURE_OPTIONS = [true, false, :down, :up, :select, :horizontal_dots]
 
     renders_one :icon, IconComponent
 

data/app/components/polaris/index_table/column_component.rb

@@ -1,10 +1,11 @@
 class Polaris::IndexTable::ColumnComponent < Polaris::Component
-  attr_reader :title, :flush
+  attr_reader :title, :flush, :system_arguments
 
   def initialize(title, flush: false, **system_arguments, &block)
     @title = title
     @flush = flush
     @block = block
+    @system_arguments = system_arguments
   end
 
   def call(row)

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

@@ -12,15 +12,13 @@
       </thead>
       <tbody>
         <% @data.each do |row| %>
-          <tr class="Polaris-IndexTable__TableRow Polaris-IndexTable__TableRow--unclickable">
+          <%= render Polaris::BaseComponent.new(**row_arguments(row)) do %>
             <% columns.each_with_index do |column, index| %>
-              <%= render_cell(
-                flush: column.flush,
-              ) do %>
+              <%= render_cell(flush: column.flush, **column.system_arguments) do %>
                 <%= column.call(row) %>
               <% end %>
             <% end %>
-          </tr>
+          <% end %>
         <% end %>
       </tbody>
     </table>

data/app/components/polaris/index_table_component.rb

@@ -18,6 +18,16 @@ module Polaris
       end
     end
 
+    def row_arguments(row)
+      {tag: "tr"}.tap do |args|
+        args[:classes] = class_names(
+          "Polaris-IndexTable__TableRow",
+          "Polaris-IndexTable__TableRow--unclickable"
+        )
+        args[:id] = dom_id(row) if row.respond_to?(:to_key)
+      end
+    end
+
     def render_cell(**arguments, &block)
       render(IndexTable::CellComponent.new(**arguments), &block)
     end

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

@@ -46,13 +46,13 @@
           <% end %>
         </div>
 
-        <% if @secondary_actions.any? || action_group.present? || primary_action.present? || has_pagination? %>
+        <% if @secondary_actions.any? || action_group.present? || render_primary_action? || has_pagination? %>
           <div class="Polaris-Page-Header__RightAlign">
             <div class="Polaris-Page-Header__Actions">
               <% if @secondary_actions.any? || action_group.present? %>
                 <div class="Polaris-ActionMenu Polaris-ActionMenu--mobile">
                   <div class="Polaris-ActionMenu-RollupActions__RollupActivator">
-                    <%= polaris_popover do |popover| %>
+                    <%= polaris_popover(position: :below, alignment: :right) do |popover| %>
                       <% popover.button do |button| %>
                         <% button.icon(name: "HorizontalDotsMinor") %>
                       <% end %>
@@ -98,9 +98,9 @@
                   </div>
                 </div>
               <% end %>
-              <% if primary_action.present? %>
+              <% if render_primary_action? %>
                 <div class="Polaris-Page-Header__PrimaryActionWrapper">
-                  <%= primary_action %>
+                  <%= primary_action || custom_primary_action %>
                 </div>
               <% end %>
               <% if has_pagination? %>

data/app/components/polaris/page_component.rb

@@ -7,6 +7,7 @@ module Polaris
     renders_one :primary_action, ->(primary: true, **system_arguments) do
       Polaris::ButtonComponent.new(primary: primary, **system_arguments)
     end
+    renders_one :custom_primary_action
     renders_one :action_group, "ActionGroupComponent"
 
     def initialize(
@@ -81,7 +82,11 @@ module Polaris
     end
 
     def render_header?
-      @title.present? || @subtitle.present? || @back_url.present? || primary_action.present?
+      @title.present? || @subtitle.present? || @back_url.present? || render_primary_action?
+    end
+
+    def render_primary_action?
+      primary_action.present? || custom_primary_action.present?
     end
 
     def has_pagination?
@@ -98,7 +103,7 @@ module Polaris
       end
 
       def call
-        render(Polaris::PopoverComponent.new) do |popover|
+        render(Polaris::PopoverComponent.new(position: :below)) do |popover|
           popover.button(disclosure: true) { @title }
 
           polaris_action_list do |list|

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

@@ -7,25 +7,35 @@
     <% end %>
   </div>
 
-  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
-    <%= render Polaris::BaseComponent.new(**popover_arguments) do %>
-      <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
-      <div style="">
-        <div class="Polaris-Popover__Wrapper">
-          <%= render Polaris::BaseComponent.new(**content_arguments) do %>
-            <% if panes.present? %>
-              <% panes.each do |pane| %>
-                <%= pane %>
-              <% end %>
-            <% else %>
-              <%= render Polaris::Popover::PaneComponent.new(sectioned: @sectioned) do %>
-                <%= content %>
+  <% popover = capture do %>
+    <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+      <%= render Polaris::BaseComponent.new(**popover_arguments) do %>
+        <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
+        <div style="">
+          <div class="Polaris-Popover__Wrapper">
+            <%= render Polaris::BaseComponent.new(**content_arguments) do %>
+              <% if panes.present? %>
+                <% panes.each do |pane| %>
+                  <%= pane %>
+                <% end %>
+              <% else %>
+                <%= render Polaris::Popover::PaneComponent.new(sectioned: @sectioned) do %>
+                  <%= content %>
+                <% end %>
               <% end %>
             <% end %>
-          <% end %>
+          </div>
         </div>
-      </div>
-      <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
+        <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
+      <% end %>
     <% end %>
   <% end %>
+
+  <% if @append_to_body %>
+    <template data-polaris-popover-target="template">
+      <%= popover %>
+    </template>
+  <% else %>
+    <%= popover %>
+  <% end %>
 <% end %>

data/app/components/polaris/popover_component.rb

@@ -24,6 +24,7 @@ module Polaris
       sectioned: false,
       alignment: ALIGNMENT_DEFAULT,
       position: POSITION_DEFAULT,
+      append_to_body: false,
       wrapper_arguments: {},
       **system_arguments
     )
@@ -36,6 +37,7 @@ module Polaris
       @sectioned = sectioned
       @alignment = fetch_or_fallback(ALIGNMENT_OPTIONS, alignment, ALIGNMENT_DEFAULT)
       @position = fetch_or_fallback(POSITION_OPTIONS, position, POSITION_DEFAULT)
+      @append_to_body = append_to_body
       @wrapper_arguments = wrapper_arguments
       @system_arguments = system_arguments
       @popover_arguments = {}
@@ -47,6 +49,7 @@ module Polaris
         opts[:tag] = "div"
         opts[:data] ||= {}
         prepend_option(opts[:data], :controller, "polaris-popover")
+        opts[:data][:polaris_popover_append_to_body_value] = @append_to_body
         opts[:data][:polaris_popover_active_value] = @active
         opts[:data][:polaris_popover_placement_value] = popperjs_placement
         opts[:data][:polaris_popover_open_class] = "Polaris-Popover__PopoverOverlay--open"
@@ -61,7 +64,9 @@ module Polaris
       @system_arguments.tap do |opts|
         opts[:tag] = "div"
         opts[:data] ||= {}
-        opts[:data]["polaris_popover_target"] = "popover"
+        unless @append_to_body
+          opts[:data]["polaris_popover_target"] = "popover"
+        end
         opts[:classes] = class_names(
           @system_arguments[:classes],
           "Polaris-PositionedOverlay",

data/app/components/polaris/resource_item/shortcut_actions_component.html.erb

@@ -0,0 +1,21 @@
+<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
+  <%= render(Polaris::ButtonGroupComponent.new(**system_arguments)) do |group| %>
+    <% buttons.each do |button| %>
+      <% group.button(**button.system_arguments) { button.content } %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% if @persist_actions %>
+  <%= render(Polaris::BaseComponent.new(**disclosure_arguments)) do %>
+    <%= render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover| %>
+      <% popover.button(disclosure: :horizontal_dots, plain: true) %>
+
+      <%= render(Polaris::ActionListComponent.new) do |action_list| %>
+        <% buttons.each do |button| %>
+          <% action_list.item(**button.action_list_item_arguments) { button.content } %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>