openproject-primer_view_components 0.52.4 → 0.53.1
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 +30 -0
- data/app/assets/javascripts/components/primer/open_project/danger_dialog_form_helper.d.ts +13 -0
- data/app/assets/javascripts/components/primer/primer.d.ts +1 -1
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/components/primer/open_project/{danger_confirmation_dialog → danger_dialog}/confirmation_check_box.rb +5 -5
- data/app/components/primer/open_project/{danger_confirmation_dialog → danger_dialog}/form_wrapper.rb +2 -2
- data/app/components/primer/open_project/{danger_confirmation_dialog.html.erb → danger_dialog.html.erb} +2 -2
- data/app/components/primer/open_project/{danger_confirmation_dialog.rb → danger_dialog.rb} +16 -12
- data/app/components/primer/open_project/danger_dialog_form_helper.d.ts +13 -0
- data/app/components/primer/open_project/{danger_confirmation_dialog_form_helper.js → danger_dialog_form_helper.js} +19 -14
- data/app/components/primer/open_project/danger_dialog_form_helper.ts +41 -0
- data/app/components/primer/open_project/feedback_dialog.rb +3 -2
- data/app/components/primer/primer.d.ts +1 -1
- data/app/components/primer/primer.js +1 -1
- data/app/components/primer/primer.ts +1 -1
- data/lib/primer/view_components/version.rb +2 -2
- data/previews/primer/open_project/danger_dialog_preview/deletion_form.rb +23 -0
- data/previews/primer/open_project/{danger_confirmation_dialog_preview → danger_dialog_preview}/playground.html.erb +4 -3
- data/previews/primer/open_project/{danger_confirmation_dialog_preview → danger_dialog_preview}/with_additional_details.html.erb +1 -1
- data/previews/primer/open_project/{danger_confirmation_dialog_preview → danger_dialog_preview}/with_form.html.erb +2 -2
- data/previews/primer/open_project/danger_dialog_preview/with_form_builder_form.html.erb +18 -0
- data/previews/primer/open_project/danger_dialog_preview/with_form_builder_form_test.html.erb +17 -0
- data/previews/primer/open_project/{danger_confirmation_dialog_preview → danger_dialog_preview}/with_form_test.html.erb +2 -2
- data/previews/primer/open_project/{danger_confirmation_dialog_preview.rb → danger_dialog_preview.rb} +18 -6
- data/previews/primer/open_project/feedback_dialog_preview/playground.html.erb +1 -1
- data/previews/primer/open_project/feedback_dialog_preview/with_additional_details.html.erb +1 -1
- data/previews/primer/open_project/feedback_dialog_preview/with_custom_footer.html.erb +1 -1
- data/static/arguments.json +36 -12
- data/static/audited_at.json +3 -3
- data/static/constants.json +8 -8
- data/static/info_arch.json +63 -26
- data/static/previews.json +24 -11
- data/static/statuses.json +3 -3
- metadata +19 -18
- data/app/assets/javascripts/components/primer/open_project/danger_confirmation_dialog_form_helper.d.ts +0 -13
- data/app/components/primer/open_project/danger_confirmation_dialog_form_helper.d.ts +0 -13
- data/app/components/primer/open_project/danger_confirmation_dialog_form_helper.ts +0 -36
- data/previews/primer/open_project/danger_confirmation_dialog_preview/with_form_builder_form.html.erb +0 -14
- data/previews/primer/open_project/danger_confirmation_dialog_preview/with_form_builder_form_test.html.erb +0 -13
- /data/app/components/primer/open_project/{danger_confirmation_dialog → danger_dialog}/form_wrapper.html.erb +0 -0
@@ -2,8 +2,8 @@
|
|
2
2
|
|
3
3
|
module Primer
|
4
4
|
module OpenProject
|
5
|
-
class
|
6
|
-
# This component is part of `Primer::OpenProject::
|
5
|
+
class DangerDialog
|
6
|
+
# This component is part of `Primer::OpenProject::DangerDialog`
|
7
7
|
# and should not be used as a standalone component.
|
8
8
|
class ConfirmationCheckBox < Primer::Component
|
9
9
|
status :open_project
|
@@ -16,15 +16,15 @@ module Primer
|
|
16
16
|
@system_arguments[:tag] = :div
|
17
17
|
@system_arguments[:classes] = class_names(
|
18
18
|
system_arguments[:classes],
|
19
|
-
"
|
19
|
+
"DangerDialog-confirmationCheckBox"
|
20
20
|
)
|
21
21
|
|
22
22
|
@check_box_arguments = {}
|
23
23
|
@check_box_arguments[:id] = check_box_id
|
24
24
|
@check_box_arguments[:name] = check_box_name
|
25
25
|
@check_box_arguments[:data] = {
|
26
|
-
target: "danger-
|
27
|
-
action: "change:danger-
|
26
|
+
target: "danger-dialog-form-helper.checkbox",
|
27
|
+
action: "change:danger-dialog-form-helper#toggle"
|
28
28
|
}
|
29
29
|
end
|
30
30
|
|
data/app/components/primer/open_project/{danger_confirmation_dialog → danger_dialog}/form_wrapper.rb
RENAMED
@@ -2,8 +2,8 @@
|
|
2
2
|
|
3
3
|
module Primer
|
4
4
|
module OpenProject
|
5
|
-
class
|
6
|
-
# Utility component for wrapping
|
5
|
+
class DangerDialog
|
6
|
+
# Utility component for wrapping DangerDialog in a form
|
7
7
|
class FormWrapper < Primer::Component
|
8
8
|
status :open_project
|
9
9
|
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<%= render @dialog do |dialog| %>
|
2
|
-
<danger-
|
2
|
+
<danger-dialog-form-helper>
|
3
3
|
<%= render(@form_wrapper) do %>
|
4
4
|
<scrollable-region data-labelled-by="<%= labelledby %>">
|
5
5
|
<%= render(Primer::Alpha::Dialog::Body.new) do %>
|
@@ -15,5 +15,5 @@
|
|
15
15
|
<%= render(Primer::Beta::Button.new(type: (@form_wrapper.shows_form? ? :submit : :button), scheme: :danger, data: { "submit-dialog-id": dialog_id })) { @confirm_button_text } %>
|
16
16
|
<% end %>
|
17
17
|
<% end %>
|
18
|
-
</danger-
|
18
|
+
</danger-dialog-form-helper>
|
19
19
|
<% end %>
|
@@ -3,7 +3,7 @@
|
|
3
3
|
module Primer
|
4
4
|
module OpenProject
|
5
5
|
# A pre-configured dialog for destructive/"potentially dangerous" actions
|
6
|
-
class
|
6
|
+
class DangerDialog < Primer::Component
|
7
7
|
status :open_project
|
8
8
|
|
9
9
|
# The dialog's ID value.
|
@@ -27,7 +27,7 @@ module Primer
|
|
27
27
|
FeedbackMessage.new(icon_arguments: icon_arguments, **system_arguments)
|
28
28
|
}
|
29
29
|
|
30
|
-
#
|
30
|
+
# An optional checkbox that the user is required to check in order to continue with the destructive action.
|
31
31
|
#
|
32
32
|
# To render the checkbox label (required), pass a block that returns a String.
|
33
33
|
#
|
@@ -39,7 +39,7 @@ module Primer
|
|
39
39
|
|
40
40
|
check_box_id = "#{dialog_id}-check_box"
|
41
41
|
|
42
|
-
Primer::OpenProject::
|
42
|
+
Primer::OpenProject::DangerDialog::ConfirmationCheckBox.new(check_box_id: check_box_id, check_box_name: @check_box_name, **system_arguments)
|
43
43
|
}
|
44
44
|
|
45
45
|
# Optional additional details, such as grid displaying a list of items to be deleted
|
@@ -50,7 +50,7 @@ module Primer
|
|
50
50
|
system_arguments[:tag] = :div
|
51
51
|
system_arguments[:classes] = class_names(
|
52
52
|
system_arguments[:classes],
|
53
|
-
"
|
53
|
+
"DangerDialog-additionalDetails"
|
54
54
|
)
|
55
55
|
|
56
56
|
system_arguments[:display] ||= :flex
|
@@ -63,12 +63,16 @@ module Primer
|
|
63
63
|
|
64
64
|
# @param form_arguments [Hash] Allows the dialog to submit a form. Pass EITHER the `builder:` option to this hash to reuse an existing Rails form, or `action:` if you prefer the component to render the form tag itself. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which is created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission.
|
65
65
|
# @param id [String] The id of the dialog.
|
66
|
+
# @param title [String] The title of the dialog. Although visually hidden, a label is rendered for assistive technologies.
|
67
|
+
# @param confirm_button_text [String] The text of the confirm button. Will default to `I18n.t("button_delete")`, or `I18n.t("button_delete_permanently")` if `confirmation_check_box` slot has been passed to the component.
|
68
|
+
# @param cancel_button_text [String] The text of the cancel button. Will default to `I18n.t("button_cancel")`.
|
66
69
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
67
70
|
def initialize(
|
68
71
|
form_arguments: {},
|
69
72
|
id: self.class.generate_id,
|
70
|
-
|
71
|
-
|
73
|
+
title:,
|
74
|
+
confirm_button_text: nil,
|
75
|
+
cancel_button_text: nil,
|
72
76
|
**system_arguments
|
73
77
|
)
|
74
78
|
@check_box_name = form_arguments.delete(:name) || "confirm_dangerous_action"
|
@@ -82,10 +86,10 @@ module Primer
|
|
82
86
|
@system_arguments[:id] = @dialog_id
|
83
87
|
@system_arguments[:classes] = class_names(
|
84
88
|
system_arguments[:classes],
|
85
|
-
"
|
89
|
+
"DangerDialog"
|
86
90
|
)
|
87
91
|
|
88
|
-
@dialog = Primer::Alpha::Dialog.new(title:
|
92
|
+
@dialog = Primer::Alpha::Dialog.new(title: title, subtitle: nil, visually_hide_title: true, **@system_arguments)
|
89
93
|
end
|
90
94
|
|
91
95
|
delegate :labelledby, :header?, :header, :with_header, :with_header_content,
|
@@ -93,16 +97,16 @@ module Primer
|
|
93
97
|
to: :@dialog
|
94
98
|
|
95
99
|
def render?
|
96
|
-
raise ArgumentError, "
|
97
|
-
raise ArgumentError, "DangerConfirmationDialog requires a confirmation_check_box" unless confirmation_check_box?
|
100
|
+
raise ArgumentError, "DangerDialog requires a confirmation_message" unless confirmation_message?
|
98
101
|
|
99
|
-
confirmation_message?
|
102
|
+
confirmation_message?
|
100
103
|
end
|
101
104
|
|
102
105
|
private
|
103
106
|
|
104
107
|
def before_render
|
105
|
-
|
108
|
+
@confirm_button_text ||= confirmation_check_box? ? I18n.t("button_delete_permanently") : I18n.t("button_delete")
|
109
|
+
@cancel_button_text ||= I18n.t("button_cancel")
|
106
110
|
end
|
107
111
|
end
|
108
112
|
end
|
@@ -0,0 +1,13 @@
|
|
1
|
+
declare class DangerDialogFormHelperElement extends HTMLElement {
|
2
|
+
#private;
|
3
|
+
checkbox: HTMLInputElement | undefined;
|
4
|
+
get submitButton(): HTMLInputElement | HTMLButtonElement;
|
5
|
+
connectedCallback(): void;
|
6
|
+
toggle(): void;
|
7
|
+
}
|
8
|
+
declare global {
|
9
|
+
interface Window {
|
10
|
+
DangerDialogFormHelperElement: typeof DangerDialogFormHelperElement;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
export {};
|
@@ -9,36 +9,41 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
|
|
9
9
|
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
10
10
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
11
11
|
};
|
12
|
-
var
|
12
|
+
var _DangerDialogFormHelperElement_instances, _DangerDialogFormHelperElement_reset;
|
13
13
|
import { controller, target } from '@github/catalyst';
|
14
14
|
const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[data-submit-dialog-id]';
|
15
|
-
let
|
15
|
+
let DangerDialogFormHelperElement = class DangerDialogFormHelperElement extends HTMLElement {
|
16
16
|
constructor() {
|
17
17
|
super(...arguments);
|
18
|
-
|
18
|
+
_DangerDialogFormHelperElement_instances.add(this);
|
19
19
|
}
|
20
20
|
get submitButton() {
|
21
21
|
return this.querySelector(SUBMIT_BUTTON_SELECTOR);
|
22
22
|
}
|
23
23
|
connectedCallback() {
|
24
|
-
|
24
|
+
this.style.display = 'contents';
|
25
|
+
__classPrivateFieldGet(this, _DangerDialogFormHelperElement_instances, "m", _DangerDialogFormHelperElement_reset).call(this);
|
25
26
|
}
|
26
27
|
toggle() {
|
27
|
-
|
28
|
+
if (this.checkbox) {
|
29
|
+
this.submitButton.disabled = !this.checkbox.checked;
|
30
|
+
}
|
28
31
|
}
|
29
32
|
};
|
30
|
-
|
31
|
-
|
32
|
-
this.checkbox
|
33
|
+
_DangerDialogFormHelperElement_instances = new WeakSet();
|
34
|
+
_DangerDialogFormHelperElement_reset = function _DangerDialogFormHelperElement_reset() {
|
35
|
+
if (this.checkbox) {
|
36
|
+
this.checkbox.disabled = false;
|
37
|
+
}
|
33
38
|
this.toggle();
|
34
39
|
};
|
35
40
|
__decorate([
|
36
41
|
target
|
37
|
-
],
|
38
|
-
|
42
|
+
], DangerDialogFormHelperElement.prototype, "checkbox", void 0);
|
43
|
+
DangerDialogFormHelperElement = __decorate([
|
39
44
|
controller
|
40
|
-
],
|
41
|
-
if (!window.customElements.get('danger-
|
42
|
-
window.
|
43
|
-
window.customElements.define('danger-
|
45
|
+
], DangerDialogFormHelperElement);
|
46
|
+
if (!window.customElements.get('danger-dialog-form-helper')) {
|
47
|
+
window.DangerDialogFormHelperElement = DangerDialogFormHelperElement;
|
48
|
+
window.customElements.define('danger-dialog-form-helper', DangerDialogFormHelperElement);
|
44
49
|
}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
import {controller, target} from '@github/catalyst'
|
2
|
+
|
3
|
+
const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[data-submit-dialog-id]'
|
4
|
+
|
5
|
+
@controller
|
6
|
+
class DangerDialogFormHelperElement extends HTMLElement {
|
7
|
+
@target checkbox: HTMLInputElement | undefined
|
8
|
+
|
9
|
+
get submitButton() {
|
10
|
+
return this.querySelector<HTMLInputElement | HTMLButtonElement>(SUBMIT_BUTTON_SELECTOR)!
|
11
|
+
}
|
12
|
+
|
13
|
+
connectedCallback() {
|
14
|
+
this.style.display = 'contents'
|
15
|
+
this.#reset()
|
16
|
+
}
|
17
|
+
|
18
|
+
toggle(): void {
|
19
|
+
if (this.checkbox) {
|
20
|
+
this.submitButton.disabled = !this.checkbox.checked
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
#reset(): void {
|
25
|
+
if (this.checkbox) {
|
26
|
+
this.checkbox.disabled = false
|
27
|
+
}
|
28
|
+
this.toggle()
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
declare global {
|
33
|
+
interface Window {
|
34
|
+
DangerDialogFormHelperElement: typeof DangerDialogFormHelperElement
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
if (!window.customElements.get('danger-dialog-form-helper')) {
|
39
|
+
window.DangerDialogFormHelperElement = DangerDialogFormHelperElement
|
40
|
+
window.customElements.define('danger-dialog-form-helper', DangerDialogFormHelperElement)
|
41
|
+
}
|
@@ -40,8 +40,9 @@ module Primer
|
|
40
40
|
|
41
41
|
renders_one :footer
|
42
42
|
|
43
|
+
# @param title [String] The title of the dialog. Although visually hidden, a label is rendered for assistive technologies.
|
43
44
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
44
|
-
def initialize(**system_arguments)
|
45
|
+
def initialize(title:, **system_arguments)
|
45
46
|
@system_arguments = system_arguments
|
46
47
|
@system_arguments[:classes] = class_names(
|
47
48
|
system_arguments[:classes],
|
@@ -49,7 +50,7 @@ module Primer
|
|
49
50
|
)
|
50
51
|
@system_arguments[:id] ||= self.class.generate_id
|
51
52
|
|
52
|
-
@dialog = Primer::Alpha::Dialog.new(title:
|
53
|
+
@dialog = Primer::Alpha::Dialog.new(title: title, subtitle: nil, visually_hide_title: true, **@system_arguments)
|
53
54
|
end
|
54
55
|
|
55
56
|
delegate :header?, :header, :with_header, :with_header_content,
|
@@ -28,4 +28,4 @@ import './alpha/select_panel_element';
|
|
28
28
|
import './open_project/page_header_element';
|
29
29
|
import './open_project/zen_mode_button';
|
30
30
|
import './open_project/sub_header_element';
|
31
|
-
import './open_project/
|
31
|
+
import './open_project/danger_dialog_form_helper';
|
@@ -28,4 +28,4 @@ import './alpha/select_panel_element';
|
|
28
28
|
import './open_project/page_header_element';
|
29
29
|
import './open_project/zen_mode_button';
|
30
30
|
import './open_project/sub_header_element';
|
31
|
-
import './open_project/
|
31
|
+
import './open_project/danger_dialog_form_helper';
|
@@ -28,4 +28,4 @@ import './alpha/select_panel_element'
|
|
28
28
|
import './open_project/page_header_element'
|
29
29
|
import './open_project/zen_mode_button'
|
30
30
|
import './open_project/sub_header_element'
|
31
|
-
import './open_project/
|
31
|
+
import './open_project/danger_dialog_form_helper'
|
@@ -0,0 +1,23 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
module Primer
|
3
|
+
module OpenProject
|
4
|
+
class DangerDialogPreview
|
5
|
+
# :nodoc:
|
6
|
+
class DeletionForm < Primer::Forms::Base
|
7
|
+
form do |deletion_form|
|
8
|
+
deletion_form.text_field(
|
9
|
+
name: :reason,
|
10
|
+
label: "Reason for deletion",
|
11
|
+
required: true,
|
12
|
+
caption: "Enter the reason for deleting this item"
|
13
|
+
)
|
14
|
+
deletion_form.check_box_group(name: "notify", label: "Notify") do |check_group|
|
15
|
+
check_group.check_box(value: "creator", label: "Creator")
|
16
|
+
check_group.check_box(value: "assignee", label: "Assignee")
|
17
|
+
check_group.check_box(value: "watchers", label: "Watchers")
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
@@ -1,6 +1,7 @@
|
|
1
|
-
<%= render(Primer::OpenProject::
|
2
|
-
|
3
|
-
|
1
|
+
<%= render(Primer::OpenProject::DangerDialog.new(id: "my-dialog",
|
2
|
+
title: "My dialog",
|
3
|
+
confirm_button_text: confirm_button_text,
|
4
|
+
cancel_button_text: cancel_button_text)) do |dialog| %>
|
4
5
|
<% dialog.with_show_button { "Click me" } %>
|
5
6
|
<% dialog.with_confirmation_message(icon_arguments: { icon: icon, color: icon_color }) do |message| %>
|
6
7
|
<% message.with_heading(tag: :h2).with_content("Proceed with danger?") %>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= render(Primer::OpenProject::
|
1
|
+
<%= render(Primer::OpenProject::DangerDialog.new(title: "Delete work packages")) do |dialog| %>
|
2
2
|
<% dialog.with_show_button { "Click me" } %>
|
3
3
|
<% dialog.with_confirmation_message do |message| %>
|
4
4
|
<% message.with_heading(tag: :h2).with_content("Delete 5 work packages?") %>
|
@@ -1,10 +1,10 @@
|
|
1
|
-
<%= render(Primer::OpenProject::
|
1
|
+
<%= render(Primer::OpenProject::DangerDialog.new(
|
2
2
|
title: "Delete dialog",
|
3
3
|
form_arguments: { action: "" } # Use the correct form action here.
|
4
4
|
)) do |dialog| %>
|
5
5
|
<% dialog.with_show_button { "Click me" } %>
|
6
6
|
<% dialog.with_confirmation_message do |message|
|
7
|
-
message.with_heading(tag: :h2).with_content("Permanently delete?")
|
7
|
+
message.with_heading(tag: :h2).with_content("Permanently delete this item?")
|
8
8
|
message.with_description_content("This action is not reversible. Please proceed with caution.")
|
9
9
|
end %>
|
10
10
|
<% dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed") %>
|
@@ -0,0 +1,18 @@
|
|
1
|
+
<!-- Use the correct form URL here. -->
|
2
|
+
<%= primer_form_with(url: "") do |f| %>
|
3
|
+
<%= render(Primer::OpenProject::DangerDialog.new(
|
4
|
+
title: "Delete dialog",
|
5
|
+
form_arguments: { builder: f }
|
6
|
+
)) do |dialog| %>
|
7
|
+
<% dialog.with_show_button { "Click me" } %>
|
8
|
+
<% dialog.with_confirmation_message do |message|
|
9
|
+
message.with_heading(tag: :h2).with_content("Permanently delete this item?")
|
10
|
+
message.with_description_content("This action is not reversible. Please confirm the following details before deletion.")
|
11
|
+
end %>
|
12
|
+
<% dialog.with_additional_details do %>
|
13
|
+
<%= render(Primer::Box.new(flex: 1, border: true, border_radius: 2, p: 3)) do %>
|
14
|
+
<%= render(Primer::OpenProject::DangerDialogPreview::DeletionForm.new(f)) %>
|
15
|
+
<% end %>
|
16
|
+
<% end %>
|
17
|
+
<% end %>
|
18
|
+
<% end %>
|
@@ -0,0 +1,17 @@
|
|
1
|
+
<%= primer_form_with(url: generic_form_submission_path(route_format)) do |f| %>
|
2
|
+
<%= render(Primer::OpenProject::DangerDialog.new(
|
3
|
+
title: "Delete dialog",
|
4
|
+
form_arguments: { builder: f }
|
5
|
+
)) do |dialog| %>
|
6
|
+
<% dialog.with_show_button { "Click me" } %>
|
7
|
+
<% dialog.with_confirmation_message do |message|
|
8
|
+
message.with_heading(tag: :h2).with_content("Permanently delete this item?")
|
9
|
+
message.with_description_content("This action is not reversible. Please proceed with caution.")
|
10
|
+
end %>
|
11
|
+
<% dialog.with_additional_details do %>
|
12
|
+
<%= render(Primer::Box.new(flex: 1, border: true, border_radius: 2, p: 3)) do %>
|
13
|
+
<%= render(Primer::OpenProject::DangerDialogPreview::DeletionForm.new(f)) %>
|
14
|
+
<% end %>
|
15
|
+
<% end %>
|
16
|
+
<% end %>
|
17
|
+
<% end %>
|
@@ -1,10 +1,10 @@
|
|
1
|
-
<%= render(Primer::OpenProject::
|
1
|
+
<%= render(Primer::OpenProject::DangerDialog.new(
|
2
2
|
title: "Delete dialog",
|
3
3
|
form_arguments: { action: generic_form_submission_path(route_format) }
|
4
4
|
)) do |dialog| %>
|
5
5
|
<% dialog.with_show_button { "Click me" } %>
|
6
6
|
<% dialog.with_confirmation_message do |message|
|
7
|
-
message.with_heading(tag: :h2).with_content("Permanently delete?")
|
7
|
+
message.with_heading(tag: :h2).with_content("Permanently delete this item?")
|
8
8
|
message.with_description_content("This action is not reversible. Please proceed with caution.")
|
9
9
|
end %>
|
10
10
|
<% dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed") %>
|
data/previews/primer/open_project/{danger_confirmation_dialog_preview.rb → danger_dialog_preview.rb}
RENAMED
@@ -5,15 +5,27 @@
|
|
5
5
|
|
6
6
|
module Primer
|
7
7
|
module OpenProject
|
8
|
-
# @label
|
9
|
-
class
|
8
|
+
# @label DangerDialog
|
9
|
+
class DangerDialogPreview < ViewComponent::Preview
|
10
10
|
# @label Default
|
11
11
|
# @snapshot interactive
|
12
12
|
def default
|
13
|
-
render(Primer::OpenProject::
|
13
|
+
render(Primer::OpenProject::DangerDialog.new(title: "Delete dialog")) do |dialog|
|
14
14
|
dialog.with_show_button { "Click me" }
|
15
15
|
dialog.with_confirmation_message do |message|
|
16
|
-
message.with_heading(tag: :h2) { "
|
16
|
+
message.with_heading(tag: :h2) { "Delete this item?" }
|
17
|
+
message.with_description_content("Do you want to continue?")
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
21
|
+
|
22
|
+
# @label With confirmation check box
|
23
|
+
# @snapshot interactive
|
24
|
+
def with_confirmation_check_box
|
25
|
+
render(Primer::OpenProject::DangerDialog.new(title: "Delete dialog")) do |dialog|
|
26
|
+
dialog.with_show_button { "Click me" }
|
27
|
+
dialog.with_confirmation_message do |message|
|
28
|
+
message.with_heading(tag: :h2) { "Permanently delete this item?" }
|
17
29
|
message.with_description_content("This action is not reversible. Please proceed with caution.")
|
18
30
|
end
|
19
31
|
dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed")
|
@@ -63,10 +75,10 @@ module Primer
|
|
63
75
|
|
64
76
|
# @label With custom icon
|
65
77
|
def custom_icon
|
66
|
-
render(Primer::OpenProject::
|
78
|
+
render(Primer::OpenProject::DangerDialog.new(title: "Delete dialog")) do |dialog|
|
67
79
|
dialog.with_show_button { "Click me" }
|
68
80
|
dialog.with_confirmation_message(icon_arguments: { icon: :"alert-fill" }) do |message|
|
69
|
-
message.with_heading(tag: :h2) { "Permanently delete?" }
|
81
|
+
message.with_heading(tag: :h2) { "Permanently delete this item?" }
|
70
82
|
message.with_description_content("This action is not reversible and will remove all containing sub-tiems. Please proceed with caution.")
|
71
83
|
end
|
72
84
|
dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed")
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog")) do |dialog| %>
|
1
|
+
<%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog", title: "My dialog")) do |dialog| %>
|
2
2
|
<% dialog.with_show_button { "Click me" } %>
|
3
3
|
<% dialog.with_feedback_message(icon_arguments: { icon: icon, color: icon_color }, loading: loading_state) do |message| %>
|
4
4
|
<% message.with_heading(tag: :h2).with_content("Awesome!") %>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= render(Primer::OpenProject::FeedbackDialog.new) do |dialog| %>
|
1
|
+
<%= render(Primer::OpenProject::FeedbackDialog.new(title: "Success message")) do |dialog| %>
|
2
2
|
<% dialog.with_show_button { "Click me" } %>
|
3
3
|
<% dialog.with_feedback_message do |message| %>
|
4
4
|
<% message.with_heading(tag: :h2).with_content("Action successful") %>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog")) do |dialog| %>
|
1
|
+
<%= render(Primer::OpenProject::FeedbackDialog.new(id: "my-dialog", title: "Custom footer")) do |dialog| %>
|
2
2
|
<% dialog.with_show_button { "Click me" } %>
|
3
3
|
<% dialog.with_feedback_message do |message| %>
|
4
4
|
<% message.with_heading(tag: :h2).with_content("Action successful") %>
|
data/static/arguments.json
CHANGED
@@ -5112,12 +5112,12 @@
|
|
5112
5112
|
]
|
5113
5113
|
},
|
5114
5114
|
{
|
5115
|
-
"component": "OpenProject::
|
5115
|
+
"component": "OpenProject::DangerDialog",
|
5116
5116
|
"status": "open_project",
|
5117
5117
|
"a11y_reviewed": false,
|
5118
|
-
"short_name": "
|
5119
|
-
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/
|
5120
|
-
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/
|
5118
|
+
"short_name": "OpenProjectDangerDialog",
|
5119
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_dialog.rb",
|
5120
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_dialog/default/",
|
5121
5121
|
"parameters": [
|
5122
5122
|
{
|
5123
5123
|
"name": "form_arguments",
|
@@ -5131,6 +5131,24 @@
|
|
5131
5131
|
"default": "`self.class.generate_id`",
|
5132
5132
|
"description": "The id of the dialog."
|
5133
5133
|
},
|
5134
|
+
{
|
5135
|
+
"name": "title",
|
5136
|
+
"type": "String",
|
5137
|
+
"default": "N/A",
|
5138
|
+
"description": "The title of the dialog. Although visually hidden, a label is rendered for assistive technologies."
|
5139
|
+
},
|
5140
|
+
{
|
5141
|
+
"name": "confirm_button_text",
|
5142
|
+
"type": "String",
|
5143
|
+
"default": "`nil`",
|
5144
|
+
"description": "The text of the confirm button. Will default to `I18n.t(\"button_delete\")`, or `I18n.t(\"button_delete_permanently\")` if `confirmation_check_box` slot has been passed to the component."
|
5145
|
+
},
|
5146
|
+
{
|
5147
|
+
"name": "cancel_button_text",
|
5148
|
+
"type": "String",
|
5149
|
+
"default": "`nil`",
|
5150
|
+
"description": "The text of the cancel button. Will default to `I18n.t(\"button_cancel\")`."
|
5151
|
+
},
|
5134
5152
|
{
|
5135
5153
|
"name": "system_arguments",
|
5136
5154
|
"type": "Hash",
|
@@ -5140,12 +5158,12 @@
|
|
5140
5158
|
]
|
5141
5159
|
},
|
5142
5160
|
{
|
5143
|
-
"component": "OpenProject::
|
5161
|
+
"component": "OpenProject::DangerDialog::ConfirmationCheckBox",
|
5144
5162
|
"status": "open_project",
|
5145
5163
|
"a11y_reviewed": false,
|
5146
|
-
"short_name": "
|
5147
|
-
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/
|
5148
|
-
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/
|
5164
|
+
"short_name": "OpenProjectDangerDialogConfirmationCheckBox",
|
5165
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_dialog/confirmation_check_box.rb",
|
5166
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_dialog/confirmation_check_box/default/",
|
5149
5167
|
"parameters": [
|
5150
5168
|
{
|
5151
5169
|
"name": "check_box_id",
|
@@ -5168,12 +5186,12 @@
|
|
5168
5186
|
]
|
5169
5187
|
},
|
5170
5188
|
{
|
5171
|
-
"component": "OpenProject::
|
5189
|
+
"component": "OpenProject::DangerDialog::FormWrapper",
|
5172
5190
|
"status": "open_project",
|
5173
5191
|
"a11y_reviewed": false,
|
5174
|
-
"short_name": "
|
5175
|
-
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/
|
5176
|
-
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/
|
5192
|
+
"short_name": "OpenProjectDangerDialogFormWrapper",
|
5193
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_dialog/form_wrapper.rb",
|
5194
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_dialog/form_wrapper/default/",
|
5177
5195
|
"parameters": [
|
5178
5196
|
|
5179
5197
|
]
|
@@ -5202,6 +5220,12 @@
|
|
5202
5220
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/feedback_dialog.rb",
|
5203
5221
|
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/feedback_dialog/default/",
|
5204
5222
|
"parameters": [
|
5223
|
+
{
|
5224
|
+
"name": "title",
|
5225
|
+
"type": "String",
|
5226
|
+
"default": "N/A",
|
5227
|
+
"description": "The title of the dialog. Although visually hidden, a label is rendered for assistive technologies."
|
5228
|
+
},
|
5205
5229
|
{
|
5206
5230
|
"name": "system_arguments",
|
5207
5231
|
"type": "Hash",
|
data/static/audited_at.json
CHANGED
@@ -118,9 +118,9 @@
|
|
118
118
|
"Primer::Navigation::TabComponent": "",
|
119
119
|
"Primer::OpenProject::BorderGrid": "",
|
120
120
|
"Primer::OpenProject::BorderGrid::Cell": "",
|
121
|
-
"Primer::OpenProject::
|
122
|
-
"Primer::OpenProject::
|
123
|
-
"Primer::OpenProject::
|
121
|
+
"Primer::OpenProject::DangerDialog": "",
|
122
|
+
"Primer::OpenProject::DangerDialog::ConfirmationCheckBox": "",
|
123
|
+
"Primer::OpenProject::DangerDialog::FormWrapper": "",
|
124
124
|
"Primer::OpenProject::DragHandle": "",
|
125
125
|
"Primer::OpenProject::FeedbackDialog": "",
|
126
126
|
"Primer::OpenProject::FeedbackMessage": "",
|
data/static/constants.json
CHANGED
@@ -1561,16 +1561,16 @@
|
|
1561
1561
|
"Primer::OpenProject::BorderGrid::Cell": {
|
1562
1562
|
"GeneratedSlotMethods": "Primer::OpenProject::BorderGrid::Cell::GeneratedSlotMethods"
|
1563
1563
|
},
|
1564
|
-
"Primer::OpenProject::
|
1565
|
-
"ConfirmationCheckBox": "Primer::OpenProject::
|
1566
|
-
"FormWrapper": "Primer::OpenProject::
|
1567
|
-
"GeneratedSlotMethods": "Primer::OpenProject::
|
1564
|
+
"Primer::OpenProject::DangerDialog": {
|
1565
|
+
"ConfirmationCheckBox": "Primer::OpenProject::DangerDialog::ConfirmationCheckBox",
|
1566
|
+
"FormWrapper": "Primer::OpenProject::DangerDialog::FormWrapper",
|
1567
|
+
"GeneratedSlotMethods": "Primer::OpenProject::DangerDialog::GeneratedSlotMethods"
|
1568
1568
|
},
|
1569
|
-
"Primer::OpenProject::
|
1570
|
-
"GeneratedSlotMethods": "Primer::OpenProject::
|
1569
|
+
"Primer::OpenProject::DangerDialog::ConfirmationCheckBox": {
|
1570
|
+
"GeneratedSlotMethods": "Primer::OpenProject::DangerDialog::ConfirmationCheckBox::GeneratedSlotMethods"
|
1571
1571
|
},
|
1572
|
-
"Primer::OpenProject::
|
1573
|
-
"GeneratedSlotMethods": "Primer::OpenProject::
|
1572
|
+
"Primer::OpenProject::DangerDialog::FormWrapper": {
|
1573
|
+
"GeneratedSlotMethods": "Primer::OpenProject::DangerDialog::FormWrapper::GeneratedSlotMethods"
|
1574
1574
|
},
|
1575
1575
|
"Primer::OpenProject::DragHandle": {
|
1576
1576
|
"DEFAULT_SIZE": "small",
|