x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!-- Use the correct form URL here. --><form action="" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="lvClETXNyBTzR-8tq42PI6Qb-7Ln_iH8ZTFl9eMF668dlbKzceZWWM7C-pM-4_uDQFVUmwvSp8ry-OLup6_IQg" autocomplete="off" /> <button id="dialog-show-danger-dialog-8cc41daf-7ade-48dd-96d8-5796ef92630b" data-show-dialog-id="danger-dialog-8cc41daf-7ade-48dd-96d8-5796ef92630b" type="button" data-view-component="true" class="Button--secondary Button--medium Button"> <span class="Button-content"> <span class="Button-label">Click me</span> </span> </button> <dialog-helper> <dialog role="alertdialog" id="danger-dialog-8cc41daf-7ade-48dd-96d8-5796ef92630b" aria-modal="true" aria-labelledby="danger-dialog-8cc41daf-7ade-48dd-96d8-5796ef92630b-title" aria-describedby="danger-dialog-8cc41daf-7ade-48dd-96d8-5796ef92630b-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade DangerDialog Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title sr-only" id="danger-dialog-8cc41daf-7ade-48dd-96d8-5796ef92630b-title"> Delete dialog </h1> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="danger-dialog-8cc41daf-7ade-48dd-96d8-5796ef92630b" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <danger-dialog-form-helper> <scrollable-region data-labelled-by="danger-dialog-8cc41daf-7ade-48dd-96d8-5796ef92630b-title"> <div data-view-component="true" class="Overlay-body"> <div class="blankslate-container"> <div id="danger-dialog-8cc41daf-7ade-48dd-96d8-5796ef92630b-description" data-view-component="true" class="FeedbackMessage blankslate"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-alert blankslate-icon color-fg-danger"> <path d="M13 17.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25-8.25a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5Z"></path><path d="M9.836 3.244c.963-1.665 3.365-1.665 4.328 0l8.967 15.504c.963 1.667-.24 3.752-2.165 3.752H3.034c-1.926 0-3.128-2.085-2.165-3.752Zm3.03.751a1.002 1.002 0 0 0-1.732 0L2.168 19.499A1.002 1.002 0 0 0 3.034 21h17.932a1.002 1.002 0 0 0 .866-1.5L12.866 3.994Z"></path> </svg> <h2 data-view-component="true" class="blankslate-heading">Permanently delete this item?</h2> <p data-view-component="true">This action is not reversible. Please confirm the following details before deletion.</p> </div> </div> <div data-view-component="true" class="DangerDialog-additionalDetails d-flex flex-items-center flex-justify-center mb-3"> <div data-view-component="true" class="flex-1 border rounded-2 p-3"> <div class="FormControl-spacingWrapper"> <div data-view-component="true"> <primer-text-field class="FormControl width-full FormControl--fullWidth"> <label class="FormControl-label" for="reason"> Reason for deletion <span aria-hidden="true">*</span> </label> <div class="FormControl-input-wrap FormControl-input-width--auto"> <input aria-required="true" aria-describedby="validation-4529bb36-c33f-482a-9d06-6c857a9440c6 caption-4529bb36-c33f-482a-9d06-6c857a9440c6" data-target="primer-text-field.inputElement " class="FormControl-input FormControl-medium" type="text" name="reason" id="reason" /> </div> <div class="FormControl-inlineValidation" id="validation-4529bb36-c33f-482a-9d06-6c857a9440c6" hidden="hidden"> <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill"> <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path> </svg></span> <span class=" FormControl-inlineValidation--visual" data-target="primer-text-field.validationErrorIcon"><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg></span> <span></span> </div> <span class="FormControl-caption" id="caption-4529bb36-c33f-482a-9d06-6c857a9440c6">Enter the reason for deleting this item</span> </primer-text-field> </div> <div data-view-component="true"> <div class="FormControl-check-group-wrap"> <fieldset aria-describedby="validation-7cae3350-bea4-420d-8c33-15ad352139c8" class=""> <legend class="FormControl-label"> Notify </legend> <div class="mb-2"> </div> <div class="FormControl-spacingWrapper"> <div class="FormControl-checkbox-wrap"> <input class="FormControl-checkbox" type="checkbox" value="creator" name="notify[]" id="notify_creator" /> <span class="FormControl-checkbox-labelWrap"> <label class="FormControl-label" for="notify_creator"> Creator </label> </span> </div> <div class="FormControl-checkbox-wrap"> <input class="FormControl-checkbox" type="checkbox" value="assignee" name="notify[]" id="notify_assignee" /> <span class="FormControl-checkbox-labelWrap"> <label class="FormControl-label" for="notify_assignee"> Assignee </label> </span> </div> <div class="FormControl-checkbox-wrap"> <input class="FormControl-checkbox" type="checkbox" value="watchers" name="notify[]" id="notify_watchers" /> <span class="FormControl-checkbox-labelWrap"> <label class="FormControl-label" for="notify_watchers"> Watchers </label> </span> </div> </div> </fieldset> <div class="mt-2"> <div class="FormControl-inlineValidation" id="validation-7cae3350-bea4-420d-8c33-15ad352139c8" hidden="hidden"> <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill"> <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path> </svg></span> <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg></span> <span></span> </div> </div> </div> </div> </div> </div> </div> </div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd"> <button data-close-dialog-id="danger-dialog-8cc41daf-7ade-48dd-96d8-5796ef92630b" type="button" data-view-component="true" class="Button--secondary Button--medium Button"> <span class="Button-content"> <span class="Button-label">Cancel</span> </span> </button> <button data-submit-dialog-id="danger-dialog-8cc41daf-7ade-48dd-96d8-5796ef92630b" type="submit" data-view-component="true" class="Button--danger Button--medium Button"> <span class="Button-content"> <span class="Button-label">Delete</span> </span> </button> </div> </danger-dialog-form-helper> </dialog></dialog-helper></form>No notes provided.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- Use the correct form URL here. --><%= primer_form_with(url: "") do |f| %> <%= render(Primer::OpenProject::DangerDialog.new( title: "Delete dialog", form_arguments: { builder: f } )) do |dialog| %> <% dialog.with_show_button { "Click me" } %> <% dialog.with_confirmation_message do |message| message.with_heading(tag: :h2).with_content("Permanently delete this item?") message.with_description_content("This action is not reversible. Please confirm the following details before deletion.") end %> <% dialog.with_additional_details do %> <%= render(Primer::Box.new(flex: 1, border: true, border_radius: 2, p: 3)) do %> <%= render(Primer::OpenProject::DangerDialogPreview::DeletionForm.new(f)) %> <% end %> <% end %> <% end %><% end %>No params configured.