Anchor ViewComponents

Pages

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
<button type="button" class="btn" data-testid="dialog-title-btn" commandfor="my-dialog" command="show-modal">
  Open dialog
</button>
<dialog aria-labelledby="dialog-title" class="open:flex overflow-visible flex-col p-0 bg-white shadow-lg backdrop:bg-gray-950/50 w-[36rem] rounded-lg m-auto" data-controller="dialog" data-action="close->dialog#reset" data-testid="dialog-title" id="my-dialog">
  <header class="px-6 pt-6 pb-3 flex gap-4 justify-between items-center bg-white rounded-t-lg">
    <h1 id="dialog-title" data-testid="dialog-title" class="text-xl leading-6 font-semibold">Dialog Title</h1>
    <button aria-label="Close" class="text-secondary hover:text-primary" type="button" data-action="dialog#close">
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="24" height="24" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true">
        <path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </button>  </header>
  <div class="px-6 pt-3 flex-auto bg-white pb-3" data-testid="dialog-body">    
    <form id="a-form" class="flex flex-col gap-4" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="GFzFoqqzII9uXq-hI61EuYWjYJHF02yEOyfb41KvbjrPbr2iZDEQj-5cS2SBlwOVVsatFARCWw4kmYQc_3Z0EQ" autocomplete="off" />
      <div class="field_with_errors"><label class="font-semibold text-base text-primary" data-testid="label-name" for="fake_user_name">Name</label></div>
      <div data-testid="form-field-input-name">
        <div class="field_with_errors"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base border-critical" autocomplete="off" data-testid="input-name" aria-describedby="error-name" aria-invalid="true" required="required" type="text" value="" name="fake_user[name]" id="fake_user_name" /></div>
      </div>
      <div role="alert" class="bg-critical-subdued flex gap-2 items-center mt-1 px-2 py-1 rounded text-critical text-sm" data-error="true" data-testid="error-name" data-turbo-temporary="true">
        <!-- Source: Iconoir, added via `bin/add_icon` -->
        <svg width="16" height="16" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true">
          <path d="M20.0429 21H3.95705C2.41902 21 1.45658 19.3364 2.22324 18.0031L10.2662 4.01533C11.0352 2.67792 12.9648 2.67791 13.7338 4.01532L21.7768 18.0031C22.5434 19.3364 21.581 21 20.0429 21Z" stroke="currentColor" stroke-linecap="round"></path>
          <path d="M12 9V13" stroke="currentColor" stroke-linecap="round"></path>
          <path d="M12 17.01L12.01 16.9989" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <p id="error-name">Name can't be blank</p>
      </div>
    </form>
  </div>
  <footer class="sticky bottom-0 bg-white px-6 pt-3 pb-6 flex gap-2 justify-end rounded-b-lg">
    <button type="button" class="btn" data-testid="cancel-button" data-action="dialog#close">
      Cancel
    </button>
    <button type="submit" class="btn btn-primary" data-testid="save-button" form="a-form">
      Save
    </button>
  </footer>
</dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<% invalid_user = FakeUser.new(name: "").tap(&:validate) %>
<%= anchor_dialog(
  id: "my-dialog",
  title: "Dialog Title",
) do |dialog| %>
  <% dialog.with_show_button_content("Open dialog") %>
  <% dialog.with_body do %>
    <%= anchor_form_with(model: invalid_user, url: false, id: 'a-form') do |form| %>
      <%= form.label(:name) %>
      <%= form.text_field(:name, required: true) %>
      <%= form.error_message_for(:name) %>
    <% end %>
  <% end %>
  <% dialog.with_footer do %>
    <%= anchor_button("Cancel", data: { action: "dialog#close" }) %>
    <%= anchor_button("Save", variant: :primary, type: :submit, form: 'a-form') %>
  <% end %>
<% end %>

No notes provided.

No params configured.