polaris_view_components 0.11.0 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bde9c78425359cff500d5e9d709750ef0351398696e5685cbb8faada617a9a45
-  data.tar.gz: 830d75b017692040ca7cc695712e6204fd4ebab9593c09f5777a163ee41a3c57
+  metadata.gz: c6ac82b9541cc182ed79f45d4850e23a0afe6255e3b94d0071c2cc9716dc81e8
+  data.tar.gz: 48de38d93d9d972eb4becc326242ea894ea56532f68e0527339ac0647ee662f1
 SHA512:
-  metadata.gz: 19ec9d9273dd86977b5dd24ccd592b20656715a64a1287c6a653b47c130c226cc83c0bb1fc3b9463d3304a18cb52134a741081a47339d80a48bd472885fe17c5
-  data.tar.gz: 295b5b130d8b325978769d37d948446144d36ae7ba0ca72a8264e25dc9ae2d90f58cb6290415c9e13fc48a6bb55a2b268dfb3f957ab26efc88a36ab0c86fe061
+  metadata.gz: 20b0f280d097398cf7793b35ddf77d8dfcdafea0039dd5114e1261fafa62d7bad528b1e3b83ac0015dce4af3619459f711b16bbeb85429f428d5766b1457b82d
+  data.tar.gz: 5d187b4045398761dc1dfd1052965220ee80888a5ef17a3cef8eba19e6632ecf633497275f0833bd36c1e8ff0e0cb22d1fd11a8f0639ff0d2ba4a70a9881da88

data/README.md

@@ -42,10 +42,17 @@ bin/rails polaris_view_components:install
 To get started:
 
 1. Run: `bundle install`
-2. Run: `bin/dev`
+1. Run: `yarn install`
+1. Run: `bin/dev`
 
 It will open demo app with component previews on `localhost:4000`. You can change components and they will be updated on page reload. Component previews located in `demo/test/components/previews`.
 
+To run tests:
+
+```bash
+rake
+```
+
 ## Releases
 
 The library follows [semantic versioning](https://semver.org/). To draft a new release you need to run `script/release` with a new version number:

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

@@ -3,8 +3,8 @@ import { get } from '@rails/request.js'
 import { debounce } from './utils'
 
 export default class extends Controller {
-  static targets = ['popover', 'input', 'results', 'option', 'emptyState']
-  static values = { url: String, selected: Array }
+  static targets = ['popover', 'input', 'hiddenInput', 'results', 'option', 'emptyState']
+  static values = { multiple: Boolean, url: String, selected: Array }
 
   connect() {
     this.inputTarget.addEventListener("input", this.onInputChange)
@@ -32,6 +32,12 @@ export default class extends Controller {
     })
 
     this.element.dispatchEvent(changeEvent)
+
+    if (!this.multipleValue) {
+      this.popoverController.forceHide()
+      this.inputTarget.value = label
+      this.hiddenInputTarget.value = input.value
+    }
   }
 
   onInputChange = debounce(() => {
@@ -65,7 +71,7 @@ export default class extends Controller {
   }
 
   get visibleOptions() {
-    return this.optionTargets.filter(option => {
+    return [...this.optionTargets].filter(option => {
       return !option.classList.contains('Polaris--hidden')
     })
   }

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

@@ -30,7 +30,8 @@ export default class extends Controller {
     dropOnPage: Boolean,
     focused: Boolean,
     renderPreview: Boolean,
-    size: String
+    size: String,
+    removePreviewsAfterUpload: Boolean
   }
 
   files = []
@@ -164,7 +165,7 @@ export default class extends Controller {
 
   onDirectUploadsEnd = () => {
     this.enable()
-    this.clearFiles()
+    this.clearFiles(this.removePreviewsAfterUploadValue)
 
     if (this.acceptedFiles.length === 0) return
 
@@ -180,7 +181,7 @@ export default class extends Controller {
     if (this.acceptedFiles.length === 0) return
 
     if (this.sizeValue == 'small') {
-      this.clearFiles()
+      this.removePreview()
       if (this.hasLoaderTarget)
         this.loaderTarget.classList.remove("Polaris--hidden")
     } else {
@@ -358,13 +359,18 @@ export default class extends Controller {
     return clone
   }
 
-  clearFiles () {
+  clearFiles (removePreview = true) {
     if (!this.previewRendered) return
 
     this.acceptedFiles = []
     this.files = []
     this.rejectedFiles = []
 
+    if (removePreview)
+      this.removePreview()
+  }
+
+  removePreview () {
     if (!this.hasPreviewTarget) return
 
     this.previewTarget.remove()

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

@@ -2,15 +2,16 @@ import { Controller } from "@hotwired/stimulus"
 import { createPopper } from "@popperjs/core/dist/esm"
 
 export default class extends Controller {
-  static targets = ["activator", "popover"]
+  static targets = ["activator", "popover", "template"]
   static classes = ["open", "closed"]
   static values = {
+    appendToBody: Boolean,
     placement: String,
     active: Boolean
   }
 
   connect() {
-    this.popper = createPopper(this.activatorTarget, this.popoverTarget, {
+    const popperOptions = {
       placement: this.placementValue,
       modifiers: [
         {
@@ -26,31 +27,56 @@ export default class extends Controller {
           },
         }
       ]
-    })
+    }
+
+    if (this.appendToBodyValue) {
+      const clonedTemplate = this.templateTarget.content.cloneNode(true)
+      this.target = clonedTemplate.firstElementChild
+      popperOptions['strategy'] = 'fixed'
+
+      document.body.appendChild(clonedTemplate)
+    }
+
+    this.popper = createPopper(this.activatorTarget, this.target, popperOptions)
     if (this.activeValue) {
       this.show()
     }
   }
 
-  toggle() {
-    this.popoverTarget.classList.toggle(this.closedClass)
-    this.popoverTarget.classList.toggle(this.openClass)
+  async toggle() {
+    this.target.classList.toggle(this.closedClass)
+    this.target.classList.toggle(this.openClass)
+    await this.popper.update()
   }
 
   async show() {
-    this.popoverTarget.classList.remove(this.closedClass)
-    this.popoverTarget.classList.add(this.openClass)
+    this.target.classList.remove(this.closedClass)
+    this.target.classList.add(this.openClass)
     await this.popper.update()
   }
 
   hide(event) {
-    if (!this.element.contains(event.target) && !this.popoverTarget.classList.contains(this.closedClass)) {
-      this.forceHide()
-    }
+    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()
   }
 
   forceHide() {
-    this.popoverTarget.classList.remove(this.openClass)
-    this.popoverTarget.classList.add(this.closedClass)
+    this.target.classList.remove(this.openClass)
+    this.target.classList.add(this.closedClass)
+  }
+
+  get target() {
+    if (this.hasPopoverTarget) {
+      return this.popoverTarget
+    } else {
+      return this._target
+    }
+  }
+
+  set target(value) {
+    this._target = value
   }
 }

data/app/assets/javascripts/polaris_view_components.js

@@ -174,8 +174,9 @@ function formatBytes(bytes, decimals) {
 }
 
 class Autocomplete extends Controller {
-  static targets=[ "popover", "input", "results", "option", "emptyState" ];
+  static targets=[ "popover", "input", "hiddenInput", "results", "option", "emptyState" ];
   static values={
+    multiple: Boolean,
     url: String,
     selected: Array
   };
@@ -203,6 +204,11 @@ class Autocomplete extends Controller {
       }
     });
     this.element.dispatchEvent(changeEvent);
+    if (!this.multipleValue) {
+      this.popoverController.forceHide();
+      this.inputTarget.value = label;
+      this.hiddenInputTarget.value = input.value;
+    }
   }
   onInputChange=debounce$1((() => {
     if (this.isRemote) {
@@ -228,7 +234,7 @@ class Autocomplete extends Controller {
     return this.inputTarget.value;
   }
   get visibleOptions() {
-    return this.optionTargets.filter((option => !option.classList.contains("Polaris--hidden")));
+    return [ ...this.optionTargets ].filter((option => !option.classList.contains("Polaris--hidden")));
   }
   handleResults() {
     if (this.visibleOptions.length > 0) {
@@ -358,7 +364,8 @@ class Dropzone extends Controller {
     dropOnPage: Boolean,
     focused: Boolean,
     renderPreview: Boolean,
-    size: String
+    size: String,
+    removePreviewsAfterUpload: Boolean
   };
   files=[];
   rejectedFiles=[];
@@ -458,7 +465,7 @@ class Dropzone extends Controller {
   };
   onDirectUploadsEnd=() => {
     this.enable();
-    this.clearFiles();
+    this.clearFiles(this.removePreviewsAfterUploadValue);
     if (this.acceptedFiles.length === 0) return;
     if (this.hasLoaderTarget) this.loaderTarget.classList.remove("Polaris--hidden");
   };
@@ -469,7 +476,7 @@ class Dropzone extends Controller {
     if (!dropzone) return;
     if (this.acceptedFiles.length === 0) return;
     if (this.sizeValue == "small") {
-      this.clearFiles();
+      this.removePreview();
       if (this.hasLoaderTarget) this.loaderTarget.classList.remove("Polaris--hidden");
     } else {
       const content = dropzone.querySelector(`[data-file-name="${file.name}"]`);
@@ -614,11 +621,14 @@ class Dropzone extends Controller {
     }
     return clone;
   }
-  clearFiles() {
+  clearFiles(removePreview = true) {
     if (!this.previewRendered) return;
     this.acceptedFiles = [];
     this.files = [];
     this.rejectedFiles = [];
+    if (removePreview) this.removePreview();
+  }
+  removePreview() {
     if (!this.hasPreviewTarget) return;
     this.previewTarget.remove();
     this.previewRendered = false;
@@ -1016,32 +1026,49 @@ var min = Math.min;
 
 var round = Math.round;
 
-function getBoundingClientRect(element, includeScale) {
+function getUAString() {
+  var uaData = navigator.userAgentData;
+  if (uaData != null && uaData.brands) {
+    return uaData.brands.map((function(item) {
+      return item.brand + "/" + item.version;
+    })).join(" ");
+  }
+  return navigator.userAgent;
+}
+
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
   if (includeScale === void 0) {
     includeScale = false;
   }
-  var rect = element.getBoundingClientRect();
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  var clientRect = element.getBoundingClientRect();
   var scaleX = 1;
   var scaleY = 1;
-  if (isHTMLElement(element) && includeScale) {
-    var offsetHeight = element.offsetHeight;
-    var offsetWidth = element.offsetWidth;
-    if (offsetWidth > 0) {
-      scaleX = round(rect.width) / offsetWidth || 1;
-    }
-    if (offsetHeight > 0) {
-      scaleY = round(rect.height) / offsetHeight || 1;
-    }
-  }
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
+  }
+  var _ref = isElement(element) ? getWindow(element) : window, visualViewport = _ref.visualViewport;
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect.width / scaleX;
+  var height = clientRect.height / scaleY;
   return {
-    width: rect.width / scaleX,
-    height: rect.height / scaleY,
-    top: rect.top / scaleY,
-    right: rect.right / scaleX,
-    bottom: rect.bottom / scaleY,
-    left: rect.left / scaleX,
-    x: rect.left / scaleX,
-    y: rect.top / scaleY
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
   };
 }
 
@@ -1106,8 +1133,8 @@ function getTrueOffsetParent(element) {
 }
 
 function getContainingBlock(element) {
-  var isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") !== -1;
-  var isIE = navigator.userAgent.indexOf("Trident") !== -1;
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
   if (isIE && isHTMLElement(element)) {
     var elementCss = getComputedStyle$1(element);
     if (elementCss.position === "fixed") {
@@ -1441,7 +1468,7 @@ function getWindowScrollBarX(element) {
   return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
 }
 
-function getViewportRect(element) {
+function getViewportRect(element, strategy) {
   var win = getWindow(element);
   var html = getDocumentElement(element);
   var visualViewport = win.visualViewport;
@@ -1452,7 +1479,8 @@ function getViewportRect(element) {
   if (visualViewport) {
     width = visualViewport.width;
     height = visualViewport.height;
-    if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+    var layoutViewport = isLayoutViewport();
+    if (layoutViewport || !layoutViewport && strategy === "fixed") {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
     }
@@ -1522,8 +1550,8 @@ function rectToClientRect(rect) {
   });
 }
 
-function getInnerBoundingClientRect(element) {
-  var rect = getBoundingClientRect(element);
+function getInnerBoundingClientRect(element, strategy) {
+  var rect = getBoundingClientRect(element, false, strategy === "fixed");
   rect.top = rect.top + element.clientTop;
   rect.left = rect.left + element.clientLeft;
   rect.bottom = rect.top + element.clientHeight;
@@ -1535,8 +1563,8 @@ function getInnerBoundingClientRect(element) {
   return rect;
 }
 
-function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+function getClientRectFromMixedType(element, clippingParent, strategy) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 }
 
 function getClippingParents(element) {
@@ -1551,18 +1579,18 @@ function getClippingParents(element) {
   }));
 }
 
-function getClippingRect(element, boundary, rootBoundary) {
+function getClippingRect(element, boundary, rootBoundary, strategy) {
   var mainClippingParents = boundary === "clippingParents" ? getClippingParents(element) : [].concat(boundary);
   var clippingParents = [].concat(mainClippingParents, [ rootBoundary ]);
   var firstClippingParent = clippingParents[0];
   var clippingRect = clippingParents.reduce((function(accRect, clippingParent) {
-    var rect = getClientRectFromMixedType(element, clippingParent);
+    var rect = getClientRectFromMixedType(element, clippingParent, strategy);
     accRect.top = max(rect.top, accRect.top);
     accRect.right = min(rect.right, accRect.right);
     accRect.bottom = min(rect.bottom, accRect.bottom);
     accRect.left = max(rect.left, accRect.left);
     return accRect;
-  }), getClientRectFromMixedType(element, firstClippingParent));
+  }), getClientRectFromMixedType(element, firstClippingParent, strategy));
   clippingRect.width = clippingRect.right - clippingRect.left;
   clippingRect.height = clippingRect.bottom - clippingRect.top;
   clippingRect.x = clippingRect.left;
@@ -1632,12 +1660,12 @@ function detectOverflow(state, options) {
   if (options === void 0) {
     options = {};
   }
-  var _options = options, _options$placement = _options.placement, placement = _options$placement === void 0 ? state.placement : _options$placement, _options$boundary = _options.boundary, boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, _options$rootBoundary = _options.rootBoundary, rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, _options$elementConte = _options.elementContext, elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, _options$altBoundary = _options.altBoundary, altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, _options$padding = _options.padding, padding = _options$padding === void 0 ? 0 : _options$padding;
+  var _options = options, _options$placement = _options.placement, placement = _options$placement === void 0 ? state.placement : _options$placement, _options$strategy = _options.strategy, strategy = _options$strategy === void 0 ? state.strategy : _options$strategy, _options$boundary = _options.boundary, boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, _options$rootBoundary = _options.rootBoundary, rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, _options$elementConte = _options.elementContext, elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, _options$altBoundary = _options.altBoundary, altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, _options$padding = _options.padding, padding = _options$padding === void 0 ? 0 : _options$padding;
   var paddingObject = mergePaddingObject(typeof padding !== "number" ? padding : expandToHashMap(padding, basePlacements));
   var altContext = elementContext === popper ? reference : popper;
   var popperRect = state.rects.popper;
   var element = state.elements[altBoundary ? altContext : elementContext];
-  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
+  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
   var referenceClientRect = getBoundingClientRect(state.elements.reference);
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
@@ -2040,7 +2068,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
   var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -2275,14 +2303,15 @@ var createPopper = popperGenerator({
 });
 
 class Popover extends Controller {
-  static targets=[ "activator", "popover" ];
+  static targets=[ "activator", "popover", "template" ];
   static classes=[ "open", "closed" ];
   static values={
+    appendToBody: Boolean,
     placement: String,
     active: Boolean
   };
   connect() {
-    this.popper = createPopper(this.activatorTarget, this.popoverTarget, {
+    const popperOptions = {
       placement: this.placementValue,
       modifiers: [ {
         name: "offset",
@@ -2295,28 +2324,47 @@ class Popover extends Controller {
           allowedAutoPlacements: [ "top-start", "bottom-start", "top-end", "bottom-end" ]
         }
       } ]
-    });
+    };
+    if (this.appendToBodyValue) {
+      const clonedTemplate = this.templateTarget.content.cloneNode(true);
+      this.target = clonedTemplate.firstElementChild;
+      popperOptions["strategy"] = "fixed";
+      document.body.appendChild(clonedTemplate);
+    }
+    this.popper = createPopper(this.activatorTarget, this.target, popperOptions);
     if (this.activeValue) {
       this.show();
     }
   }
-  toggle() {
-    this.popoverTarget.classList.toggle(this.closedClass);
-    this.popoverTarget.classList.toggle(this.openClass);
+  async toggle() {
+    this.target.classList.toggle(this.closedClass);
+    this.target.classList.toggle(this.openClass);
+    await this.popper.update();
   }
   async show() {
-    this.popoverTarget.classList.remove(this.closedClass);
-    this.popoverTarget.classList.add(this.openClass);
+    this.target.classList.remove(this.closedClass);
+    this.target.classList.add(this.openClass);
     await this.popper.update();
   }
   hide(event) {
-    if (!this.element.contains(event.target) && !this.popoverTarget.classList.contains(this.closedClass)) {
-      this.forceHide();
-    }
+    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();
   }
   forceHide() {
-    this.popoverTarget.classList.remove(this.openClass);
-    this.popoverTarget.classList.add(this.closedClass);
+    this.target.classList.remove(this.openClass);
+    this.target.classList.add(this.closedClass);
+  }
+  get target() {
+    if (this.hasPopoverTarget) {
+      return this.popoverTarget;
+    } else {
+      return this._target;
+    }
+  }
+  set target(value) {
+    this._target = value;
   }
 }
 

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

@@ -2,6 +2,9 @@
   <%= render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover| %>
     <% popover.activator do %>
       <%= text_field %>
+      <% if @name.present? %>
+        <%= hidden_field_tag @name, nil, data: {polaris_autocomplete_target: "hiddenInput"} %>
+      <% end %>
     <% end %>
 
     <% if empty_state.present? %>

data/app/components/polaris/autocomplete_component.rb

@@ -24,11 +24,13 @@ module Polaris
     def initialize(
       multiple: false,
       url: nil,
+      name: nil,
       selected: [],
       **system_arguments
     )
       @multiple = multiple
       @url = url
+      @name = name
       @selected = selected
       @system_arguments = system_arguments
     end
@@ -42,6 +44,7 @@ module Polaris
           opts[:data][:polaris_autocomplete_url_value] = @url
         end
         opts[:data][:polaris_autocomplete_selected_value] = @selected
+        opts[:data][:polaris_autocomplete_multiple_value] = @multiple if @multiple.present?
       end
     end
 

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

@@ -30,6 +30,8 @@
           <%= polaris_icon(name: "CaretUpMinor") %>
         <% when :select %>
           <%= polaris_icon(name: "SelectMinor") %>
+        <% when :horizontal_dots %>
+          <%= polaris_icon(name: "HorizontalDotsMinor") %>
         <% end %>
       </div>
     <% end %>

data/app/components/polaris/card/header_component.html.erb

@@ -17,8 +17,10 @@
         <% end %>
       <% end %>
 
-      <% stack.item do %>
-        <%= content %>
+      <% if content.present? %>
+        <% stack.item do %>
+          <%= content %>
+        <% end %>
       <% end %>
     <% end %>
   <% end %>

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

@@ -12,6 +12,7 @@
               header: true,
               sort_url: column.sort_url,
               sorted: column.sorted,
+              **column.system_arguments
             ) do %>
               <%= column.title %>
             <% end %>
@@ -36,18 +37,19 @@
       </thead>
       <tbody>
         <% @data.each do |row| %>
-          <tr class="Polaris-DataTable__TableRow <%= "Polaris-DataTable--hoverable" if @hoverable %>">
+          <%= render Polaris::BaseComponent.new(**row_arguments(row)) do %>
             <% columns.each_with_index do |column, index| %>
               <%= render_cell(
                 first: index.zero?,
                 numeric: column.numeric,
                 tag: (index.zero? ? "th" : "td"),
                 scope: ("row" if index.zero?),
+                **column.system_arguments
               ) do %>
                 <%= column.call(row) %>
               <% end %>
             <% end %>
-          </tr>
+          <% end %>
         <% end %>
       </tbody>
       <% if @totals_in_footer %>
@@ -61,6 +63,7 @@
                 scope: ("row" if index.zero?),
                 total: true,
                 total_footer: true,
+                **column.system_arguments
               ) do %>
                 <%= column.total %>
               <% end %>

data/app/components/polaris/data_table_component.rb

@@ -35,6 +35,16 @@ module Polaris
       end
     end
 
+    def row_arguments(row)
+      {tag: "tr"}.tap do |args|
+        args[:classes] = class_names(
+          "Polaris-DataTable__TableRow",
+          "Polaris-DataTable--hoverable": @hoverable
+        )
+        args[:id] = dom_id(row) if row.respond_to?(:to_key)
+      end
+    end
+
     def render_cell(**arguments, &block)
       render(DataTable::CellComponent.new(vertical_alignment: @vertical_alignment, **arguments), &block)
     end

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

@@ -30,39 +30,43 @@
 
     <div class="Polaris-DropZone__Container" data-polaris-dropzone-target="container">
       <%= render Polaris::BaseComponent.new(**file_upload_arguments) do %>
-        <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
-          <% unless @size == :medium %>
-            <% stack.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="">
+        <% if content.present? %>
+          <%= content %>
+        <% else %>
+          <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
+            <% unless @size == :medium %>
+              <% stack.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 %>
-          <% end %>
 
-          <% unless @size == :small %>
-            <% stack.item do %>
-              <% if @size == :medium %>
-                <div class="Polaris-DropZone-FileUpload__ActionTitle">
-                  <%= @file_upload_button %>
-                </div>
-              <% else %>
-                <div class="Polaris-DropZone-FileUpload__Button">
-                  <%= @file_upload_button %>
-                </div>
+            <% unless @size == :small %>
+              <% stack.item do %>
+                <% if @size == :medium %>
+                  <div class="Polaris-DropZone-FileUpload__ActionTitle">
+                    <%= @file_upload_button %>
+                  </div>
+                <% else %>
+                  <div class="Polaris-DropZone-FileUpload__Button">
+                    <%= @file_upload_button %>
+                  </div>
+                <% end %>
               <% end %>
             <% end %>
-          <% end %>
 
-          <% unless @size == :small %>
-            <% stack.item do %>
-              <% help_text = capture do %>
-                <%= render Polaris::TextStyleComponent.new(variation: :subdued) do %>
-                  <%= @file_upload_help %>
+            <% unless @size == :small %>
+              <% stack.item do %>
+                <% help_text = capture do %>
+                  <%= render Polaris::TextStyleComponent.new(variation: :subdued) do %>
+                    <%= @file_upload_help %>
+                  <% end %>
                 <% end %>
-              <% end %>
 
-              <% if @size == :medium %>
-                <%= polaris_caption { help_text } %>
-              <% else %>
-                <%= help_text %>
+                <% if @size == :medium %>
+                  <%= polaris_caption { help_text } %>
+                <% else %>
+                  <%= help_text %>
+                <% end %>
               <% end %>
             <% end %>
           <% end %>
@@ -87,12 +91,12 @@
     <template data-polaris-dropzone-target="previewTemplate">
       <%= tag.div(
         data: { polaris_dropzone_target: "preview" },
-        class: [
-          "Polaris-DropZone__Preview",
+        class: {
+          "Polaris-DropZone__Preview": true,
           "Polaris-DropZone__Preview--singleFile": !@multiple,
           "Polaris-DropZone__Preview--sizeMedium": @size == :medium,
           "Polaris-DropZone__Preview--sizeSmall": @size == :small,
-        ]
+        }
       ) do %>
         <% if @size.in?(%i[small]) %>
           <span class="target"></span>

data/app/components/polaris/dropzone_component.rb

@@ -37,6 +37,7 @@ module Polaris
       label_action: nil,
       disabled: false,
       error: false,
+      remove_previews_after_upload: true,
       file_upload_button: nil,
       file_upload_help: "or drop files to upload",
       file_upload_arguments: {},
@@ -62,6 +63,7 @@ module Polaris
       @label_action = label_action
       @disabled = disabled
       @error = error
+      @remove_previews_after_upload = remove_previews_after_upload
       @file_upload_button = file_upload_button
       @file_upload_button ||= "Add #{multiple ? "files" : "file"}"
       @file_upload_help = file_upload_help
@@ -82,7 +84,8 @@ module Polaris
           polaris_dropzone_focused_value: "false",
           polaris_dropzone_drop_on_page_value: @drop_on_page,
           polaris_dropzone_render_preview_value: @preview,
-          polaris_dropzone_size_value: @size
+          polaris_dropzone_size_value: @size,
+          polaris_dropzone_remove_previews_after_upload_value: @remove_previews_after_upload
         }
       }.deep_merge(@system_arguments).tap do |opts|
         prepend_option(opts[:data], :controller, "polaris-dropzone")

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

@@ -1,12 +1,15 @@
 <%= render Polaris::BaseComponent.new(**system_arguments) do %>
   <div class="Polaris-EmptySearchResults__Content">
     <%= polaris_text_container do %>
+      <% if image.present? %>
+        <div><%= image %></div>
+      <% end %>
       <%= polaris_display_text(size: :small) do %>
         <%= @title %>
       <% end %>
-      <div>
-        <%= polaris_text_subdued { @description } %>
-      </div>
+      <% if @description.present? %>
+        <div><%= polaris_text_subdued { @description } %></div>
+      <% end %>
     <% end %>
   </div>
 <% end %>

data/app/components/polaris/empty_search_results_component.rb

@@ -1,6 +1,8 @@
 module Polaris
   class EmptySearchResultsComponent < Polaris::Component
-    def initialize(title:, description:, **system_arguments)
+    renders_one :image
+
+    def initialize(title:, description: nil, **system_arguments)
       @title = title
       @description = description
       @system_arguments = system_arguments

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

@@ -29,6 +29,8 @@
         <%= polaris_icon(name: "CaretUpMinor") %>
       <% when :select %>
         <%= polaris_icon(name: "SelectMinor") %>
+      <% when :horizontal_dots %>
+        <%= polaris_icon(name: "HorizontalDotsMinor") %>
       <% end %>
     </div>
   <% end %>

data/app/components/polaris/headless_button.rb

@@ -20,7 +20,7 @@ module Polaris
     TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
 
     DISCLOSURE_DEFAULT = false
-    DISCLOSURE_OPTIONS = [true, false, :down, :up, :select]
+    DISCLOSURE_OPTIONS = [true, false, :down, :up, :select, :horizontal_dots]
 
     renders_one :icon, IconComponent
 

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

@@ -7,25 +7,35 @@
     <% end %>
   </div>
 
-  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
-    <%= render Polaris::BaseComponent.new(**popover_arguments) do %>
-      <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
-      <div style="">
-        <div class="Polaris-Popover__Wrapper">
-          <%= render Polaris::BaseComponent.new(**content_arguments) do %>
-            <% if panes.present? %>
-              <% panes.each do |pane| %>
-                <%= pane %>
-              <% end %>
-            <% else %>
-              <%= render Polaris::Popover::PaneComponent.new(sectioned: @sectioned) do %>
-                <%= content %>
+  <% popover = capture do %>
+    <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+      <%= render Polaris::BaseComponent.new(**popover_arguments) do %>
+        <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
+        <div style="">
+          <div class="Polaris-Popover__Wrapper">
+            <%= render Polaris::BaseComponent.new(**content_arguments) do %>
+              <% if panes.present? %>
+                <% panes.each do |pane| %>
+                  <%= pane %>
+                <% end %>
+              <% else %>
+                <%= render Polaris::Popover::PaneComponent.new(sectioned: @sectioned) do %>
+                  <%= content %>
+                <% end %>
               <% end %>
             <% end %>
-          <% end %>
+          </div>
         </div>
-      </div>
-      <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
+        <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
+      <% end %>
     <% end %>
   <% end %>
+
+  <% if @append_to_body %>
+    <template data-polaris-popover-target="template">
+      <%= popover %>
+    </template>
+  <% else %>
+    <%= popover %>
+  <% end %>
 <% end %>

data/app/components/polaris/popover_component.rb

@@ -24,6 +24,7 @@ module Polaris
       sectioned: false,
       alignment: ALIGNMENT_DEFAULT,
       position: POSITION_DEFAULT,
+      append_to_body: false,
       wrapper_arguments: {},
       **system_arguments
     )
@@ -36,6 +37,7 @@ module Polaris
       @sectioned = sectioned
       @alignment = fetch_or_fallback(ALIGNMENT_OPTIONS, alignment, ALIGNMENT_DEFAULT)
       @position = fetch_or_fallback(POSITION_OPTIONS, position, POSITION_DEFAULT)
+      @append_to_body = append_to_body
       @wrapper_arguments = wrapper_arguments
       @system_arguments = system_arguments
       @popover_arguments = {}
@@ -47,6 +49,7 @@ module Polaris
         opts[:tag] = "div"
         opts[:data] ||= {}
         prepend_option(opts[:data], :controller, "polaris-popover")
+        opts[:data][:polaris_popover_append_to_body_value] = @append_to_body
         opts[:data][:polaris_popover_active_value] = @active
         opts[:data][:polaris_popover_placement_value] = popperjs_placement
         opts[:data][:polaris_popover_open_class] = "Polaris-Popover__PopoverOverlay--open"
@@ -61,7 +64,9 @@ module Polaris
       @system_arguments.tap do |opts|
         opts[:tag] = "div"
         opts[:data] ||= {}
-        opts[:data]["polaris_popover_target"] = "popover"
+        unless @append_to_body
+          opts[:data]["polaris_popover_target"] = "popover"
+        end
         opts[:classes] = class_names(
           @system_arguments[:classes],
           "Polaris-PositionedOverlay",

data/app/components/polaris/resource_item/shortcut_actions_component.html.erb

@@ -0,0 +1,21 @@
+<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
+  <%= render(Polaris::ButtonGroupComponent.new(**system_arguments)) do |group| %>
+    <% buttons.each do |button| %>
+      <% group.button(**button.system_arguments) { button.content } %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% if @persist_actions %>
+  <%= render(Polaris::BaseComponent.new(**disclosure_arguments)) do %>
+    <%= render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover| %>
+      <% popover.button(disclosure: :horizontal_dots, plain: true) %>
+
+      <%= render(Polaris::ActionListComponent.new) do |action_list| %>
+        <% buttons.each do |button| %>
+          <% action_list.item(**button.action_list_item_arguments) { button.content } %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/polaris/resource_item/shortcut_actions_component.rb

@@ -0,0 +1,88 @@
+class Polaris::ResourceItem::ShortcutActionsComponent < Polaris::Component
+  renders_many :buttons, ->(**system_arguments) do
+    ShortcutActionsButtonComponent.new(
+      persist_actions: @persist_actions,
+      **system_arguments
+    )
+  end
+
+  def initialize(
+    persist_actions: false,
+    wrapper_arguments: {},
+    disclosure_arguments: {},
+    popover_arguments: {},
+    **system_arguments
+  )
+    @persist_actions = persist_actions
+    @wrapper_arguments = wrapper_arguments
+    @disclosure_arguments = disclosure_arguments
+    @popover_arguments = popover_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-ResourceItem__Actions"
+      )
+    end
+  end
+
+  def disclosure_arguments
+    @disclosure_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @disclosure_arguments[:classes],
+        "Polaris-ResourceItem__Disclosure"
+      )
+    end
+  end
+
+  def popover_arguments
+    {
+      alignment: :right,
+      position: :below,
+      append_to_body: true
+    }.deep_merge(@popover_arguments)
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:segmented] = !@persist_actions
+    end
+  end
+
+  class ShortcutActionsButtonComponent < Polaris::Component
+    attr_reader :content
+
+    def initialize(
+      url:,
+      content:,
+      persist_actions:,
+      action_list_item_arguments: {},
+      **system_arguments
+    )
+      @url = url
+      @content = content
+      @persist_actions = persist_actions
+      @action_list_item_arguments = action_list_item_arguments
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:url] = @url
+        opts[:size] = :slim unless @persist_actions
+        opts[:plain] = true if @persist_actions
+      end
+    end
+
+    def action_list_item_arguments
+      @action_list_item_arguments.tap do |opts|
+        opts[:url] = @url
+      end
+    end
+  end
+end

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

@@ -31,6 +31,9 @@
         <div class="Polaris-ResourceItem__Content">
           <%= content %>
         </div>
+        <% if shortcut_actions.present? %>
+          <%= shortcut_actions %>
+        <% end %>
       <% end %>
     <% end %>
   </div>

data/app/components/polaris/resource_item_component.rb

@@ -26,12 +26,20 @@ module Polaris
     end
     renders_one :media
 
+    renders_one :shortcut_actions, ->(**system_arguments) do
+      Polaris::ResourceItem::ShortcutActionsComponent.new(
+        persist_actions: @persist_actions,
+        **system_arguments
+      )
+    end
+
     def initialize(
       url: nil,
       vertical_alignment: ALIGNMENT_DEFAULT,
       cursor: CURSOR_DEFAULT,
       selectable: false,
       selected: false,
+      persist_actions: false,
       offset: false,
       wrapper_arguments: {},
       container_arguments: {},
@@ -42,6 +50,7 @@ module Polaris
       @cursor = fetch_or_fallback(CURSOR_OPTIONS, cursor, CURSOR_DEFAULT)
       @selectable = selectable
       @selected = selected
+      @persist_actions = persist_actions
       @offset = offset
       @wrapper_arguments = wrapper_arguments
       @container_arguments = container_arguments
@@ -82,7 +91,8 @@ module Polaris
           args[:classes],
           "Polaris-ResourceItem",
           "Polaris-ResourceItem--selectable": @selectable,
-          "Polaris-ResourceItem--selected": @selected
+          "Polaris-ResourceItem--selected": @selected,
+          "Polaris-ResourceItem--persistActions": @persist_actions
         )
         prepend_option(args, :style, "cursor: #{@cursor};")
         prepend_option(args[:data], :action, "click->polaris-resource-item#open")

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

@@ -0,0 +1,23 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <div class="Polaris-SkeletonPage__Header">
+    <div class="Polaris-SkeletonPage__TitleAndPrimaryAction">
+      <div class="Polaris-SkeletonPage__TitleWrapper">
+        <% if @title.present? %>
+          <h1 class="Polaris-SkeletonPage__Title">
+            <%= @title %>
+          </h1>
+        <% else %>
+          <div class="Polaris-SkeletonPage__SkeletonTitle"></div>
+        <% end %>
+      </div>
+      <% if @primary_action %>
+        <div class="Polaris-SkeletonPage__PrimaryAction">
+          <%= polaris_skeleton_display_text(size: :large) %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <div class="Polaris-SkeletonPage__Content">
+    <%= content %>
+  </div>
+<% end %>

data/app/components/polaris/skeleton_page_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Polaris
+  class SkeletonPageComponent < Polaris::Component
+    def initialize(title: nil, primary_action: false, **system_arguments)
+      @title = title
+      @primary_action = primary_action
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:role] = "status"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-SkeletonPage__Page"
+        )
+      end
+    end
+  end
+end

data/app/helpers/polaris/view_helper.rb

@@ -60,6 +60,7 @@ module Polaris
       spinner:                  "Polaris::SpinnerComponent",
       skeleton_body_text:       "Polaris::SkeletonBodyTextComponent",
       skeleton_display_text:    "Polaris::SkeletonDisplayTextComponent",
+      skeleton_page:            "Polaris::SkeletonPageComponent",
       skeleton_thumbnail:       "Polaris::SkeletonThumbnailComponent",
       spacer:                   "Polaris::SpacerComponent",
       tabs:                     "Polaris::TabsComponent",

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "0.11.0"
+    VERSION = "0.12.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 0.11.0
+  version: 0.12.0
 platform: ruby
 authors:
 - Dan Gamble
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-06-20 00:00:00.000000000 Z
+date: 2022-10-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -695,6 +695,8 @@ files:
 - app/components/polaris/progress_bar_component.rb
 - app/components/polaris/radio_button_component.html.erb
 - app/components/polaris/radio_button_component.rb
+- app/components/polaris/resource_item/shortcut_actions_component.html.erb
+- app/components/polaris/resource_item/shortcut_actions_component.rb
 - app/components/polaris/resource_item_component.html.erb
 - app/components/polaris/resource_item_component.rb
 - app/components/polaris/resource_list_component.html.erb
@@ -710,6 +712,8 @@ files:
 - app/components/polaris/skeleton_body_text_component.html.erb
 - app/components/polaris/skeleton_body_text_component.rb
 - app/components/polaris/skeleton_display_text_component.rb
+- app/components/polaris/skeleton_page_component.html.erb
+- app/components/polaris/skeleton_page_component.rb
 - app/components/polaris/skeleton_thumbnail_component.rb
 - app/components/polaris/spacer_component.rb
 - app/components/polaris/spinner_component.html.erb
@@ -769,7 +773,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.15
+rubygems_version: 3.3.7
 signing_key:
 specification_version: 4
 summary: ViewComponents for Polaris Design System