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

polaris_view_components 0.9.1 → 0.11.0

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)