polaris_view_components 3.0.0 → 3.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0401eafd4296a2e4a90c6d94df41561a3c229bc6516e7f51e09d4277c35daff7
-  data.tar.gz: 700dcba3e74a4f5f9369823326a00cec589a18f44047ad4fd4392a0053ac78f0
+  metadata.gz: 1d930e9979e26f2a16e58a86aaf5477360eb518602900671407fbad50476058a
+  data.tar.gz: c65e3755b6d86787d6a6582c646ed8e81c17fbb33e6ba95fb6e975f240411840
 SHA512:
-  metadata.gz: bd8cd4053ee75a8f6acc119c95805f4635bf1dd2c78a53e020719f07211fd00822ed0834150ba9ec3daf7aa992b366f6a7c442522af6b1ec7ace92f32f7395c4
-  data.tar.gz: 14ba3fd7007a8c0bc1d5c7884b0ace90fec13368b34586c81e4709251e6c934153fb019eee2cc60a6d26567c22de43c7d2d6bd652b268ec98ca5d119667d92e9
+  metadata.gz: 4b74b88c543352ce30e6db7b6478b61aeba71a7688f578335bab15464aa041e1f806f0200fadbfc8015586c18b99f543d1a8633d250e46eed03f984b3543889e
+  data.tar.gz: 04f4ad64a553706075a8fe6a7632707e4334f3a805f717f8dfb40c1e4b47c6db314a05b9684cc923f4dfd2359aafd10b61c53ec0bc47a11b1ee683a6fc54ae24

data/README.md

@@ -73,6 +73,18 @@ npm run release
 
 After that make sure to commit changes in package.json.
 
+## Deploy
+
+Before deploying make sure to:
+
+1. Copy `demo/config/master.key` from 1Password
+2. Set `KAMAL_REGISTRY_PASSWORD` in `.env`
+
+Then run:
+```bash
+kamal deploy
+```
+
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

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

@@ -1,33 +1,44 @@
 import { Controller } from "@hotwired/stimulus"
+import { debounce } from "./utils"
 
 export default class extends Controller {
-  static targets = ["row"]
-
   connect() {
-    this.rowTargets.forEach(row => {
-      row.addEventListener("mouseover", () => this.handleHover(row))
-      row.addEventListener("mouseout", () => this.handleLeave(row))
-    })
+    this.handleMouseOver = debounce(this.handleMouseOver.bind(this), 50)
+    this.handleMouseOut = debounce(this.handleMouseOut.bind(this), 50)
+
+    this.element.addEventListener("mouseover", this.handleMouseOver)
+    this.element.addEventListener("mouseout", this.handleMouseOut)
   }
 
   disconnect() {
-    this.rowTargets.forEach(row => {
-      row.removeEventListener("mouseover", () => this.handleHover(row))
-      row.removeEventListener("mouseout", () => this.handleLeave(row))
-    })
+    this.element.removeEventListener("mouseover", this.handleMouseOver)
+    this.element.removeEventListener("mouseout", this.handleMouseOut)
+  }
+
+  handleMouseOver(event) {
+    const row = event.target.closest(".Polaris-DataTable--hoverable")
+    if (row && row !== this.hoveredRow) {
+      this.clearHoveredRow()
+      this.hoveredRow = row
+      row.querySelectorAll(".Polaris-DataTable__Cell").forEach(cell => {
+        cell.classList.add("Polaris-DataTable__Cell--hovered")
+      })
+    }
   }
 
-  handleHover(row) {
-    const cells = row.querySelectorAll(".Polaris-DataTable__Cell")
-    cells.forEach(cell => {
-      cell.classList.add("Polaris-DataTable__Cell--hovered")
-    })
+  handleMouseOut(event) {
+    const row = event.target.closest(".Polaris-DataTable--hoverable")
+    if (row && !row.contains(event.relatedTarget)) {
+      this.clearHoveredRow()
+    }
   }
 
-  handleLeave(row) {
-    const cells = row.querySelectorAll(".Polaris-DataTable__Cell")
-    cells.forEach(cell => {
-      cell.classList.remove("Polaris-DataTable__Cell--hovered")
-    })
+  clearHoveredRow() {
+    if (this.hoveredRow) {
+      this.hoveredRow.querySelectorAll(".Polaris-DataTable__Cell").forEach(cell => {
+        cell.classList.remove("Polaris-DataTable__Cell--hovered")
+      })
+      this.hoveredRow = null
+    }
   }
 }

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

@@ -17,10 +17,14 @@ export default class extends Controller {
     const dropElement = `<div class="${this.backdropClass}" data-controller="polaris" data-target="#${this.element.id}" data-action="click->polaris#closeModal"></div>`
     this.element.insertAdjacentHTML('afterend', dropElement)
     this.backdrop = this.element.nextElementSibling
+    const event = new CustomEvent("polarisModalOpened");
+    window.dispatchEvent(event);
   }
 
   close() {
     this.element.classList.add(this.hiddenClass)
     this.backdrop.remove()
+    const event = new CustomEvent("polarisModalClosed");
+    window.dispatchEvent(event);
   }
 }

data/app/assets/javascripts/polaris_view_components.js

@@ -357,30 +357,39 @@ class Collapsible extends Controller {
 }
 
 class DataTable extends Controller {
-  static targets=[ "row" ];
   connect() {
-    this.rowTargets.forEach((row => {
-      row.addEventListener("mouseover", (() => this.handleHover(row)));
-      row.addEventListener("mouseout", (() => this.handleLeave(row)));
-    }));
+    this.handleMouseOver = debounce(this.handleMouseOver.bind(this), 50);
+    this.handleMouseOut = debounce(this.handleMouseOut.bind(this), 50);
+    this.element.addEventListener("mouseover", this.handleMouseOver);
+    this.element.addEventListener("mouseout", this.handleMouseOut);
   }
   disconnect() {
-    this.rowTargets.forEach((row => {
-      row.removeEventListener("mouseover", (() => this.handleHover(row)));
-      row.removeEventListener("mouseout", (() => this.handleLeave(row)));
-    }));
+    this.element.removeEventListener("mouseover", this.handleMouseOver);
+    this.element.removeEventListener("mouseout", this.handleMouseOut);
+  }
+  handleMouseOver(event) {
+    const row = event.target.closest(".Polaris-DataTable--hoverable");
+    if (row && row !== this.hoveredRow) {
+      this.clearHoveredRow();
+      this.hoveredRow = row;
+      row.querySelectorAll(".Polaris-DataTable__Cell").forEach((cell => {
+        cell.classList.add("Polaris-DataTable__Cell--hovered");
+      }));
+    }
   }
-  handleHover(row) {
-    const cells = row.querySelectorAll(".Polaris-DataTable__Cell");
-    cells.forEach((cell => {
-      cell.classList.add("Polaris-DataTable__Cell--hovered");
-    }));
+  handleMouseOut(event) {
+    const row = event.target.closest(".Polaris-DataTable--hoverable");
+    if (row && !row.contains(event.relatedTarget)) {
+      this.clearHoveredRow();
+    }
   }
-  handleLeave(row) {
-    const cells = row.querySelectorAll(".Polaris-DataTable__Cell");
-    cells.forEach((cell => {
-      cell.classList.remove("Polaris-DataTable__Cell--hovered");
-    }));
+  clearHoveredRow() {
+    if (this.hoveredRow) {
+      this.hoveredRow.querySelectorAll(".Polaris-DataTable__Cell").forEach((cell => {
+        cell.classList.remove("Polaris-DataTable__Cell--hovered");
+      }));
+      this.hoveredRow = null;
+    }
   }
 }
 
@@ -839,10 +848,14 @@ class Modal extends Controller {
     const dropElement = `<div class="${this.backdropClass}" data-controller="polaris" data-target="#${this.element.id}" data-action="click->polaris#closeModal"></div>`;
     this.element.insertAdjacentHTML("afterend", dropElement);
     this.backdrop = this.element.nextElementSibling;
+    const event = new CustomEvent("polarisModalOpened");
+    window.dispatchEvent(event);
   }
   close() {
     this.element.classList.add(this.hiddenClass);
     this.backdrop.remove();
+    const event = new CustomEvent("polarisModalClosed");
+    window.dispatchEvent(event);
   }
 }
 

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

@@ -1,12 +1,19 @@
 html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable {
-
+  .Polaris-DataTable__TableRow {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 250px;
+  }
   .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--flush):first-child,
-  .Polaris-DataTable__Heading:not(.Polaris-DataTable__Heading--flush):first-child {
+  .Polaris-DataTable__Heading:not(
+      .Polaris-DataTable__Heading--flush
+    ):first-child {
     padding-left: var(--p-space-400);
   }
 
   .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--flush):last-child,
-  .Polaris-DataTable__Heading:not(.Polaris-DataTable__Heading--flush):last-child {
+  .Polaris-DataTable__Heading:not(
+      .Polaris-DataTable__Heading--flush
+    ):last-child {
     padding-right: var(--p-space-400);
   }
 }

data/app/assets/stylesheets/polaris_view_components.css

@@ -537,11 +537,18 @@
     width: 100%;
   }/* Select *//* Fix for Safari bug: https://github.com/baoagency/polaris_view_components/issues/454 */select.Polaris-Select__Input {
   font-weight: 400;
-}html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--flush):first-child,
-  html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Heading:not(.Polaris-DataTable__Heading--flush):first-child {
+}html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__TableRow {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 250px;
+  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--flush):first-child,
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Heading:not(
+      .Polaris-DataTable__Heading--flush
+    ):first-child {
     padding-left: var(--p-space-400);
   }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--flush):last-child,
-  html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Heading:not(.Polaris-DataTable__Heading--flush):last-child {
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Heading:not(
+      .Polaris-DataTable__Heading--flush
+    ):last-child {
     padding-right: var(--p-space-400);
   }html[class~="Polaris-Summer-Editions-2023"] .Polaris-FooterHelp .Polaris-FooterHelp__Text {
     font-size: var(--p-font-size-325);

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

@@ -36,6 +36,6 @@
   ) do %>
     <%= section_markup %>
   <% end %>
-<% else%>
+<% else %>
   <%= section_markup %>
 <% end %>

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

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

data/app/components/polaris/character_count.rb

@@ -22,9 +22,9 @@ module Polaris
     def label_template
       if max_length?
         "{count} of #{@max_length} characters used"
+      else
+        "{count} characters"
       end
-
-      "{count} characters"
     end
 
     def text_template
@@ -40,7 +40,7 @@ module Polaris
     end
 
     def normalized_value
-      @text_field.value.to_s || ""
+      @text_field.value.to_s
     end
 
     def count

data/app/components/polaris/data_table_component.rb

@@ -56,7 +56,6 @@ module Polaris
         )
         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/divider_component.rb

@@ -2,9 +2,16 @@
 
 module Polaris
   class DividerComponent < Polaris::Component
+    include ActiveModel::Validations
+
+    SUPPORTED_DIRECTIONS = %w[inline block].freeze
+
+    validates :direction, inclusion: {in: SUPPORTED_DIRECTIONS}
+
     def initialize(
       border_color: "border-subdued",
       border_width: "1",
+      direction: "inline",
       **system_arguments
     )
       @system_arguments = system_arguments.tap do |args|
@@ -15,7 +22,7 @@ module Polaris
         )
         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)}"
+          **border_styles(direction, border_color, border_width)
         )
       end
     end
@@ -31,5 +38,21 @@ module Polaris
       return "transparent" if border_color == "transparent"
       "var(--p-color-#{fetch_or_fallback(Tokens::Color::BORDER_ALIAS, border_color)})"
     end
+
+    def border_styles(direction, border_color, border_width)
+      border_direction = fetch_or_fallback(SUPPORTED_DIRECTIONS, direction, "inline")
+
+      if border_direction == "block"
+        {
+          "border-inline-start": "var(--p-border-width-#{fetch_or_fallback(Tokens::Border::WIDTH_SCALE, border_width)}) solid #{border_color_value(border_color)}",
+          "inline-size": "auto",
+          "min-block-size": "100%"
+        }
+      else
+        {
+          "border-block-start": "var(--p-border-width-#{fetch_or_fallback(Tokens::Border::WIDTH_SCALE, border_width)}) solid #{border_color_value(border_color)}"
+        }
+      end
+    end
   end
 end

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

@@ -6,7 +6,7 @@
   **@system_arguments
 ) do %>
   <%= polaris_vertical_stack(inline_align: :center) do %>
-    <img src="<%= @image %>" role="presentation" class="<%= @image_contained_class %>">
+    <img src="<%= @image %>" role="presentation" class="<%= @image_contained_class %>" alt="">
 
     <%= polaris_box(max_width: @full_width? "100%" : "400px") do %>
       <%= polaris_vertical_stack(inline_align: :center) do %>

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

@@ -23,8 +23,8 @@
               <% end %>
             <% end %>
           <% end %>
-        <% end %>
-      </tbody>
-    </table>
-  </div>
+        </tbody>
+      </table>
+    </div>
+  <% end %>
 <% end %>

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "3.0.0"
+    VERSION = "3.1.1"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 3.0.0
+  version: 3.1.1
 platform: ruby
 authors:
 - Dan Gamble
@@ -64,14 +64,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '4.9'
+        version: 4.9.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '4.9'
+        version: 4.9.0
 - !ruby/object:Gem::Dependency
   name: minitest
   requirement: !ruby/object:Gem::Requirement
@@ -120,14 +120,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.0.0
+        version: '2.8'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.0.0
+        version: '2.8'
 - !ruby/object:Gem::Dependency
   name: dotenv
   requirement: !ruby/object:Gem::Requirement
@@ -950,7 +950,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 4.0.3
 specification_version: 4
 summary: ViewComponents for Polaris Design System
 test_files: []