openproject-primer_view_components 0.52.4 → 0.53.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 +16 -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} +13 -14
- 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/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 +3 -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/static/arguments.json +24 -12
- data/static/audited_at.json +3 -3
- data/static/constants.json +8 -8
- data/static/info_arch.json +51 -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,26 +63,25 @@ 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 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.
|
67
|
+
# @param cancel_button_text [String] The text of the cancel button. Will default to `I18n.t("button_cancel")`.
|
66
68
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
67
69
|
def initialize(
|
68
70
|
form_arguments: {},
|
69
71
|
id: self.class.generate_id,
|
70
|
-
confirm_button_text:
|
71
|
-
cancel_button_text:
|
72
|
+
confirm_button_text: nil,
|
73
|
+
cancel_button_text: nil,
|
72
74
|
**system_arguments
|
73
75
|
)
|
74
76
|
@check_box_name = form_arguments.delete(:name) || "confirm_dangerous_action"
|
75
77
|
@form_wrapper = FormWrapper.new(**form_arguments)
|
76
78
|
@dialog_id = id.to_s
|
77
79
|
|
78
|
-
@confirm_button_text = confirm_button_text
|
79
|
-
@cancel_button_text = cancel_button_text
|
80
|
-
|
81
80
|
@system_arguments = system_arguments
|
82
81
|
@system_arguments[:id] = @dialog_id
|
83
82
|
@system_arguments[:classes] = class_names(
|
84
83
|
system_arguments[:classes],
|
85
|
-
"
|
84
|
+
"DangerDialog"
|
86
85
|
)
|
87
86
|
|
88
87
|
@dialog = Primer::Alpha::Dialog.new(title: @system_arguments[:title], subtitle: nil, visually_hide_title: true, **@system_arguments)
|
@@ -93,16 +92,16 @@ module Primer
|
|
93
92
|
to: :@dialog
|
94
93
|
|
95
94
|
def render?
|
96
|
-
raise ArgumentError, "
|
97
|
-
raise ArgumentError, "DangerConfirmationDialog requires a confirmation_check_box" unless confirmation_check_box?
|
95
|
+
raise ArgumentError, "DangerDialog requires a confirmation_message" unless confirmation_message?
|
98
96
|
|
99
|
-
confirmation_message?
|
97
|
+
confirmation_message?
|
100
98
|
end
|
101
99
|
|
102
100
|
private
|
103
101
|
|
104
102
|
def before_render
|
105
|
-
|
103
|
+
@confirm_button_text ||= confirmation_check_box? ? I18n.t("button_delete_permanently") : I18n.t("button_delete")
|
104
|
+
@cancel_button_text ||= I18n.t("button_cancel")
|
106
105
|
end
|
107
106
|
end
|
108
107
|
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
|
+
}
|
@@ -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,6 @@
|
|
1
|
-
<%= render(Primer::OpenProject::
|
2
|
-
|
3
|
-
|
1
|
+
<%= render(Primer::OpenProject::DangerDialog.new(id: "my-dialog",
|
2
|
+
confirm_button_text: confirm_button_text,
|
3
|
+
cancel_button_text: cancel_button_text)) do |dialog| %>
|
4
4
|
<% dialog.with_show_button { "Click me" } %>
|
5
5
|
<% dialog.with_confirmation_message(icon_arguments: { icon: icon, color: icon_color }) do |message| %>
|
6
6
|
<% message.with_heading(tag: :h2).with_content("Proceed with danger?") %>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= render(Primer::OpenProject::
|
1
|
+
<%= render(Primer::OpenProject::DangerDialog.new) 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")
|
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,18 @@
|
|
5131
5131
|
"default": "`self.class.generate_id`",
|
5132
5132
|
"description": "The id of the dialog."
|
5133
5133
|
},
|
5134
|
+
{
|
5135
|
+
"name": "confirm_button_text",
|
5136
|
+
"type": "String",
|
5137
|
+
"default": "`nil`",
|
5138
|
+
"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."
|
5139
|
+
},
|
5140
|
+
{
|
5141
|
+
"name": "cancel_button_text",
|
5142
|
+
"type": "String",
|
5143
|
+
"default": "`nil`",
|
5144
|
+
"description": "The text of the cancel button. Will default to `I18n.t(\"button_cancel\")`."
|
5145
|
+
},
|
5134
5146
|
{
|
5135
5147
|
"name": "system_arguments",
|
5136
5148
|
"type": "Hash",
|
@@ -5140,12 +5152,12 @@
|
|
5140
5152
|
]
|
5141
5153
|
},
|
5142
5154
|
{
|
5143
|
-
"component": "OpenProject::
|
5155
|
+
"component": "OpenProject::DangerDialog::ConfirmationCheckBox",
|
5144
5156
|
"status": "open_project",
|
5145
5157
|
"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/
|
5158
|
+
"short_name": "OpenProjectDangerDialogConfirmationCheckBox",
|
5159
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_dialog/confirmation_check_box.rb",
|
5160
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_dialog/confirmation_check_box/default/",
|
5149
5161
|
"parameters": [
|
5150
5162
|
{
|
5151
5163
|
"name": "check_box_id",
|
@@ -5168,12 +5180,12 @@
|
|
5168
5180
|
]
|
5169
5181
|
},
|
5170
5182
|
{
|
5171
|
-
"component": "OpenProject::
|
5183
|
+
"component": "OpenProject::DangerDialog::FormWrapper",
|
5172
5184
|
"status": "open_project",
|
5173
5185
|
"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/
|
5186
|
+
"short_name": "OpenProjectDangerDialogFormWrapper",
|
5187
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_dialog/form_wrapper.rb",
|
5188
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_dialog/form_wrapper/default/",
|
5177
5189
|
"parameters": [
|
5178
5190
|
|
5179
5191
|
]
|
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",
|