OpenProject Lookbook

Previews

No matching results.

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
<button id="overlay-show-first-overlay" popovertarget="first-overlay" aria-haspopup="true" type="button" data-view-component="true" class="Button--secondary Button--medium Button">  <span class="Button-content">
    <span class="Button-label">Show overlay</span>
  </span>
</button>
<anchored-position id="first-overlay" anchor="overlay-show-first-overlay" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true">
  <div data-view-component="true" class="Overlay Overlay--size-auto">
    <div data-view-component="true" class="Overlay-body">    <button id="dialog-show-dialog-one" data-show-dialog-id="dialog-one" type="button" data-view-component="true" class="Button--secondary Button--medium Button">  <span class="Button-content">
          <span class="Button-label">Show Dialog</span>
        </span>
      </button>
      <dialog-helper>
        <dialog id="dialog-one" aria-modal="true" aria-labelledby="dialog-one-title" aria-describedby="dialog-one-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll">
          <div data-view-component="true" class="Overlay-header">
            <div class="Overlay-headerContentWrap">
              <div class="Overlay-titleWrap">
                <h1 class="Overlay-title " id="dialog-one-title">
                  Test Dialog
                </h1>
              </div>
              <div class="Overlay-actionWrap">
                <button data-close-dialog-id="dialog-one" 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="dialog-one-title">
            <div data-view-component="true" class="Overlay-body">Content</div>
          </scrollable-region>
          <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd Overlay-footer--divided">        <button data-close-dialog-id="dialog-one" type="button" data-view-component="true" class="Button--secondary Button--medium Button">  <span class="Button-content">
                <span class="Button-label">Cancel</span>
              </span>
            </button>
          </div>
        </dialog></dialog-helper>
    </div>
  </div>
</anchored-position>
<script>
  document.getElementById('overlay-show-first-overlay')?.addEventListener('click', e => {
    setTimeout(() => {
      document.getElementById('first-overlay').querySelector('button')?.click()
    });
  });
</script>

No notes provided.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%= render(Primer::Alpha::Overlay.new(title: "An overlay", id: "first-overlay")) do |o| %>
  <% o.with_show_button() { "Show overlay" } %>
  <% o.with_body() do %>
    <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, position: position, subtitle: subtitle, visually_hide_title: false)) do |d| %>
      <% d.with_show_button { button_text } %>
      <% d.with_body { body_text } %>
      <% d.with_footer(show_divider: true) do %>
        <%= render(Primer::Beta::Button.new(data: { "close-dialog-id": "dialog-one" })) { "Cancel" } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>
<script>
  document.getElementById('overlay-show-first-overlay')?.addEventListener('click', e => {
    setTimeout(() => {
      document.getElementById('first-overlay').querySelector('button')?.click()
    });
  });
</script>
Param Description Input

—

—

—

—

—

—

—

—