RubyGems - polaris_view_components - Versions diffs - 0.9.1 → 0.11.0 - Mend

polaris_view_components 0.9.1 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 910750f06bdf1ff3095625a911c884155cca167b4dba43fd9e7aa9d61cc0ba72
-  data.tar.gz: a0bc6e2afc097fc27148cc8fcb91282380fe6ec878dfcf8828703aed6edec433
+  metadata.gz: bde9c78425359cff500d5e9d709750ef0351398696e5685cbb8faada617a9a45
+  data.tar.gz: 830d75b017692040ca7cc695712e6204fd4ebab9593c09f5777a163ee41a3c57
 SHA512:
-  metadata.gz: 1d22ebdc5b83c1b52157c8e9b1f59cc2477546b521955329fff0b012a4c0472db8adad6b3bef881d108ad2e9388d2b23f44adb0d9e67fb0bb793015e4d23500b
-  data.tar.gz: 4891914fde6deb943f74567a89334bee1a8ada3736d3547acbf47d834446974e42c83ddb9d0b7ae6cf6c3d5017ce70d9cbf74c8b4706097695a5b7bda0b0f3ea
+  metadata.gz: 19ec9d9273dd86977b5dd24ccd592b20656715a64a1287c6a653b47c130c226cc83c0bb1fc3b9463d3304a18cb52134a741081a47339d80a48bd472885fe17c5
+  data.tar.gz: 295b5b130d8b325978769d37d948446144d36ae7ba0ca72a8264e25dc9ae2d90f58cb6290415c9e13fc48a6bb55a2b268dfb3f957ab26efc88a36ab0c86fe061

data/README.md CHANGED Viewed

@@ -20,76 +20,23 @@ Render Polaris ViewComponents:
 <% end %>
 ```
-## Installation
-In `Gemfile`, add:
-```ruby
-gem 'polaris_view_components'
-```
-Run install generator:
-```bash
-rails generate polaris_view_components:install
-```
-Setup Polaris styles in your layouts `<head>` tag:
-```erb
-<%= stylesheet_link_tag 'polaris_view_components' %>
-```
-Define Polaris style on your `<body>` tag:
-```erb
-<body style="<%= polaris_body_styles %>">
-```
-### Importmaps
-Install dependencies:
-```
-bin/importmap pin @rails/request.js --download
-```
-If you use sprockets make sure the vendor folder is loaded in `app/assets/config/manifest.js`:
-```js
-//= link_tree ../../../vendor/assets/javascripts .js
-```
+## Dependencies
-Add to `config/importmap.rb`:
+- [Stimulus](https://stimulus.hotwired.dev/)
-```rb
-pin "polaris-view-components", to: "polaris_view_components.js"
-```
+## Installation
-Add to `app/javascript/controllers/index.js`:
-```javascript
-// ...
+Add to `Gemfile`:
-import { registerPolarisControllers } from "polaris-view-components"
-registerPolarisControllers(Stimulus)
+```ruby
+gem "polaris_view_components"
 ```
-### NPM
-Install NPM package:
+Run installer:
 ```bash
-yarn add polaris-view-components @rails/request.js
+bin/rails polaris_view_components:install
 ```
-Add to `app/javascript/controllers/index.js`:
-```javascript
-// ...
-import { registerPolarisControllers } from "polaris-view-components"
-registerPolarisControllers(Stimulus)
-```
-## Dependencies
-In addition to the dependencies declared in the `gemspec`, Polaris ViewComponents assumes the presence of Polaris CSS.
 ## Development
 To get started:
@@ -99,16 +46,24 @@ To get started:
 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 release gem run:
+## 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:
 ```bash
-script/release
+script/release VERSION
 ```
-To release npm package run:
+Where the VERSION is the version number you want to release. This script will update the version in the gem and push it to GitHub and Rubygems automatically.
+To release a new version of npm package update the package.json file with the new version number and run:
 ```bash
-yarn release
+npm run release
 ```
+After that make sure to commit changes in package.json.
 ## 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/dropzone_controller.js CHANGED Viewed

@@ -34,11 +34,12 @@ export default class extends Controller {
   }
   files = []
-  acceptedFiles = []
   rejectedFiles = []
   _dragging = false
   dragTargets = []
   previewRendered = false
+  _acceptedFiles = []
   _size = 'large'
   connect () {
@@ -167,7 +168,8 @@ export default class extends Controller {
     if (this.acceptedFiles.length === 0) return
-    this.loaderTarget.classList.remove("Polaris--hidden")
+    if (this.hasLoaderTarget)
+      this.loaderTarget.classList.remove("Polaris--hidden")
   }
   onDirectUploadInitialize = (event) => {
@@ -179,11 +181,14 @@ export default class extends Controller {
     if (this.sizeValue == 'small') {
       this.clearFiles()
-      this.loaderTarget.classList.remove("Polaris--hidden")
+      if (this.hasLoaderTarget)
+        this.loaderTarget.classList.remove("Polaris--hidden")
     } else {
       const content = dropzone.querySelector(`[data-file-name="${file.name}"]`)
-      const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]')
-      progressBar.id = `direct-upload-${id}`
+      if (content) {
+        const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]')
+        progressBar.id = `direct-upload-${id}`
+      }
     }
   }
@@ -448,6 +453,20 @@ export default class extends Controller {
     this.element.classList.add(this.getSizeClass(val))
   }
+  get acceptedFiles () {
+    return this._acceptedFiles
+  }
+  set acceptedFiles (val) {
+    this._acceptedFiles = val
+    const list = new DataTransfer()
+    val.forEach(file => list.items.add(file))
+    this.inputTarget.files = list.files
+  }
 }
 export function fileAccepted (file, accept) {

data/app/assets/javascripts/polaris_view_components/text_field_controller.js CHANGED Viewed

@@ -26,7 +26,12 @@ export default class extends Controller {
   }
   clear() {
+    const oldValue = this.value
     this.value = null
+    if (this.value != oldValue) {
+      this.inputTarget.dispatchEvent(new Event('change'))
+    }
   }
   increase() {

data/app/assets/javascripts/polaris_view_components.js CHANGED Viewed

@@ -361,11 +361,11 @@ class Dropzone extends Controller {
     size: String
   };
   files=[];
-  acceptedFiles=[];
   rejectedFiles=[];
   _dragging=false;
   dragTargets=[];
   previewRendered=false;
+  _acceptedFiles=[];
   _size="large";
   connect() {
     document.body.addEventListener("click", this.onExternalTriggerClick);
@@ -460,7 +460,7 @@ class Dropzone extends Controller {
     this.enable();
     this.clearFiles();
     if (this.acceptedFiles.length === 0) return;
-    this.loaderTarget.classList.remove("Polaris--hidden");
+    if (this.hasLoaderTarget) this.loaderTarget.classList.remove("Polaris--hidden");
   };
   onDirectUploadInitialize=event => {
     const {target: target, detail: detail} = event;
@@ -470,11 +470,13 @@ class Dropzone extends Controller {
     if (this.acceptedFiles.length === 0) return;
     if (this.sizeValue == "small") {
       this.clearFiles();
-      this.loaderTarget.classList.remove("Polaris--hidden");
+      if (this.hasLoaderTarget) this.loaderTarget.classList.remove("Polaris--hidden");
     } else {
       const content = dropzone.querySelector(`[data-file-name="${file.name}"]`);
-      const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]');
-      progressBar.id = `direct-upload-${id}`;
+      if (content) {
+        const progressBar = content.parentElement.querySelector('[data-target="progress-bar"]');
+        progressBar.id = `direct-upload-${id}`;
+      }
     }
   };
   onDirectUploadStart=event => {
@@ -545,6 +547,7 @@ class Dropzone extends Controller {
       this.toggleFileUpload(false);
       this.toggleErrorOverlay(true);
       const dropRejectedEvent = new CustomEvent("polaris-dropzone:drop-rejected", {
+        bubbles: true,
         detail: {
           rejectedFiles: this.rejectedFiles
         }
@@ -557,6 +560,7 @@ class Dropzone extends Controller {
       }
       this.toggleErrorOverlay(false);
       const dropAcceptedEvent = new CustomEvent("polaris-dropzone:drop-accepted", {
+        bubbles: true,
         detail: {
           acceptedFiles: this.acceptedFiles
         }
@@ -564,6 +568,7 @@ class Dropzone extends Controller {
       this.element.dispatchEvent(dropAcceptedEvent);
     }
     const dropEvent = new CustomEvent("polaris-dropzone:drop", {
+      bubbles: true,
       detail: {
         files: this.files,
         acceptedFiles: this.acceptedFiles,
@@ -681,6 +686,15 @@ class Dropzone extends Controller {
     sizeClassesToRemove.forEach((className => this.element.classList.remove(className)));
     this.element.classList.add(this.getSizeClass(val));
   }
+  get acceptedFiles() {
+    return this._acceptedFiles;
+  }
+  set acceptedFiles(val) {
+    this._acceptedFiles = val;
+    const list = new DataTransfer;
+    val.forEach((file => list.items.add(file)));
+    this.inputTarget.files = list.files;
+  }
 }
 function fileAccepted(file, accept) {
@@ -1101,6 +1115,9 @@ function getContainingBlock(element) {
     }
   }
   var currentNode = getParentNode(element);
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
   while (isHTMLElement(currentNode) && [ "html", "body" ].indexOf(getNodeName(currentNode)) < 0) {
     var css = getComputedStyle$1(currentNode);
     if (css.transform !== "none" || css.perspective !== "none" || css.contain === "paint" || [ "transform", "perspective" ].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === "filter" || isFirefox && css.filter && css.filter !== "none") {
@@ -1275,13 +1292,13 @@ function mapToStyles(_ref2) {
     offsetParent = offsetParent;
     if (placement === top || (placement === left || placement === right) && variation === end) {
       sideY = bottom;
-      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : offsetParent[heightProp];
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : offsetParent[heightProp];
       y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
     }
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
       sideX = right;
-      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : offsetParent[widthProp];
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : offsetParent[widthProp];
       x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
     }
@@ -2399,7 +2416,11 @@ class TextField extends Controller {
     this.valueValue = this.inputTarget.value;
   }
   clear() {
+    const oldValue = this.value;
     this.value = null;
+    if (this.value != oldValue) {
+      this.inputTarget.dispatchEvent(new Event("change"));
+    }
   }
   increase() {
     this.changeNumber(1);

data/app/assets/stylesheets/polaris_view_components/custom.css CHANGED Viewed

@@ -36,15 +36,16 @@ a.Polaris-Tag__Button {
   font-size: 1.25rem;
 }
-/* Remove box-shadow from buttons and links */
-.Polaris-Button::after,
-.Polaris-Button:focus::after,
-.Polaris-Breadcrumbs__Breadcrumb::after {
-  box-shadow: none !important;
+/* Remove focus styles for non-keyboard focus from buttons and links */
+.Polaris-Button, .Polaris-Breadcrumbs__Breadcrumb {
+  &:focus:not(:focus-visible)::after {
+    box-shadow: none !important;
+  }
 }
-.Polaris-Tabs__Tab:focus > .Polaris-Tabs__Title::after {
-  box-shadow: none !important;
+.Polaris-Tabs__Tab {
+  &:focus:not(:focus-visible) > .Polaris-Tabs__Title::after {
+    box-shadow: none !important;
+  }
 }
 /* ResourceItem */
@@ -116,6 +117,15 @@ a.Polaris-Tag__Button {
       justify-content: center;
     }
+    &--sizeMedium {
+      justify-content: center;
+      text-align: center;
+      .Polaris-Stack.Polaris-Stack--alignmentCenter {
+        justify-content: center;
+      }
+    }
     &--sizeSmall {
       padding: 0;
       justify-content: center;
@@ -143,3 +153,45 @@ a.Polaris-Tag__Button {
     }
   }
 }
+/* ActionMenu */
+.Polaris-ActionMenu {
+  &--mobile {
+    @media (min-width: 768px){
+      display: none;
+    }
+  }
+  &--desktop {
+    display: none;
+    @media (min-width: 768px){
+      display: block;
+    }
+  }
+}
+/* Page Pagination */
+@media (max-width: 768px){
+  .Polaris-Page-Header__PaginationWrapper {
+    display: none;
+  }
+}
+/* EmptySearchResults */
+.Polaris-EmptySearchResults {
+  padding: 84px 0;
+  &__Content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+}
+/* ActionList */
+.Polaris-ActionList__Item {
+  border: none !important;
+}

data/app/assets/stylesheets/polaris_view_components.css CHANGED Viewed

@@ -2268,15 +2268,13 @@ a.Polaris-Tag__Button {
 .Polaris-TextStyle--sizeSmall {
   font-size: 1.25rem;
 }
-/* Remove box-shadow from buttons and links */
-.Polaris-Button::after,
-.Polaris-Button:focus::after,
-.Polaris-Breadcrumbs__Breadcrumb::after {
-  box-shadow: none !important;
-}
-.Polaris-Tabs__Tab:focus > .Polaris-Tabs__Title::after {
-  box-shadow: none !important;
-}
+/* Remove focus styles for non-keyboard focus from buttons and links */
+.Polaris-Button:focus:not(:focus-visible)::after, .Polaris-Breadcrumbs__Breadcrumb:focus:not(:focus-visible)::after {
+    box-shadow: none !important;
+  }
+.Polaris-Tabs__Tab:focus:not(:focus-visible) > .Polaris-Tabs__Title::after {
+    box-shadow: none !important;
+  }
 /* ResourceItem */
 .Polaris-ResourceItem__Owned--offset {
   padding-left: 2rem;
@@ -2325,6 +2323,13 @@ a.Polaris-Tag__Button {
       text-align: center;
       justify-content: center;
     }
+.Polaris-DropZone__Preview--sizeMedium {
+      justify-content: center;
+      text-align: center;
+    }
+.Polaris-DropZone__Preview--sizeMedium .Polaris-Stack.Polaris-Stack--alignmentCenter {
+        justify-content: center;
+      }
 .Polaris-DropZone__Preview--sizeSmall {
       padding: 0;
       justify-content: center;
@@ -2346,3 +2351,37 @@ a.Polaris-Tag__Button {
 .Polaris-DropZone__Loader .Polaris-Spinner--sizeSmall {
       height: 20px;
     }
+/* ActionMenu */
+@media (min-width: 768px){
+.Polaris-ActionMenu--mobile {
+      display: none
+  }
+    }
+.Polaris-ActionMenu--desktop {
+    display: none;
+  }
+@media (min-width: 768px){
+.Polaris-ActionMenu--desktop {
+      display: block
+  }
+    }
+/* Page Pagination */
+@media (max-width: 768px){
+  .Polaris-Page-Header__PaginationWrapper {
+    display: none;
+  }
+}
+/* EmptySearchResults */
+.Polaris-EmptySearchResults {
+  padding: 84px 0;
+}
+.Polaris-EmptySearchResults__Content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+/* ActionList */
+.Polaris-ActionList__Item {
+  border: none !important;
+}

data/app/components/polaris/action_list/item_component.rb CHANGED Viewed

@@ -5,6 +5,7 @@ class Polaris::ActionList::ItemComponent < Polaris::Component
   def initialize(
     url: nil,
     icon: nil,
+    icon_name: nil,
     help_text: nil,
     active: false,
     destructive: false,
@@ -12,7 +13,7 @@ class Polaris::ActionList::ItemComponent < Polaris::Component
     **system_arguments
   )
     @url = url
-    @icon = icon
+    @icon = icon || icon_name
     @help_text = help_text
     @active = active
     @destructive = destructive

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

@@ -6,9 +6,9 @@
       </span>
     <% end %>
-    <% if icon.present? %>
+    <% if icon.present? || @icon_name.present? %>
       <div class="Polaris-Button__Icon">
-        <%= icon %>
+        <%= icon.presence || polaris_icon(name: @icon_name) %>
       </div>
       <% if content.present? %>
         &nbsp;

data/app/components/polaris/data_table/column_component.rb CHANGED Viewed

@@ -2,7 +2,7 @@ class Polaris::DataTable::ColumnComponent < Polaris::Component
   SORT_DEFAULT = false
   SORT_OPTIONS = [false, :asc, :desc]
-  attr_reader :title, :numeric, :total, :sorted, :sort_url
+  attr_reader :title, :numeric, :total, :sorted, :sort_url, :system_arguments
   def initialize(title, numeric: false, total: nil, sorted: SORT_DEFAULT, sort_url: nil, **system_arguments, &block)
     @title = title
@@ -11,6 +11,7 @@ class Polaris::DataTable::ColumnComponent < Polaris::Component
     @sorted = fetch_or_fallback(SORT_OPTIONS, sorted, SORT_DEFAULT)
     @sort_url = sort_url
     @block = block
+    @system_arguments = system_arguments
   end
   def call(row)

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

@@ -26,6 +26,7 @@
                 tag: (index.zero? ? "th" : "td"),
                 scope: ("row" if index.zero?),
                 total: true,
+                **column.system_arguments
               ) do %>
                 <%= column.total %>
               <% end %>

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

@@ -4,10 +4,12 @@
       class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
       data-polaris-dropzone-target="overlay"
     >
-      <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
-        <% stack.item do %>
-          <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
-            <%= @overlay_text %>
+      <% unless @size == :small %>
+        <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
+          <% stack.item do %>
+            <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
+              <%= @overlay_text %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>
@@ -67,9 +69,11 @@
         <% end %>
       <% end %>
-      <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader">
-        <%= polaris_spinner(size: (@size == :small) ? :small : :large) %>
-      </div>
+      <% if @preview %>
+        <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader">
+          <%= polaris_spinner(size: (@size == :small) ? :small : :large) %>
+        </div>
+      <% end %>
     </div>
     <%= render Polaris::VisuallyHiddenComponent.new do %>
@@ -86,7 +90,8 @@
         class: [
           "Polaris-DropZone__Preview",
           "Polaris-DropZone__Preview--singleFile": !@multiple,
-          "Polaris-DropZone__Preview--sizeSmall": @size == :small
+          "Polaris-DropZone__Preview--sizeMedium": @size == :medium,
+          "Polaris-DropZone__Preview--sizeSmall": @size == :small,
         ]
       ) do %>
         <% if @size.in?(%i[small]) %>

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

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

data/app/components/polaris/empty_search_results_component.rb ADDED Viewed

@@ -0,0 +1,19 @@
+module Polaris
+  class EmptySearchResultsComponent < Polaris::Component
+    def initialize(title:, description:, **system_arguments)
+      @title = title
+      @description = description
+      @system_arguments = system_arguments
+    end
+    def system_arguments
+      @system_arguments.tap do |args|
+        args[:tag] = "div"
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-EmptySearchResults"
+        )
+      end
+    end
+  end
+end

data/app/components/polaris/filters_component.rb CHANGED Viewed

@@ -74,7 +74,9 @@ module Polaris
       def popover_arguments
         {
           sectioned: @sectioned,
-          style: ("width: #{@width}" if @width.present?)
+          style: ("width: #{@width}" if @width.present?),
+          position: :below,
+          alignment: :left
         }
       end

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

@@ -5,9 +5,9 @@
     </span>
   <% end %>
-  <% if icon.present? %>
+  <% if icon.present? || @icon_name.present? %>
     <div class="Polaris-Button__Icon">
-      <%= icon %>
+      <%= icon || polaris_icon(name: @icon_name) %>
     </div>
     <% if content.present? %>
       &nbsp;

data/app/components/polaris/headless_button.rb CHANGED Viewed

@@ -42,6 +42,7 @@ module Polaris
       remove_underline: false,
       size: SIZE_DEFAULT,
       text_align: TEXT_ALIGN_DEFAULT,
+      icon_name: nil,
       **system_arguments
     )
       @tag = url.present? ? "a" : "button"
@@ -52,6 +53,7 @@ module Polaris
       @loading = loading
       @disclosure = fetch_or_fallback(DISCLOSURE_OPTIONS, disclosure, DISCLOSURE_DEFAULT)
       @disclosure = :down if @disclosure === true
+      @icon_name = icon_name
       @system_arguments = system_arguments
       @system_arguments[:type] = submit ? "submit" : "button"
@@ -92,7 +94,7 @@ module Polaris
     def system_arguments
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Button--iconOnly": icon.present? && content.blank?
+        "Polaris-Button--iconOnly": (icon.present? || @icon_name.present?) && content.blank?
       )
       @system_arguments
     end

data/app/components/polaris/index_table/column_component.rb CHANGED Viewed

@@ -1,10 +1,11 @@
 class Polaris::IndexTable::ColumnComponent < Polaris::Component
-  attr_reader :title, :flush
+  attr_reader :title, :flush, :system_arguments
   def initialize(title, flush: false, **system_arguments, &block)
     @title = title
     @flush = flush
     @block = block
+    @system_arguments = system_arguments
   end
   def call(row)