polaris_view_components 1.1.0 → 1.3.0

data/app/assets/stylesheets/polaris_view_components.pcss

@@ -1,4 +1,5 @@
 @import "@shopify/polaris/build/esm/styles.css";
 @import "./polaris_view_components/shopify_navigation.pcss";
 @import "./polaris_view_components/spacer_component.pcss";
+@import "./polaris_view_components/tooltip_component.pcss";
 @import "./polaris_view_components/custom.pcss";

data/app/components/polaris/autocomplete_component.rb

@@ -55,6 +55,7 @@ module Polaris
         alignment: :left,
         full_width: true,
         inline: false,
+        text_field_activator: true,
         wrapper_arguments: {}
       }.deep_merge(@popover_arguments).tap do |opts|
         opts[:wrapper_arguments][:data] ||= {}

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

@@ -1,6 +1,6 @@
 <%= render Polaris::BaseComponent.new(**system_arguments) do %>
   <% if @source %>
-    <%= image_tag @source, class: "Polaris-Avatar__Image", role: "presentation" %>
+    <img src="<%= @source %>" class="Polaris-Avatar__Image" role="presentation" onerror="this.src=''" />
   <% else %>
     <span class="Polaris-Avatar__Initials">
       <% if @initials %>

data/app/components/polaris/base_checkbox.rb

@@ -6,6 +6,7 @@ module Polaris
       name: nil,
       checked: false,
       disabled: false,
+      mulitple: false,
       value: "1",
       unchecked_value: "0",
       **system_arguments
@@ -22,8 +23,9 @@ module Polaris
 
     def system_arguments
       @system_arguments.tap do |opts|
-        opts[:disabled] = true if @disabled
         opts[:checked] = true if @checked
+        opts[:disabled] = true if @disabled
+        opts[:multiple] = true if @multiple
         opts[:aria] ||= {}
         opts[:aria][:checked] = @checked
         if indeterminate?

data/app/components/polaris/checkbox_component.rb

@@ -16,6 +16,7 @@ module Polaris
       label_hidden: false,
       checked: false,
       disabled: false,
+      multiple: false,
       help_text: nil,
       error: nil,
       value: "1",
@@ -29,6 +30,7 @@ module Polaris
       @name = name
       @checked = checked
       @disabled = disabled
+      @multiple = multiple
       @value = value
       @unchecked_value = unchecked_value
 
@@ -76,6 +78,7 @@ module Polaris
         name: @name,
         checked: @checked,
         disabled: @disabled,
+        multiple: @multiple,
         value: @value,
         unchecked_value: @unchecked_value,
         **@input_options

data/app/components/polaris/choice_list_component.rb

@@ -10,6 +10,7 @@ module Polaris
         value: value,
         checked: @selected.include?(value),
         disabled: disabled || @disabled,
+        multiple: true,
         **system_arguments
       )
     end

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

@@ -1,9 +1,9 @@
 <%= render Polaris::BaseComponent.new(**system_arguments) do %>
-  <div class="Polaris-Filters-ConnectedFilterControl__Wrapper">
-    <div class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right">
+  <div class="Polaris-LegacyFilters-ConnectedFilterControl__Wrapper">
+    <div class="Polaris-LegacyFilters-ConnectedFilterControl Polaris-LegacyFilters-ConnectedFilterControl--right">
       <% if query.present? %>
-        <div class="Polaris-Filters-ConnectedFilterControl__CenterContainer">
-          <div class="Polaris-Filters-ConnectedFilterControl__Item">
+        <div class="Polaris-LegacyFilters-ConnectedFilterControl__CenterContainer">
+          <div class="Polaris-LegacyFilters-ConnectedFilterControl__Item">
             <%= query %>
           </div>
         </div>
@@ -17,18 +17,18 @@
       <% end %>
     </div>
     <% if content.present? %>
-      <div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
+      <div class="Polaris-LegacyFilters-ConnectedFilterControl__AuxiliaryContainer">
         <%= content %>
       </div>
     <% end %>
   </div>
   <% if tags.present? %>
-    <div class="Polaris-Filters__TagsContainer">
+    <div class="Polaris-LegacyFilters__TagsContainer">
       <%= tags %>
     </div>
   <% end %>
   <% if @help_text.present? %>
-    <div class="Polaris-Filters__HelpText">
+    <div class="Polaris-LegacyFilters__HelpText">
       <%= polaris_text_subdued { @help_text } %>
     </div>
   <% end %>

data/app/components/polaris/filters_component.rb

@@ -21,16 +21,16 @@ module Polaris
         opts[:tag] = "div"
         opts[:classes] = class_names(
           @system_arguments[:classes],
-          "Polaris-Filters"
+          "Polaris-LegacyFilters"
         )
       end
     end
 
     def items_wrapper_classes
       class_names(
-        "Polaris-Filters-ConnectedFilterControl__RightContainer",
-        "Polaris-Filters-ConnectedFilterControl__RightContainerWithoutMoreFilters",
-        "Polaris-Filters-ConnectedFilterControl--queryFieldHidden": @query.blank?
+        "Polaris-LegacyFilters-ConnectedFilterControl__RightContainer",
+        "Polaris-LegacyFilters-ConnectedFilterControl__RightContainerWithoutMoreFilters",
+        "Polaris-LegacyFilters-ConnectedFilterControl--queryFieldHidden": @query.blank?
       )
     end
 
@@ -66,7 +66,7 @@ module Polaris
           opts[:tag] = "div"
           opts[:classes] = class_names(
             @system_arguments[:classes],
-            "Polaris-Filters-ConnectedFilterControl__Item"
+            "Polaris-LegacyFilters-ConnectedFilterControl__Item"
           )
         end
       end

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

@@ -1,33 +1,57 @@
 <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
-  <button data-action="polaris-frame#openMenu" type="button" class="Polaris-TopBar__NavigationIcon">
-    <%= polaris_icon(name: "MobileHamburgerMajor") %>
-  </button>
+  <div class="Polaris-TopBar__Container">
+    <div class="Polaris-TopBar__LeftContent">
+      <button data-action="polaris-frame#openMenu" type="button" class="Polaris-TopBar__NavigationIcon">
+        <%= polaris_icon(name: "MobileHamburgerMajor") %>
+      </button>
 
-  <% if @logo.present? %>
-    <div class="Polaris-TopBar__LogoContainer Polaris-TopBar__LogoDisplayControl">
-      <%= link_to(@logo.url,
-        class: "Polaris-TopBar__LogoLink",
-        style: "width: #{@logo.width}"
-      ) do %>
-        <%= image_tag @logo.src,
-          class: "Polaris-TopBar__Logo",
-          style: "width: #{@logo.width}",
-          alt: @logo.alt %>
+      <% if @logo.present? %>
+        <div class="Polaris-TopBar__LogoContainer Polaris-TopBar__LogoDisplayControl">
+          <%= link_to(@logo.url,
+            class: "Polaris-TopBar__LogoLink",
+            style: "width: #{@logo.width}"
+          ) do %>
+            <%= image_tag @logo.src,
+              class: "Polaris-TopBar__Logo",
+              style: "width: #{@logo.width}",
+              alt: @logo.alt %>
+          <% end %>
+        </div>
       <% end %>
     </div>
-  <% end %>
 
-  <div class="Polaris-TopBar__Contents">
-    <div class="Polaris-TopBar__SearchField">
-      <%= search_field %>
+    <div class="Polaris-TopBar__Search">
+      <div class="Polaris-TopBar-SearchField">
+        <%= search_field %>
+      </div>
     </div>
-    <div class="Polaris-TopBar__SecondaryMenu">
-      <%= secondary_menu %>
+
+    <div class="Polaris-TopBar__RightContent">
+      <div>
+        <div class="Polaris-TopBar-Menu__ActivatorWrapper">
+          <%= user_menu %>
+        </div>
+      </div>
     </div>
-    <div>
-      <div class="Polaris-TopBar-Menu__ActivatorWrapper">
-        <%= user_menu %>
+
+
+    <%
+=begin%>
+
+    <div class="Polaris-TopBar__Contents">
+      <div class="Polaris-TopBar__SearchField">
+        <%= search_field %>
+      </div>
+      <div class="Polaris-TopBar__SecondaryMenu">
+        <%= secondary_menu %>
+      </div>
+      <div>
+        <div class="Polaris-TopBar-Menu__ActivatorWrapper">
+          <%= user_menu %>
+        </div>
       </div>
     </div>
+<%
+=end%>
   </div>
 <% end %>

data/app/components/polaris/frame/top_bar_component.rb

@@ -1,7 +1,6 @@
 class Polaris::Frame::TopBarComponent < Polaris::Component
   renders_one :user_menu, Polaris::TopBar::UserMenuComponent
   renders_one :search_field
-  renders_one :secondary_menu
 
   def initialize(logo:, **system_arguments)
     @logo = logo.is_a?(Hash) ? Polaris::Logo.new(**logo) : logo

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

@@ -11,13 +11,7 @@
     <%= render Polaris::BaseComponent.new(**system_arguments) do %>
       <%= render Polaris::BaseComponent.new(**popover_arguments) do %>
         <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
-        <%= polaris_box(
-          position: :relative,
-          overflow_x: :hidden,
-          overflow_y: :hidden,
-          background: "bg",
-          border_radius: "2"
-        ) do %>
+        <div class="Polaris-Popover__ContentContainer">
           <%= render Polaris::BaseComponent.new(**content_arguments) do %>
             <% if panes.present? %>
               <% panes.each do |pane| %>
@@ -32,7 +26,7 @@
               <% end %>
             <% end %>
           <% end %>
-        <% end %>
+        </div>
         <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
       <% end %>
     <% end %>

data/app/components/polaris/popover_component.rb

@@ -28,6 +28,7 @@ module Polaris
       position: POSITION_DEFAULT,
       append_to_body: false,
       scrollable_shadow: true,
+      text_field_activator: false,
       wrapper_arguments: {},
       **system_arguments
     )
@@ -41,6 +42,7 @@ module Polaris
       @alignment = fetch_or_fallback(ALIGNMENT_OPTIONS, alignment, ALIGNMENT_DEFAULT)
       @position = fetch_or_fallback(POSITION_OPTIONS, position, POSITION_DEFAULT)
       @scrollable_shadow = scrollable_shadow
+      @text_field_activator = text_field_activator
       @append_to_body = append_to_body
       @wrapper_arguments = wrapper_arguments
       @system_arguments = system_arguments
@@ -55,7 +57,8 @@ module Polaris
         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_placement_value] = popover_placement
+        opts[:data][:polaris_popover_text_field_activator_value] = @text_field_activator
         opts[:data][:polaris_popover_open_class] = "Polaris-Popover__PopoverOverlay--open"
         opts[:data][:polaris_popover_closed_class] = "Polaris-Popover__PopoverOverlay--closed"
         if @inline
@@ -106,13 +109,13 @@ module Polaris
       end
     end
 
-    def popperjs_placement
+    def popover_placement
       placement =
         case @position
         when :above then "top"
         when :below then "bottom"
         else
-          "auto"
+          "bottom"
         end
       placement += "-start" if @alignment == :left
       placement += "-end" if @alignment == :right

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

@@ -3,14 +3,14 @@
     <% if @form.present? && @attribute.present? %>
       <%= @form.select(
         @attribute,
-        options_for_select(@options, selected: @selected, disabled: @disabled_options),
+        build_options_for_select,
         @select_options,
         @input_options,
       ) %>
     <% else %>
       <%= select_tag(
         @name,
-        options_for_select(@options, selected: @selected, disabled: @disabled_options),
+        build_options_for_select,
         @input_options,
       ) %>
     <% end %>

data/app/components/polaris/select_component.rb

@@ -3,13 +3,16 @@
 module Polaris
   class SelectComponent < Polaris::Component
     def initialize(
-      options:,
+      options: {},
       form: nil,
       attribute: nil,
       name: nil,
       selected: nil,
       disabled_options: nil,
       label: nil,
+      prompt: nil,
+      divider: nil,
+      time_zone: nil,
       label_hidden: false,
       label_inline: false,
       label_action: nil,
@@ -17,6 +20,7 @@ module Polaris
       required: false,
       help_text: nil,
       error: false,
+      grouped: false,
       wrapper_arguments: {},
       select_options: {},
       input_options: {},
@@ -32,6 +36,14 @@ module Polaris
       @label_hidden = label_hidden
       @label_inline = label_inline
       @disabled = disabled
+      @grouped = grouped
+      @prompt = prompt
+      @divider = divider
+      @time_zone = time_zone
+
+      if @time_zone
+        @options = ::ActiveSupport::TimeZone.all
+      end
 
       @system_arguments = system_arguments
       @system_arguments[:tag] = "div"
@@ -73,10 +85,52 @@ module Polaris
     end
 
     def selected_option
-      option = @options.to_a.find { |i| i.last.to_s == @selected.to_s }
-      return unless option
+      if @grouped
+        grouped_selected_option
+      else
+        options_to_find = @time_zone ? @options.map { |z| [z.to_s, z.name] } : @options.to_a
+        option = options_to_find.find { |i| i.last.to_s == @selected.to_s }
+        return unless option
+
+        option.first
+      end
+    end
+
+    def build_options_for_select
+      if @grouped
+        grouped_options_for_select(
+          @options,
+          @selected,
+          disabled: @disabled_options,
+          prompt: @prompt,
+          divider: @divider
+        )
+      elsif @time_zone
+        time_zone_options_for_select(@selected)
+      else
+        options_for_select(@options, selected: @selected, disabled: @disabled_options)
+      end
+    end
+
+    private
+
+    def grouped_selected_option
+      @options.each do |group|
+        group_to_traverse = @divider ? group[1] : group
+        if group_to_traverse.is_a?(String)
+          return group_to_traverse if group_to_traverse == @selected.to_s
+
+          next
+        end
 
-      option.first
+        group_to_traverse.each do |item|
+          if item.is_a?(Array) && item[1] == @selected.to_s
+            return item[0]
+          elsif item.is_a?(String) && item == @selected.to_s
+            return item
+          end
+        end
+      end
     end
   end
 end

data/app/components/polaris/text_field_component.rb

@@ -52,6 +52,7 @@ module Polaris
       required: false,
       help_text: nil,
       error: false,
+      clear_errors_on_focus: false,
       wrapper_arguments: {},
       input_options: {},
       **system_arguments
@@ -83,6 +84,7 @@ module Polaris
       @required = required
       @help_text = help_text
       @error = error
+      @clear_errors_on_focus = clear_errors_on_focus
       @wrapper_arguments = wrapper_arguments
       @input_options = input_options
       @system_arguments = system_arguments
@@ -98,7 +100,8 @@ module Polaris
         label_action: @label_action,
         required: @required,
         help_text: @help_text,
-        error: @error
+        error: @error,
+        classes: "polaris-text-field-wrapper"
       }.deep_merge(@wrapper_arguments)
     end
 
@@ -136,8 +139,14 @@ module Polaris
         placeholder: @placeholder,
         maxlength: @maxlength,
         minlength: @minlength,
-        data: {polaris_text_field_target: "input"}
+        data: {
+          polaris_text_field_target: "input"
+        }
       }
+      if @clear_errors_on_focus
+        append_option(default_options[:data], :action, "focus->polaris-text-field#clearErrorMessages")
+      end
+
       if @type == :number
         default_options.merge!({
           step: @step,

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

@@ -4,6 +4,6 @@
     <div class="Polaris-Tooltip-TooltipOverlay__Content Polaris-Tooltip-TooltipOverlay--default">
       <%= @text %>
     </div>
-    <div class="Polaris-Tooltip-Arrow" data-popper-arrow="true"></div>
+    <div class="Polaris-Tooltip-Arrow" data-tooltip-arrow="true"></div>
   </template>
 <% end %>

data/app/components/polaris/tooltip_component.rb

@@ -20,7 +20,12 @@ module Polaris
       prepend_option(
         system_arguments[:data],
         :action,
-        "mouseenter->polaris-tooltip#show mouseleave->polaris-tooltip#hide"
+        %w[
+          mouseenter->polaris-tooltip#show
+          mouseleave->polaris-tooltip#hide
+          focus->polaris-tooltip#show
+          blur->polaris-tooltip#hide
+        ].join(" ")
       )
       prepend_option(system_arguments[:data], :controller, "polaris-tooltip")
     end

data/app/helpers/polaris/form_builder.rb

@@ -87,5 +87,30 @@ module Polaris
       end
       render Polaris::DropzoneComponent.new(form: self, attribute: method, **options, &block)
     end
+
+    def polaris_collection_check_boxes(method, collection, value_method, text_method, **options, &block)
+      options[:error] ||= error_for(method)
+      if options[:error_hidden] && options[:error]
+        options[:error] = !!options[:error]
+      end
+
+      value = object&.public_send(method)
+      if value.present?
+        options[:selected] = value.map { |el| el.public_send(value_method) }
+      end
+
+      render Polaris::ChoiceListComponent.new(
+        form: self,
+        title: method.to_s.humanize,
+        attribute: method,
+        name: method,
+        **options,
+        &block
+      ) do |choice|
+        collection.each do |item|
+          choice.with_checkbox(label: item.public_send(text_method), value: item.public_send(value_method))
+        end
+      end
+    end
   end
 end

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "1.1.0"
+    VERSION = "1.3.0"
   end
 end