300px
x
150px
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
<button id="dialog-show-feedback-dialog-61a5a5b7-6316-4d29-807f-a11a70906869" data-show-dialog-id="feedback-dialog-61a5a5b7-6316-4d29-807f-a11a70906869" 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 id="feedback-dialog-61a5a5b7-6316-4d29-807f-a11a70906869" aria-modal="true" aria-labelledby="feedback-dialog-61a5a5b7-6316-4d29-807f-a11a70906869-title" aria-describedby="feedback-dialog-61a5a5b7-6316-4d29-807f-a11a70906869-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade FeedbackDialog 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="feedback-dialog-61a5a5b7-6316-4d29-807f-a11a70906869-title"> Success message </h1> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="feedback-dialog-61a5a5b7-6316-4d29-807f-a11a70906869" 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> <scrollable-region data-labelled-by="feedback-dialog-61a5a5b7-6316-4d29-807f-a11a70906869-title"> <div data-view-component="true" class="Overlay-body"> <div class="blankslate-container"> <div id="feedback-dialog-61a5a5b7-6316-4d29-807f-a11a70906869-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-check-circle blankslate-icon color-fg-success"> <path d="M17.28 9.28a.75.75 0 0 0-1.06-1.06l-5.97 5.97-2.47-2.47a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l6.5-6.5Z"></path><path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"></path> </svg> <h2 data-view-component="true" class="blankslate-heading">Action successful</h2> </div> </div> <div data-view-component="true" class="FeedbackDialog-additionalDetails d-flex flex-items-center flex-justify-center mb-3"><span data-view-component="true">You can render whatever component you want here.</span></div> </div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd"> <button data-close-dialog-id="feedback-dialog-61a5a5b7-6316-4d29-807f-a11a70906869" type="button" data-view-component="true" class="Button--secondary Button--medium Button"> <span class="Button-content"> <span class="Button-label">Close</span> </span> </button> </div> </dialog></dialog-helper>No notes provided.
1
2
3
4
5
6
7
8
9
<%= render(Primer::OpenProject::FeedbackDialog.new(title: "Success message")) do |dialog| %> <% dialog.with_show_button { "Click me" } %> <% dialog.with_feedback_message do |message| %> <% message.with_heading(tag: :h2).with_content("Action successful") %> <% end %> <% dialog.with_additional_details do %> <% render(Primer::Beta::Text.new) { "You can render whatever component you want here." } %> <% end %><% end %>No params configured.