polaris_view_components 3.1.4 → 3.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 33e9c6304f7283b90478bd449b9c14877b35b8a839f85b31d54b121c276ad1b0
-  data.tar.gz: 99d50c4eb3b8513303f1eb630ea5bb3f87007950a5395cc09c8fa8fd816c5dfe
+  metadata.gz: d60a0f25f554d4bb06daa6044f0f992e6713c79f3b336c6bdb48f042faa7175c
+  data.tar.gz: e1be9a266fe881c52fca51f32c0afa6ecd4186159a2fa6e8c29bf59b1de003be
 SHA512:
-  metadata.gz: c468883103d3660c97aea99d9f6083d2b6a3fdc84b8bd355ba0bed3cf5545b9e5eb0e335fca52b397070d0509ac54fc8a34f2c0a0a76236ee00dc8c6cf5cc98e
-  data.tar.gz: 1a51e807ac8d731c09b72ed81610d51a9dc46e1628d6d017600eaeeb73a9b1b68df17e3e4795d6fe01f056736155db7b985f6b398a6be6fcfe7a37a81f5d911d
+  metadata.gz: 2664bea98f1ec076c3f88f3f168e6239f4c38786efcbacd30f86956d674358fcab0f0958226ae2b68eecb02cae108f63fb33c07e452cf0932d990da5e07e10b3
+  data.tar.gz: ab2c981955e6a71d6879e7f4d8b04feb5ba6ab1d139f4065d119408dd134b2670b09b4745eee6bc5d86126ea71565d1a2e9fb0627f900009cb52c63cc7399a41

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

@@ -11,9 +11,20 @@ export default class extends Controller {
       this.element.style.overflow = "hidden"
       this.element.classList.add("Polaris-Collapsible--isFullyClosed")
     }
+    this.updateTriggers()
   }
 
   get isClosed() {
     return this.element.classList.contains("Polaris-Collapsible--isFullyClosed")
   }
+
+  // Private
+
+  updateTriggers() {
+    if (!this.element.id) return
+
+    document.querySelectorAll(`[aria-controls="${CSS.escape(this.element.id)}"]`).forEach((trigger) => {
+      trigger.setAttribute("aria-expanded", !this.isClosed)
+    })
+  }
 }

data/app/assets/javascripts/polaris_view_components.js

@@ -355,10 +355,17 @@ class Collapsible extends Controller {
       this.element.style.overflow = "hidden";
       this.element.classList.add("Polaris-Collapsible--isFullyClosed");
     }
+    this.updateTriggers();
   }
   get isClosed() {
     return this.element.classList.contains("Polaris-Collapsible--isFullyClosed");
   }
+  updateTriggers() {
+    if (!this.element.id) return;
+    document.querySelectorAll(`[aria-controls="${CSS.escape(this.element.id)}"]`).forEach((trigger => {
+      trigger.setAttribute("aria-expanded", !this.isClosed);
+    }));
+  }
 }
 
 class DataTable extends Controller {

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

@@ -0,0 +1,13 @@
+.Polaris-Collapsible__Trigger {
+  .Polaris-Button__Icon:last-child .Polaris-Icon {
+    transition: transform var(--p-motion-duration-100) var(--p-motion-ease-out);
+  }
+
+  &[aria-expanded="true"] .Polaris-Button__Icon:last-child .Polaris-Icon {
+    transform: rotate(180deg);
+  }
+
+  & + .Polaris-Collapsible {
+    margin-top: var(--p-space-400);
+  }
+}

data/app/assets/stylesheets/polaris_view_components.css

@@ -375,7 +375,13 @@
     box-shadow: none;
   }html[class~="Polaris-Summer-Editions-2023"] .Polaris-LegacyCard.Polaris-LegacyCard--borderless::before {
       content: none;
-    }.Polaris--hidden {
+    }.Polaris-Collapsible__Trigger .Polaris-Button__Icon:last-child .Polaris-Icon {
+    transition: transform var(--p-motion-duration-100) var(--p-motion-ease-out);
+  }.Polaris-Collapsible__Trigger[aria-expanded="true"] .Polaris-Button__Icon:last-child .Polaris-Icon {
+    transform: rotate(180deg);
+  }.Polaris-Collapsible__Trigger + .Polaris-Collapsible {
+    margin-top: var(--p-space-400);
+  }.Polaris--hidden {
   display: none !important;
 }/* Add missing 1/4 section for layout */@media (min-width: 30.625em) {
   .Polaris-Layout__Section--oneFourth {

data/app/assets/stylesheets/polaris_view_components.pcss

@@ -7,6 +7,7 @@
 @import "./polaris_view_components/button.pcss";
 @import "./polaris_view_components/callout_card.pcss";
 @import "./polaris_view_components/card.pcss";
+@import "./polaris_view_components/collapsible.pcss";
 @import "./polaris_view_components/custom.pcss";
 @import "./polaris_view_components/data_table.pcss";
 @import "./polaris_view_components/footer_help.pcss";

data/app/components/polaris/collapsible_component.rb

@@ -5,11 +5,14 @@ module Polaris
     def initialize(
       expand_on_print: false,
       open: false,
+      title: nil,
       **system_arguments
     )
       @expand_on_print = expand_on_print
       @open = open
+      @title = title
       @system_arguments = system_arguments
+      @system_arguments[:id] ||= "polaris-collapsible-#{SecureRandom.hex(4)}" if @title.present?
     end
 
     def system_arguments
@@ -31,7 +34,28 @@ module Polaris
     end
 
     def call
-      render(Polaris::BaseComponent.new(**system_arguments)) { content }
+      collapsible = render(Polaris::BaseComponent.new(**system_arguments)) { content }
+      return collapsible if @title.blank?
+
+      tag.div { safe_join([trigger, collapsible]) }
+    end
+
+    private
+
+    def trigger
+      id = @system_arguments[:id]
+
+      polaris_button(
+        plain: true,
+        disclosure: :down,
+        classes: "Polaris-Collapsible__Trigger",
+        aria: {expanded: @open, controls: id},
+        data: {
+          controller: "polaris",
+          target: "##{id}",
+          action: "polaris#toggleCollapsible"
+        }
+      ) { @title }
     end
   end
 end

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "3.1.4"
+    VERSION = "3.2.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 3.1.4
+  version: 3.2.0
 platform: ruby
 authors:
 - Dan Gamble
@@ -690,6 +690,7 @@ files:
 - app/assets/stylesheets/polaris_view_components/button.pcss
 - app/assets/stylesheets/polaris_view_components/callout_card.pcss
 - app/assets/stylesheets/polaris_view_components/card.pcss
+- app/assets/stylesheets/polaris_view_components/collapsible.pcss
 - app/assets/stylesheets/polaris_view_components/custom.pcss
 - app/assets/stylesheets/polaris_view_components/data_table.pcss
 - app/assets/stylesheets/polaris_view_components/fonts.pcss