openproject-primer_view_components 0.46.0 → 0.47.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +26 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/select_panel.css +1 -0
  8. data/app/components/primer/alpha/select_panel.css.json +7 -0
  9. data/app/components/primer/alpha/select_panel.css.map +1 -0
  10. data/app/components/primer/alpha/select_panel.html.erb +15 -14
  11. data/app/components/primer/alpha/select_panel.pcss +7 -0
  12. data/app/components/primer/alpha/select_panel.rb +43 -4
  13. data/app/components/primer/alpha/select_panel_element.js +6 -6
  14. data/app/components/primer/alpha/select_panel_element.ts +6 -5
  15. data/app/components/primer/beta/label.css +1 -1
  16. data/app/components/primer/beta/label.css.map +1 -1
  17. data/app/components/primer/beta/label.pcss +3 -4
  18. data/app/components/primer/component.rb +4 -0
  19. data/app/components/primer/open_project/sub_header.rb +6 -12
  20. data/app/components/primer/primer.pcss +1 -0
  21. data/lib/primer/forms/primer_text_field.js +1 -0
  22. data/lib/primer/forms/primer_text_field.ts +1 -0
  23. data/lib/primer/view_components/version.rb +1 -1
  24. data/previews/primer/alpha/select_panel_preview/list_of_links.html.erb +1 -1
  25. data/previews/primer/alpha/select_panel_preview/local_fetch.html.erb +2 -1
  26. data/previews/primer/alpha/select_panel_preview.rb +7 -7
  27. data/static/classes.json +6 -0
  28. data/static/constants.json +2 -1
  29. metadata +6 -2
@@ -0,0 +1 @@
1
+ .SelectPanel-emptyPanel,.SelectPanel-loadingPanel{min-height:min(var(--overlay-height) - 10rem,100vh - 2rem)}
@@ -0,0 +1,7 @@
1
+ {
2
+ "name": "alpha/select_panel",
3
+ "selectors": [
4
+ ".SelectPanel-emptyPanel",
5
+ ".SelectPanel-loadingPanel"
6
+ ]
7
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["select_panel.pcss"],"names":[],"mappings":"AAIA,kDACE,0DACF","file":"select_panel.css","sourcesContent":[".SelectPanel-loadingPanel {\n min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);\n}\n\n.SelectPanel-emptyPanel {\n min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);\n}\n"]}
@@ -2,7 +2,7 @@
2
2
  <dialog-helper>
3
3
  <%= show_button %>
4
4
  <%= render(@dialog) do %>
5
- <%= render Primer::Alpha::Dialog::Header.new(id: "#{@panel_id}-dialog", title: @title) do |header| %>
5
+ <%= render Primer::Alpha::Dialog::Header.new(id: "#{@panel_id}-dialog", title: @title, show_divider: show_filter?) do |header| %>
6
6
  <% if subtitle? %>
7
7
  <% header.with_subtitle do %>
8
8
  <%= subtitle %>
@@ -10,6 +10,15 @@
10
10
  <% end %>
11
11
  <% if show_filter? %>
12
12
  <% header.with_filter do %>
13
+ <div data-target="select-panel.bannerErrorElement" hidden>
14
+ <%= render Primer::Alpha::Banner.new(scheme: :danger, mb: 2) do %>
15
+ <% if error_content? %>
16
+ <%= error_content %>
17
+ <% else %>
18
+ <h2 class="f6 text-normal">Sorry, something went wrong.</h2>
19
+ <% end %>
20
+ <% end %>
21
+ </div>
13
22
  <%= render(Primer::BaseComponent.new(
14
23
  tag: :"remote-input",
15
24
  aria: { owns: @body_id },
@@ -36,16 +45,7 @@
36
45
  <% end %>
37
46
  <% end %>
38
47
  <% end %>
39
- <div data-target="select-panel.bannerErrorElement" hidden>
40
- <%= render Primer::Alpha::Banner.new(scheme: :danger, full: true, mt: 2) do %>
41
- <% if error_content? %>
42
- <%= error_content %>
43
- <% else %>
44
- <h2 class="f5">Sorry, something went wrong.</h2>
45
- <% end %>
46
- <% end %>
47
- </div>
48
- <%= render Primer::Alpha::Dialog::Body.new(mt: 2, p: 0) do %>
48
+ <%= render Primer::Alpha::Dialog::Body.new(mt: show_filter? ? 0 : 2, p: 0) do %>
49
49
  <focus-group direction="vertical" mnemonics retain>
50
50
  <div class="sr-only" aria-live="polite" aria-atomic="true" data-target="select-panel.ariaLiveContainer"></div>
51
51
  <%= render(Primer::BaseComponent.new(
@@ -67,7 +67,8 @@
67
67
  display: :flex,
68
68
  align_items: :center,
69
69
  justify_content: :center,
70
- text_align: :center
70
+ text_align: :center,
71
+ classes: "SelectPanel-loadingPanel"
71
72
  )) do %>
72
73
  <div data-hide-on-error>
73
74
  <%= render Primer::Beta::Spinner.new(aria: { label: "Loading content..." }, data: { target: "select-panel.bodySpinner" }) %>
@@ -78,7 +79,7 @@
78
79
  <% else %>
79
80
  <div class="pt-2 pb-2">
80
81
  <%= render Primer::Beta::Octicon.new(icon: :alert, color: :danger) %>
81
- <h2 class="f5">Sorry, something went wrong.</h2>
82
+ <h2 class="f5 mt-2">Sorry, something went wrong.</h2>
82
83
  </div>
83
84
  <% end %>
84
85
  </div>
@@ -88,7 +89,7 @@
88
89
  <%= render(@list) %>
89
90
  <% end %>
90
91
  </div>
91
- <div data-target="select-panel.noResults" class="color-border-muted text-center" hidden>
92
+ <div data-target="select-panel.noResults" class="color-border-muted text-center d-flex flex-items-center flex-justify-center SelectPanel-emptyPanel" hidden>
92
93
  <h2 class="v-align-middle m-3 f5"><%= @no_results_label %></h2>
93
94
  </div>
94
95
  <% end %>
@@ -0,0 +1,7 @@
1
+ .SelectPanel-loadingPanel {
2
+ min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);
3
+ }
4
+
5
+ .SelectPanel-emptyPanel {
6
+ min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);
7
+ }
@@ -250,10 +250,28 @@ module Primer
250
250
  # )
251
251
  # ```
252
252
  class SelectPanel < Primer::Component
253
+ # @private
254
+ module Utils
255
+ def raise_if_role_given!(**system_arguments)
256
+ return if shouldnt_raise_error?
257
+ return unless system_arguments.include?(:role)
258
+
259
+ raise(
260
+ "Please avoid passing the `role:` argument to `SelectPanel` and its subcomponents. "\
261
+ "The component will automatically apply the correct roles where necessary."
262
+ )
263
+ end
264
+ end
265
+
266
+ include Utils
267
+
253
268
  # The component that should be used to render the list of items in the body of a SelectPanel.
254
269
  class ItemList < Primer::Alpha::ActionList
270
+ include Utils
271
+
255
272
  # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>.
256
273
  def initialize(**system_arguments)
274
+ raise_if_role_given!(**system_arguments)
257
275
  select_variant = system_arguments[:select_variant] || Primer::Alpha::ActionList::DEFAULT_SELECT_VARIANT
258
276
 
259
277
  super(
@@ -263,6 +281,16 @@ module Primer
263
281
  **system_arguments
264
282
  )
265
283
  end
284
+
285
+ def with_item(**system_arguments)
286
+ raise_if_role_given!(**system_arguments)
287
+ super
288
+ end
289
+
290
+ def with_avatar_item(**system_arguments)
291
+ raise_if_role_given!(**system_arguments)
292
+ super
293
+ end
266
294
  end
267
295
 
268
296
  status :alpha
@@ -362,6 +390,8 @@ module Primer
362
390
  anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
363
391
  **system_arguments
364
392
  )
393
+ raise_if_role_given!(**system_arguments)
394
+
365
395
  if src.present?
366
396
  url = URI(src)
367
397
  query = url.query || ""
@@ -419,12 +449,21 @@ module Primer
419
449
  form_arguments: form_arguments,
420
450
  id: "#{@panel_id}-list",
421
451
  select_variant: @select_variant,
422
- role: "listbox",
423
- aria_selection_variant: @select_variant == :multiple ? :checked : :selected,
424
452
  aria: {
425
453
  label: "#{title} options"
426
- },
427
- p: 2
454
+ }
455
+ )
456
+
457
+ return if @show_filter || @fetch_strategy != :remote
458
+ return if shouldnt_raise_error?
459
+
460
+ raise(
461
+ "Hiding the filter input with a remote fetch strategy is not permitted, "\
462
+ "since such a combinaton of options will cause the component to only "\
463
+ "fetch items from the server once when the panel opens for the first time; "\
464
+ "this is what the `:eventually_local` fetch strategy is designed to do. "\
465
+ "Consider passing `show_filter: true` or use the `:eventually_local` fetch "\
466
+ "strategy instead."
428
467
  )
429
468
  end
430
469
 
@@ -435,12 +435,7 @@ _SelectPanelElement_updateTabIndices = function _SelectPanelElement_updateTabInd
435
435
  const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
436
436
  if (!itemContent)
437
437
  continue;
438
- if (!this.isItemHidden(item) && !setZeroTabIndex) {
439
- setZeroTabIndex = true;
440
- }
441
- else {
442
- itemContent.setAttribute('tabindex', '-1');
443
- }
438
+ itemContent.setAttribute('tabindex', '-1');
444
439
  // <li> elements should not themselves be tabbable
445
440
  item.removeAttribute('tabindex');
446
441
  }
@@ -718,6 +713,8 @@ _SelectPanelElement_inErrorState = function _SelectPanelElement_inErrorState() {
718
713
  if (this.fragmentErrorElement && !this.fragmentErrorElement.hasAttribute('hidden')) {
719
714
  return true;
720
715
  }
716
+ if (!this.bannerErrorElement)
717
+ return false;
721
718
  return !this.bannerErrorElement.hasAttribute('hidden');
722
719
  };
723
720
  _SelectPanelElement_setErrorState = function _SelectPanelElement_setErrorState(type) {
@@ -841,6 +838,9 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
841
838
  return;
842
839
  const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
843
840
  if (this.selectVariant === 'single') {
841
+ // Don't check anything if we have an href
842
+ if (itemContent?.getAttribute('href'))
843
+ return;
844
844
  // disallow unchecking checked item in single-select mode
845
845
  if (!currentlyChecked) {
846
846
  for (const el of this.items) {
@@ -314,11 +314,7 @@ export class SelectPanelElement extends HTMLElement {
314
314
  const itemContent = this.#getItemContent(item)
315
315
  if (!itemContent) continue
316
316
 
317
- if (!this.isItemHidden(item) && !setZeroTabIndex) {
318
- setZeroTabIndex = true
319
- } else {
320
- itemContent.setAttribute('tabindex', '-1')
321
- }
317
+ itemContent.setAttribute('tabindex', '-1')
322
318
 
323
319
  // <li> elements should not themselves be tabbable
324
320
  item.removeAttribute('tabindex')
@@ -742,6 +738,8 @@ export class SelectPanelElement extends HTMLElement {
742
738
  return true
743
739
  }
744
740
 
741
+ if (!this.bannerErrorElement) return false
742
+
745
743
  return !this.bannerErrorElement.hasAttribute('hidden')
746
744
  }
747
745
 
@@ -882,6 +880,9 @@ export class SelectPanelElement extends HTMLElement {
882
880
  const itemContent = this.#getItemContent(item)
883
881
 
884
882
  if (this.selectVariant === 'single') {
883
+ // Don't check anything if we have an href
884
+ if (itemContent?.getAttribute('href')) return
885
+
885
886
  // disallow unchecking checked item in single-select mode
886
887
  if (!currentlyChecked) {
887
888
  for (const el of this.items) {
@@ -1 +1 @@
1
- .labels{position:relative}.Label,.label{border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:2em;display:inline-block;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-medium);line-height:18px;padding:0 7px;white-space:nowrap}:is(.label,.Label):hover{-webkit-text-decoration:none;text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis);color:var(--fgColor-default)}.Label--secondary{border-color:var(--borderColor-default);color:var(--fgColor-muted)}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis);color:var(--fgColor-accent)}.Label--success{border-color:var(--borderColor-success-emphasis);color:var(--fgColor-success)}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis);color:var(--fgColor-attention)}.Label--severe{border-color:var(--borderColor-severe-emphasis);color:var(--fgColor-severe)}.Label--danger{border-color:var(--borderColor-danger-emphasis);color:var(--fgColor-danger)}.Label--open{border-color:var(--borderColor-open-emphasis);color:var(--fgColor-open)}.Label--closed{border-color:var(--borderColor-closed-emphasis);color:var(--fgColor-closed)}.Label--done{border-color:var(--borderColor-done-emphasis);color:var(--fgColor-done)}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis);color:var(--fgColor-sponsors)}
1
+ .labels{position:relative}.Label,.label{border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-full);display:inline-block;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-medium);line-height:18px;padding:0 var(--base-size-6);white-space:nowrap}:is(.label,.Label):hover{-webkit-text-decoration:none;text-decoration:none}.Label--large{line-height:22px;padding:0 var(--base-size-8)}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis);color:var(--fgColor-default)}.Label--secondary{border-color:var(--borderColor-default);color:var(--fgColor-muted)}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis);color:var(--fgColor-accent)}.Label--success{border-color:var(--borderColor-success-emphasis);color:var(--fgColor-success)}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis);color:var(--fgColor-attention)}.Label--severe{border-color:var(--borderColor-severe-emphasis);color:var(--fgColor-severe)}.Label--danger{border-color:var(--borderColor-danger-emphasis);color:var(--fgColor-danger)}.Label--open{border-color:var(--borderColor-open-emphasis);color:var(--fgColor-open)}.Label--closed{border-color:var(--borderColor-closed-emphasis);color:var(--fgColor-closed)}.Label--done{border-color:var(--borderColor-done-emphasis);color:var(--fgColor-done)}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis);color:var(--fgColor-sponsors)}
@@ -1 +1 @@
1
- {"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,+DAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,qCAAsC,CACtC,0CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,yBACE,4BAAqB,CAArB,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,gDAAiD,CADjD,4BAEF,CAEA,kBAEE,uCAAwC,CADxC,0BAEF,CAIA,4BAGE,+CAAgD,CADhD,2BAEF,CAEA,gBAEE,gDAAiD,CADjD,4BAEF,CAEA,kCAGE,kDAAmD,CADnD,8BAEF,CAEA,eAEE,+CAAgD,CADhD,2BAEF,CAEA,eAEE,+CAAgD,CADhD,2BAEF,CAEA,aAEE,6CAA8C,CAD9C,yBAEF,CAEA,eAEE,+CAAgD,CADhD,2BAEF,CAEA,aAEE,6CAA8C,CAD9C,yBAEF,CAEA,iBAEE,iDAAkD,CADlD,6BAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n display: inline-block;\n padding: 0 7px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: 18px;\n white-space: nowrap;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: 2em;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* Large 24px */\n\n.Label--large {\n padding-right: 10px;\n padding-left: 10px;\n line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n display: inline;\n padding: 0.12em 0.5em;\n font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n color: var(--fgColor-default);\n border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n color: var(--fgColor-muted);\n border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n color: var(--fgColor-accent);\n border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n color: var(--fgColor-success);\n border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n color: var(--fgColor-attention);\n border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n color: var(--fgColor-severe);\n border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n color: var(--fgColor-danger);\n border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n color: var(--fgColor-open);\n border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n color: var(--fgColor-closed);\n border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n color: var(--fgColor-done);\n border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n color: var(--fgColor-sponsors);\n border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}
1
+ {"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,+DAAgE,CAChE,sCAAuC,CAPvC,oBAAqB,CAErB,qCAAsC,CACtC,0CAA2C,CAC3C,gBAAiB,CAHjB,4BAA6B,CAI7B,kBAOF,CAHE,yBACE,4BAAqB,CAArB,oBACF,CAKF,cAEE,gBAAiB,CADjB,4BAEF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,gDAAiD,CADjD,4BAEF,CAEA,kBAEE,uCAAwC,CADxC,0BAEF,CAIA,4BAGE,+CAAgD,CADhD,2BAEF,CAEA,gBAEE,gDAAiD,CADjD,4BAEF,CAEA,kCAGE,kDAAmD,CADnD,8BAEF,CAEA,eAEE,+CAAgD,CADhD,2BAEF,CAEA,eAEE,+CAAgD,CADhD,2BAEF,CAEA,aAEE,6CAA8C,CAD9C,yBAEF,CAEA,eAEE,+CAAgD,CADhD,2BAEF,CAEA,aAEE,6CAA8C,CAD9C,yBAEF,CAEA,iBAEE,iDAAkD,CADlD,6BAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n display: inline-block;\n padding: 0 var(--base-size-6);\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: 18px;\n white-space: nowrap;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-full);\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* Large 24px */\n\n.Label--large {\n padding: 0 var(--base-size-8);\n line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n display: inline;\n padding: 0.12em 0.5em;\n font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n color: var(--fgColor-default);\n border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n color: var(--fgColor-muted);\n border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n color: var(--fgColor-accent);\n border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n color: var(--fgColor-success);\n border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n color: var(--fgColor-attention);\n border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n color: var(--fgColor-severe);\n border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n color: var(--fgColor-danger);\n border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n color: var(--fgColor-open);\n border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n color: var(--fgColor-closed);\n border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n color: var(--fgColor-done);\n border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n color: var(--fgColor-sponsors);\n border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}
@@ -10,13 +10,13 @@
10
10
  .label, /* TODO: Deprecate */
11
11
  .Label {
12
12
  display: inline-block;
13
- padding: 0 7px;
13
+ padding: 0 var(--base-size-6);
14
14
  font-size: var(--text-body-size-small);
15
15
  font-weight: var(--base-text-weight-medium);
16
16
  line-height: 18px;
17
17
  white-space: nowrap;
18
18
  border: var(--borderWidth-thin) solid var(--borderColor-default);
19
- border-radius: 2em;
19
+ border-radius: var(--borderRadius-full);
20
20
 
21
21
  &:hover {
22
22
  text-decoration: none;
@@ -26,8 +26,7 @@
26
26
  /* Large 24px */
27
27
 
28
28
  .Label--large {
29
- padding-right: 10px;
30
- padding-left: 10px;
29
+ padding: 0 var(--base-size-8);
31
30
  line-height: 22px;
32
31
  }
33
32
 
@@ -141,6 +141,10 @@ module Primer
141
141
  !Rails.env.production? && raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
142
142
  end
143
143
 
144
+ def shouldnt_raise_error?
145
+ !should_raise_error?
146
+ end
147
+
144
148
  def should_raise_aria_error?
145
149
  !Rails.env.production? && raise_on_invalid_aria? && !ENV["PRIMER_WARNINGS_DISABLED"]
146
150
  end
@@ -47,22 +47,16 @@ module Primer
47
47
  system_arguments[:input_width] ||= :medium
48
48
 
49
49
  system_arguments[:data] ||= {}
50
- system_arguments[:data][:target]= "sub-header.filterInput"
50
+ system_arguments[:data] = merge_data(
51
+ system_arguments,
52
+ { data: { target: "sub-header.filterInput" } }
53
+ )
51
54
 
52
55
  system_arguments[:show_clear_button] = true if system_arguments[:show_clear_button].nil?
53
56
 
54
57
  if system_arguments[:show_clear_button]
55
- system_arguments[:data] = merge_data(
56
- system_arguments,
57
- {
58
- data: {
59
- action: <<~JS
60
- input:sub-header#toggleFilterInputClearButton
61
- focus:sub-header#toggleFilterInputClearButton
62
- JS
63
- }
64
- }
65
- )
58
+ system_arguments[:data][:action] ||= ""
59
+ system_arguments[:data][:action] += " input:sub-header#toggleFilterInputClearButton focus:sub-header#toggleFilterInputClearButton"
66
60
  end
67
61
 
68
62
  @mobile_filter_trigger = Primer::Beta::IconButton.new(icon: system_arguments[:leading_visual][:icon],
@@ -12,6 +12,7 @@
12
12
  @import "./alpha/button_marketing.pcss";
13
13
  @import "./alpha/toggle_switch.pcss";
14
14
  @import "./alpha/underline_nav.pcss";
15
+ @import "./alpha/select_panel.pcss";
15
16
  @import "./alpha/segmented_control.pcss";
16
17
  @import "./alpha/menu.pcss";
17
18
 
@@ -47,6 +47,7 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
47
47
  clearContents() {
48
48
  this.inputElement.value = '';
49
49
  this.inputElement.focus();
50
+ this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: false }));
50
51
  }
51
52
  clearError() {
52
53
  this.inputElement.removeAttribute('invalid');
@@ -57,6 +57,7 @@ export class PrimerTextFieldElement extends HTMLElement {
57
57
  clearContents() {
58
58
  this.inputElement.value = ''
59
59
  this.inputElement.focus()
60
+ this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: false }))
60
61
  }
61
62
 
62
63
  clearError(): void {
@@ -5,7 +5,7 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 46
8
+ MINOR = 47
9
9
  PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
@@ -8,7 +8,7 @@
8
8
  )) do |panel| %>
9
9
  <% panel.with_show_button { "Panel" } %>
10
10
  <% panel.with_item(label: "GitHub", href: "https://github.com") %>
11
- <% panel.with_item(label: "Microsoft", href: "https://microsoft.com") %>
11
+ <% panel.with_item(label: "Microsoft", href: "https://microsoft.com", active: true) %>
12
12
  <% panel.with_item(label: "Primer", href: "https://primer.style") %>
13
13
  <% panel.with_item(label: "Catalyst", href: "https://catalyst.rocks") %>
14
14
  <% end %>
@@ -4,7 +4,8 @@
4
4
  data: { interaction_subject: subject_id },
5
5
  select_variant: :multiple,
6
6
  fetch_strategy: :local,
7
- open_on_load: open_on_load
7
+ open_on_load: open_on_load,
8
+ show_filter: show_filter,
8
9
  )) do |panel| %>
9
10
  <% panel.with_show_button { "Panel" } %>
10
11
  <% panel.with_item(label: "Item 1") %>
@@ -14,7 +14,6 @@ module Primer
14
14
  # @param dynamic_label toggle
15
15
  # @param dynamic_label_prefix text
16
16
  # @param dynamic_aria_label_prefix text
17
- # @param show_filter toggle
18
17
  # @param open_on_load toggle
19
18
  # @param anchor_align [Symbol] select [start, center, end]
20
19
  # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
@@ -29,7 +28,6 @@ module Primer
29
28
  dynamic_label: false,
30
29
  dynamic_label_prefix: nil,
31
30
  dynamic_aria_label_prefix: nil,
32
- show_filter: true,
33
31
  open_on_load: false,
34
32
  anchor_align: :start,
35
33
  anchor_side: :outside_bottom,
@@ -47,7 +45,6 @@ module Primer
47
45
  dynamic_label: dynamic_label,
48
46
  dynamic_label_prefix: dynamic_label_prefix,
49
47
  dynamic_aria_label_prefix: dynamic_aria_label_prefix,
50
- show_filter: show_filter,
51
48
  open_on_load: open_on_load,
52
49
  anchor_align: anchor_align,
53
50
  anchor_side: anchor_side
@@ -59,9 +56,11 @@ module Primer
59
56
  #
60
57
  # @snapshot interactive
61
58
  # @param open_on_load toggle
62
- def default(open_on_load: false)
59
+ # @param show_filter toggle
60
+ def default(open_on_load: false, show_filter: true)
63
61
  render_with_template(template: "primer/alpha/select_panel_preview/local_fetch", locals: {
64
- open_on_load: open_on_load
62
+ open_on_load: open_on_load,
63
+ show_filter: show_filter
65
64
  })
66
65
  end
67
66
 
@@ -69,8 +68,9 @@ module Primer
69
68
  #
70
69
  # @snapshot interactive
71
70
  # @param open_on_load toggle
72
- def local_fetch(open_on_load: false)
73
- render_with_template(locals: { open_on_load: open_on_load })
71
+ # @param show_filter toggle
72
+ def local_fetch(open_on_load: false, show_filter: true)
73
+ render_with_template(locals: { open_on_load: open_on_load, show_filter: show_filter })
74
74
  end
75
75
 
76
76
  # @label Eventually local fetch
data/static/classes.json CHANGED
@@ -546,6 +546,12 @@
546
546
  "SegmentedControl-item": [
547
547
  "Primer::Alpha::SegmentedControl"
548
548
  ],
549
+ "SelectPanel-emptyPanel": [
550
+ "Primer::Alpha::SelectPanel"
551
+ ],
552
+ "SelectPanel-loadingPanel": [
553
+ "Primer::Alpha::SelectPanel"
554
+ ],
549
555
  "SidePanel-sectionAction": [
550
556
  "Primer::OpenProject::SidePanel::Section"
551
557
  ],
@@ -611,7 +611,8 @@
611
611
  "single",
612
612
  "multiple",
613
613
  "none"
614
- ]
614
+ ],
615
+ "Utils": "Primer::Alpha::SelectPanel::Utils"
615
616
  },
616
617
  "Primer::Alpha::SelectPanel::ItemList": {
617
618
  },
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: openproject-primer_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.46.0
4
+ version: 0.47.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-09-10 00:00:00.000000000 Z
12
+ date: 2024-09-13 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionview
@@ -259,7 +259,11 @@ files:
259
259
  - app/components/primer/alpha/segmented_control/item.html.erb
260
260
  - app/components/primer/alpha/segmented_control/item.rb
261
261
  - app/components/primer/alpha/select.rb
262
+ - app/components/primer/alpha/select_panel.css
263
+ - app/components/primer/alpha/select_panel.css.json
264
+ - app/components/primer/alpha/select_panel.css.map
262
265
  - app/components/primer/alpha/select_panel.html.erb
266
+ - app/components/primer/alpha/select_panel.pcss
263
267
  - app/components/primer/alpha/select_panel.rb
264
268
  - app/components/primer/alpha/select_panel_element.d.ts
265
269
  - app/components/primer/alpha/select_panel_element.js