Primer ViewComponents v0.38.0

Previews

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
<%# With leading icons %>
<% subject_id = SecureRandom.hex %>
<%= render(Primer::Alpha::SelectPanel.new(
  data: { interaction_subject: subject_id },
  select_variant: :single,
  fetch_strategy: :local,
  dynamic_label: true,
  dynamic_label_prefix: "Item",
  dynamic_aria_label_prefix: "Selected item",
  open_on_load: open_on_load
)) do |panel| %>
  <% panel.with_show_button { "Choose item" } %>
  <% panel.with_item(label: "Leading SVG visual") do |item| %>
    <% item.with_leading_visual_svg do %>
      <path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>
    <% end %>
  <% end %>
  <% panel.with_item(label: "Custom content") do |item| %>
    <% item.with_leading_visual_content do %>
      <span style="width: 16px; height: 16px; display: block; text-align: center; line-height: 16px">A</span>
    <% end %>
  <% end %>
  <% panel.with_item(label: "Visual icons") do |item| %>
    <% item.with_leading_visual_icon(icon: :star) %>
  <% end %>
<% end %>
<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
<%# With trailing icons %>
<% subject_id = SecureRandom.hex %>
<%= render(Primer::Alpha::SelectPanel.new(
  data: { interaction_subject: subject_id },
  select_variant: :single,
  fetch_strategy: :local,
  dynamic_label: true,
  dynamic_label_prefix: "Item",
  dynamic_aria_label_prefix: "Selected item",
  open_on_load: open_on_load
)) do |panel| %>
  <% panel.with_show_button { "Choose item" } %>
  <% panel.with_item(label: "Visual icons") do |item| %>
    <% item.with_trailing_visual_icon(icon: :star) %>
  <% end %>
<% end %>
<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>