polaris_view_components 0.13.5 → 1.0.0

data/app/components/polaris/layout/annotated_section.html.erb

@@ -1,9 +1,10 @@
-<%= render Polaris::BaseComponent.new(tag: 'div', **@system_arguments) do %>
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
   <div class="Polaris-Layout__AnnotationWrapper">
     <div class="Polaris-Layout__Annotation">
       <%= polaris_text_container do %>
-        <%= polaris_heading { @title } %>
+        <%= polaris_text(variant: :headingMd, as: :h2) { @title } %>
 
+        <%# TODO: This should be a BoxComponent %>
         <% if @description.present? %>
           <div class="Polaris-Layout__AnnotationDescription">
             <%= tag.p @description %>

data/app/components/polaris/layout/annotated_section.rb

@@ -11,6 +11,7 @@ module Polaris
         @description = description
 
         @system_arguments = system_arguments
+        @system_arguments[:tag] = :div
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
           "Polaris-Layout__AnnotatedSection"

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

@@ -1,4 +1,4 @@
-<%= render Polaris::BaseComponent.new(tag: 'div', **@system_arguments) do %>
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
   <% ordered_sections.each do |section| %>
     <%= section %>
   <% end %>

data/app/components/polaris/layout_component.rb

@@ -27,6 +27,8 @@ module Polaris
     def initialize(sectioned: false, **system_arguments)
       @counter = 0
       @system_arguments = system_arguments
+
+      @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-Layout"

data/app/components/polaris/link_component.rb

@@ -30,20 +30,7 @@ module Polaris
 
     def call
       render(Polaris::BaseComponent.new(**@system_arguments)) do
-        safe_join [
-          content.strip.html_safe,
-          (external_icon if @external)
-        ].compact
-      end
-    end
-
-    private
-
-    def external_icon
-      tag.span(class: "Polaris-Link__IconLockup") do
-        tag.span(class: "Polaris-Link__IconLayout") do
-          polaris_icon(name: "ExternalSmallMinor", aria: {label: "(opens a new window)"})
-        end
+        content&.strip&.html_safe
       end
     end
   end

data/app/components/polaris/list_component.rb

@@ -15,8 +15,16 @@ module Polaris
     }
     TYPE_OPTIONS = TYPE_TAG_MAPPINGS.keys
 
+    SPACING_DEFAULT = :loose
+    SPACING_MAPPINGS = {
+      extra_tight: "Polaris-List--spacingExtraTight",
+      loose: "Polaris-List--spacingLoose"
+    }
+    SPACING_OPTIONS = SPACING_MAPPINGS.keys
+
     def initialize(
       type: TYPE_DEFAULT,
+      spacing: SPACING_DEFAULT,
       **system_arguments
     )
       @system_arguments = system_arguments
@@ -24,7 +32,8 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-List",
-        TYPE_CLASS_MAPPINGS[fetch_or_fallback(TYPE_OPTIONS, type, "")]
+        TYPE_CLASS_MAPPINGS[fetch_or_fallback(TYPE_OPTIONS, type, "")],
+        SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)]
       )
     end
 

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

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

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

@@ -20,58 +20,78 @@
   <div>
     <%= render(Polaris::BaseComponent.new(**dialog_arguments)) do %>
       <div class="<%= modal_classes %>">
-        <div class="<%= header_classes %>">
-          <div class="Polaris-Modal-Header__Title">
-            <%= polaris_display_text(element: :h2, size: :small) do %>
-              <%= @title %>
-            <% end %>
-          </div>
-          <% if close_button.present? %>
-            <%= close_button %>
-          <% else %>
-            <%= render(Polaris::BaseComponent.new(**close_button_arguments)) do %>
-              <%= polaris_icon(name: "MobileCancelMajor", color: :base) %>
+        <% if @title.present? %>
+          <%= polaris_box(
+            classes: "Polaris-Modal-Header",
+            padding_block_start: "4",
+            padding_block_end: "4",
+            padding_inline_start: "5",
+            padding_inline_end: "5",
+            border_block_end_width: "1",
+            border_color: "border-subdued"
+          ) do %>
+            <%= polaris_horizontal_grid(
+              classes: "Polaris-Modal-Header__Title",
+              columns: {xs: "1fr auto"},
+              gap: "4"
+            ) do %>
+              <%= polaris_horizontal_stack(gap: "4", block_align: :center) do %>
+                <%= polaris_text(as: :h2, variant: :headingLg, break_word: true) do %>
+                  <%= @title %>
+                <% end %>
+              <% end %>
+              <% if close_button.present? %>
+                <%= close_button %>
+              <% else %>
+                <%= render(Polaris::BaseComponent.new(**close_button_arguments)) do %>
+                  <%= polaris_icon(name: "MobileCancelMajor", color: :base) %>
+                <% end %>
+              <% end %>
             <% end %>
           <% end %>
-        </div>
+        <% end %>
 
-        <div class="Polaris-Modal__BodyWrapper">
-          <% if @scrollable %>
-            <%= polaris_scrollable(classes: "Polaris-Modal__Body") do %>
-              <%= modal_content %>
-            <% end %>
-          <% else %>
+        <% if @scrollable %>
+          <%= polaris_scrollable(classes: "Polaris-Modal__Body") do %>
             <%= modal_content %>
           <% end %>
-        </div>
+        <% else %>
+          <%= modal_content %>
+        <% end %>
 
         <% if render_footer? %>
-          <div class="Polaris-Modal-Footer">
-            <div class="Polaris-Modal-Footer__FooterContent">
+          <%= polaris_horizontal_stack(classes: "Polaris-Modal-Footer", gap: "4", block_align: :center) do %>
+            <%= polaris_box(
+              border_color: "border-subdued",
+              border_block_start_width: "1",
+              min_height: "var(--p-space-16)",
+              padding: "4",
+              width: "100%"
+            ) do %>
               <%= polaris_stack(alignment: :center) do |stack| %>
-                <% stack.item(fill: true) do %>
+                <% stack.with_item(fill: true) do %>
                 <% end %>
 
-                <% stack.item do %>
+                <% stack.with_item do %>
                   <%= polaris_button_group do |group| %>
                     <% if secondary_actions %>
                       <% secondary_actions.each do |action| %>
-                        <% group.item do %>
+                        <% group.with_item do %>
                           <%= action %>
                         <% end %>
                       <% end %>
+                    <% end %>
 
-                      <% if primary_action %>
-                        <% group.item do %>
-                          <%= primary_action %>
-                        <% end %>
+                    <% if primary_action %>
+                      <% group.with_item do %>
+                        <%= primary_action %>
                       <% end %>
                     <% end %>
                   <% end %>
                 <% end %>
               <% end %>
-            </div>
-          </div>
+            <% end %>
+          <% end %>
         <% end %>
       </div>
     <% end %>

data/app/components/polaris/modal_component.rb

@@ -87,10 +87,6 @@ module Polaris
       )
     end
 
-    def header_classes
-      @title.present? ? "Polaris-Modal-Header" : "Polaris-Modal-Header--titleHidden"
-    end
-
     def render_footer?
       primary_action.present? || secondary_actions.any?
     end

data/app/components/polaris/navigation/item_component.html.erb

@@ -1,21 +1,29 @@
 <%= render Polaris::BaseComponent.new(**system_arguments) do %>
   <div class="Polaris-Navigation__ItemWrapper">
-    <%= link_to @url, **link_arguments do %>
-      <% if @icon.present? %>
-        <div class="Polaris-Navigation__Icon">
-          <%= polaris_icon(name: @icon) %>
-        </div>
+    <div class="Polaris-Navigation__ItemInnerWrapper">
+      <%= link_to @url, **link_arguments do %>
+        <% if @icon.present? %>
+          <div class="Polaris-Navigation__Icon">
+            <%= polaris_icon(name: @icon) %>
+          </div>
+        <% end %>
+        <span class="Polaris-Navigation__Text">
+          <%= @label %>
+        </span>
+        <% if @badge.present? %>
+          <div class="Polaris-Navigation__Badge">
+            <%= polaris_badge { @badge } %>
+          </div>
+        <% end %>
       <% end %>
-      <span class="Polaris-Navigation__Text">
-        <%= @label %>
-      </span>
-      <% if @badge.present? %>
-        <div class="Polaris-Navigation__Badge">
-          <%= polaris_badge { @badge } %>
+      <% if secondary_actions.present? %>
+        <div class="Polaris-Navigation__SecondaryActions">
+          <% secondary_actions.each do |secondary_action| %>
+            <%= secondary_action %>
+          <% end %>
         </div>
       <% end %>
-    <% end %>
-    <%= secondary_action %>
+    </div>
   </div>
   <% if sub_items.present? %>
     <div class="Polaris-Navigation__SecondaryNavigation Polaris-Navigation--isExpanded">

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

@@ -1,6 +1,6 @@
 class Polaris::Navigation::ItemComponent < Polaris::Component
   renders_many :sub_items, Polaris::Navigation::ItemComponent
-  renders_one :secondary_action, "SecondaryActionComponent"
+  renders_many :secondary_actions, "SecondaryActionComponent"
 
   attr_reader :selected
 
@@ -88,11 +88,13 @@ class Polaris::Navigation::ItemComponent < Polaris::Component
     end
 
     def call
-      render(Polaris::BaseComponent.new(**system_arguments)) do
-        if @icon.present?
-          render(Polaris::IconComponent.new(name: @icon))
-        else
-          content
+      tag.span do
+        render(Polaris::BaseComponent.new(**system_arguments)) do
+          if @icon.present?
+            render(Polaris::IconComponent.new(name: @icon))
+          else
+            content
+          end
         end
       end
     end

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

@@ -2,9 +2,9 @@
   <% if items.present? %>
     <% if @title.present? %>
       <li class="Polaris-Navigation__SectionHeading">
-        <span class="Polaris-Navigation__Text">
+        <%= polaris_text(as: :span, color: :subdued, variant: :headingXs) do %>
           <%= @title %>
-        </span>
+        <% end %>
         <%= action %>
       </li>
     <% end %>

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

@@ -1,14 +1,30 @@
-<li>
+<%= polaris_box(
+  as: :li,
+  padding_block_start: @position.zero? ? nil : "2"
+) do %>
   <% if @title.present? %>
-    <p class="Polaris-OptionList__Title"><%= @title %></p>
+    <%= polaris_box(
+      padding_block_start: @position.zero? ? "2" : "4",
+      padding_inline_start: "2",
+      padding_block_end: "2",
+      padding_inline_end: "2",
+      border_color: !@position.zero? ? "border-subdued" : nil,
+      border_block_start_width: !@position.zero? ? "1" : nil
+    ) do %>
+      <%= polaris_text(as: :p, variant: :headingXs) do %>
+        <%= @title %>
+      <% end %>
+    <% end %>
   <% end %>
-  <ul class="Polaris-OptionList__Options">
-    <% if items.present? %>
-      <% items.each do |item| %>
-        <%= item %>
+  <%= polaris_bleed(margin_block_start: @title.present? ? nil : "05") do %>
+    <%= polaris_box(as: :ul) do %>
+      <% if items.present? %>
+        <% items.each do |item| %>
+          <%= item %>
+        <% end %>
+      <% else %>
+        <%= content %>
       <% end %>
-    <% else %>
-      <%= content %>
     <% end %>
-  </ul>
-</li>
+  <% end %>
+<% end %>

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

@@ -22,6 +22,7 @@ class Polaris::OptionList::SectionComponent < Polaris::Component
   end
 
   def initialize(
+    position: 0,
     title: nil,
     form: nil,
     attribute: nil,
@@ -29,6 +30,7 @@ class Polaris::OptionList::SectionComponent < Polaris::Component
     selected: [],
     **system_arguments
   )
+    @position = position
     @title = title
     @form = form
     @attribute = attribute
@@ -40,10 +42,6 @@ class Polaris::OptionList::SectionComponent < Polaris::Component
   def system_arguments
     @system_arguments.tap do |opts|
       opts[:tag] = "ul"
-      opts[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-OptionList__Options"
-      )
     end
   end
 

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

@@ -1,10 +1,13 @@
-<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+<%= polaris_box(as: :ul, padding: "2", **system_arguments) do %>
   <% if sections.present? %>
     <% sections.each do |section| %>
       <%= section %>
     <% end %>
   <% elsif items.present? %>
-    <%= render(Polaris::OptionList::SectionComponent.new(title: @title)) do %>
+    <%= render(Polaris::OptionList::SectionComponent.new(
+      title: @title,
+      position: @sections_count
+    )) do %>
       <% items.each do |item| %>
         <%= item %>
       <% end %>

data/app/components/polaris/option_list_component.rb

@@ -1,7 +1,10 @@
 module Polaris
   class OptionListComponent < Polaris::Component
     renders_many :sections, ->(**system_arguments) do
+      @sections_count += 1
+
       Polaris::OptionList::SectionComponent.new(
+        position: @sections_count - 1,
         form: @form,
         attribute: @attribute,
         name: @name,
@@ -39,6 +42,8 @@ module Polaris
       selected: [],
       **system_arguments
     )
+      @sections_count = 0
+
       @title = title
       @form = form
       @attribute = attribute
@@ -48,15 +53,10 @@ module Polaris
     end
 
     def system_arguments
-      @system_arguments.tap do |opts|
-        opts[:tag] = "ul"
-        opts[:data] ||= {}
-        prepend_option(opts[:data], :controller, "polaris-option-list")
-        opts[:data][:polaris_option_list_selected_class] = "Polaris-OptionList-Option--select"
-        opts[:classes] = class_names(
-          @system_arguments[:classes],
-          "Polaris-OptionList"
-        )
+      @system_arguments.tap do |args|
+        args[:data] ||= {}
+        prepend_option(args[:data], :controller, "polaris-option-list")
+        args[:data][:polaris_option_list_selected_class] = "Polaris-OptionList-Option--select"
       end
     end
 

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

@@ -1,10 +1,10 @@
 <%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
-  <%= polaris_stack(spacing: :tight, distribution: stack_distribution) do |stack| %>
+  <%= polaris_stack(distribution: :trailing, spacing: :tight) do |stack| %>
     <% if secondary_actions %>
-      <% stack.item do %>
+      <% stack.with_item do %>
         <%= polaris_button_group do |group| %>
           <% secondary_actions.each do |action| %>
-            <% group.item do %>
+            <% group.with_item do %>
               <%= action %>
             <% end %>
           <% end %>
@@ -13,7 +13,7 @@
     <% end %>
 
     <% if primary_action %>
-      <% stack.item do %>
+      <% stack.with_item do %>
         <%= primary_action %>
       <% end %>
     <% end %>

data/app/components/polaris/page_actions_component.rb

@@ -2,24 +2,12 @@
 
 module Polaris
   class PageActionsComponent < Polaris::Component
-    DISTRIBUTION_DEFAULT = nil
-    DISTRIBUTION_OPTIONS = [
-      DISTRIBUTION_DEFAULT,
-      :equal_spacing,
-      :leading,
-      :trailing,
-      :center,
-      :fill,
-      :fill_evenly
-    ]
-
     renders_one :primary_action, ->(primary: true, **system_arguments) do
       Polaris::ButtonComponent.new(primary: primary, **system_arguments)
     end
     renders_many :secondary_actions, Polaris::ButtonComponent
 
-    def initialize(distribution: DISTRIBUTION_DEFAULT, **system_arguments)
-      @distribution = fetch_or_fallback(DISTRIBUTION_OPTIONS, distribution, DISTRIBUTION_DEFAULT)
+    def initialize(**system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
@@ -27,13 +15,5 @@ module Polaris
         "Polaris-PageActions"
       )
     end
-
-    private
-
-    def stack_distribution
-      return @distribution if @distribution.present?
-
-      (primary_action.present? && secondary_actions.any?) ? :equal_spacing : :trailing
-    end
   end
 end