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.
- 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
|