openproject-primer_view_components 0.32.1 → 0.33.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +18 -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/toggle_switch.js +1 -1
- data/app/components/primer/alpha/toggle_switch.rb +16 -4
- data/app/components/primer/alpha/toggle_switch.ts +1 -1
- data/app/components/primer/beta/clipboard_copy.html.erb +9 -6
- data/app/components/primer/beta/clipboard_copy.js +15 -0
- data/app/components/primer/beta/clipboard_copy.rb +2 -0
- data/app/components/primer/beta/clipboard_copy.ts +14 -0
- data/app/components/primer/beta/clipboard_copy_button.rb +2 -0
- data/app/components/primer/open_project/page_header.css +1 -1
- data/app/components/primer/open_project/page_header.css.json +3 -3
- data/app/components/primer/open_project/page_header.css.map +1 -1
- data/app/components/primer/open_project/page_header.pcss +6 -6
- data/app/components/primer/open_project/page_header.rb +1 -1
- data/app/lib/primer/attributes_helper.rb +1 -1
- data/lib/primer/forms/toggle_switch.html.erb +1 -9
- data/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/alpha/toggle_switch_preview.rb +1 -1
- data/previews/primer/beta/label_preview.rb +7 -2
- data/previews/primer/forms_preview/example_toggle_switch_form.html.erb +2 -2
- data/static/classes.json +1 -4
- data/static/info_arch.json +2 -2
- metadata +2 -2
@@ -20,7 +20,7 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
|
|
20
20
|
}
|
21
21
|
get csrf() {
|
22
22
|
const csrfElement = this.querySelector('[data-csrf]');
|
23
|
-
return this.getAttribute('csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null;
|
23
|
+
return this.getAttribute('data-csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null;
|
24
24
|
}
|
25
25
|
get csrfField() {
|
26
26
|
// the authenticity token is passed into the element and is not generated in js land
|
@@ -56,10 +56,6 @@ module Primer
|
|
56
56
|
}
|
57
57
|
|
58
58
|
@system_arguments[:src] = @src if @src
|
59
|
-
|
60
|
-
return unless @src && @csrf_token
|
61
|
-
|
62
|
-
@system_arguments[:csrf] = @csrf_token
|
63
59
|
end
|
64
60
|
|
65
61
|
def on?
|
@@ -73,6 +69,22 @@ module Primer
|
|
73
69
|
def disabled?
|
74
70
|
!enabled?
|
75
71
|
end
|
72
|
+
|
73
|
+
private
|
74
|
+
|
75
|
+
def before_render
|
76
|
+
@csrf_token ||= view_context.form_authenticity_token(
|
77
|
+
form_options: {
|
78
|
+
method: :post,
|
79
|
+
action: @src
|
80
|
+
}
|
81
|
+
)
|
82
|
+
|
83
|
+
@system_arguments[:data] = merge_data(
|
84
|
+
@system_arguments,
|
85
|
+
{ data: { csrf: @csrf_token } }
|
86
|
+
)
|
87
|
+
end
|
76
88
|
end
|
77
89
|
end
|
78
90
|
end
|
@@ -19,7 +19,7 @@ class ToggleSwitchElement extends HTMLElement {
|
|
19
19
|
|
20
20
|
get csrf(): string | null {
|
21
21
|
const csrfElement = this.querySelector('[data-csrf]')
|
22
|
-
return this.getAttribute('csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null
|
22
|
+
return this.getAttribute('data-csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null
|
23
23
|
}
|
24
24
|
|
25
25
|
get csrfField(): string {
|
@@ -1,8 +1,11 @@
|
|
1
|
-
<%= render Primer::BaseComponent.new(
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
1
|
+
<%= render Primer::BaseComponent.new(tag: :span) do %>
|
2
|
+
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
3
|
+
<% if content.present? %>
|
4
|
+
<%= content %>
|
5
|
+
<% else %>
|
6
|
+
<%= render Primer::Beta::Octicon.new(:copy) %>
|
7
|
+
<%= render Primer::Beta::Octicon.new(:check, color: :success, style: "display: none;") %>
|
8
|
+
<% end %>
|
7
9
|
<% end %>
|
10
|
+
<div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div>
|
8
11
|
<% end %>
|
@@ -29,12 +29,27 @@ document.addEventListener('clipboard-copy', ({ target }) => {
|
|
29
29
|
if (!target.hasAttribute('data-view-component'))
|
30
30
|
return;
|
31
31
|
const currentTimeout = clipboardCopyElementTimers.get(target);
|
32
|
+
const clipboardCopyLiveRegion = target.parentNode?.querySelector('[data-clipboard-copy-feedback]');
|
33
|
+
const copiedAnnouncement = 'Copied!';
|
32
34
|
if (currentTimeout) {
|
33
35
|
clearTimeout(currentTimeout);
|
34
36
|
clipboardCopyElementTimers.delete(target);
|
35
37
|
}
|
36
38
|
else {
|
37
39
|
showCheck(target);
|
40
|
+
if (clipboardCopyLiveRegion) {
|
41
|
+
if (clipboardCopyLiveRegion.textContent === copiedAnnouncement) {
|
42
|
+
/* This is a hack due to the way the aria live API works.
|
43
|
+
A screen reader will not read a live region again
|
44
|
+
if the text is the same. Adding a space character tells
|
45
|
+
the browser that the live region has updated,
|
46
|
+
which will cause it to read again, but with no audible difference. */
|
47
|
+
clipboardCopyLiveRegion.textContent = `${copiedAnnouncement}\u00A0`;
|
48
|
+
}
|
49
|
+
else {
|
50
|
+
clipboardCopyLiveRegion.textContent = copiedAnnouncement;
|
51
|
+
}
|
52
|
+
}
|
38
53
|
}
|
39
54
|
clipboardCopyElementTimers.set(target, setTimeout(() => {
|
40
55
|
showCopy(target);
|
@@ -10,6 +10,8 @@ module Primer
|
|
10
10
|
#
|
11
11
|
# @accessibility
|
12
12
|
# Always set an accessible label to help the user interact with the component.
|
13
|
+
#
|
14
|
+
# This component has a built-in `aria-live` region that announces "Copied!" when the copy element is pressed.
|
13
15
|
class ClipboardCopy < Primer::Component
|
14
16
|
status :beta
|
15
17
|
|
@@ -37,12 +37,26 @@ document.addEventListener('clipboard-copy', ({target}) => {
|
|
37
37
|
if (!target.hasAttribute('data-view-component')) return
|
38
38
|
|
39
39
|
const currentTimeout = clipboardCopyElementTimers.get(target)
|
40
|
+
const clipboardCopyLiveRegion = target.parentNode?.querySelector<HTMLElement>('[data-clipboard-copy-feedback]')
|
41
|
+
const copiedAnnouncement = 'Copied!'
|
40
42
|
|
41
43
|
if (currentTimeout) {
|
42
44
|
clearTimeout(currentTimeout)
|
43
45
|
clipboardCopyElementTimers.delete(target)
|
44
46
|
} else {
|
45
47
|
showCheck(target)
|
48
|
+
if (clipboardCopyLiveRegion) {
|
49
|
+
if (clipboardCopyLiveRegion.textContent === copiedAnnouncement) {
|
50
|
+
/* This is a hack due to the way the aria live API works.
|
51
|
+
A screen reader will not read a live region again
|
52
|
+
if the text is the same. Adding a space character tells
|
53
|
+
the browser that the live region has updated,
|
54
|
+
which will cause it to read again, but with no audible difference. */
|
55
|
+
clipboardCopyLiveRegion.textContent = `${copiedAnnouncement}\u00A0`
|
56
|
+
} else {
|
57
|
+
clipboardCopyLiveRegion.textContent = copiedAnnouncement
|
58
|
+
}
|
59
|
+
}
|
46
60
|
}
|
47
61
|
|
48
62
|
clipboardCopyElementTimers.set(
|
@@ -5,6 +5,8 @@ module Primer
|
|
5
5
|
# `ClipboardCopyButton` uses the `ClipboardCopy` component to copy text to the clipboard,
|
6
6
|
# styled as a Primer button. It can be used wherever a button is desired, and works well
|
7
7
|
# with components like `ButtonGroup`.
|
8
|
+
# @accessibility
|
9
|
+
# This component has a built-in `aria-live` region that announces "Copied!" when the copy button is pressed.
|
8
10
|
class ClipboardCopyButton < Primer::Beta::Button
|
9
11
|
# @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> and <%= link_to_component(Primer::Beta::ClipboardCopy) %>.
|
10
12
|
def initialize(**system_arguments)
|
@@ -1 +1 @@
|
|
1
|
-
.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.PageHeader--
|
1
|
+
.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar{margin-bottom:var(--base-size-8)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-titleBar{margin-bottom:var(--space-xsmall)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium);font-weight:var(--base-text-weight-normal)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 100%;font-size:var(--text-body-size-medium)}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--space-xlarge)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto}
|
@@ -2,16 +2,16 @@
|
|
2
2
|
"name": "open_project/page_header",
|
3
3
|
"selectors": [
|
4
4
|
".PageHeader",
|
5
|
-
".PageHeader--
|
5
|
+
".PageHeader--withTabNav",
|
6
6
|
".PageHeader-contextBar",
|
7
7
|
".PageHeader-titleBar",
|
8
8
|
".PageHeader-title",
|
9
9
|
".PageHeader-title--large",
|
10
10
|
".PageHeader-description",
|
11
|
+
".PageHeader--withTabNav .PageHeader-description",
|
11
12
|
".PageHeader-actions",
|
12
13
|
".PageHeader-breadcrumbs",
|
13
14
|
".PageHeader-leadingAction",
|
14
|
-
".PageHeader-parentLink"
|
15
|
-
".PageHeader-tabNav"
|
15
|
+
".PageHeader-parentLink"
|
16
16
|
]
|
17
17
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,qCAAsC,CADtC,6CAIF,CAEA,
|
1
|
+
{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,qCAAsC,CADtC,6CAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAEA,uBAKE,gCACF,CAEA,4CAJE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAWF,CANA,qBAKE,iCACF,CAEA,kBAGE,aAAc,CAFd,uCAAwC,CACxC,0CAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,cAEF,CAEA,uBACE,aACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n display: flex;\n padding-bottom: var(--stack-padding-condensed);\n margin-bottom: var(--stack-gap-normal);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n flex-flow: column;\n}\n\n.PageHeader--withTabNav {\n border-bottom: none;\n padding-bottom: 0;\n margin-bottom: 0;\n}\n\n.PageHeader-contextBar {\n display: flex;\n flex-flow: row;\n justify-content: flex-end;\n align-items: center;\n margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-titleBar {\n display: flex;\n flex-flow: row;\n justify-content: flex-end;\n align-items: center; /* Keep back button vertically aligned. */\n margin-bottom: var(--space-xsmall);\n}\n\n.PageHeader-title {\n font-size: var(--text-title-size-medium);\n font-weight: var(--base-text-weight-normal);\n flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n flex: 1 100%;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n margin-bottom: var(--space-xlarge);\n}\n\n.PageHeader-actions {\n justify-content: flex-end;\n display: flex;\n align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n display: block;\n width: 100%;\n}\n\n.PageHeader-leadingAction {\n margin-top: 2px; /* to center align with label */\n margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n flex: 1 1 auto;\n}\n"]}
|
@@ -8,9 +8,10 @@
|
|
8
8
|
flex-flow: column;
|
9
9
|
}
|
10
10
|
|
11
|
-
.PageHeader--
|
11
|
+
.PageHeader--withTabNav {
|
12
12
|
border-bottom: none;
|
13
13
|
padding-bottom: 0;
|
14
|
+
margin-bottom: 0;
|
14
15
|
}
|
15
16
|
|
16
17
|
.PageHeader-contextBar {
|
@@ -46,6 +47,10 @@
|
|
46
47
|
flex: 1 100%;
|
47
48
|
}
|
48
49
|
|
50
|
+
.PageHeader--withTabNav .PageHeader-description {
|
51
|
+
margin-bottom: var(--space-xlarge);
|
52
|
+
}
|
53
|
+
|
49
54
|
.PageHeader-actions {
|
50
55
|
justify-content: flex-end;
|
51
56
|
display: flex;
|
@@ -65,8 +70,3 @@
|
|
65
70
|
.PageHeader-parentLink {
|
66
71
|
flex: 1 1 auto;
|
67
72
|
}
|
68
|
-
|
69
|
-
.PageHeader-tabNav {
|
70
|
-
margin-top: var(--stack-gap-normal);
|
71
|
-
margin-bottom: 0;
|
72
|
-
}
|
@@ -209,7 +209,7 @@ module Primer
|
|
209
209
|
#
|
210
210
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
211
211
|
renders_one :tab_nav, lambda { |**system_arguments, &block|
|
212
|
-
@system_arguments[:classes] = class_names(@system_arguments[:classes], "PageHeader--
|
212
|
+
@system_arguments[:classes] = class_names(@system_arguments[:classes], "PageHeader--withTabNav")
|
213
213
|
|
214
214
|
system_arguments = deny_tag_argument(**system_arguments)
|
215
215
|
system_arguments[:tag] = :div
|
@@ -54,7 +54,7 @@ module Primer
|
|
54
54
|
# It's designed to be used to normalize and merge data information from system_arguments
|
55
55
|
# hashes. Consider using this pattern in component initializers:
|
56
56
|
#
|
57
|
-
# @system_arguments[:data] =
|
57
|
+
# @system_arguments[:data] = merge_data(
|
58
58
|
# @system_arguments,
|
59
59
|
# { data: { foo: "bar" } }
|
60
60
|
# )
|
@@ -10,13 +10,5 @@
|
|
10
10
|
|
11
11
|
<div><%= render(Caption.new(input: @input)) %></div>
|
12
12
|
</span>
|
13
|
-
|
14
|
-
csrf = @input.csrf || @view_context.form_authenticity_token(
|
15
|
-
form_options: {
|
16
|
-
method: :post,
|
17
|
-
action: @input.src
|
18
|
-
}
|
19
|
-
)
|
20
|
-
%>
|
21
|
-
<%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf: csrf, **@input.input_arguments)) %>
|
13
|
+
<%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf_token: @input.csrf, **@input.input_arguments)) %>
|
22
14
|
<% end %>
|
@@ -52,7 +52,7 @@ module Primer
|
|
52
52
|
end
|
53
53
|
|
54
54
|
def with_csrf_token
|
55
|
-
render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path
|
55
|
+
render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path))
|
56
56
|
end
|
57
57
|
|
58
58
|
def with_bad_csrf_token
|
@@ -9,8 +9,13 @@ module Primer
|
|
9
9
|
# @param size [Symbol] select [medium, large]
|
10
10
|
# @param tag [Symbol] select [span, summary, a, div]
|
11
11
|
# @param inline [Boolean] toggle
|
12
|
-
|
13
|
-
|
12
|
+
# @param href [String] URL to be used with an anchor tag
|
13
|
+
def playground(size: :medium, tag: :span, inline: false, href: nil)
|
14
|
+
if tag == :a
|
15
|
+
render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline, href: href || "#")) { "Link label" }
|
16
|
+
else
|
17
|
+
render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline)) { "Label" }
|
18
|
+
end
|
14
19
|
end
|
15
20
|
|
16
21
|
# @label Default Options
|
@@ -1,3 +1,3 @@
|
|
1
|
-
<%= render(ExampleToggleSwitchForm.new(
|
1
|
+
<%= render(ExampleToggleSwitchForm.new(label: "Good example", src: toggle_switch_index_path, id: "success-toggle")) %>
|
2
2
|
<hr>
|
3
|
-
<%= render(ExampleToggleSwitchForm.new(
|
3
|
+
<%= render(ExampleToggleSwitchForm.new(label: "Bad example", src: toggle_switch_index_path(fail: true), id: "error-toggle")) %>
|
data/static/classes.json
CHANGED
@@ -429,7 +429,7 @@
|
|
429
429
|
"PageHeader": [
|
430
430
|
"Primer::OpenProject::PageHeader"
|
431
431
|
],
|
432
|
-
"PageHeader--
|
432
|
+
"PageHeader--withTabNav": [
|
433
433
|
"Primer::OpenProject::PageHeader"
|
434
434
|
],
|
435
435
|
"PageHeader-actions": [
|
@@ -450,9 +450,6 @@
|
|
450
450
|
"PageHeader-parentLink": [
|
451
451
|
"Primer::OpenProject::PageHeader"
|
452
452
|
],
|
453
|
-
"PageHeader-tabNav": [
|
454
|
-
"Primer::OpenProject::PageHeader"
|
455
|
-
],
|
456
453
|
"PageHeader-title": [
|
457
454
|
"Primer::OpenProject::PageHeader"
|
458
455
|
],
|
data/static/info_arch.json
CHANGED
@@ -11630,7 +11630,7 @@
|
|
11630
11630
|
{
|
11631
11631
|
"fully_qualified_name": "Primer::Beta::ClipboardCopy",
|
11632
11632
|
"description": "Use `ClipboardCopy` to copy element text content or input values to the clipboard.\n\nThis component by itself is not styled as a button, and can therefore only be used in limited circumstances.\nIf you're looking for a button, consider using {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}\ninstead.",
|
11633
|
-
"accessibility_docs": "Always set an accessible label to help the user interact with the component.",
|
11633
|
+
"accessibility_docs": "Always set an accessible label to help the user interact with the component.\n\nThis component has a built-in `aria-live` region that announces \"Copied!\" when the copy element is pressed.",
|
11634
11634
|
"is_form_component": false,
|
11635
11635
|
"is_published": true,
|
11636
11636
|
"requires_js": true,
|
@@ -11797,7 +11797,7 @@
|
|
11797
11797
|
{
|
11798
11798
|
"fully_qualified_name": "Primer::Beta::ClipboardCopyButton",
|
11799
11799
|
"description": "`ClipboardCopyButton` uses the `ClipboardCopy` component to copy text to the clipboard,\nstyled as a Primer button. It can be used wherever a button is desired, and works well\nwith components like `ButtonGroup`.",
|
11800
|
-
"accessibility_docs":
|
11800
|
+
"accessibility_docs": "This component has a built-in `aria-live` region that announces \"Copied!\" when the copy button is pressed.",
|
11801
11801
|
"is_form_component": false,
|
11802
11802
|
"is_published": true,
|
11803
11803
|
"requires_js": false,
|
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.33.1
|
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-05
|
12
|
+
date: 2024-06-05 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionview
|