polaris_view_components 2.1.0 → 2.2.2

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 (27) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/app/assets/javascripts/polaris_view_components/button_controller.js +10 -8
  4. data/app/assets/javascripts/polaris_view_components/modal_controller.js +2 -1
  5. data/app/assets/javascripts/polaris_view_components/polaris_controller.js +4 -0
  6. data/app/assets/javascripts/polaris_view_components.js +16 -9
  7. data/app/assets/stylesheets/polaris_view_components/button.pcss +20 -1
  8. data/app/assets/stylesheets/polaris_view_components/option_list.pcss +7 -0
  9. data/app/assets/stylesheets/polaris_view_components.css +17 -3
  10. data/app/components/polaris/autocomplete/option_component.html.erb +5 -0
  11. data/app/components/polaris/autocomplete/option_component.rb +3 -8
  12. data/app/components/polaris/avatar_component.html.erb +2 -0
  13. data/app/components/polaris/avatar_component.rb +2 -0
  14. data/app/components/polaris/base_radio_button.rb +1 -0
  15. data/app/components/polaris/form_layout/group_component.rb +2 -2
  16. data/app/components/polaris/frame/top_bar_component.html.erb +5 -17
  17. data/app/components/polaris/frame/top_bar_component.rb +1 -0
  18. data/app/components/polaris/frame_component.html.erb +1 -1
  19. data/app/components/polaris/navigation/item_component.html.erb +31 -13
  20. data/app/components/polaris/navigation/item_component.rb +11 -0
  21. data/app/components/polaris/option_list/radio_button_component.html.erb +22 -0
  22. data/app/components/polaris/option_list/radio_button_component.rb +7 -17
  23. data/app/components/polaris/top_bar/user_menu_component.html.erb +51 -22
  24. data/app/components/polaris/top_bar/user_menu_component.rb +2 -1
  25. data/app/helpers/polaris/view_helper.rb +8 -1
  26. data/lib/polaris/view_components/version.rb +1 -1
  27. metadata +5 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e9f0dda0dd8c18919a32d2db1f85d8f141e6c034d4b01a14a1f3962ccd1b44d5
4
- data.tar.gz: b852067c8aaf0a6b8227979b8b8e11d8ceaf16835ee750d426a33c9a07753641
3
+ metadata.gz: 10a87c4fe4cbbfe6e134c8d7ccc9ba0747713b633399a47f7677f830941c4b9b
4
+ data.tar.gz: 6782c0c52aa3df512a0a55efbf563321a0cb753ee987bd6b18089663574c5633
5
5
  SHA512:
6
- metadata.gz: 34ad4b65aaeab109d00e2220c6df2276c53d6b549858aaf177bf80d042522334f5633e53c678df3d7f8b891656e906318180259dd705c5664d91584383c2f470
7
- data.tar.gz: 2e5eddc9bf78ad83546587ff76e59f1c3419ab19b9c7a2679e1a8234e6f4e9355d25e172a07d6ddbd5adea8374898897837590a73cbc4a54eecc958a93009630
6
+ metadata.gz: 2c2bae435fce1e3e1d9ee88c2fedd06cbf02b2db2f913f87e5cd39c47e07974aec009e17461049d53f137c63df92f2927b37bfceb8adac9ac8b52393ba379aa0
7
+ data.tar.gz: f57b0604f88283b4661f011dc76ab856ba7b498a7f784f93472f687f3bde14b3d07b94b38ea666f4298d0b286aa32d890a25d4ce4e2ee2378271b81709281fa6
data/README.md CHANGED
@@ -57,7 +57,7 @@ rake
57
57
 
58
58
  ## Releases
59
59
 
60
- The library follows [semantic versioning](https://semver.org/). To draft a new release you need to run `script/release` with a new version number:
60
+ The library follows [semantic versioning](https://semver.org/). To draft a new release you need to run `bin/release` with a new version number:
61
61
 
62
62
  ```bash
63
63
  bin/release VERSION
@@ -1,28 +1,30 @@
1
1
  import { Controller } from "@hotwired/stimulus"
2
2
 
3
3
  export default class extends Controller {
4
+ static values = { disabled: Boolean }
5
+
4
6
  disable(event) {
5
- if (this.button.disabled) {
6
- event.preventDefault()
7
+ if (this.disabledValue) {
8
+ if (event) event.preventDefault()
7
9
  } else {
8
- this.button.disabled = true
10
+ this.disabledValue = true
9
11
  this.button.classList.add("Polaris-Button--disabled", "Polaris-Button--loading")
10
12
  this.buttonContent.insertAdjacentHTML("afterbegin", this.spinnerHTML)
11
13
  }
12
14
  }
13
15
 
14
16
  disableWithoutLoader(event) {
15
- if (this.button.disabled) {
16
- event.preventDefault()
17
+ if (this.disabledValue) {
18
+ if (event) event.preventDefault()
17
19
  } else {
18
- this.button.disabled = true
20
+ this.disabledValue = true
19
21
  this.button.classList.add("Polaris-Button--disabled")
20
22
  }
21
23
  }
22
24
 
23
25
  enable() {
24
- if (this.button.disabled) {
25
- this.button.disabled = false
26
+ if (this.disabledValue) {
27
+ this.disabledValue = false
26
28
  this.button.classList.remove("Polaris-Button--disabled", "Polaris-Button--loading")
27
29
  if (this.spinner) this.spinner.remove()
28
30
  }
@@ -14,7 +14,8 @@ export default class extends Controller {
14
14
 
15
15
  open() {
16
16
  this.element.classList.remove(this.hiddenClass)
17
- this.element.insertAdjacentHTML('afterend', `<div class="${this.backdropClass}"></div>`)
17
+ const dropElement = `<div class="${this.backdropClass}" data-controller="polaris" data-target="#${this.element.id}" data-action="click->polaris#closeModal"></div>`
18
+ this.element.insertAdjacentHTML('afterend', dropElement)
18
19
  this.backdrop = this.element.nextElementSibling
19
20
  }
20
21
 
@@ -5,6 +5,10 @@ export default class extends Controller {
5
5
  this.findElement("modal").open()
6
6
  }
7
7
 
8
+ closeModal() {
9
+ this.findElement("modal").close()
10
+ }
11
+
8
12
  disableButton() {
9
13
  this.findElement("button").disable()
10
14
  }
@@ -298,26 +298,29 @@ class Autocomplete extends Controller {
298
298
  }
299
299
 
300
300
  class Button extends Controller {
301
+ static values={
302
+ disabled: Boolean
303
+ };
301
304
  disable(event) {
302
- if (this.button.disabled) {
303
- event.preventDefault();
305
+ if (this.disabledValue) {
306
+ if (event) event.preventDefault();
304
307
  } else {
305
- this.button.disabled = true;
308
+ this.disabledValue = true;
306
309
  this.button.classList.add("Polaris-Button--disabled", "Polaris-Button--loading");
307
310
  this.buttonContent.insertAdjacentHTML("afterbegin", this.spinnerHTML);
308
311
  }
309
312
  }
310
313
  disableWithoutLoader(event) {
311
- if (this.button.disabled) {
312
- event.preventDefault();
314
+ if (this.disabledValue) {
315
+ if (event) event.preventDefault();
313
316
  } else {
314
- this.button.disabled = true;
317
+ this.disabledValue = true;
315
318
  this.button.classList.add("Polaris-Button--disabled");
316
319
  }
317
320
  }
318
321
  enable() {
319
- if (this.button.disabled) {
320
- this.button.disabled = false;
322
+ if (this.disabledValue) {
323
+ this.disabledValue = false;
321
324
  this.button.classList.remove("Polaris-Button--disabled", "Polaris-Button--loading");
322
325
  if (this.spinner) this.spinner.remove();
323
326
  }
@@ -833,7 +836,8 @@ class Modal extends Controller {
833
836
  }
834
837
  open() {
835
838
  this.element.classList.remove(this.hiddenClass);
836
- this.element.insertAdjacentHTML("afterend", `<div class="${this.backdropClass}"></div>`);
839
+ const dropElement = `<div class="${this.backdropClass}" data-controller="polaris" data-target="#${this.element.id}" data-action="click->polaris#closeModal"></div>`;
840
+ this.element.insertAdjacentHTML("afterend", dropElement);
837
841
  this.backdrop = this.element.nextElementSibling;
838
842
  }
839
843
  close() {
@@ -878,6 +882,9 @@ class Polaris extends Controller {
878
882
  openModal() {
879
883
  this.findElement("modal").open();
880
884
  }
885
+ closeModal() {
886
+ this.findElement("modal").close();
887
+ }
881
888
  disableButton() {
882
889
  this.findElement("button").disable();
883
890
  }
@@ -1,6 +1,8 @@
1
1
  /* Polaris no longer uses different button styling depending on the context,
2
2
  so we can override all buttons at once. */
3
3
  html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button {
4
+
5
+
4
6
  &:not(.Polaris-Button--plain) {
5
7
  &:hover {
6
8
  box-shadow: var(--pc-button-shadow-hover);
@@ -52,13 +54,30 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button {
52
54
  }
53
55
 
54
56
  /* Destructive */
55
- &.Polaris-Button--destructive {
57
+ &.Polaris-Button--destructive:is(.Polaris-Button--primary) {
56
58
  --pc-button-color: var(--p-color-bg-fill-critical);
57
59
  --pc-button-text: var(--p-color-bg-surface);
58
60
  --pc-button-color-hover: var(--p-color-bg-fill-critical-hover);
59
61
  --pc-button-color-active: var(--p-color-bg-fill-critical-active);
60
62
  --pc-button-color-depressed: var(--p-color-bg-fill-critical-selected);
61
63
  box-shadow: var(--p-shadow-button-primary-critical);
64
+
65
+ &:active {
66
+ background: var(--pc-button-color-active);
67
+ }
68
+ }
69
+
70
+ &.Polaris-Button--destructive:not(.Polaris-Button--primary) {
71
+ --pc-button-text: var(--p-color-text-critical);
72
+ --pc-button-icon-fill: currentColor;
73
+
74
+ &:active {
75
+ --pc-button-text: var(--p-color-text-critical-active);
76
+ }
77
+
78
+ &:hover {
79
+ --pc-button-text: var(--p-color-text-critical-hover);
80
+ }
62
81
  }
63
82
 
64
83
  /* Primary */
@@ -6,3 +6,10 @@ html[class~="Polaris-Summer-Editions-2023"] {
6
6
  }
7
7
  }
8
8
  }
9
+
10
+ .Polaris-OptionList-Option__Layout {
11
+ width: 100%;
12
+ display: flex;
13
+ justify-content: space-between;
14
+ align-items: center;
15
+ }
@@ -309,14 +309,23 @@
309
309
  background: var(--p-color-bg-fill-tertiary);
310
310
  }/* Loading */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--loading svg {
311
311
  fill: var(--p-color-icon-disabled);
312
- }/* Destructive */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive {
312
+ }/* Destructive */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:is(.Polaris-Button--primary) {
313
313
  --pc-button-color: var(--p-color-bg-fill-critical);
314
314
  --pc-button-text: var(--p-color-bg-surface);
315
315
  --pc-button-color-hover: var(--p-color-bg-fill-critical-hover);
316
316
  --pc-button-color-active: var(--p-color-bg-fill-critical-active);
317
317
  --pc-button-color-depressed: var(--p-color-bg-fill-critical-selected);
318
318
  box-shadow: var(--p-shadow-button-primary-critical);
319
- }/* Primary */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary {
319
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:is(.Polaris-Button--primary):active {
320
+ background: var(--pc-button-color-active);
321
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:not(.Polaris-Button--primary) {
322
+ --pc-button-text: var(--p-color-text-critical);
323
+ --pc-button-icon-fill: currentColor;
324
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:not(.Polaris-Button--primary):active {
325
+ --pc-button-text: var(--p-color-text-critical-active);
326
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--destructive:not(.Polaris-Button--primary):hover {
327
+ --pc-button-text: var(--p-color-text-critical-hover);
328
+ }/* Primary */html[class~="Polaris-Summer-Editions-2023"] .Polaris-Button.Polaris-Button--primary {
320
329
  --pc-button-bg-gradient: var(--p-color-button-gradient-bg-fill);
321
330
  --pc-button-color: var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);
322
331
  --pc-button-text: var(--p-color-bg-surface);
@@ -567,7 +576,12 @@
567
576
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-OptionList-Option__Checkbox .Polaris-Checkbox__Icon > svg {
568
577
  fill: var(--p-color-text-brand-on-bg-fill);
569
578
  color: var(--p-color-text-brand-on-bg-fill);
570
- }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header {
579
+ }.Polaris-OptionList-Option__Layout {
580
+ width: 100%;
581
+ display: flex;
582
+ justify-content: space-between;
583
+ align-items: center;
584
+ }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header {
571
585
  font-weight: var(--p-font-weight-bold);
572
586
  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-Page-Header--smallTitle .Polaris-Header-Title {
573
587
  font-size: var(--p-font-size-300);
@@ -0,0 +1,5 @@
1
+ <% if @multiple %>
2
+ <%= render Polaris::OptionList::CheckboxComponent.new(**system_arguments) %>
3
+ <% else %>
4
+ <%= render Polaris::OptionList::RadioButtonComponent.new(**system_arguments, prefix: prefix, suffix: suffix) %>
5
+ <% end %>
@@ -1,5 +1,8 @@
1
1
  module Polaris
2
2
  class Autocomplete::OptionComponent < Component
3
+ renders_one :prefix
4
+ renders_one :suffix
5
+
3
6
  def initialize(
4
7
  label:,
5
8
  multiple: false,
@@ -23,13 +26,5 @@ module Polaris
23
26
  prepend_option(args[:data], :action, "polaris-autocomplete#select")
24
27
  end
25
28
  end
26
-
27
- def call
28
- if @multiple
29
- render OptionList::CheckboxComponent.new(**system_arguments)
30
- else
31
- render OptionList::RadioButtonComponent.new(**system_arguments)
32
- end
33
- end
34
29
  end
35
30
  end
@@ -9,6 +9,8 @@
9
9
  <%= @initials %>
10
10
  </text>
11
11
  </svg>
12
+ <% elsif @icon %>
13
+ <%= polaris_icon(name: @icon) %>
12
14
  <% else %>
13
15
  <svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
14
16
  <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>
@@ -27,6 +27,7 @@ module Polaris
27
27
  size: SIZE_DEFAULT,
28
28
  shape: SHAPE_DEFAULT,
29
29
  source: nil,
30
+ icon: nil,
30
31
  **system_arguments
31
32
  )
32
33
  @customer = customer
@@ -35,6 +36,7 @@ module Polaris
35
36
  @size = size
36
37
  @shape = shape
37
38
  @source = source
39
+ @icon = icon
38
40
  @system_arguments = system_arguments
39
41
  end
40
42
 
@@ -23,6 +23,7 @@ module Polaris
23
23
  opts[:disabled] = true if @disabled
24
24
  opts[:aria] ||= {}
25
25
  opts[:aria][:checked] = @checked
26
+ opts[:checked] = @checked
26
27
  opts[:class] = opts.delete(:classes)
27
28
  end
28
29
  end
@@ -3,7 +3,7 @@ class Polaris::FormLayout::GroupComponent < Polaris::Component
3
3
 
4
4
  renders_many :items, "GroupItemComponent"
5
5
 
6
- def initialize(position:, condensed: false, **system_arguments)
6
+ def initialize(position:, condensed: false, wrapper_arguments: {}, **system_arguments)
7
7
  @position = position
8
8
 
9
9
  @system_arguments = system_arguments
@@ -13,7 +13,7 @@ class Polaris::FormLayout::GroupComponent < Polaris::Component
13
13
  "Polaris-FormLayout__Items"
14
14
  )
15
15
 
16
- @wrapper_arguments = {}
16
+ @wrapper_arguments = wrapper_arguments
17
17
  @wrapper_arguments[:tag] = "div"
18
18
  @wrapper_arguments[:role] = "group"
19
19
  @wrapper_arguments[:classes] = class_names(
@@ -27,31 +27,19 @@
27
27
  </div>
28
28
 
29
29
  <div class="Polaris-TopBar__RightContent">
30
- <div>
31
- <div class="Polaris-TopBar-Menu__ActivatorWrapper">
32
- <%= user_menu %>
30
+ <div class="Polaris-TopBar__SecondaryMenu">
31
+ <div>
32
+ <div class="Polaris-TopBar-Menu__ActivatorWrapper">
33
+ <%= secondary_menu %>
34
+ </div>
33
35
  </div>
34
36
  </div>
35
- </div>
36
-
37
37
 
38
- <%
39
- =begin%>
40
-
41
- <div class="Polaris-TopBar__Contents">
42
- <div class="Polaris-TopBar__SearchField">
43
- <%= search_field %>
44
- </div>
45
- <div class="Polaris-TopBar__SecondaryMenu">
46
- <%= secondary_menu %>
47
- </div>
48
38
  <div>
49
39
  <div class="Polaris-TopBar-Menu__ActivatorWrapper">
50
40
  <%= user_menu %>
51
41
  </div>
52
42
  </div>
53
43
  </div>
54
- <%
55
- =end%>
56
44
  </div>
57
45
  <% end %>
@@ -1,6 +1,7 @@
1
1
  class Polaris::Frame::TopBarComponent < Polaris::Component
2
2
  renders_one :user_menu, Polaris::TopBar::UserMenuComponent
3
3
  renders_one :search_field
4
+ renders_one :secondary_menu
4
5
 
5
6
  def initialize(logo:, **system_arguments)
6
7
  @logo = logo.is_a?(Hash) ? Polaris::Logo.new(**logo) : logo
@@ -28,7 +28,7 @@
28
28
  </div>
29
29
  <% end %>
30
30
 
31
- <div data-polaris-frame-target="navigationOverlay"></div>
31
+ <div data-polaris-frame-target="navigationOverlay" data-action="click->polaris-frame#closeMenu"></div>
32
32
 
33
33
  <main class="Polaris-Frame__Main">
34
34
  <div class="Polaris-Frame__Content">
@@ -1,19 +1,37 @@
1
1
  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
2
2
  <div class="Polaris-Navigation__ItemWrapper">
3
- <div class="Polaris-Navigation__ItemInnerWrapper">
4
- <%= link_to @url, **link_arguments do %>
5
- <% if @icon.present? %>
6
- <div class="Polaris-Navigation__Icon">
7
- <%= polaris_icon(name: @icon) %>
8
- </div>
3
+ <div class="<%= @item_inner_wrapper_classes %>">
4
+ <% if @action_type == :link %>
5
+ <%= link_to @url, **link_arguments do %>
6
+ <% if @icon.present? %>
7
+ <div class="Polaris-Navigation__Icon">
8
+ <%= polaris_icon(name: @icon) %>
9
+ </div>
10
+ <% end %>
11
+ <span class="Polaris-Navigation__Text">
12
+ <%= @label %>
13
+ </span>
14
+ <% if @badge.present? %>
15
+ <div class="Polaris-Navigation__Badge">
16
+ <%= polaris_badge { @badge } %>
17
+ </div>
18
+ <% end %>
9
19
  <% end %>
10
- <span class="Polaris-Navigation__Text">
11
- <%= @label %>
12
- </span>
13
- <% if @badge.present? %>
14
- <div class="Polaris-Navigation__Badge">
15
- <%= polaris_badge { @badge } %>
16
- </div>
20
+ <% else %>
21
+ <%= button_to @url, **link_arguments do %>
22
+ <% if @icon.present? %>
23
+ <div class="Polaris-Navigation__Icon">
24
+ <%= polaris_icon(name: @icon) %>
25
+ </div>
26
+ <% end %>
27
+ <span class="Polaris-Navigation__Text">
28
+ <%= @label %>
29
+ </span>
30
+ <% if @badge.present? %>
31
+ <div class="Polaris-Navigation__Badge">
32
+ <%= polaris_badge { @badge } %>
33
+ </div>
34
+ <% end %>
17
35
  <% end %>
18
36
  <% end %>
19
37
  <% if secondary_actions.present? %>
@@ -12,6 +12,7 @@ class Polaris::Navigation::ItemComponent < Polaris::Component
12
12
  selected: false,
13
13
  disabled: false,
14
14
  external: false,
15
+ action_type: :link,
15
16
  link_arguments: {},
16
17
  **system_arguments
17
18
  )
@@ -23,7 +24,9 @@ class Polaris::Navigation::ItemComponent < Polaris::Component
23
24
  @disabled = disabled
24
25
  @external = external
25
26
  @system_arguments = system_arguments
27
+ @action_type = action_type
26
28
  @link_arguments = link_arguments
29
+ @item_inner_wrapper_classes = item_inner_wrapper_classes
27
30
  end
28
31
 
29
32
  def system_arguments
@@ -47,6 +50,14 @@ class Polaris::Navigation::ItemComponent < Polaris::Component
47
50
  end
48
51
  end
49
52
 
53
+ def item_inner_wrapper_classes
54
+ class_names(
55
+ "Polaris-Navigation__ItemInnerWrapper",
56
+ "Polaris-Navigation__ItemInnerWrapper--selected": @selected,
57
+ "Polaris-Navigation__ItemInnerDisabled": @disabled
58
+ )
59
+ end
60
+
50
61
  def link_classes
51
62
  class_names(
52
63
  "Polaris-Navigation__Item",
@@ -0,0 +1,22 @@
1
+ <% pref = prefix || @prefix %>
2
+ <% suf = suffix || @suffix %>
3
+
4
+ <%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
5
+ <%= tag.label(
6
+ class: "Polaris-OptionList-Option__SingleSelectOption",
7
+ data: {
8
+ polaris_option_list_target: "radioButton",
9
+ action: "click->polaris-option-list#update"
10
+ }
11
+ ) do %>
12
+ <%= tag.div(class: "Polaris-OptionList-Option__Layout", style: suf.blank? ? "justify-content: normal;" : "") do %>
13
+ <% if pref %>
14
+ <%= tag.div(pref, style: "margin-right: 5px;") %>
15
+ <% end %>
16
+ <%= tag.div { safe_join [radio_button, @label] } %>
17
+ <% if suf %>
18
+ <%= tag.div(suf, style: "margin-left: 5px;") %>
19
+ <% end %>
20
+ <% end %>
21
+ <% end %>
22
+ <% end %>
@@ -1,12 +1,19 @@
1
1
  class Polaris::OptionList::RadioButtonComponent < Polaris::Component
2
+ renders_one :prefix
3
+ renders_one :suffix
4
+
2
5
  def initialize(
3
6
  label:,
4
7
  value:,
8
+ prefix: nil,
9
+ suffix: nil,
5
10
  wrapper_arguments: {},
6
11
  **system_arguments
7
12
  )
8
13
  @label = label
9
14
  @value = value
15
+ @prefix = prefix
16
+ @suffix = suffix
10
17
  @wrapper_arguments = wrapper_arguments
11
18
  @system_arguments = system_arguments
12
19
  end
@@ -31,23 +38,6 @@ class Polaris::OptionList::RadioButtonComponent < Polaris::Component
31
38
  end
32
39
  end
33
40
 
34
- def call
35
- render(Polaris::BaseComponent.new(**wrapper_arguments)) do
36
- tag.label(
37
- class: "Polaris-OptionList-Option__SingleSelectOption",
38
- data: {
39
- polaris_option_list_target: "radioButton",
40
- action: "click->polaris-option-list#update"
41
- }
42
- ) do
43
- safe_join [
44
- radio_button,
45
- @label
46
- ]
47
- end
48
- end
49
- end
50
-
51
41
  def radio_button
52
42
  render Polaris::BaseRadioButton.new(value: @value, **system_arguments)
53
43
  end
@@ -5,28 +5,57 @@
5
5
  class="Polaris-TopBar-Menu__Activator"
6
6
  data-action="polaris-popover#toggle click@window->polaris-popover#hide"
7
7
  >
8
- <span class="Polaris-TopBar-UserMenu__Details">
9
- <%= polaris_text(
10
- as: :p,
11
- font_weight: :medium,
12
- truncate: true,
13
- alignment: :start
14
- ) do %>
15
- <%= @name %>
16
- <% end %>
17
- <%= polaris_text(
18
- as: :p,
19
- variant: :bodySm,
20
- truncate: true,
21
- alignment: :start,
22
- color: :subdued
23
- ) do %>
24
- <%= @detail %>
25
- <% end %>
26
- </span>
27
- <div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
28
- <%= avatar %>
29
- </div>
8
+ <% if @show_avatar_first %>
9
+ <div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
10
+ <%= avatar %>
11
+ </div>
12
+ <span class="Polaris-TopBar-UserMenu__Details">
13
+ <%= polaris_text(
14
+ as: :p,
15
+ font_weight: :medium,
16
+ truncate: true,
17
+ alignment: :start
18
+ ) do %>
19
+ <%= @name %>
20
+ <% end %>
21
+ <% if @detail.present? %>
22
+ <%= polaris_text(
23
+ as: :p,
24
+ variant: :bodySm,
25
+ truncate: true,
26
+ alignment: :start,
27
+ color: :subdued
28
+ ) do %>
29
+ <%= @detail %>
30
+ <% end %>
31
+ <% end %>
32
+ </span>
33
+ <% else %>
34
+ <span class="Polaris-TopBar-UserMenu__Details">
35
+ <%= polaris_text(
36
+ as: :p,
37
+ font_weight: :medium,
38
+ truncate: true,
39
+ alignment: :start
40
+ ) do %>
41
+ <%= @name %>
42
+ <% end %>
43
+ <% if @detail.present? %>
44
+ <%= polaris_text(
45
+ as: :p,
46
+ variant: :bodySm,
47
+ truncate: true,
48
+ alignment: :start,
49
+ color: :subdued
50
+ ) do %>
51
+ <%= @detail %>
52
+ <% end %>
53
+ <% end %>
54
+ </span>
55
+ <div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
56
+ <%= avatar %>
57
+ </div>
58
+ <% end %>
30
59
  </button>
31
60
  <% end %>
32
61
 
@@ -1,9 +1,10 @@
1
1
  class Polaris::TopBar::UserMenuComponent < Polaris::Component
2
2
  renders_one :avatar, Polaris::AvatarComponent
3
3
 
4
- def initialize(name:, detail:, **system_arguments)
4
+ def initialize(name:, detail: nil, show_avatar_first: false, **system_arguments)
5
5
  @name = name
6
6
  @detail = detail
7
+ @show_avatar_first = show_avatar_first
7
8
  @system_arguments = system_arguments
8
9
  end
9
10
  end
@@ -100,7 +100,14 @@ module Polaris
100
100
  end
101
101
 
102
102
  def polaris_icon_source(name)
103
- path = ViewComponents::Engine.root.join("app", "assets", "icons", "polaris", "#{name}.svg")
103
+ paths = [
104
+ ViewComponents::Engine.root.join("app", "assets", "icons", "polaris", "#{name}.svg"),
105
+ Rails.root.join("app", "assets", "icons", "polaris", "#{name}.svg")
106
+ ]
107
+
108
+ path = paths.find { |path| File.exist?(path) }
109
+ return unless path
110
+
104
111
  file = File.read(path)
105
112
  doc = Nokogiri::HTML::DocumentFragment.parse(file)
106
113
  svg = doc.at_css "svg"
@@ -1,5 +1,5 @@
1
1
  module Polaris
2
2
  module ViewComponents
3
- VERSION = "2.1.0"
3
+ VERSION = "2.2.2"
4
4
  end
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: polaris_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.1.0
4
+ version: 2.2.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Dan Gamble
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-05-01 00:00:00.000000000 Z
12
+ date: 2024-08-26 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
@@ -706,6 +706,7 @@ files:
706
706
  - app/components/polaris/action_list_component.html.erb
707
707
  - app/components/polaris/action_list_component.rb
708
708
  - app/components/polaris/autocomplete/action_component.rb
709
+ - app/components/polaris/autocomplete/option_component.html.erb
709
710
  - app/components/polaris/autocomplete/option_component.rb
710
711
  - app/components/polaris/autocomplete/section_component.html.erb
711
712
  - app/components/polaris/autocomplete/section_component.rb
@@ -822,6 +823,7 @@ files:
822
823
  - app/components/polaris/option_list/checkbox_component.html.erb
823
824
  - app/components/polaris/option_list/checkbox_component.rb
824
825
  - app/components/polaris/option_list/option_component.rb
826
+ - app/components/polaris/option_list/radio_button_component.html.erb
825
827
  - app/components/polaris/option_list/radio_button_component.rb
826
828
  - app/components/polaris/option_list/section_component.html.erb
827
829
  - app/components/polaris/option_list/section_component.rb
@@ -934,7 +936,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
934
936
  - !ruby/object:Gem::Version
935
937
  version: '0'
936
938
  requirements: []
937
- rubygems_version: 3.5.8
939
+ rubygems_version: 3.5.10
938
940
  signing_key:
939
941
  specification_version: 4
940
942
  summary: ViewComponents for Polaris Design System