polaris_view_components 2.2.5 → 2.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c816d01eaed92bdee76c9de459b95efeda2e0fa0b1fa4d39148539aff992c92
-  data.tar.gz: 30f8addff41d9e27c1a16cc6501d6e3ef7b63e7fe2873fd4cac8bc771651894f
+  metadata.gz: 6b3c0fda53d1a7abb6931059e6879a873ddcbd6b7b0f4afdb9c0001fd141e700
+  data.tar.gz: a35bb46578dd1cecef4d27038595cfa24499284529e77ac88eb8967c9a9d6e1a
 SHA512:
-  metadata.gz: 8ed315b60b6b900c39ca638582d47cbd47c0ff12d75af47f35cbeb4c707176fbba7259acc27148e2d3fdff3204205dc62b61ee40c6d9bc2ba5dc8a23346117a1
-  data.tar.gz: a40315f3b3b5dbe98120e616513290e043280896f6ab73b0f1747cce612d19061240e7c62aee7db24820f2430bd2eb961cb9eff3b631bae8e4f24f8c4cd93689
+  metadata.gz: 4cfbdd729290bc21c197289371bc2fc769d78648d7c4f10f30532f04cac6298994cb2c97a5fcb7f2398432d49130e3806e702e13132c62b3561eba04880945b5
+  data.tar.gz: 5f6f201da44a38a6ff915fa70cd661b8173e5ee644ebccd34cf03c9ba4c7b00d80118003bd5de7953f171208da8bb1f474e5601851fbd6b1a8c21283983b8dd1

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

@@ -1,103 +1,118 @@
-import { Controller } from "@hotwired/stimulus"
-import { computePosition, autoUpdate, offset, flip, shift } from "@floating-ui/dom"
+import { Controller } from "@hotwired/stimulus";
+import {
+  computePosition,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+} from "@floating-ui/dom";
 
 export default class extends Controller {
-  static targets = ["activator", "popover", "template"]
-  static classes = ["open", "closed"]
+  static targets = ["activator", "popover", "template"];
+  static classes = ["open", "closed"];
   static values = {
     appendToBody: Boolean,
     placement: String,
     active: Boolean,
-    textFieldActivator: Boolean
-  }
+    textFieldActivator: Boolean,
+  };
 
   connect() {
     if (this.appendToBodyValue) {
-      const clonedTemplate = this.templateTarget.content.cloneNode(true)
-      this.target = clonedTemplate.firstElementChild
-      document.body.appendChild(clonedTemplate)
+      const clonedTemplate = this.templateTarget.content.cloneNode(true);
+      this.target = clonedTemplate.firstElementChild;
+      document.body.appendChild(clonedTemplate);
     }
 
-    this.target.style.display = 'none'
+    this.target.style.display = "none";
 
     if (this.activeValue) {
-      this.show()
+      this.show();
     }
   }
 
   disconnect() {
     if (this.cleanup) {
-      this.cleanup()
+      this.cleanup();
+    }
+    if (this.target && this.appendToBodyValue) {
+      this.target.remove();
     }
+    this._target = null;
   }
-
   updatePosition() {
     if (this.cleanup) {
-      this.cleanup()
+      this.cleanup();
     }
     this.cleanup = autoUpdate(this.activator, this.target, () => {
       computePosition(this.activator, this.target, {
         placement: this.placementValue,
         middleware: [
           offset(5),
-          flip(),
-          shift({ padding: 5 })
-        ]
-      }).then(({x, y}) => {
+          // Only flip to opposite side if there's not enough space
+          flip({
+            fallbackPlacements: [this.placementValue],
+            fallbackStrategy: "bestFit",
+          }),
+          shift({ padding: 5 }),
+        ],
+      }).then(({ x, y }) => {
         Object.assign(this.target.style, {
           left: `${x}px`,
           top: `${y}px`,
-        })
-      })
-    })
+        });
+      });
+    });
   }
 
   toggle() {
     if (this.target.classList.contains(this.openClass)) {
-      this.forceHide()
+      this.forceHide();
     } else {
-      this.show()
+      this.show();
     }
   }
 
   show() {
-    this.target.style.display = 'block'
-    this.target.classList.remove(this.closedClass)
-    this.target.classList.add(this.openClass)
-    this.updatePosition()
+    this.target.style.display = "block";
+    this.target.classList.remove(this.closedClass);
+    this.target.classList.add(this.openClass);
+    this.updatePosition();
   }
 
   hide(event) {
-    if (this.element.contains(event.target)) return
-    if (this.target.classList.contains(this.closedClass)) return
-    if (this.appendToBodyValue && this.target.contains(event.target)) return
+    if (this.element.contains(event.target)) return;
+    if (this.target.classList.contains(this.closedClass)) return;
+    if (this.appendToBodyValue && this.target.contains(event.target)) return;
 
-    this.forceHide()
+    this.forceHide();
   }
 
   forceHide() {
-    this.target.style.display = 'none'
-    this.target.classList.remove(this.openClass)
-    this.target.classList.add(this.closedClass)
+    this.target.style.display = "none";
+    this.target.classList.remove(this.openClass);
+    this.target.classList.add(this.closedClass);
   }
 
   get activator() {
     if (this.textFieldActivatorValue) {
-      return this.activatorTarget.querySelector('[data-controller="polaris-text-field"]')
+      return this.activatorTarget.querySelector(
+        '[data-controller="polaris-text-field"]'
+      );
     } else {
-      return this.activatorTarget
+      return this.activatorTarget;
     }
   }
 
   get target() {
     if (this.hasPopoverTarget) {
-      return this.popoverTarget
+      return this.popoverTarget;
     } else {
-      return this._target
+      return this._target;
     }
   }
 
   set target(value) {
-    this._target = value
+    this._target = value;
   }
 }

data/app/assets/javascripts/polaris_view_components.js

@@ -2134,6 +2134,10 @@ class Popover extends Controller {
     if (this.cleanup) {
       this.cleanup();
     }
+    if (this.target && this.appendToBodyValue) {
+      this.target.remove();
+    }
+    this._target = null;
   }
   updatePosition() {
     if (this.cleanup) {
@@ -2142,7 +2146,10 @@ class Popover extends Controller {
     this.cleanup = autoUpdate(this.activator, this.target, (() => {
       computePosition(this.activator, this.target, {
         placement: this.placementValue,
-        middleware: [ offset(5), flip(), shift({
+        middleware: [ offset(5), flip({
+          fallbackPlacements: [ this.placementValue ],
+          fallbackStrategy: "bestFit"
+        }), shift({
           padding: 5
         }) ]
       }).then((({x: x, y: y}) => {

data/app/assets/stylesheets/polaris_view_components/pagination.pcss

@@ -1,13 +1,14 @@
 html[class~="Polaris-Summer-Editions-2023"] [aria-label='Pagination'] {
   .Polaris-Button {
-    background-color: var(--p-color-bg-fill-tertiary);
     border: none !important;
     box-shadow: none;
 
-    &:hover {
-      background-color: var(--p-color-bg-fill-tertiary-hover);
-      box-shadow: none;
-      border: none;
+    &:not([disabled]) {
+      background-color: var(--p-color-bg-fill-tertiary);
+
+      &:hover {
+        background-color: var(--p-color-bg-fill-tertiary-hover);
+      }
     }
   }
 }

data/app/assets/stylesheets/polaris_view_components.css

@@ -595,14 +595,13 @@
     font-size: var(--p-font-size-500);
     line-height: var(--p-font-line-height-600);
   }html[class~="Polaris-Summer-Editions-2023"] [aria-label='Pagination'] .Polaris-Button {
-    background-color: var(--p-color-bg-fill-tertiary);
     border: none !important;
     box-shadow: none;
-  }html[class~="Polaris-Summer-Editions-2023"] [aria-label='Pagination'] .Polaris-Button:hover {
-      background-color: var(--p-color-bg-fill-tertiary-hover);
-      box-shadow: none;
-      border: none;
-    }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Popover .Polaris-Popover__Content .Polaris-Popover__Pane:first-child > .Polaris-Popover__Section > .Polaris-Box {
+  }html[class~="Polaris-Summer-Editions-2023"] [aria-label='Pagination'] .Polaris-Button:not([disabled]) {
+      background-color: var(--p-color-bg-fill-tertiary);
+    }html[class~="Polaris-Summer-Editions-2023"] [aria-label='Pagination'] .Polaris-Button:not([disabled]):hover {
+        background-color: var(--p-color-bg-fill-tertiary-hover);
+      }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Popover .Polaris-Popover__Content .Polaris-Popover__Pane:first-child > .Polaris-Popover__Section > .Polaris-Box {
     padding: var(--p-space-300) var(--p-space-400) var(--p-space-100);
   }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Popover .Polaris-Popover__Content .Polaris-Popover__Pane:last-child > .Polaris-Popover__Section > .Polaris-Box {
     padding: var(--p-space-300) var(--p-space-300);

data/app/components/polaris/data_table_component.rb

@@ -35,7 +35,7 @@ module Polaris
           "Polaris-DataTable"
         )
         args[:data] ||= {}
-        args[:data][:controller] = "polaris-data-table"
+        args[:data][:controller] = "polaris-data-table" if @hoverable
       end
     end
 

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

@@ -11,9 +11,9 @@
           <span class="Polaris-Navigation__Text">
             <%= @label %>
           </span>
-          <% if @badge.present? %>
+          <% if badge? || @badge.present? %>
             <div class="Polaris-Navigation__Badge">
-              <%= polaris_badge { @badge } %>
+              <%= badge? ? badge : (polaris_badge { @badge }) %>
             </div>
           <% end %>
         <% end %>
@@ -27,9 +27,9 @@
           <span class="Polaris-Navigation__Text">
             <%= @label %>
           </span>
-          <% if @badge.present? %>
+          <% if badge? || @badge.present? %>
             <div class="Polaris-Navigation__Badge">
-              <%= polaris_badge { @badge } %>
+              <%= badge? ? badge : (polaris_badge { @badge }) %>
             </div>
           <% end %>
         <% end %>

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

@@ -1,4 +1,5 @@
 class Polaris::Navigation::ItemComponent < Polaris::Component
+  renders_one :badge, Polaris::BadgeComponent
   renders_many :sub_items, Polaris::Navigation::ItemComponent
   renders_many :secondary_actions, "SecondaryActionComponent"
 

data/app/components/polaris/new_tabs/tab_component.html.erb

@@ -0,0 +1,14 @@
+<li class="Polaris-Tabs__TabContainer" role="presentation">
+  <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+    <%= polaris_stack(alignment: :center, distribution: :center, spacing: :tight) do |stack| %>
+      <% stack.with_item do %>
+        <%= polaris_text(variant: :bodySm, as: :span, font_weight: :medium) { @title } %>
+      <% end %>
+      <% if badge.present? %>
+        <% stack.with_item do %>
+          <%= badge %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</li>

data/app/components/polaris/new_tabs/tab_component.rb

@@ -0,0 +1,34 @@
+class Polaris::NewTabs::TabComponent < Polaris::Component
+  renders_one :badge, Polaris::BadgeComponent
+
+  def initialize(
+    title:,
+    url: nil,
+    active: false,
+    **system_arguments
+  )
+    @title = title
+    @url = url
+    @active = active
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:rol] = "tab"
+      opts[:tabindex] = "0"
+      if @url.present?
+        opts[:tag] = "a"
+        opts[:href] = @url
+      else
+        opts[:tag] = "button"
+        opts[:type] = "button"
+      end
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Tabs__Tab",
+        "Polaris-Tabs__Tab--active": @active
+      )
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+<%= polaris_box(
+  padding_block_start: {xs: "0", sm: "0", md: "2"},
+  padding_block_end: {xs: "0", sm: "0", md: "2"},
+  padding_inline_start: {xs: "0", md: "1"},
+  padding_inline_end: {xs: "0", md: "1"}
+) do %>
+  <%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
+    <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+      <% tabs.each do |tab| %>
+        <%= tab %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/polaris/new_tabs_component.rb

@@ -0,0 +1,37 @@
+module Polaris
+  class NewTabsComponent < Polaris::Component
+    renders_many :tabs, Polaris::NewTabs::TabComponent
+
+    def initialize(fitted: false, wrapper_arguments: {}, **system_arguments)
+      @fitted = fitted
+      @wrapper_arguments = wrapper_arguments
+      @system_arguments = system_arguments
+    end
+
+    def wrapper_arguments
+      @wrapper_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          @wrapper_arguments[:classes],
+          "Polaris-Tabs__Wrapper"
+        )
+      end
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "ul"
+        opts[:role] = "tablist"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Tabs",
+          "Polaris-Tabs--fitted": @fitted
+        )
+      end
+    end
+
+    def renders?
+      tabs.present?
+    end
+  end
+end

data/app/components/polaris/thumbnail_component.rb

@@ -8,6 +8,7 @@ module Polaris
 
     SIZE_DEFAULT = :medium
     SIZE_MAPPINGS = {
+      extra_small: "Polaris-Thumbnail--sizeExtraSmall",
       small: "Polaris-Thumbnail--sizeSmall",
       medium: "Polaris-Thumbnail--sizeMedium",
       large: "Polaris-Thumbnail--sizeLarge"
@@ -30,6 +31,8 @@ module Polaris
       @source = source
       @transparent = transparent
 
+      @size = :extra_small if [:xsmall, :x_small, :xs].include?(@size)
+
       @system_arguments = system_arguments
     end
 

data/app/helpers/polaris/view_helper.rb

@@ -74,6 +74,7 @@ module Polaris
       skeleton_thumbnail:       "Polaris::SkeletonThumbnailComponent",
       spacer:                   "Polaris::SpacerComponent",
       tabs:                     "Polaris::TabsComponent",
+      new_tabs:                 "Polaris::NewTabsComponent",
       tag:                      "Polaris::TagComponent",
       text:                     "Polaris::TextComponent",
       text_container:           "Polaris::TextContainerComponent",

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "2.2.5"
+    VERSION = "2.3.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 2.2.5
+  version: 2.3.0
 platform: ruby
 authors:
 - Dan Gamble
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-12-30 00:00:00.000000000 Z
+date: 2025-03-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -834,6 +834,10 @@ files:
 - app/components/polaris/navigation_component.rb
 - app/components/polaris/navigation_list_component.html.erb
 - app/components/polaris/navigation_list_component.rb
+- app/components/polaris/new_tabs/tab_component.html.erb
+- app/components/polaris/new_tabs/tab_component.rb
+- app/components/polaris/new_tabs_component.html.erb
+- app/components/polaris/new_tabs_component.rb
 - app/components/polaris/option_list/checkbox_component.html.erb
 - app/components/polaris/option_list/checkbox_component.rb
 - app/components/polaris/option_list/option_component.rb