polaris_view_components 3.2.0 → 4.0.0

data/app/assets/stylesheets/polaris_view_components.pcss

@@ -1,19 +1,25 @@
 @import "./polaris_view_components/fonts.pcss";
 @import "@shopify/polaris/build/esm/styles.css";
 @import "./polaris_view_components/variables.pcss";
+@import "./polaris_view_components/theme.pcss";
 
 @import "./polaris_view_components/action_list.pcss";
+@import "./polaris_view_components/badge.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/choice.pcss";
 @import "./polaris_view_components/collapsible.pcss";
 @import "./polaris_view_components/custom.pcss";
 @import "./polaris_view_components/data_table.pcss";
+@import "./polaris_view_components/description_list.pcss";
+@import "./polaris_view_components/drop_zone.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/media.pcss";
 @import "./polaris_view_components/modal.pcss";
 @import "./polaris_view_components/navigation.pcss";
 @import "./polaris_view_components/navigation_list_component.pcss";
@@ -21,9 +27,11 @@
 @import "./polaris_view_components/page.pcss";
 @import "./polaris_view_components/pagination.pcss";
 @import "./polaris_view_components/popover.pcss";
+@import "./polaris_view_components/resource_list.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/tag.pcss";
 @import "./polaris_view_components/text_fields.pcss";
 @import "./polaris_view_components/tooltip_component.pcss";

data/app/components/polaris/avatar_component.rb

@@ -11,7 +11,7 @@ module Polaris
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
-    SHAPE_DEFAULT = :round
+    SHAPE_DEFAULT = :square
     SHAPE_MAPPINGS = {
       square: "Polaris-Avatar--shapeSquare",
       round: "Polaris-Avatar--shapeRound"

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

@@ -1,101 +1,38 @@
-<% 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 %>
-<% 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 %>
+  <div class="Polaris-Banner__Body">
+    <div class="Polaris-Banner__ContentWrapper">
+      <% unless @hide_icon && !has_title? %>
+        <div class="Polaris-Banner__Heading">
+          <% unless @hide_icon %>
+            <span class="Polaris-Banner__InlineIcon"><%= render_icon %></span>
           <% end %>
-        <% end %>
-        <% if has_content? %>
-          <%= polaris_box(padding: "4") do %>
-            <%= content_with_actions %>
+          <% if has_title? %>
+            <%= polaris_text(as: :h2, variant: :headingSm, break_word: true) { @title } %>
           <% end %>
-        <% end %>
+        </div>
       <% end %>
-    <% end %>
-  <% 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 %>
+      <% if content.present? %>
+        <div class="Polaris-Banner__Message"><%= content %></div>
+      <% end %>
+    </div>
+    <% if action || secondary_action %>
+      <div class="Polaris-Banner__Actions">
+        <%= polaris_button_group do |group| %>
+          <% if action %>
+            <% group.with_item do %>
+              <%= action %>
             <% end %>
           <% end %>
-          <%= polaris_box(
-            padding: within_container? ? nil : "1",
-            padding_block_start: (has_title? || within_container?) ? nil : "1_5",
-            classes: has_title? ? nil : "Polaris-Banner__ContainerContentWrapper"
-          ) do %>
-            <%= polaris_vertical_stack(gap: "1") do %>
-              <% if has_title? %>
-                <%= polaris_text(as: :h2, variant: :headingSm, break_word: true) do %>
-                  <%= @title %>
-                <% end %>
-              <% end %>
-              <% if has_content? %>
-                <%= content_with_actions %>
-              <% end %>
+          <% if secondary_action %>
+            <% group.with_item do %>
+              <%= secondary_action %>
             <% end %>
           <% end %>
         <% end %>
-        <% if dismiss_button %>
-          <%= polaris_box(classes: "Polaris-Banner__DismissButton") do %>
-            <%= dismiss_button %>
-          <% end %>
-        <% end %>
-      <% end %>
+      </div>
+    <% end %>
+    <% if dismiss_button %>
+      <div class="Polaris-Banner__DismissButton"><%= dismiss_button %></div>
     <% end %>
-  <% end %>
+  </div>
 <% end %>

data/app/components/polaris/banner_component.rb

@@ -34,7 +34,7 @@ module Polaris
       Polaris::ButtonComponent.new(**system_arguments)
     end
     renders_one :dismiss_button, ->(**system_arguments) do
-      render Polaris::ButtonComponent.new(plain: true, **system_arguments) do |button|
+      render Polaris::ButtonComponent.new(**{plain: true, aria: {label: "Dismiss"}}.deep_merge(system_arguments)) do |button|
         button.with_icon(name: "XSmallIcon")
       end
     end
@@ -76,11 +76,10 @@ module Polaris
 
     def default_icon(status)
       case status
-      when :success then "CheckIcon"
-      when :critical then "AlertDiamondIcon"
-      when :warning then "AlertTriangleIcon"
+      when :success then "CheckCircleFilledIcon"
+      when :critical, :warning then "AlertCircleFilledIcon"
       else
-        "InfoIcon"
+        "InfoFilledIcon"
       end
     end
 

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

@@ -1,19 +1,11 @@
 <% button_content = capture do %>
   <%= render Polaris::BaseComponent.new(tag: @tag, **system_arguments) do %>
+    <%= loading_spinner %>
     <span class="Polaris-Button__Content">
-      <% if @loading %>
-        <span class="Polaris-Button__Spinner">
-          <%= polaris_spinner(size: :small) %>
-        </span>
-      <% end %>
-
       <% if icon.present? || @icon_name.present? %>
         <div class="Polaris-Button__Icon">
           <%= icon.presence || polaris_icon(name: @icon_name) %>
         </div>
-        <% if content.present? && !@plain %>
-          &nbsp;
-        <% end %>
       <% end %>
 
       <% if content.present? %>

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

@@ -1,11 +1,5 @@
 <%= render Polaris::BaseComponent.new(**@system_arguments) do %>
   <div class="<%= container_classes %>">
-    <% if dismiss_button %>
-      <div class="Polaris-CalloutCard__Dismiss">
-        <%= dismiss_button %>
-      </div>
-    <% end %>
-
     <div class="Polaris-LegacyCard__Section">
       <div class="Polaris-CalloutCard">
         <div class="Polaris-CalloutCard__Content">
@@ -39,8 +33,18 @@
           <% end %>
         </div>
 
-        <img class="<%= image_classes %>" src="<%= @illustration %>" alt="">
+        <% if @illustration.present? %>
+          <div class="Polaris-CalloutCard__Illustration">
+            <img class="<%= image_classes %>" src="<%= @illustration %>" alt="">
+          </div>
+        <% end %>
       </div>
+
+      <% if dismiss_button %>
+        <div class="Polaris-CalloutCard__Dismiss">
+          <%= dismiss_button %>
+        </div>
+      <% end %>
     </div>
   </div>
 <% end %>

data/app/components/polaris/callout_card_component.rb

@@ -3,11 +3,11 @@
 module Polaris
   class CalloutCardComponent < Polaris::Component
     renders_one :primary_action, Polaris::ButtonComponent
-    renders_one :secondary_action, ->(plain: true, **system_arguments) do
-      Polaris::ButtonComponent.new(plain: plain, **system_arguments)
+    renders_one :secondary_action, ->(plain: true, monochrome: true, remove_underline: true, **system_arguments) do
+      Polaris::ButtonComponent.new(plain: plain, monochrome: monochrome, remove_underline: remove_underline, **system_arguments)
     end
     renders_one :dismiss_button, ->(**system_arguments) do
-      render Polaris::ButtonComponent.new(plain: true, **system_arguments) do |button|
+      render Polaris::ButtonComponent.new(**{plain: true, monochrome: true, remove_underline: true, aria: {label: "Dismiss card"}}.deep_merge(system_arguments)) do |button|
         button.with_icon(name: "XSmallIcon")
       end
     end
@@ -30,6 +30,7 @@ module Polaris
 
     def container_classes
       class_names(
+        "Polaris-LegacyCard__Surface",
         "Polaris-CalloutCard__Container",
         "Polaris-CalloutCard--hasDismiss": dismiss_button.present?
       )

data/app/components/polaris/card/header_component.rb

@@ -12,7 +12,7 @@ class Polaris::Card::HeaderComponent < Polaris::Component
     )
 
     @title = title
-    @actions = actions.map { |a| a.merge(plain: true) }
+    @actions = actions
   end
 
   def simple?

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

@@ -2,7 +2,7 @@
   <% if @title.present? && @title.is_a?(String) %>
     <div class="Polaris-LegacyCard__SectionHeader">
       <% if @actions.present? %>
-        <%= polaris_stack(alignment: :trailing) do |stack| %>
+        <%= polaris_stack(alignment: :center) do |stack| %>
           <% stack.with_item(fill: true) do %>
             <%= polaris_text(variant: :headingSm, as: :h3) { @title } %>
           <% end %>

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

@@ -17,6 +17,7 @@ class Polaris::Card::SectionComponent < Polaris::Component
     @system_arguments[:classes] = class_names(
       @system_arguments[:classes],
       "Polaris-LegacyCard__Section": !unstyled,
+      "Polaris-LegacyCard__Section--unstyled": unstyled,
       "Polaris-LegacyCard__Section--flush": flush,
       "Polaris-LegacyCard__Section--subdued": subdued,
       "Polaris-LegacyCard__Section--fullWidth": full_width,
@@ -25,7 +26,7 @@ class Polaris::Card::SectionComponent < Polaris::Component
     )
 
     @title = title
-    @actions = actions.map { |a| a.merge(plain: true) }
+    @actions = actions
   end
 
   class Polaris::Card::SubsectionComponent < Polaris::Component

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

@@ -1,8 +1,4 @@
 <%= render Polaris::BaseComponent.new(**system_arguments) do %>
-  <% if tabs.present? %>
-    <%= tabs %>
-  <% end %>
-
   <% if header.present? %>
     <%= header %>
   <% end %>
@@ -11,51 +7,57 @@
     <%= render Polaris::Card::HeaderComponent.new(title: @title, actions: @actions) %>
   <% end %>
 
-  <% if sections.present? %>
-    <% sections.each do |section| %>
-      <%= section %>
+  <div class="Polaris-LegacyCard__Surface">
+    <% if tabs.present? %>
+      <%= tabs %>
     <% end %>
-  <% end %>
 
-  <% if content.present? %>
-    <% if @sectioned %>
-      <%= render Polaris::Card::SectionComponent.new do %>
+    <% if sections.present? %>
+      <% sections.each do |section| %>
+        <%= section %>
+      <% end %>
+    <% end %>
+
+    <% if content.present? %>
+      <% if @sectioned %>
+        <%= render Polaris::Card::SectionComponent.new do %>
+          <%= content %>
+        <% end %>
+      <% else %>
         <%= content %>
       <% end %>
-    <% else %>
-      <%= content %>
     <% end %>
-  <% end %>
 
-  <% if render_footer? %>
-    <div class="<%= footer_classes %>">
-      <%= polaris_button_group do |group| %>
-        <% if @footer_action_alignment == :right %>
-          <% secondary_footer_actions.each do |secondary_footer_action| %>
-            <% group.with_item do %>
-              <%= secondary_footer_action %>
+    <% if render_footer? %>
+      <div class="<%= footer_classes %>">
+        <%= polaris_button_group do |group| %>
+          <% if @footer_action_alignment == :right %>
+            <% secondary_footer_actions.each do |secondary_footer_action| %>
+              <% group.with_item do %>
+                <%= secondary_footer_action %>
+              <% end %>
             <% end %>
-          <% end %>
 
-          <% if primary_footer_action %>
-            <% group.with_item do %>
-              <%= primary_footer_action %>
+            <% if primary_footer_action %>
+              <% group.with_item do %>
+                <%= primary_footer_action %>
+              <% end %>
             <% end %>
-          <% end %>
-        <% else %>
-          <% if primary_footer_action %>
-            <% group.with_item do %>
-              <%= primary_footer_action %>
+          <% else %>
+            <% if primary_footer_action %>
+              <% group.with_item do %>
+                <%= primary_footer_action %>
+              <% end %>
             <% end %>
-          <% end %>
 
-          <% secondary_footer_actions.each do |secondary_footer_action| %>
-            <% group.with_item do %>
-              <%= secondary_footer_action %>
+            <% secondary_footer_actions.each do |secondary_footer_action| %>
+              <% group.with_item do %>
+                <%= secondary_footer_action %>
+              <% end %>
             <% end %>
           <% end %>
         <% end %>
-      <% end %>
-    </div>
-  <% end %>
+      </div>
+    <% end %>
+  </div>
 <% end %>

data/app/components/polaris/card_component.rb

@@ -2,10 +2,10 @@
 
 module Polaris
   class CardComponent < Polaris::Component
-    FOOTER_ACTION_ALIGNMENT_DEFAULT = :right
+    FOOTER_ACTION_ALIGNMENT_DEFAULT = :left
     FOOTER_ACTION_ALIGNMENT_MAPPINGS = {
-      FOOTER_ACTION_ALIGNMENT_DEFAULT => "",
-      :left => "Polaris-LegacyCard__LeftJustified"
+      right: "",
+      left: "Polaris-LegacyCard__LeftJustified"
     }
     FOOTER_ACTION_ALIGNMENT_OPTIONS = FOOTER_ACTION_ALIGNMENT_MAPPINGS.keys
 

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

@@ -5,7 +5,8 @@
     <span class="Polaris-Checkbox__Backdrop"></span>
 
     <span class="Polaris-Checkbox__Icon">
-      <%= polaris_icon(name: icon_name) %>
+      <%= polaris_icon(name: "CheckSmallIcon", classes: "Polaris-Checkbox__CheckIcon") %>
+      <%= polaris_icon(name: "MinusIcon", classes: "Polaris-Checkbox__MinusIcon") %>
     </span>
   <% end %>
 <% end %>

data/app/components/polaris/checkbox_component.rb

@@ -63,10 +63,6 @@ module Polaris
       @checked == :indeterminate
     end
 
-    def icon_name
-      indeterminate? ? "MinusIcon" : "CheckSmallIcon"
-    end
-
     def before_render
       validate!
     end

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

@@ -33,43 +33,19 @@
         <% if content.present? %>
           <%= content %>
         <% else %>
-          <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
-            <% unless @size == :medium %>
-              <% stack.with_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 %>
-
-            <% unless @size == :small %>
-              <% stack.with_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 %>
-
-            <% unless @size == :small %>
-              <% stack.with_item do %>
-                <% help_text = capture do %>
-                  <%= render Polaris::TextStyleComponent.new(variation: :subdued) do %>
-                    <%= @file_upload_help %>
-                  <% end %>
-                <% end %>
-
-                <% if @size == :medium %>
-                  <%= polaris_caption { help_text } %>
-                <% else %>
-                  <%= help_text %>
-                <% end %>
-              <% end %>
+          <div class="Polaris-DropZone-FileUpload__Content">
+            <div class="Polaris-DropZone-FileUpload__UploadIcon">
+              <%= polaris_icon(name: "UploadIcon") %>
+            </div>
+            <div class="Polaris-DropZone-FileUpload__Button">
+              <%= @file_upload_button %>
+            </div>
+            <% if @file_upload_help.present? %>
+              <div class="Polaris-DropZone-FileUpload__HelpText">
+                <%= @file_upload_help %>
+              </div>
             <% end %>
-          <% end %>
+          </div>
         <% end %>
       <% end %>
 

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

@@ -1,17 +1,9 @@
+<%= loading_spinner %>
 <span class="Polaris-Button__Content">
-  <% if @loading %>
-    <span class="Polaris-Button__Spinner">
-      <%= polaris_spinner(size: :small) %>
-    </span>
-  <% end %>
-
   <% if icon.present? || @icon_name.present? %>
     <div class="Polaris-Button__Icon">
       <%= icon || polaris_icon(name: @icon_name) %>
     </div>
-    <% if content.present? %>
-      &nbsp;
-    <% end %>
   <% end %>
 
   <% if content.present? %>

data/app/components/polaris/headless_button.rb

@@ -19,6 +19,15 @@ module Polaris
     }
     TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
 
+    SPINNER_HTML = <<~HTML.html_safe.freeze
+      <span class="Polaris-Button__Spinner" role="status" aria-label="Loading">
+        <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <circle class="Polaris-Button__SpinnerTrack" r="14" stroke-width="3" cx="22" cy="22" />
+          <circle class="Polaris-Button__SpinnerIndicator" pathLength="10" r="14" stroke-width="3" cx="22" cy="22" />
+        </svg>
+      </span>
+    HTML
+
     DISCLOSURE_DEFAULT = false
     DISCLOSURE_OPTIONS = [true, false, :down, :up, :select, :horizontal_dots]
 
@@ -101,6 +110,10 @@ module Polaris
       @system_arguments
     end
 
+    def loading_spinner
+      SPINNER_HTML if @loading
+    end
+
     def html_options
       options = system_arguments
       options[:class] = options[:classes]

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

@@ -50,6 +50,12 @@
               <% end %>
             <% end %>
           <% end %>
+        <% elsif close_button.present? %>
+          <%= close_button %>
+        <% else %>
+          <%= render(Polaris::BaseComponent.new(**close_button_arguments)) do %>
+            <%= polaris_icon(name: "XIcon", color: :base) %>
+          <% end %>
         <% end %>
 
         <% if @scrollable %>

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

@@ -13,7 +13,7 @@
             <div class="Polaris-Page-Header__BreadcrumbWrapper">
               <%= polaris_box(max_width: "100%", padding_inline_end: "2", print_hidden: true) do %>
                 <nav role="navigation">
-                  <a class="Polaris-Breadcrumbs__Breadcrumb" href="<%= @back_url %>" data-polaris-unstyled="true">
+                  <a class="Polaris-Breadcrumbs__Breadcrumb" href="<%= @back_url %>" aria-label="Back" data-polaris-unstyled="true">
                     <span class="Polaris-Breadcrumbs__ContentWrapper">
                       <span class="Polaris-Breadcrumbs__Icon">
                         <%= polaris_icon(name: "ArrowLeftIcon") %>
@@ -108,9 +108,9 @@
                 <% if has_pagination? %>
                   <div class="Polaris-Page-Header__PaginationWrapper">
                     <nav aria-label="Pagination">
-                      <%= polaris_button_group(segmented: @pagination_label.blank?) do |group| %>
+                      <%= polaris_button_group(spacing: :extra_tight) do |group| %>
                         <% group.with_item do %>
-                          <%= polaris_button(url: @prev_url, outline: true, disabled: @prev_url.blank?) do |button| %>
+                          <%= polaris_button(url: @prev_url, outline: true, disabled: @prev_url.blank?, aria: {label: "Previous page"}) do |button| %>
                             <% button.with_icon(name: "ChevronLeftIcon") %>
                           <% end %>
                         <% end %>
@@ -120,7 +120,7 @@
                           <% end %>
                         <% end %>
                         <% group.with_item do %>
-                          <%= polaris_button(url: @next_url, outline: true, disabled: @next_url.blank?) do |button| %>
+                          <%= polaris_button(url: @next_url, outline: true, disabled: @next_url.blank?, aria: {label: "Next page"}) do |button| %>
                             <% button.with_icon(name: "ChevronRightIcon") %>
                           <% end %>
                         <% end %>

data/app/components/polaris/progress_bar_component.rb

@@ -2,10 +2,10 @@
 
 module Polaris
   class ProgressBarComponent < Polaris::Component
-    COLOR_DEFAULT = :highlight
+    COLOR_DEFAULT = :primary
     COLOR_MAPPINGS = {
-      COLOR_DEFAULT => "Polaris-ProgressBar--colorHighlight",
-      :primary => "Polaris-ProgressBar--colorPrimary",
+      COLOR_DEFAULT => "Polaris-ProgressBar--colorPrimary",
+      :highlight => "Polaris-ProgressBar--colorHighlight",
       :success => "Polaris-ProgressBar--colorSuccess",
       :critical => "Polaris-ProgressBar--colorCritical"
     }
@@ -46,7 +46,7 @@ module Polaris
           "Polaris-ProgressBar__IndicatorAppearDone"
         )
         args[:style] = styles_list(
-          "--pc-progress-bar-duration": @animated ? "500ms" : "0ms",
+          "--pc-progress-bar-duration": @animated ? "200ms" : "0ms",
           "--pc-progress-bar-percent": @progress / 100.0
         )
       end

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

@@ -6,15 +6,13 @@
   <% end %>
 <% end %>
 
-<% if @persist_actions %>
-  <%= render(Polaris::BaseComponent.new(**disclosure_arguments)) do %>
-    <%= render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover| %>
-      <% popover.with_button(disclosure: :horizontal_dots, plain: true) %>
+<%= render(Polaris::BaseComponent.new(**disclosure_arguments)) do %>
+  <%= render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover| %>
+    <% popover.with_button(icon_name: "MenuHorizontalIcon", plain: true, monochrome: true, remove_underline: true, aria: { label: "More actions" }) %>
 
-      <%= render(Polaris::ActionListComponent.new) do |action_list| %>
-        <% buttons.each do |button| %>
-          <% action_list.with_item(**button.action_list_item_arguments) { button.content } %>
-        <% end %>
+    <%= render(Polaris::ActionListComponent.new) do |action_list| %>
+      <% buttons.each do |button| %>
+        <% action_list.with_item(**button.action_list_item_arguments) { button.content } %>
       <% end %>
     <% end %>
   <% end %>