polaris_view_components 2.1.0 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e9f0dda0dd8c18919a32d2db1f85d8f141e6c034d4b01a14a1f3962ccd1b44d5
-  data.tar.gz: b852067c8aaf0a6b8227979b8b8e11d8ceaf16835ee750d426a33c9a07753641
+  metadata.gz: 2d31c4bdf79eb1b9306c46f8506c57a26fdaffb6af1ddf0d5ae48f560faffeb9
+  data.tar.gz: fa9fe8d5d9450fcb128970910a3b5ec1828d5cafda8a80bc745e41122a81ca60
 SHA512:
-  metadata.gz: 34ad4b65aaeab109d00e2220c6df2276c53d6b549858aaf177bf80d042522334f5633e53c678df3d7f8b891656e906318180259dd705c5664d91584383c2f470
-  data.tar.gz: 2e5eddc9bf78ad83546587ff76e59f1c3419ab19b9c7a2679e1a8234e6f4e9355d25e172a07d6ddbd5adea8374898897837590a73cbc4a54eecc958a93009630
+  metadata.gz: 825ec26adbde83a5f56f3288bb5c2c4294c741a28965f90d25fa28b2acfdb29cae9b1efdb9692f29bf1599d35dc39ed55653cab78eabbb2fdb12a8acdb082603
+  data.tar.gz: 3447d874bdc8b3905f63b5bdcdb1a1d063d706451e71a5ce063b7d33694a0b1be5576416f25e1d74919760e302bd283571c52ac78a52173f85f091e16126a067

data/README.md

@@ -57,7 +57,7 @@ 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:
+The library follows [semantic versioning](https://semver.org/). To draft a new release you need to run `bin/release` with a new version number:
 
 ```bash
 bin/release VERSION

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

@@ -14,7 +14,8 @@ export default class extends Controller {
 
   open() {
     this.element.classList.remove(this.hiddenClass)
-    this.element.insertAdjacentHTML('afterend', `<div class="${this.backdropClass}"></div>`)
+    const dropElement = `<div class="${this.backdropClass}" data-controller="polaris" data-target="#${this.element.id}" data-action="click->polaris#closeModal"></div>`
+    this.element.insertAdjacentHTML('afterend', dropElement)
     this.backdrop = this.element.nextElementSibling
   }
 

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

@@ -5,6 +5,10 @@ export default class extends Controller {
     this.findElement("modal").open()
   }
 
+  closeModal() {
+    this.findElement("modal").close()
+  }
+
   disableButton() {
     this.findElement("button").disable()
   }

data/app/assets/javascripts/polaris_view_components.js

@@ -833,7 +833,8 @@ class Modal extends Controller {
   }
   open() {
     this.element.classList.remove(this.hiddenClass);
-    this.element.insertAdjacentHTML("afterend", `<div class="${this.backdropClass}"></div>`);
+    const dropElement = `<div class="${this.backdropClass}" data-controller="polaris" data-target="#${this.element.id}" data-action="click->polaris#closeModal"></div>`;
+    this.element.insertAdjacentHTML("afterend", dropElement);
     this.backdrop = this.element.nextElementSibling;
   }
   close() {
@@ -878,6 +879,9 @@ class Polaris extends Controller {
   openModal() {
     this.findElement("modal").open();
   }
+  closeModal() {
+    this.findElement("modal").close();
+  }
   disableButton() {
     this.findElement("button").disable();
   }

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

@@ -1,6 +1,8 @@
 /* Polaris no longer uses different button styling depending on the context,
    so we can override all buttons at once. */
 html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button {
+
+
   &:not(.Polaris-Button--plain) {
     &:hover {
       box-shadow: var(--pc-button-shadow-hover);
@@ -52,13 +54,18 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button {
   }
 
   /* Destructive */
-  &.Polaris-Button--destructive {
+  &.Polaris-Button--destructive,
+  &.Polaris-Button--destructive:is(.Polaris-Button--primary) {
     --pc-button-color: var(--p-color-bg-fill-critical);
     --pc-button-text: var(--p-color-bg-surface);
     --pc-button-color-hover: var(--p-color-bg-fill-critical-hover);
     --pc-button-color-active: var(--p-color-bg-fill-critical-active);
     --pc-button-color-depressed: var(--p-color-bg-fill-critical-selected);
     box-shadow: var(--p-shadow-button-primary-critical);
+
+    &:active {
+      background: var(--pc-button-color-active);
+    }
   }
 
   /* Primary */

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

@@ -6,3 +6,10 @@ html[class~="Polaris-Summer-Editions-2023"] {
     }
   }
 }
+
+.Polaris-OptionList-Option__Layout {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

data/app/assets/stylesheets/polaris_view_components.css

@@ -309,14 +309,17 @@
       background: var(--p-color-bg-fill-tertiary);
     }/* Loading */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--loading svg {
       fill: var(--p-color-icon-disabled);
-    }/* Destructive */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive {
+    }/* Destructive */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive,
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:is(.Polaris-Button--primary) {
     --pc-button-color: var(--p-color-bg-fill-critical);
     --pc-button-text: var(--p-color-bg-surface);
     --pc-button-color-hover: var(--p-color-bg-fill-critical-hover);
     --pc-button-color-active: var(--p-color-bg-fill-critical-active);
     --pc-button-color-depressed: var(--p-color-bg-fill-critical-selected);
     box-shadow: var(--p-shadow-button-primary-critical);
-  }/* Primary */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary {
+  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:active, html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:is(.Polaris-Button--primary):active {
+      background: var(--pc-button-color-active);
+    }/* Primary */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary {
     --pc-button-bg-gradient: var(--p-color-button-gradient-bg-fill);
     --pc-button-color: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);
     --pc-button-text: var(--p-color-bg-surface);
@@ -567,7 +570,12 @@
     }html[class~="Polaris-Summer-Editions-2023"] .Polaris-OptionList-Option__Checkbox .Polaris-Checkbox__Icon > svg {
       fill: var(--p-color-text-brand-on-bg-fill);
       color: var(--p-color-text-brand-on-bg-fill);
-    }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header {
+    }.Polaris-OptionList-Option__Layout {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header {
     font-weight: var(--p-font-weight-bold);
   }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header--smallTitle .Polaris-Header-Title {
     font-size: var(--p-font-size-300);

data/app/components/polaris/autocomplete/option_component.html.erb

@@ -0,0 +1,5 @@
+<% if @multiple %>
+  <%= render Polaris::OptionList::CheckboxComponent.new(**system_arguments) %>
+<% else %>
+  <%= render Polaris::OptionList::RadioButtonComponent.new(**system_arguments, prefix: prefix, suffix: suffix) %>
+<% end %>

data/app/components/polaris/autocomplete/option_component.rb

@@ -1,5 +1,8 @@
 module Polaris
   class Autocomplete::OptionComponent < Component
+    renders_one :prefix
+    renders_one :suffix
+
     def initialize(
       label:,
       multiple: false,
@@ -23,13 +26,5 @@ module Polaris
         prepend_option(args[:data], :action, "polaris-autocomplete#select")
       end
     end
-
-    def call
-      if @multiple
-        render OptionList::CheckboxComponent.new(**system_arguments)
-      else
-        render OptionList::RadioButtonComponent.new(**system_arguments)
-      end
-    end
   end
 end

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

@@ -9,6 +9,8 @@
             <%= @initials %>
           </text>
         </svg>
+      <% elsif @icon %>
+        <%= polaris_icon(name: @icon) %>
       <% else %>
         <svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
           <path fill="currentColor" d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"></path>

data/app/components/polaris/avatar_component.rb

@@ -27,6 +27,7 @@ module Polaris
       size: SIZE_DEFAULT,
       shape: SHAPE_DEFAULT,
       source: nil,
+      icon: nil,
       **system_arguments
     )
       @customer = customer
@@ -35,6 +36,7 @@ module Polaris
       @size = size
       @shape = shape
       @source = source
+      @icon = icon
       @system_arguments = system_arguments
     end
 

data/app/components/polaris/form_layout/group_component.rb

@@ -3,7 +3,7 @@ class Polaris::FormLayout::GroupComponent < Polaris::Component
 
   renders_many :items, "GroupItemComponent"
 
-  def initialize(position:, condensed: false, **system_arguments)
+  def initialize(position:, condensed: false, wrapper_arguments: {}, **system_arguments)
     @position = position
 
     @system_arguments = system_arguments
@@ -13,7 +13,7 @@ class Polaris::FormLayout::GroupComponent < Polaris::Component
       "Polaris-FormLayout__Items"
     )
 
-    @wrapper_arguments = {}
+    @wrapper_arguments = wrapper_arguments
     @wrapper_arguments[:tag] = "div"
     @wrapper_arguments[:role] = "group"
     @wrapper_arguments[:classes] = class_names(

data/app/components/polaris/frame/top_bar_component.html.erb

@@ -27,31 +27,19 @@
     </div>
 
     <div class="Polaris-TopBar__RightContent">
-      <div>
-        <div class="Polaris-TopBar-Menu__ActivatorWrapper">
-          <%= user_menu %>
+      <div class="Polaris-TopBar__SecondaryMenu">
+        <div>
+          <div class="Polaris-TopBar-Menu__ActivatorWrapper">
+            <%= secondary_menu %>
+          </div>
         </div>
       </div>
-    </div>
-
 
-    <%
-=begin%>
-
-    <div class="Polaris-TopBar__Contents">
-      <div class="Polaris-TopBar__SearchField">
-        <%= search_field %>
-      </div>
-      <div class="Polaris-TopBar__SecondaryMenu">
-        <%= secondary_menu %>
-      </div>
       <div>
         <div class="Polaris-TopBar-Menu__ActivatorWrapper">
           <%= user_menu %>
         </div>
       </div>
     </div>
-<%
-=end%>
   </div>
 <% end %>

data/app/components/polaris/frame/top_bar_component.rb

@@ -1,6 +1,7 @@
 class Polaris::Frame::TopBarComponent < Polaris::Component
   renders_one :user_menu, Polaris::TopBar::UserMenuComponent
   renders_one :search_field
+  renders_one :secondary_menu
 
   def initialize(logo:, **system_arguments)
     @logo = logo.is_a?(Hash) ? Polaris::Logo.new(**logo) : logo

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

@@ -28,7 +28,7 @@
     </div>
   <% end %>
 
-  <div data-polaris-frame-target="navigationOverlay"></div>
+  <div data-polaris-frame-target="navigationOverlay" data-action="click->polaris-frame#closeMenu"></div>
 
   <main class="Polaris-Frame__Main">
     <div class="Polaris-Frame__Content">

data/app/components/polaris/navigation/item_component.html.erb

@@ -1,19 +1,37 @@
 <%= render Polaris::BaseComponent.new(**system_arguments) do %>
   <div class="Polaris-Navigation__ItemWrapper">
-    <div class="Polaris-Navigation__ItemInnerWrapper">
-      <%= link_to @url, **link_arguments do %>
-        <% if @icon.present? %>
-          <div class="Polaris-Navigation__Icon">
-            <%= polaris_icon(name: @icon) %>
-          </div>
+    <div class="<%= @item_inner_wrapper_classes %>">
+      <% if @action_type == :link %>
+        <%= link_to @url, **link_arguments do %>
+          <% if @icon.present? %>
+            <div class="Polaris-Navigation__Icon">
+              <%= polaris_icon(name: @icon) %>
+            </div>
+          <% end %>
+          <span class="Polaris-Navigation__Text">
+            <%= @label %>
+          </span>
+          <% if @badge.present? %>
+            <div class="Polaris-Navigation__Badge">
+              <%= polaris_badge { @badge } %>
+            </div>
+          <% end %>
         <% end %>
-        <span class="Polaris-Navigation__Text">
-          <%= @label %>
-        </span>
-        <% if @badge.present? %>
-          <div class="Polaris-Navigation__Badge">
-            <%= polaris_badge { @badge } %>
-          </div>
+      <% else %>
+        <%= button_to @url, **link_arguments do %>
+          <% if @icon.present? %>
+            <div class="Polaris-Navigation__Icon">
+              <%= polaris_icon(name: @icon) %>
+            </div>
+          <% end %>
+          <span class="Polaris-Navigation__Text">
+            <%= @label %>
+          </span>
+          <% if @badge.present? %>
+            <div class="Polaris-Navigation__Badge">
+              <%= polaris_badge { @badge } %>
+            </div>
+          <% end %>
         <% end %>
       <% end %>
       <% if secondary_actions.present? %>

data/app/components/polaris/navigation/item_component.rb

@@ -12,6 +12,7 @@ class Polaris::Navigation::ItemComponent < Polaris::Component
     selected: false,
     disabled: false,
     external: false,
+    action_type: :link,
     link_arguments: {},
     **system_arguments
   )
@@ -23,7 +24,9 @@ class Polaris::Navigation::ItemComponent < Polaris::Component
     @disabled = disabled
     @external = external
     @system_arguments = system_arguments
+    @action_type = action_type
     @link_arguments = link_arguments
+    @item_inner_wrapper_classes = item_inner_wrapper_classes
   end
 
   def system_arguments
@@ -47,6 +50,14 @@ class Polaris::Navigation::ItemComponent < Polaris::Component
     end
   end
 
+  def item_inner_wrapper_classes
+    class_names(
+      "Polaris-Navigation__ItemInnerWrapper",
+      "Polaris-Navigation__ItemInnerWrapper--selected": @selected,
+      "Polaris-Navigation__ItemInnerDisabled": @disabled
+    )
+  end
+
   def link_classes
     class_names(
       "Polaris-Navigation__Item",

data/app/components/polaris/option_list/radio_button_component.html.erb

@@ -0,0 +1,22 @@
+<% pref = prefix || @prefix %>
+<% suf = suffix || @suffix %>
+
+<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
+  <%= tag.label(
+    class: "Polaris-OptionList-Option__SingleSelectOption",
+    data: {
+      polaris_option_list_target: "radioButton",
+      action: "click->polaris-option-list#update"
+    }
+  ) do %>
+    <%= tag.div(class: "Polaris-OptionList-Option__Layout", style: suf.blank? ? "justify-content: normal;" : "") do %>
+      <% if pref %>
+        <%= tag.div(pref, style: "margin-right: 5px;") %>
+      <% end %>
+      <%= tag.div { safe_join [radio_button, @label] } %>
+      <% if suf %>
+        <%= tag.div(suf, style: "margin-left: 5px;") %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/polaris/option_list/radio_button_component.rb

@@ -1,12 +1,19 @@
 class Polaris::OptionList::RadioButtonComponent < Polaris::Component
+  renders_one :prefix
+  renders_one :suffix
+
   def initialize(
     label:,
     value:,
+    prefix: nil,
+    suffix: nil,
     wrapper_arguments: {},
     **system_arguments
   )
     @label = label
     @value = value
+    @prefix = prefix
+    @suffix = suffix
     @wrapper_arguments = wrapper_arguments
     @system_arguments = system_arguments
   end
@@ -31,23 +38,6 @@ class Polaris::OptionList::RadioButtonComponent < Polaris::Component
     end
   end
 
-  def call
-    render(Polaris::BaseComponent.new(**wrapper_arguments)) do
-      tag.label(
-        class: "Polaris-OptionList-Option__SingleSelectOption",
-        data: {
-          polaris_option_list_target: "radioButton",
-          action: "click->polaris-option-list#update"
-        }
-      ) do
-        safe_join [
-          radio_button,
-          @label
-        ]
-      end
-    end
-  end
-
   def radio_button
     render Polaris::BaseRadioButton.new(value: @value, **system_arguments)
   end

data/app/components/polaris/top_bar/user_menu_component.html.erb

@@ -5,28 +5,57 @@
       class="Polaris-TopBar-Menu__Activator"
       data-action="polaris-popover#toggle click@window->polaris-popover#hide"
     >
-      <span class="Polaris-TopBar-UserMenu__Details">
-        <%= polaris_text(
-          as: :p,
-          font_weight: :medium,
-          truncate: true,
-          alignment: :start
-        ) do %>
-          <%= @name %>
-        <% end %>
-        <%= polaris_text(
-          as: :p,
-          variant: :bodySm,
-          truncate: true,
-          alignment: :start,
-          color: :subdued
-        ) do %>
-          <%= @detail %>
-        <% end %>
-      </span>
-      <div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
-        <%= avatar %>
-      </div>
+      <% if @show_avatar_first %>
+        <div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
+          <%= avatar %>
+        </div>
+        <span class="Polaris-TopBar-UserMenu__Details">
+          <%= polaris_text(
+            as: :p,
+            font_weight: :medium,
+            truncate: true,
+            alignment: :start
+          ) do %>
+            <%= @name %>
+          <% end %>
+          <% if @detail.present? %>
+            <%= polaris_text(
+              as: :p,
+              variant: :bodySm,
+              truncate: true,
+              alignment: :start,
+              color: :subdued
+            ) do %>
+              <%= @detail %>
+            <% end %>
+          <% end %>
+        </span>
+      <% else %>
+        <span class="Polaris-TopBar-UserMenu__Details">
+          <%= polaris_text(
+            as: :p,
+            font_weight: :medium,
+            truncate: true,
+            alignment: :start
+          ) do %>
+            <%= @name %>
+          <% end %>
+          <% if @detail.present? %>
+            <%= polaris_text(
+              as: :p,
+              variant: :bodySm,
+              truncate: true,
+              alignment: :start,
+              color: :subdued
+            ) do %>
+              <%= @detail %>
+            <% end %>
+          <% end %>
+        </span>
+        <div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
+          <%= avatar %>
+        </div>
+      <% end %>
     </button>
   <% end %>
 

data/app/components/polaris/top_bar/user_menu_component.rb

@@ -1,9 +1,10 @@
 class Polaris::TopBar::UserMenuComponent < Polaris::Component
   renders_one :avatar, Polaris::AvatarComponent
 
-  def initialize(name:, detail:, **system_arguments)
+  def initialize(name:, detail: nil, show_avatar_first: false, **system_arguments)
     @name = name
     @detail = detail
+    @show_avatar_first = show_avatar_first
     @system_arguments = system_arguments
   end
 end

data/app/helpers/polaris/view_helper.rb

@@ -100,7 +100,14 @@ module Polaris
     end
 
     def polaris_icon_source(name)
-      path = ViewComponents::Engine.root.join("app", "assets", "icons", "polaris", "#{name}.svg")
+      paths = [
+        ViewComponents::Engine.root.join("app", "assets", "icons", "polaris", "#{name}.svg"),
+        Rails.root.join("app", "assets", "icons", "polaris", "#{name}.svg")
+      ]
+
+      path = paths.find { |path| File.exist?(path) }
+      return unless path
+
       file = File.read(path)
       doc = Nokogiri::HTML::DocumentFragment.parse(file)
       svg = doc.at_css "svg"

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "2.1.0"
+    VERSION = "2.2.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 2.1.0
+  version: 2.2.0
 platform: ruby
 authors:
 - Dan Gamble
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-05-01 00:00:00.000000000 Z
+date: 2024-07-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -706,6 +706,7 @@ files:
 - app/components/polaris/action_list_component.html.erb
 - app/components/polaris/action_list_component.rb
 - app/components/polaris/autocomplete/action_component.rb
+- app/components/polaris/autocomplete/option_component.html.erb
 - app/components/polaris/autocomplete/option_component.rb
 - app/components/polaris/autocomplete/section_component.html.erb
 - app/components/polaris/autocomplete/section_component.rb
@@ -822,6 +823,7 @@ files:
 - app/components/polaris/option_list/checkbox_component.html.erb
 - app/components/polaris/option_list/checkbox_component.rb
 - app/components/polaris/option_list/option_component.rb
+- app/components/polaris/option_list/radio_button_component.html.erb
 - app/components/polaris/option_list/radio_button_component.rb
 - app/components/polaris/option_list/section_component.html.erb
 - app/components/polaris/option_list/section_component.rb
@@ -934,7 +936,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.8
+rubygems_version: 3.5.10
 signing_key:
 specification_version: 4
 summary: ViewComponents for Polaris Design System