openproject-primer_view_components 0.46.0 → 0.47.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +26 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/select_panel.css +1 -0
- data/app/components/primer/alpha/select_panel.css.json +7 -0
- data/app/components/primer/alpha/select_panel.css.map +1 -0
- data/app/components/primer/alpha/select_panel.html.erb +15 -14
- data/app/components/primer/alpha/select_panel.pcss +7 -0
- data/app/components/primer/alpha/select_panel.rb +43 -4
- data/app/components/primer/alpha/select_panel_element.js +6 -6
- data/app/components/primer/alpha/select_panel_element.ts +6 -5
- data/app/components/primer/beta/label.css +1 -1
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/label.pcss +3 -4
- data/app/components/primer/component.rb +4 -0
- data/app/components/primer/open_project/sub_header.rb +6 -12
- data/app/components/primer/primer.pcss +1 -0
- data/lib/primer/forms/primer_text_field.js +1 -0
- data/lib/primer/forms/primer_text_field.ts +1 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/alpha/select_panel_preview/list_of_links.html.erb +1 -1
- data/previews/primer/alpha/select_panel_preview/local_fetch.html.erb +2 -1
- data/previews/primer/alpha/select_panel_preview.rb +7 -7
- data/static/classes.json +6 -0
- data/static/constants.json +2 -1
- metadata +6 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.SelectPanel-emptyPanel,.SelectPanel-loadingPanel{min-height:min(var(--overlay-height) - 10rem,100vh - 2rem)}
|
|
@@ -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
|
-
|
|
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 %>
|
|
@@ -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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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:
|
|
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,
|
|
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
|
|
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:
|
|
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
|
|
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]
|
|
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]
|
|
56
|
-
|
|
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],
|
|
@@ -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 {
|
|
@@ -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
|
-
|
|
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
|
-
|
|
73
|
-
|
|
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
|
],
|
data/static/constants.json
CHANGED
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.
|
|
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-
|
|
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
|