polaris_view_components 0.9.1 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 910750f06bdf1ff3095625a911c884155cca167b4dba43fd9e7aa9d61cc0ba72
-  data.tar.gz: a0bc6e2afc097fc27148cc8fcb91282380fe6ec878dfcf8828703aed6edec433
+  metadata.gz: '08aa4ac3025799e63c02f893d3fa9397ae3ea2940b672ed3670e36fae0c09b93'
+  data.tar.gz: 58ad189ac881ae6b147d3e319c1d8fb490fad89a5a8cb289f382c480806e4782
 SHA512:
-  metadata.gz: 1d22ebdc5b83c1b52157c8e9b1f59cc2477546b521955329fff0b012a4c0472db8adad6b3bef881d108ad2e9388d2b23f44adb0d9e67fb0bb793015e4d23500b
-  data.tar.gz: 4891914fde6deb943f74567a89334bee1a8ada3736d3547acbf47d834446974e42c83ddb9d0b7ae6cf6c3d5017ce70d9cbf74c8b4706097695a5b7bda0b0f3ea
+  metadata.gz: 54244ec2572f296b21d4e786b21cda3d2bf826866bf684452b67410668ed05f08a9908bfba955fbc65fbf2ef2e45530c4e6f19bafcfa4ff2ddc8bad2315b6357
+  data.tar.gz: d0dfce86c9d6ba9f534f64782a0ea534f16f15274f98124e7d5ae74974869ee75f83e1c37f61f92a0199b3053e9f0b0cdbb19167d886829a39e58f89b9a31720

data/app/assets/javascripts/polaris_view_components/text_field_controller.js

@@ -26,7 +26,12 @@ export default class extends Controller {
   }
 
   clear() {
+    const oldValue = this.value
     this.value = null
+
+    if (this.value != oldValue) {
+      this.inputTarget.dispatchEvent(new Event('change'))
+    }
   }
 
   increase() {

data/app/assets/javascripts/polaris_view_components.js

@@ -545,6 +545,7 @@ class Dropzone extends Controller {
       this.toggleFileUpload(false);
       this.toggleErrorOverlay(true);
       const dropRejectedEvent = new CustomEvent("polaris-dropzone:drop-rejected", {
+        bubbles: true,
         detail: {
           rejectedFiles: this.rejectedFiles
         }
@@ -557,6 +558,7 @@ class Dropzone extends Controller {
       }
       this.toggleErrorOverlay(false);
       const dropAcceptedEvent = new CustomEvent("polaris-dropzone:drop-accepted", {
+        bubbles: true,
         detail: {
           acceptedFiles: this.acceptedFiles
         }
@@ -564,6 +566,7 @@ class Dropzone extends Controller {
       this.element.dispatchEvent(dropAcceptedEvent);
     }
     const dropEvent = new CustomEvent("polaris-dropzone:drop", {
+      bubbles: true,
       detail: {
         files: this.files,
         acceptedFiles: this.acceptedFiles,
@@ -2399,7 +2402,11 @@ class TextField extends Controller {
     this.valueValue = this.inputTarget.value;
   }
   clear() {
+    const oldValue = this.value;
     this.value = null;
+    if (this.value != oldValue) {
+      this.inputTarget.dispatchEvent(new Event("change"));
+    }
   }
   increase() {
     this.changeNumber(1);

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

@@ -116,6 +116,15 @@ a.Polaris-Tag__Button {
       justify-content: center;
     }
 
+    &--sizeMedium {
+      justify-content: center;
+      text-align: center;
+
+      .Polaris-Stack.Polaris-Stack--alignmentCenter {
+        justify-content: center;
+      }
+    }
+
     &--sizeSmall {
       padding: 0;
       justify-content: center;
@@ -143,3 +152,27 @@ a.Polaris-Tag__Button {
     }
   }
 }
+
+/* ActionMenu */
+.Polaris-ActionMenu {
+  &--mobile {
+    @media (min-width: 768px){
+      display: none;
+    }
+  }
+
+  &--desktop {
+    display: none;
+
+    @media (min-width: 768px){
+      display: block;
+    }
+  }
+}
+
+/* Page Pagination */
+@media (max-width: 768px){
+  .Polaris-Page-Header__PaginationWrapper {
+    display: none;
+  }
+}

data/app/assets/stylesheets/polaris_view_components.css

@@ -2325,6 +2325,13 @@ a.Polaris-Tag__Button {
       text-align: center;
       justify-content: center;
     }
+.Polaris-DropZone__Preview--sizeMedium {
+      justify-content: center;
+      text-align: center;
+    }
+.Polaris-DropZone__Preview--sizeMedium .Polaris-Stack.Polaris-Stack--alignmentCenter {
+        justify-content: center;
+      }
 .Polaris-DropZone__Preview--sizeSmall {
       padding: 0;
       justify-content: center;
@@ -2346,3 +2353,23 @@ a.Polaris-Tag__Button {
 .Polaris-DropZone__Loader .Polaris-Spinner--sizeSmall {
       height: 20px;
     }
+/* ActionMenu */
+@media (min-width: 768px){
+.Polaris-ActionMenu--mobile {
+      display: none
+  }
+    }
+.Polaris-ActionMenu--desktop {
+    display: none;
+  }
+@media (min-width: 768px){
+.Polaris-ActionMenu--desktop {
+      display: block
+  }
+    }
+/* Page Pagination */
+@media (max-width: 768px){
+  .Polaris-Page-Header__PaginationWrapper {
+    display: none;
+  }
+}

data/app/components/polaris/action_list/item_component.rb

@@ -5,6 +5,7 @@ class Polaris::ActionList::ItemComponent < Polaris::Component
   def initialize(
     url: nil,
     icon: nil,
+    icon_name: nil,
     help_text: nil,
     active: false,
     destructive: false,
@@ -12,7 +13,7 @@ class Polaris::ActionList::ItemComponent < Polaris::Component
     **system_arguments
   )
     @url = url
-    @icon = icon
+    @icon = icon || icon_name
     @help_text = help_text
     @active = active
     @destructive = destructive

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

@@ -6,9 +6,9 @@
       </span>
     <% end %>
 
-    <% if icon.present? %>
+    <% if icon.present? || @icon_name.present? %>
       <div class="Polaris-Button__Icon">
-        <%= icon %>
+        <%= icon.presence || polaris_icon(name: @icon_name) %>
       </div>
       <% if content.present? %>
         &nbsp;

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

@@ -4,10 +4,12 @@
       class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
       data-polaris-dropzone-target="overlay"
     >
-      <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
-        <% stack.item do %>
-          <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
-            <%= @overlay_text %>
+      <% unless @size == :small %>
+        <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
+          <% stack.item do %>
+            <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
+              <%= @overlay_text %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>
@@ -86,7 +88,8 @@
         class: [
           "Polaris-DropZone__Preview",
           "Polaris-DropZone__Preview--singleFile": !@multiple,
-          "Polaris-DropZone__Preview--sizeSmall": @size == :small
+          "Polaris-DropZone__Preview--sizeMedium": @size == :medium,
+          "Polaris-DropZone__Preview--sizeSmall": @size == :small,
         ]
       ) do %>
         <% if @size.in?(%i[small]) %>

data/app/components/polaris/filters_component.rb

@@ -74,7 +74,9 @@ module Polaris
       def popover_arguments
         {
           sectioned: @sectioned,
-          style: ("width: #{@width}" if @width.present?)
+          style: ("width: #{@width}" if @width.present?),
+          position: :below,
+          alignment: :left
         }
       end
 

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

@@ -5,9 +5,9 @@
     </span>
   <% end %>
 
-  <% if icon.present? %>
+  <% if icon.present? || @icon_name.present? %>
     <div class="Polaris-Button__Icon">
-      <%= icon %>
+      <%= icon || polaris_icon(name: @icon_name) %>
     </div>
     <% if content.present? %>
       &nbsp;

data/app/components/polaris/headless_button.rb

@@ -42,6 +42,7 @@ module Polaris
       remove_underline: false,
       size: SIZE_DEFAULT,
       text_align: TEXT_ALIGN_DEFAULT,
+      icon_name: nil,
       **system_arguments
     )
       @tag = url.present? ? "a" : "button"
@@ -52,6 +53,7 @@ module Polaris
       @loading = loading
       @disclosure = fetch_or_fallback(DISCLOSURE_OPTIONS, disclosure, DISCLOSURE_DEFAULT)
       @disclosure = :down if @disclosure === true
+      @icon_name = icon_name
 
       @system_arguments = system_arguments
       @system_arguments[:type] = submit ? "submit" : "button"
@@ -92,7 +94,7 @@ module Polaris
     def system_arguments
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Button--iconOnly": icon.present? && content.blank?
+        "Polaris-Button--iconOnly": (icon.present? || @icon_name.present?) && content.blank?
       )
       @system_arguments
     end

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

@@ -1,6 +1,6 @@
-<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
   <% if render_header? %>
-    <%= render Polaris::BaseComponent.new(**@header_arguments) do %>
+    <%= render Polaris::BaseComponent.new(**header_arguments) do %>
       <div class="Polaris-Page-Header__Row">
         <% if @back_url.present? %>
           <div class="Polaris-Page-Header__BreadcrumbWrapper">
@@ -17,7 +17,7 @@
         <% end %>
 
         <div class="Polaris-Page-Header__TitleWrapper">
-          <div <% if thumbnail.present? %>class="Polaris-Header-Title--hasThumbnail"<% end %>>
+          <%= tag.div(class: ["Polaris-Header-Title--hasThumbnail": thumbnail.present?]) do %>
             <% if thumbnail.present? %>
               <div>
                 <%= thumbnail %>
@@ -38,18 +38,89 @@
               <% end %>
 
               <% if @subtitle.present? %>
-                <div class="Polaris-Header-Title__SubTitle">
+                <%= render Polaris::BaseComponent.new(**subtitle_arguments) do %>
                   <p><%= @subtitle %></p>
-                </div>
+                <% end %>
               <% end %>
             </div>
-          </div>
+          <% end %>
         </div>
 
-        <% if primary_action.present? %>
+        <% if @secondary_actions.any? || action_group.present? || primary_action.present? || has_pagination? %>
           <div class="Polaris-Page-Header__RightAlign">
-            <div class="Polaris-Page-Header__PrimaryActionWrapper">
-              <%= primary_action %>
+            <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| %>
+                      <% 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] } %>
+                            <% 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] } %>
+                            <% end %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  </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] } %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                      <% if action_group.present? %>
+                        <% group.item do %>
+                          <span class="Polaris-ActionMenu-SecondaryAction">
+                            <%= action_group %>
+                          </span>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  </div>
+                </div>
+              <% end %>
+              <% if primary_action.present? %>
+                <div class="Polaris-Page-Header__PrimaryActionWrapper">
+                  <%= 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 %>
+                      <% end %>
+                      <% group.item do %>
+                        <%= polaris_button(url: @next_url, outline: true, disabled: @next_url.blank?) do |button| %>
+                          <% button.icon(name: "ChevronRightMinor") %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  </nav>
+                </div>
+              <% end %>
             </div>
           </div>
         <% end %>
@@ -57,7 +128,7 @@
     <% end %>
   <% end %>
 
-  <%= render Polaris::BaseComponent.new(**@content_arguments) do %>
+  <%= render Polaris::BaseComponent.new(**content_arguments) do %>
     <%= content %>
   <% end %>
 <% end %>

data/app/components/polaris/page_component.rb

@@ -2,55 +2,112 @@
 
 module Polaris
   class PageComponent < Polaris::Component
+    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
-    # renders_many :secondary_actions, Polaris::ButtonComponent
-    renders_one :title_metadata
-    renders_one :thumbnail, Polaris::ThumbnailComponent
+    renders_one :action_group, "ActionGroupComponent"
 
     def initialize(
       title: nil,
       subtitle: nil,
+      compact_title: false,
       back_url: nil,
+      prev_url: nil,
+      next_url: nil,
       narrow_width: false,
       full_width: false,
       divider: false,
+      secondary_actions: [],
       **system_arguments
     )
       @title = title
       @subtitle = subtitle
+      @compact_title = compact_title
       @back_url = back_url
-
+      @prev_url = prev_url
+      @next_url = next_url
+      @narrow_width = narrow_width
+      @full_width = full_width
+      @divider = divider
+      @secondary_actions = secondary_actions
       @system_arguments = system_arguments
-      @system_arguments[:tag] = "div"
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Page",
-        "Polaris-Page--narrowWidth": narrow_width,
-        "Polaris-Page--fullWidth": full_width
-      )
-
-      @header_arguments = {}
-      @header_arguments[:tag] = "div"
-      @header_arguments[:classes] = class_names(
-        "Polaris-Page-Header",
-        "Polaris-Page-Header--mobileView",
-        "Polaris-Page-Header--mediumTitle",
-        "Polaris-Page-Header--hasNavigation": back_url.present?,
-        "Polaris-Page-Header--noBreadcrumbs": back_url.blank?
-      )
-
-      @content_arguments = {}
-      @content_arguments[:tag] = "div"
-      @content_arguments[:classes] = class_names(
-        "Polaris-Page__Content",
-        "Polaris-Page--divider": divider
-      )
+    end
+
+    def header_arguments
+      {
+        tag: "div",
+        classes: class_names(
+          "Polaris-Page-Header",
+          "Polaris-Page-Header--mobileView",
+          "Polaris-Page-Header--mediumTitle",
+          "Polaris-Page-Header--hasNavigation": @back_url.present?,
+          "Polaris-Page-Header--noBreadcrumbs": @back_url.blank?
+        )
+      }
+    end
+
+    def subtitle_arguments
+      {
+        tag: "div",
+        classes: class_names(
+          "Polaris-Header-Title__SubTitle",
+          "Polaris-Header-Title__SubtitleCompact": @compact_title
+        )
+      }
+    end
+
+    def content_arguments
+      {
+        tag: "div",
+        classes: class_names(
+          "Polaris-Page__Content",
+          "Polaris-Page--divider": @divider
+        )
+      }
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          opts[:classes],
+          "Polaris-Page",
+          "Polaris-Page--narrowWidth": @narrow_width,
+          "Polaris-Page--fullWidth": @full_width
+        )
+      end
     end
 
     def render_header?
       @title.present? || @subtitle.present? || @back_url.present? || primary_action.present?
     end
+
+    def has_pagination?
+      @next_url.present? || @prev_url.present?
+    end
+
+    class ActionGroupComponent < Polaris::Component
+      attr_reader :title
+      attr_reader :actions
+
+      def initialize(title:, actions: [])
+        @title = title
+        @actions = actions
+      end
+
+      def call
+        render(Polaris::PopoverComponent.new) do |popover|
+          popover.button(disclosure: true) { @title }
+
+          polaris_action_list do |list|
+            @actions.each do |action|
+              list.item(**action) { action[:content] }
+            end
+          end
+        end
+      end
+    end
   end
 end

data/app/components/polaris/resource_item_component.rb

@@ -31,6 +31,7 @@ module Polaris
       vertical_alignment: ALIGNMENT_DEFAULT,
       cursor: CURSOR_DEFAULT,
       selectable: false,
+      selected: false,
       offset: false,
       wrapper_arguments: {},
       container_arguments: {},
@@ -40,6 +41,7 @@ module Polaris
       @vertical_alignment = vertical_alignment
       @cursor = fetch_or_fallback(CURSOR_OPTIONS, cursor, CURSOR_DEFAULT)
       @selectable = selectable
+      @selected = selected
       @offset = offset
       @wrapper_arguments = wrapper_arguments
       @container_arguments = container_arguments
@@ -79,7 +81,8 @@ module Polaris
         args[:classes] = class_names(
           args[:classes],
           "Polaris-ResourceItem",
-          "Polaris-ResourceItem--selectable": @selectable
+          "Polaris-ResourceItem--selectable": @selectable,
+          "Polaris-ResourceItem--selected": @selected
         )
         prepend_option(args, :style, "cursor: #{@cursor};")
         prepend_option(args[:data], :action, "click->polaris-resource-item#open")

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

@@ -45,7 +45,7 @@
             type="button"
             class="Polaris-TextField__ClearButton
               <% if @value.blank? %>
-                Polaris-TextField__ClearButton--hidden
+                Polaris-TextField__Hidden
               <% end %>"
             tabindex="0"
             data-polaris-text-field-target="clearButton"

data/app/components/polaris/text_field_component.rb

@@ -105,7 +105,7 @@ module Polaris
         tag: "div",
         data: {
           polaris_text_field_has_value_class: "Polaris-TextField--hasValue",
-          polaris_text_field_clear_button_hidden_class: "Polaris-TextField__ClearButton--hidden"
+          polaris_text_field_clear_button_hidden_class: "Polaris-TextField__Hidden"
         }
       }.deep_merge(@system_arguments).tap do |opts|
         opts[:classes] = class_names(

data/app/components/polaris/visually_hidden_component.rb

@@ -2,9 +2,6 @@
 
 module Polaris
   class VisuallyHiddenComponent < Polaris::Component
-    def initialize
-    end
-
     def call
       content_tag(:span, content, class: "Polaris-VisuallyHidden")
     end

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "0.9.1"
+    VERSION = "0.10.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 0.9.1
+  version: 0.10.0
 platform: ruby
 authors:
 - Dan Gamble
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-04-11 00:00:00.000000000 Z
+date: 2022-05-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -39,6 +39,90 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 2.0.0
+- !ruby/object:Gem::Dependency
+  name: capybara
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3'
+- !ruby/object:Gem::Dependency
+  name: webdrivers
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: selenium-webdriver
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.1'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.1'
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: pry
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sprockets-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description:
 email:
 - dan@dangamble.co.uk
@@ -685,7 +769,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.32
+rubygems_version: 3.3.7
 signing_key:
 specification_version: 4
 summary: ViewComponents for Polaris Design System