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
<nav aria-label="List heading" data-view-component="true">
  <nav-list>
    <ul data-target="nav-list.topLevelList" data-view-component="true" class="ActionListWrap">
      <li data-item-id="" data-targets="nav-list.items" data-view-component="true" class="ActionListItem">
        <button id="item-45d81849-8dab-4be8-8a76-5344784945a1" type="button" data-view-component="true" class="ActionListContent">
          <span data-view-component="true" class="ActionListItem-label">
            Really really long label that may wrap, truncate, or appear as a tooltip
          </span>
        </button>
      </li>
      <li data-item-id="" data-targets="nav-list.items" data-view-component="true" class="ActionListItem">
        <button id="item-ba78a00a-c33c-4c0f-8cf3-0726a285d24b" type="button" data-view-component="true" class="ActionListContent">
          <span data-view-component="true" class="ActionListItem-label">
            Really really long label that may wrap, truncate, or appear as a tooltip
          </span>
        </button>
      </li>
      <li data-item-id="" data-targets="nav-list.items" data-view-component="true" class="ActionListItem">
        <button id="item-fed26c3d-b85d-4495-868b-782d3b14773e" type="button" data-view-component="true" class="ActionListContent">
          <span data-view-component="true" class="ActionListItem-label">
            Really really long label that may wrap, truncate, or appear as a tooltip
          </span>
        </button>
      </li>
    </ul>
  </nav-list>
</nav>

No notes provided.

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
<% if truncate_label == :truncate %>
  <div style="margin-bottom:1rem">
    <%= render(
      Primer::Alpha::Banner.new(
        scheme: :warning,
        description: 'If you must use truncation, ensure that users can still access the truncated content in an accessible manner, as truncation should be used sparingly.'
      )
    ) { "Inaccessible pattern" } %>
  </div>
<% end %>
<%= render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component| %>
  <% component.with_item(
    label: "Really really long label that may wrap, truncate, or appear as a tooltip",
    truncate_label: truncate_label
  ) %>
  <% component.with_item(
    label: "Really really long label that may wrap, truncate, or appear as a tooltip",
    truncate_label: truncate_label
  ) %>
  <% component.with_item(
    label: "Really really long label that may wrap, truncate, or appear as a tooltip",
    truncate_label: truncate_label
  ) %>
<% end %>
Param Description Input

—