polaris_view_components 0.13.5 → 1.0.0

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

@@ -1,39 +1,42 @@
 <%= render Polaris::BaseComponent.new(**system_arguments) do %>
   <% if render_header? %>
-    <%= render Polaris::BaseComponent.new(**header_arguments) do %>
-      <div class="Polaris-Page-Header__Row">
-        <% if @back_url.present? %>
-          <div class="Polaris-Page-Header__BreadcrumbWrapper">
-            <nav role="navigation">
-              <a class="Polaris-Breadcrumbs__Breadcrumb" href="<%= @back_url %>" data-polaris-unstyled="true">
-                <span class="Polaris-Breadcrumbs__ContentWrapper">
-                  <span class="Polaris-Breadcrumbs__Icon">
-                    <%= polaris_icon(name: "ArrowLeftMinor") %>
-                  </span>
-                </span>
-              </a>
-            </nav>
-          </div>
-        <% end %>
+    <%= polaris_box(
+      position: :relative,
+      padding_block_start: {xs: "4", md: "5"},
+      padding_block_end: {xs: "4", md: "5"},
+      padding_inline_start: {xs: "4", sm: "0"},
+      padding_inline_end: {xs: "4", sm: "0"}
+    ) do %>
+      <%= render Polaris::BaseComponent.new(**header_arguments) do %>
+        <div class="Polaris-Page-Header__Row">
+          <% if @back_url.present? %>
+            <div class="Polaris-Page-Header__BreadcrumbWrapper">
+              <%= polaris_box(max_width: "100%", padding_inline_end: "4", print_hidden: true) do %>
+                <nav role="navigation">
+                  <a class="Polaris-Breadcrumbs__Breadcrumb" href="<%= @back_url %>" data-polaris-unstyled="true">
+                    <span class="Polaris-Breadcrumbs__ContentWrapper">
+                      <span class="Polaris-Breadcrumbs__Icon">
+                        <%= polaris_icon(name: "ArrowLeftMinor") %>
+                      </span>
+                    </span>
+                  </a>
+                </nav>
+              <% end %>
+            </div>
+          <% end %>
 
-        <div class="Polaris-Page-Header__TitleWrapper">
-          <%= tag.div(class: ["Polaris-Header-Title--hasThumbnail": thumbnail.present?]) do %>
-            <% if thumbnail.present? %>
-              <div>
-                <%= thumbnail %>
-              </div>
-            <% end %>
+          <div class="Polaris-Page-Header__TitleWrapper">
             <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
               <% if @title.present? %>
                 <% if title_metadata.present? %>
                   <div class="Polaris-Header-Title__TitleWithMetadataWrapper">
-                    <h1 class="Polaris-Header-Title"><%= @title %></h1>
+                    <%= render Polaris::BaseComponent.new(**title_arguments).with_content(@title) %>
                     <div class="Polaris-Header-Title__TitleMetadata">
                       <%= title_metadata %>
                     </div>
                   </div>
                 <% else %>
-                  <h1 class="Polaris-Header-Title"><%= @title %></h1>
+                  <%= render Polaris::BaseComponent.new(**title_arguments).with_content(@title) %>
                 <% end %>
               <% end %>
 
@@ -43,88 +46,88 @@
                 <% end %>
               <% end %>
             </div>
-          <% end %>
-        </div>
+          </div>
 
-        <% 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(position: :below, alignment: :right) do |popover| %>
-                      <% popover.button do |button| %>
-                        <% button.icon(name: "HorizontalDotsMinor") %>
-                      <% end %>
-                      <%= polaris_action_list(style: "text-align: left;") do |action_list| %>
-                        <% if @secondary_actions.any? %>
-                          <% action_list.section do |section| %>
-                            <% @secondary_actions.each do |action| %>
-                              <% section.item(**action) { action[:content] } %>
+          <% 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(position: :below, alignment: :right) do |popover| %>
+                        <% popover.with_button do |button| %>
+                          <% button.with_icon(name: "HorizontalDotsMinor") %>
+                        <% end %>
+                        <%= polaris_action_list(style: "text-align: left;") do |action_list| %>
+                          <% if @secondary_actions.any? %>
+                            <% action_list.with_section do |section| %>
+                              <% @secondary_actions.each do |action| %>
+                                <% section.with_item(**action) { action[:content] } %>
+                              <% end %>
                             <% end %>
                           <% end %>
-                        <% end %>
 
-                        <% if action_group.present? %>
-                          <% action_list.section(title: action_group.title) do |section| %>
-                            <% action_group.actions.each do |action| %>
-                              <% section.item(**action) { action[:content] } %>
+                          <% if action_group.present? %>
+                            <% action_list.with_section(title: action_group.title) do |section| %>
+                              <% action_group.actions.each do |action| %>
+                                <% section.with_item(**action) { action[:content] } %>
+                              <% end %>
                             <% end %>
                           <% end %>
                         <% end %>
                       <% end %>
-                    <% end %>
+                    </div>
                   </div>
-                </div>
-                <div class="Polaris-ActionMenu Polaris-ActionMenu--desktop">
-                  <div class="Polaris-ActionMenu-Actions__ActionsLayout">
-                    <%= polaris_button_group(spacing: :extra_tight) do |group| %>
-                      <% @secondary_actions.each do |action| %>
-                        <% group.item do %>
-                          <% destructive = action.delete(:destructive) %>
-                          <% tag.span(class: ["Polaris-ActionMenu-SecondaryAction", "Polaris-ActionMenu-SecondaryAction--destructive": destructive]) do %>
-                            <%= polaris_button(**action) { action[:content] } %>
+                  <div class="Polaris-ActionMenu Polaris-ActionMenu--desktop">
+                    <div class="Polaris-ActionMenu-Actions__ActionsLayout">
+                      <%= polaris_button_group(spacing: :extra_tight) do |group| %>
+                        <% @secondary_actions.each do |action| %>
+                          <% group.with_item do %>
+                            <% destructive = action.delete(:destructive) %>
+                            <% tag.span(class: ["Polaris-ActionMenu-SecondaryAction", "Polaris-ActionMenu-SecondaryAction--destructive": destructive]) do %>
+                              <%= polaris_button(**action) { action[:content] } %>
+                            <% end %>
                           <% end %>
                         <% end %>
-                      <% end %>
-                      <% if action_group.present? %>
-                        <% group.item do %>
-                          <span class="Polaris-ActionMenu-SecondaryAction">
-                            <%= action_group %>
-                          </span>
+                        <% if action_group.present? %>
+                          <% group.with_item do %>
+                            <span class="Polaris-ActionMenu-SecondaryAction">
+                              <%= action_group %>
+                            </span>
+                          <% end %>
                         <% end %>
                       <% end %>
-                    <% end %>
+                    </div>
                   </div>
-                </div>
-              <% end %>
-              <% if render_primary_action? %>
-                <div class="Polaris-Page-Header__PrimaryActionWrapper">
-                  <%= primary_action || custom_primary_action %>
-                </div>
-              <% end %>
-              <% if has_pagination? %>
-                <div class="Polaris-Page-Header__PaginationWrapper">
-                  <nav aria-label="Pagination">
-                    <%= polaris_button_group(segmented: true) do |group| %>
-                      <% group.item do %>
-                        <%= polaris_button(url: @prev_url, outline: true, disabled: @prev_url.blank?) do |button| %>
-                          <% button.icon(name: "ChevronLeftMinor") %>
+                <% end %>
+                <% if render_primary_action? %>
+                  <div class="Polaris-Page-Header__PrimaryActionWrapper">
+                    <%= primary_action || custom_primary_action %>
+                  </div>
+                <% end %>
+                <% if has_pagination? %>
+                  <div class="Polaris-Page-Header__PaginationWrapper">
+                    <nav aria-label="Pagination">
+                      <%= polaris_button_group(segmented: true) do |group| %>
+                        <% group.with_item do %>
+                          <%= polaris_button(url: @prev_url, outline: true, disabled: @prev_url.blank?) do |button| %>
+                            <% button.with_icon(name: "ChevronLeftMinor") %>
+                          <% end %>
                         <% end %>
-                      <% end %>
-                      <% group.item do %>
-                        <%= polaris_button(url: @next_url, outline: true, disabled: @next_url.blank?) do |button| %>
-                          <% button.icon(name: "ChevronRightMinor") %>
+                        <% group.with_item do %>
+                          <%= polaris_button(url: @next_url, outline: true, disabled: @next_url.blank?) do |button| %>
+                            <% button.with_icon(name: "ChevronRightMinor") %>
+                          <% end %>
                         <% end %>
                       <% end %>
-                    <% end %>
-                  </nav>
-                </div>
-              <% end %>
+                    </nav>
+                  </div>
+                <% end %>
+              </div>
             </div>
-          </div>
-        <% end %>
-      </div>
+          <% end %>
+        </div>
+      <% end %>
     <% end %>
   <% end %>
 

data/app/components/polaris/page_component.rb

@@ -2,8 +2,9 @@
 
 module Polaris
   class PageComponent < Polaris::Component
+    LONG_TITLE = 34
+
     renders_one :title_metadata
-    renders_one :thumbnail, Polaris::ThumbnailComponent
     renders_one :primary_action, ->(primary: true, **system_arguments) do
       Polaris::ButtonComponent.new(primary: primary, **system_arguments)
     end
@@ -40,15 +41,25 @@ module Polaris
       {
         tag: "div",
         classes: class_names(
-          "Polaris-Page-Header",
           "Polaris-Page-Header--mobileView",
-          "Polaris-Page-Header--mediumTitle",
+          "Polaris-Page-Header--mediumTitle": @title.present? && @title.length <= LONG_TITLE,
+          "Polaris-Page-Header--longTitle": @title.present? && @title.length > LONG_TITLE,
           "Polaris-Page-Header--hasNavigation": @back_url.present?,
           "Polaris-Page-Header--noBreadcrumbs": @back_url.blank?
         )
       }
     end
 
+    def title_arguments
+      {
+        tag: "h1",
+        classes: class_names(
+          "Polaris-Header-Title",
+          "Polaris-Header-Title__TitleWithSubtitle": @subtitle.present?
+        )
+      }
+    end
+
     def subtitle_arguments
       {
         tag: "div",
@@ -63,8 +74,8 @@ module Polaris
       {
         tag: "div",
         classes: class_names(
-          "Polaris-Page__Content",
-          "Polaris-Page--divider": @divider
+          "Polaris-Page__Content": !render_header?,
+          "Polaris-Page--divider": @divider && render_header?
         )
       }
     end
@@ -75,8 +86,8 @@ module Polaris
         opts[:classes] = class_names(
           opts[:classes],
           "Polaris-Page",
-          "Polaris-Page--narrowWidth": @narrow_width,
-          "Polaris-Page--fullWidth": @full_width
+          "Polaris-Page--fullWidth": @full_width,
+          "Polaris-Page--narrowWidth": @narrow_width
         )
       end
     end
@@ -103,12 +114,15 @@ module Polaris
       end
 
       def call
-        render(Polaris::PopoverComponent.new(position: :below)) do |popover|
-          popover.button(disclosure: true) { @title }
+        render(Polaris::PopoverComponent.new(
+          position: :below,
+          scrollable_shadow: false
+        )) do |popover|
+          popover.with_button(disclosure: true) { @title }
 
           polaris_action_list do |list|
             @actions.each do |action|
-              list.item(**action) { action[:content] }
+              list.with_item(**action) { action[:content] }
             end
           end
         end

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

@@ -1,18 +1,18 @@
 <%= render Polaris::BaseComponent.new(tag: 'nav', **@system_arguments) do %>
   <%= polaris_button_group(**@button_group_arguments) do |group| %>
-    <% group.item do %>
+    <% group.with_item do %>
       <%= polaris_button(url: @previous_url, outline: true, disabled: @previous_url.blank?) do |button| %>
-        <% button.icon(name: "ChevronLeftMinor") %>
+        <% button.with_icon(name: "ChevronLeftMinor") %>
       <% end %>
     <% end %>
     <% if @label.present? %>
-      <% group.item do %>
+      <% group.with_item do %>
         <div aria-live="polite"><%= @label %></div>
       <% end %>
     <% end %>
-    <% group.item do %>
+    <% group.with_item do %>
       <%= polaris_button(url: @next_url, outline: true, disabled: @next_url.blank?) do |button| %>
-        <% button.icon(name: "ChevronRightMinor") %>
+        <% button.with_icon(name: "ChevronRightMinor") %>
       <% end %>
     <% end %>
   <% end %>

data/app/components/polaris/placeholder_component.rb

@@ -0,0 +1,37 @@
+module Polaris
+  class PlaceholderComponent < Polaris::Component
+    def initialize(height: "auto", width: "auto", label: nil, show_border: false)
+      @label = label
+      border = show_border ? "1px dashed var(--p-color-bg-success-subdued)" : "none"
+      @system_arguments = {
+        tag: :div,
+        style: [
+          "background-color: var(--p-color-text-info)",
+          "color: #fff",
+          "width: #{width}",
+          "height: #{height}",
+          "display: flex",
+          "align-items: center",
+          "justify-content: center",
+          "border-inline-start: #{border}"
+        ].join(";")
+      }
+    end
+
+    def call
+      if @label.present?
+        render(Polaris::BaseComponent.new(**@system_arguments)) do
+          render(Polaris::InlineComponent.new(align: :center)) do
+            tag.div(style: "color: #fff;") do
+              render(Polaris::TextComponent.new(as: :h2, variant: :bodyMd)) do
+                @label
+              end
+            end
+          end
+        end
+      else
+        render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/polaris/popover/pane_component.html.erb

@@ -19,7 +19,7 @@
     <%= pane_content %>
   <% end %>
 <% else %>
-  <%= render Polaris::ScrollableComponent.new(shadow: true, **system_arguments) do %>
+  <%= render Polaris::ScrollableComponent.new(shadow: @scrollable_shadow, **system_arguments) do %>
     <%= pane_content %>
   <% end %>
 <% end %>

data/app/components/polaris/popover/pane_component.rb

@@ -1,19 +1,36 @@
 class Polaris::Popover::PaneComponent < Polaris::Component
   renders_many :sections, Polaris::Popover::SectionComponent
 
-  def initialize(fixed: false, sectioned: false, **system_arguments)
+  def initialize(
+    fixed: false,
+    sectioned: false,
+    capture_overscroll: false,
+    height: nil,
+    scrollable_shadow: true,
+    **system_arguments
+  )
     @fixed = fixed
     @sectioned = sectioned
+    @capture_overscroll = capture_overscroll
+    @height = height
+    @scrollable_shadow = scrollable_shadow
     @system_arguments = system_arguments
   end
 
   def system_arguments
-    @system_arguments.tap do |opts|
-      opts[:tag] = "div"
-      opts[:classes] = class_names(
+    @system_arguments.tap do |args|
+      args[:tag] = "div"
+      args[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-Popover__Pane",
-        "Polaris-Popover__Pane--fixed": @fixed
+        "Polaris-Popover__Pane--fixed": @fixed,
+        "Polaris-Popover__Pane--captureOverscroll": @capture_overscroll
+      )
+      args[:style] = styles_list(
+        args[:style],
+        height: @height,
+        max_height: @height,
+        min_height: @height
       )
     end
   end

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

@@ -14,6 +14,10 @@ class Polaris::Popover::SectionComponent < Polaris::Component
   end
 
   def call
-    render(Polaris::BaseComponent.new(**system_arguments)) { content }
+    render(Polaris::BaseComponent.new(**system_arguments)) do
+      render(Polaris::BoxComponent.new(padding: "4")) do
+        content
+      end
+    end
   end
 end

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

@@ -11,21 +11,28 @@
     <%= 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 %>
+        <%= polaris_box(
+          position: :relative,
+          overflow_x: :hidden,
+          overflow_y: :hidden,
+          background: "bg",
+          border_radius: "2"
+        ) do %>
+          <%= render Polaris::BaseComponent.new(**content_arguments) do %>
+            <% if panes.present? %>
+              <% panes.each do |pane| %>
+                <%= pane %>
+              <% end %>
+            <% else %>
+              <%= render Polaris::Popover::PaneComponent.new(
+                sectioned: @sectioned,
+                scrollable_shadow: @scrollable_shadow
+              ) do %>
+                <%= content %>
               <% end %>
             <% end %>
-          </div>
-        </div>
+          <% end %>
+        <% end %>
         <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
       <% end %>
     <% end %>

data/app/components/polaris/popover_component.rb

@@ -12,7 +12,9 @@ module Polaris
       Polaris::ButtonComponent.new(**system_arguments)
     end
     renders_one :activator
-    renders_many :panes, Polaris::Popover::PaneComponent
+    renders_many :panes, ->(**system_arguments) do
+      Polaris::Popover::PaneComponent.new(scrollable_shadow: @scrollable_shadow, **system_arguments)
+    end
 
     def initialize(
       active: false,
@@ -25,6 +27,7 @@ module Polaris
       alignment: ALIGNMENT_DEFAULT,
       position: POSITION_DEFAULT,
       append_to_body: false,
+      scrollable_shadow: true,
       wrapper_arguments: {},
       **system_arguments
     )
@@ -37,6 +40,7 @@ module Polaris
       @sectioned = sectioned
       @alignment = fetch_or_fallback(ALIGNMENT_OPTIONS, alignment, ALIGNMENT_DEFAULT)
       @position = fetch_or_fallback(POSITION_OPTIONS, position, POSITION_DEFAULT)
+      @scrollable_shadow = scrollable_shadow
       @append_to_body = append_to_body
       @wrapper_arguments = wrapper_arguments
       @system_arguments = system_arguments

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

@@ -5,10 +5,7 @@
     max="100"
   ></progress>
 
-  <div
-    class="Polaris-ProgressBar__Indicator<% if @animated %> Polaris-ProgressBar__Animated<% end %>"
-    style="width: <%= @progress %>%;"
-  >
+  <%= render Polaris::BaseComponent.new(**progress_arguments) do %>
     <span class="Polaris-ProgressBar__Label"><%= @progress %>%</span>
-  </div>
+  <% end %>
 <% end %>

data/app/components/polaris/progress_bar_component.rb

@@ -38,5 +38,18 @@ module Polaris
       @animated = animated
       @progress = progress
     end
+
+    def progress_arguments
+      {tag: "div"}.tap do |args|
+        args[:classes] = class_names(
+          "Polaris-ProgressBar__Indicator",
+          "Polaris-ProgressBar__IndicatorAppearDone"
+        )
+        args[:style] = styles_list(
+          "--pc-progress-bar-duration": @animated ? "500ms" : "0ms",
+          "--pc-progress-bar-percent": @progress / 100.0
+        )
+      end
+    end
   end
 end

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

@@ -1,7 +1,7 @@
 <%= 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 } %>
+      <% group.with_button(**button.system_arguments) { button.content } %>
     <% end %>
   <% end %>
 <% end %>
@@ -9,11 +9,11 @@
 <% 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) %>
+      <% popover.with_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 } %>
+          <% action_list.with_item(**button.action_list_item_arguments) { button.content } %>
         <% end %>
       <% end %>
     <% end %>

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

@@ -10,29 +10,52 @@
           data-polaris-resource-item-target="link"></a>
       <% end %>
 
-      <%= render(Polaris::BaseComponent.new(**container_arguments)) do %>
-        <% if owned? %>
-          <%= render(Polaris::BaseComponent.new(**owned_arguments)) do %>
-            <% if checkbox.present? || radio_button.present? %>
-              <div class="Polaris-ResourceItem__Handle">
-                <div class="Polaris-ResourceItem__CheckboxWrapper">
-                  <%= checkbox.presence || radio_button %>
-                </div>
-              </div>
+      <%= render(Polaris::BoxComponent.new(**container_arguments)) do %>
+        <%= polaris_horizontal_grid(columns: "1fr auto") do %>
+          <%= polaris_horizontal_grid(
+            gap: "5",
+            columns: (media.present? || @selectable) ? "auto 1fr" : "1fr"
+          ) do %>
+            <% if owned? %>
+              <%= polaris_horizontal_stack(
+                gap: "4",
+                block_align: (media.present? && @selectable) ? :center : @vertical_alignment
+              ) do %>
+                <% if checkbox.present? || radio_button.present? %>
+                  <%= polaris_bleed(margin_block: "2", margin_inline: "3") do %>
+                    <%= polaris_box(
+                      z_index: "var(--pc-resource-item-content-stacking-order)",
+                      padding_inline_start: @offset ? "8" : "3",
+                      padding_inline_end: "3",
+                      padding_block_start: "3",
+                      padding_block_end: "2"
+                    ) do %>
+                      <%= checkbox.presence || radio_button %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+
+                <% if media.present? %>
+                  <%= media %>
+                <% end %>
+              <% end %>
             <% end %>
 
-            <% if media.present? %>
-              <div class="Polaris-ResourceItem__Media">
-                <%= media %>
-              </div>
+            <%= polaris_horizontal_stack(gap: "4", block_align: @vertical_alignment || :center) do %>
+              <%= polaris_box(
+                width: "100%",
+                padding: "0",
+                padding_inline_start: "0",
+                padding_inline_end: "0"
+              ) do %>
+                <%= content %>
+              <% end %>
             <% end %>
           <% end %>
-        <% end %>
-        <div class="Polaris-ResourceItem__Content">
-          <%= content %>
-        </div>
-        <% if shortcut_actions.present? %>
-          <%= shortcut_actions %>
+
+          <% if shortcut_actions.present? %>
+            <%= shortcut_actions %>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>