polaris_view_components 0.13.5 → 1.0.0

data/app/components/polaris/data_table_component.rb

@@ -16,6 +16,7 @@ module Polaris
       vertical_alignment: ALIGNMENT_DEFAULT,
       totals_in_header: false,
       totals_in_footer: false,
+      increased_density: false,
       **system_arguments
     )
       @data = data
@@ -23,6 +24,7 @@ module Polaris
       @vertical_alignment = fetch_or_fallback(ALIGNMENT_OPTIONS, vertical_alignment, ALIGNMENT_DEFAULT)
       @totals_in_header = totals_in_header
       @totals_in_footer = totals_in_footer
+      @increased_density = increased_density
       @system_arguments = system_arguments
     end
 
@@ -32,9 +34,20 @@ module Polaris
           args[:classes],
           "Polaris-DataTable"
         )
+        args[:data] ||= {}
+        args[:data][:controller] = "polaris-data-table"
       end
     end
 
+    def wrapper_arguments
+      {
+        tag: "div",
+        classes: class_names(
+          "Polaris-DataTable__IncreasedTableDensity": @increased_density
+        )
+      }
+    end
+
     def row_arguments(row)
       {tag: "tr"}.tap do |args|
         args[:classes] = class_names(
@@ -42,6 +55,8 @@ module Polaris
           "Polaris-DataTable--hoverable": @hoverable
         )
         args[:id] = dom_id(row) if row.respond_to?(:to_key)
+        args[:data] ||= {}
+        args[:data][:polaris_data_table_target] = "row"
       end
     end
 

data/app/components/polaris/description_list_component.rb

@@ -32,7 +32,9 @@ module Polaris
 
       def call
         safe_join [
-          tag.dt(class: "Polaris-DescriptionList__Term") { @term },
+          tag.dt(class: "Polaris-DescriptionList__Term") do
+            render(Polaris::TextComponent.new(as: :span, variant: :headingSm).with_content(@term))
+          end,
           tag.dd(class: "Polaris-DescriptionList__Description") { content }
         ]
       end

data/app/components/polaris/display_text_component.rb

@@ -7,10 +7,10 @@ module Polaris
 
     SIZE_DEFAULT = :medium
     SIZE_MAPPINGS = {
-      small: "Polaris-DisplayText--sizeSmall",
-      medium: "Polaris-DisplayText--sizeMedium",
-      large: "Polaris-DisplayText--sizeLarge",
-      extra_large: "Polaris-DisplayText--sizeExtraLarge"
+      small: :headingLg,
+      medium: :headingXl,
+      large: :heading2xl,
+      extra_large: :heading4xl
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
@@ -20,16 +20,12 @@ module Polaris
       **system_arguments
     )
       @system_arguments = system_arguments
-      @system_arguments[:tag] = element
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-DisplayText",
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
-      )
+      @element = element
+      @variant = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
     end
 
     def call
-      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+      render(Polaris::TextComponent.new(as: @element, variant: @variant, **@system_arguments)) { content }
     end
   end
 end

data/app/components/polaris/divider_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Polaris
+  class DividerComponent < Polaris::Component
+    def initialize(
+      border_color: "border-subdued",
+      border_width: "1",
+      **system_arguments
+    )
+      @system_arguments = system_arguments.tap do |args|
+        args[:tag] = "hr"
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-Divider"
+        )
+        args[:style] = styles_list(
+          args[:style],
+          "border-block-start": "var(--p-border-width-#{fetch_or_fallback(Tokens::Border::WIDTH_SCALE, border_width)}) solid #{border_color_value(border_color)}"
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+
+    private
+
+    def border_color_value(border_color)
+      return "border-subdued" unless border_color
+      return "transparent" if border_color == "transparent"
+      "var(--p-color-#{fetch_or_fallback(Tokens::Color::BORDER_ALIAS, border_color)})"
+    end
+  end
+end

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

@@ -6,7 +6,7 @@
     >
       <% unless @size == :small %>
         <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
-          <% stack.item do %>
+          <% stack.with_item do %>
             <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
               <%= @overlay_text %>
             <% end %>
@@ -20,7 +20,7 @@
       data-polaris-dropzone-target="errorOverlay"
     >
       <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
-        <% stack.item do %>
+        <% stack.with_item do %>
           <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
             <%= @error_overlay_text %>
           <% end %>
@@ -35,13 +35,13 @@
         <% else %>
           <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
             <% unless @size == :medium %>
-              <% stack.item do %>
+              <% 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.item do %>
+              <% stack.with_item do %>
                 <% if @size == :medium %>
                   <div class="Polaris-DropZone-FileUpload__ActionTitle">
                     <%= @file_upload_button %>
@@ -55,7 +55,7 @@
             <% end %>
 
             <% unless @size == :small %>
-              <% stack.item do %>
+              <% stack.with_item do %>
                 <% help_text = capture do %>
                   <%= render Polaris::TextStyleComponent.new(variation: :subdued) do %>
                     <%= @file_upload_help %>
@@ -115,7 +115,7 @@
           data: { target: "icon" },
           style: "border: none; background: none;"
         ) do |thumbnail| %>
-          <%= thumbnail.icon(name: "TimelineAttachmentMajor") %>
+          <%= thumbnail.with_icon(name: "TimelineAttachmentMajor") %>
         <% end %>
         <%= polaris_thumbnail(source: "#", size: :small, data: { target: "thumbnail" }) %>
       <% else %>
@@ -125,18 +125,18 @@
             vertical: !@multiple,
             spacing: @multiple ? :default : :tight,
           ) do |stack| %>
-            <% stack.item do %>
+            <% stack.with_item do %>
               <%= polaris_thumbnail(
                 size: :small,
                 data: { target: "icon" },
                 style: "border: none; background: none;"
               ) do |thumbnail| %>
-                <%= thumbnail.icon(name: "TimelineAttachmentMajor") %>
+                <%= thumbnail.with_icon(name: "TimelineAttachmentMajor") %>
               <% end %>
               <%= polaris_thumbnail(source: "#", size: :small, data: { target: "thumbnail" }) %>
             <% end %>
 
-            <% stack.item(fill: true) do %>
+            <% stack.with_item(fill: true) do %>
               <div data-target="content">
                 <%= polaris_caption do %>
                   <%= polaris_text_subdued(data: { target: "file-size" }) { "SIZE" } %>

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

@@ -1,52 +1,57 @@
-<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
-  <div class="Polaris-EmptyState__Section">
-    <div class="Polaris-EmptyState__DetailsContainer">
-      <div class="Polaris-EmptyState__Details">
+<%= polaris_box(
+  padding_inline_start: "0",
+  padding_inline_end: "0",
+  padding_block_start: "5",
+  padding_block_end: "16",
+  **@system_arguments
+) do %>
+  <%= polaris_vertical_stack(inline_align: :center) do %>
+    <img src="<%= @image %>" role="presentation" class="<%= @image_contained_class %>">
+
+    <%= polaris_box(max_width: @full_width? "100%" : "400px") do %>
+      <%= polaris_vertical_stack(inline_align: :center) do %>
         <% if @heading.present? || content.present? %>
-          <div class="Polaris-TextContainer">
+          <%= polaris_box(padding_block_end: "6") do %>
             <% if @heading.present? %>
-              <p class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">
-                <%= @heading %>
-              </p>
+              <%= polaris_box(padding_block_end: "4") do %>
+                <%= polaris_text(
+                  variant: @within == :container ? :headingLg : :headingXl,
+                  as: :p,
+                  alignment: :center
+                ) do %>
+                  <%= @heading %>
+                <% end %>
+              <% end %>
             <% end %>
             <% if content.present? %>
-              <div class="Polaris-EmptyState__Content">
+              <%= polaris_text(as: :span, color: :subdued, alignment: :center) do %>
                 <%= content %>
-              </div>
+              <% end %>
             <% end %>
-          </div>
+          <% end %>
         <% end %>
         <% if primary_action.present? || secondary_action.present? %>
-          <div class="Polaris-EmptyState__Actions">
-            <%= polaris_stack(spacing: :tight, distribution: :center, alignment: :center) do |stack| %>
-              <% if primary_action.present? %>
-                <% stack.item do %>
-                  <%= primary_action %>
-                <% end %>
-              <% end %>
-              <% if secondary_action.present? %>
-                <% stack.item do %>
-                  <%= secondary_action %>
-                <% end %>
-              <% end %>
+          <%= polaris_horizontal_stack(align: :center, gap: "2") do %>
+            <% if secondary_action.present? %>
+              <%= secondary_action %>
             <% end %>
-          </div>
+            <% if primary_action.present? %>
+              <%= primary_action %>
+            <% end %>
+          <% end %>
         <% end %>
         <% if footer.present? %>
-          <div class="Polaris-EmptyState__FooterContent">
-            <div class="Polaris-TextContainer">
+          <%= polaris_box(padding_block_start: "4") do %>
+            <%= polaris_text(as: :span, color: :subdued, alignment: :center) do %>
               <%= footer %>
-            </div>
-          </div>
+            <% end %>
+          <% end %>
         <% end %>
-      </div>
-    </div>
+      <% end %>
+    <% end %>
 
-    <div class="Polaris-EmptyState__ImageContainer">
-      <img src="<%= @image %>" role="presentation" alt="" class="Polaris-EmptyState__Image">
-    </div>
-  </div>
-  <% if unsectioned_content.present? %>
-    <%= unsectioned_content %>
+    <% if unsectioned_content.present? %>
+      <%= unsectioned_content %>
+    <% end %>
   <% end %>
 <% end %>

data/app/components/polaris/empty_state_component.rb

@@ -3,11 +3,7 @@
 module Polaris
   class EmptyStateComponent < Polaris::Component
     WITHIN_DEFAULT = :page
-    WITHIN_MAPPINGS = {
-      WITHIN_DEFAULT => "",
-      :container => "Polaris-EmptyState--withinContentContainer"
-    }
-    WITHIN_OPTIONS = WITHIN_MAPPINGS.keys
+    WITHIN_OPTIONS = [:page, :container]
 
     renders_one :primary_action, ->(primary: true, **system_arguments) do
       Polaris::ButtonComponent.new(primary: primary, **system_arguments)
@@ -19,21 +15,17 @@ module Polaris
     def initialize(
       image:,
       heading: nil,
+      image_contained: false,
       full_width: false,
       within: WITHIN_DEFAULT,
       **system_arguments
     )
       @image = image
+      @image_contained_class = image_contained ? "Polaris-EmptyState--imageContained" : nil
       @heading = heading
-
+      @full_width = full_width
+      @within = within
       @system_arguments = system_arguments
-      @system_arguments[:tag] = "div"
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-EmptyState",
-        WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, within, WITHIN_DEFAULT)],
-        "Polaris-EmptyState--fullWidth": full_width
-      )
     end
   end
 end

data/app/components/polaris/filters_component.rb

@@ -45,7 +45,7 @@ module Polaris
 
       def call
         polaris_text_field(disabled: @disabled, **@system_arguments) do |text_field|
-          text_field.prefix do
+          text_field.with_prefix do
             polaris_icon(name: "SearchMinor")
           end
         end
@@ -83,7 +83,7 @@ module Polaris
       def call
         render(Polaris::BaseComponent.new(**system_arguments)) do
           render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover|
-            popover.button(disclosure: true, disabled: @disabled) { @label }
+            popover.with_button(disclosure: true, disabled: @disabled) { @label }
             content
           end
         end

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

@@ -1,11 +1,5 @@
-<%= render Polaris::BaseComponent.new(tag: 'div', **@system_arguments) do %>
-  <div class="Polaris-FooterHelp__Content">
-    <div class="Polaris-FooterHelp__Icon">
-      <%= polaris_icon(name: "InfoMinor", color: :highlight) %>
-    </div>
-
-    <div class="Polaris-FooterHelp__Text">
-      <%= content %>
-    </div>
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <div class="Polaris-FooterHelp__Text">
+    <%= content %>
   </div>
 <% end %>

data/app/components/polaris/footer_help_component.rb

@@ -4,6 +4,7 @@ module Polaris
   class FooterHelpComponent < Polaris::Component
     def initialize(**system_arguments)
       @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-FooterHelp"

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

@@ -6,15 +6,20 @@
   <% end %>
 
   <div class="<%= content_classes %>">
-    <h2 class="Polaris-Frame-ContextualSaveBar__Message">
+    <%= polaris_text(
+      as: :h2,
+      variant: :headingMd,
+      truncate: true,
+      color: :text_inverse
+    ) do %>
       <%= @message %>
-    </h2>
+    <% end %>
     <div class="Polaris-Frame-ContextualSaveBar__ActionContainer">
       <%= polaris_stack(spacing: :tight) do |stack| %>
-        <% stack.item do %>
+        <% stack.with_item do %>
           <%= discard_action %>
         <% end %>
-        <% stack.item do %>
+        <% stack.with_item do %>
           <%= save_action %>
         <% end %>
       <% end %>

data/app/components/polaris/heading_component.rb

@@ -10,15 +10,11 @@ module Polaris
       **system_arguments
     )
       @system_arguments = system_arguments
-      @system_arguments[:tag] = element
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Heading"
-      )
+      @element = element
     end
 
     def call
-      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+      render(Polaris::TextComponent.new(as: @element, variant: :headingMd, **@system_arguments)) { content }
     end
   end
 end

data/app/components/polaris/horizontal_grid_component.rb

@@ -0,0 +1,82 @@
+module Polaris
+  class HorizontalGridComponent < Polaris::Component
+    COLUMNS_MAPPINGS = {
+      oneThird: "minmax(0, 1fr)",
+      oneHalf: "minmax(0, 1fr)",
+      twoThirds: "minmax(0, 2fr)"
+    }
+    COLUMNS_OPTIONS = COLUMNS_MAPPINGS.keys
+    ALIGN_OPTIONS = %i[start center end baseline stretch]
+
+    def initialize(
+      columns: nil,
+      gap: nil,
+      align_items: nil,
+      **system_arguments
+    )
+      @system_arguments = system_arguments.tap do |args|
+        args[:tag] = "div"
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-HorizontalGrid"
+        )
+        args[:style] = styles_list(
+          args[:style],
+          "--pc-horizontal-grid-align-items": fetch_or_fallback(ALIGN_OPTIONS, align_items, allow_nil: true),
+          **gap_value(gap),
+          **columns_value(columns)
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+
+    private
+
+    def gap_value(gap)
+      return {} unless gap
+
+      value = fetch_or_fallback_nested(
+        Tokens::Spacing::SCREEN_SIZES,
+        Tokens::Spacing::SCALE,
+        gap
+      )
+
+      if value.is_a?(Hash)
+        value.each_with_object({}) do |(key, value), hash|
+          hash["--pc-horizontal-grid-gap-#{key}"] = "var(--p-space-#{value})"
+        end
+      else
+        {"--pc-horizontal-grid-gap-xs": "var(--p-space-#{value})"}
+      end
+    end
+
+    def columns_value(columns)
+      return {} unless columns
+
+      if columns.is_a?(Hash)
+        columns.each_with_object({}) do |(key, value), hash|
+          hash["--pc-horizontal-grid-grid-template-columns-#{key}"] = column_value(value)
+        end
+      else
+        {"--pc-horizontal-grid-grid-template-columns-xs": column_value(columns)}
+      end
+    end
+
+    def column_value(value)
+      return unless value
+
+      if value.is_a?(Integer)
+        "repeat(#{value}, minmax(0, 1fr));"
+      elsif value.is_a?(Array)
+        value.map do |column|
+          COLUMNS_MAPPINGS[fetch_or_fallback(COLUMNS_OPTIONS, column)]
+        end.join(" ")
+      else
+        value
+      end
+    end
+  end
+end

data/app/components/polaris/horizontal_stack_component.rb

@@ -0,0 +1,64 @@
+module Polaris
+  class HorizontalStackComponent < Polaris::Component
+    ALIGN_DEFAULT = :default
+    ALIGN_MAPPINGS = {
+      default: "",
+      start: "start",
+      center: "center",
+      end: "end",
+      space_around: "space-around",
+      space_between: "space-between",
+      space_evenly: "space-evenly"
+    }
+    ALIGN_OPTIONS = ALIGN_MAPPINGS.keys
+
+    BLOCK_ALIGN_OPTIONS = %i[start center end baseline stretch]
+
+    def initialize(
+      align: ALIGN_DEFAULT,
+      block_align: nil,
+      gap: nil,
+      wrap: true,
+      **system_arguments
+    )
+      @system_arguments = system_arguments.tap do |args|
+        args[:tag] = "div"
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-HorizontalStack"
+        )
+        args[:style] = styles_list(
+          args[:style],
+          "--pc-horizontal-stack-align": ALIGN_MAPPINGS[fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)],
+          "--pc-horizontal-stack-block-align": fetch_or_fallback(BLOCK_ALIGN_OPTIONS, block_align, allow_nil: true),
+          "--pc-horizontal-stack-wrap": wrap ? "wrap" : "nowrap",
+          **gap_value(gap)
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+
+    private
+
+    def gap_value(gap)
+      return {} unless gap
+
+      value = fetch_or_fallback_nested(
+        Tokens::Spacing::SCREEN_SIZES,
+        Tokens::Spacing::SCALE,
+        gap
+      )
+
+      if value.is_a?(Hash)
+        value.each_with_object({}) do |(key, value), hash|
+          hash["--pc-horizontal-stack-gap-#{key}"] = "var(--p-space-#{value})"
+        end
+      else
+        {"--pc-horizontal-stack-gap-xs": "var(--p-space-#{value})"}
+      end
+    end
+  end
+end

data/app/components/polaris/inline_code_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Polaris
+  class InlineCodeComponent < Polaris::Component
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments.tap do |opts|
+        opts[:tag] = "code"
+        opts[:classes] = "Polaris-InlineCode__Code"
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/polaris/inline_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Polaris
+  class InlineComponent < Polaris::Component
+    include ActiveModel::Validations
+
+    attr_reader :align, :block_align, :gap, :wrap
+
+    ALIGN_DEFAULT = :start
+    ALIGN_OPTIONS = %i[start center end space-around space-between space-evenly]
+    validates :align, inclusion: {in: ALIGN_OPTIONS}
+
+    BLOCK_ALIGN_DEFAULT = :center
+    BLOCK_ALIGN_OPTIONS = %i[start center end baseline stretch]
+    validates :block_align, inclusion: {in: BLOCK_ALIGN_OPTIONS}
+
+    GAP_DEFAULT = 4
+    validates :gap, inclusion: {in: Polaris::Tokens::Spacing::SCALE}
+
+    WRAP_DEFAULT = true
+    validates :wrap, inclusion: {in: [true, false]}
+
+    def initialize(
+      align: ALIGN_DEFAULT,
+      block_align: BLOCK_ALIGN_DEFAULT,
+      gap: GAP_DEFAULT,
+      wrap: WRAP_DEFAULT,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+
+      @system_arguments[:tag] = :div
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Inline"
+      )
+      @system_arguments[:style] = "--pc-inline-align: #{align}; --pc-inline-block-align: #{block_align}; --pc-inline-wrap: #{wrap ? :wrap : :nowrap}; --pc-inline-gap-xs: var(--p-space-#{gap})"
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

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

@@ -1,6 +1,6 @@
 <%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
   <div class="Polaris-InlineError__Icon">
-    <%= polaris_icon(name: "AlertMinor") %>
+    <%= polaris_icon(name: "DiamondAlertMinor") %>
   </div>
   <%= content %>
 <% end %>

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

@@ -19,7 +19,9 @@
 
   <% if @help_text.present? %>
     <div class="Polaris-Labelled__HelpText">
-      <%= @help_text %>
+      <%= polaris_text(as: :span, color: :subdued, break_word: true) do %>
+        <%= @help_text %>
+      <% end %>
     </div>
   <% end %>
 <% end %>

data/app/components/polaris/labelled_component.rb

@@ -23,7 +23,7 @@ module Polaris
 
       if label_action && label_action[:content].present?
         label_content = label_action.delete(:content)
-        label_action(**label_action) { label_content }
+        with_label_action(**label_action) { label_content }
       end
 
       @system_arguments = system_arguments