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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<sub-header data-view-component="true" class="SubHeader">
  <div class="SubHeader-leftPane">
    <div data-targets="sub-header.shownItemsOnExpandedFilter" data-view-component="true" class="SubHeader-filterContainer d-none d-sm-flex">
      <primer-text-field class="FormControl width-full FormControl--fullWidth">
        <label class="sr-only FormControl-label" for="filter">
          Filter
        </label>
        <div class="FormControl-input-wrap FormControl-input-wrap--trailingAction FormControl-input-wrap--leadingVisual FormControl-input-width--medium">
          <span class="FormControl-input-leadingVisualWrap">
            <svg data-target="primer-text-field.leadingVisual" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search FormControl-input-leadingVisual">
              <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
            </svg>
          </span>
          <input placeholder="Filter" data-target="primer-text-field.inputElement sub-header.filterInput" data-action=" input:sub-header#toggleFilterInputClearButton focus:sub-header#toggleFilterInputClearButton" aria-describedby="validation-e85d7fcd-94f7-4950-9434-c740541ef4e2" class="FormControl-input FormControl-medium SubHeader-filterInput SubHeader-filterInput_hiddenClearButton" type="text" name="filter" id="filter" />
          <button type="button" id="" class="FormControl-input-trailingAction" aria-label="Clear" data-action="click:primer-text-field#clearContents">
            <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x-circle-fill">
              <path d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path>
            </svg>
          </button>
        </div>
        <div class="FormControl-inlineValidation" id="validation-e85d7fcd-94f7-4950-9434-c740541ef4e2" hidden="hidden">
          <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
              <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
            </svg></span>
          <span class=" FormControl-inlineValidation--visual" data-target="primer-text-field.validationErrorIcon"><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
              <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
            </svg></span>
          <span></span>
        </div>
      </primer-text-field>
      <button data-targets="sub-header.shownItemsOnExpandedFilter" data-action="click:sub-header#collapseFilterInput" type="button" data-view-component="true" class="Button--invisible Button--medium Button Button--invisible-noVisuals d-none">  <span class="Button-content">
          <span class="Button-label">Cancel</span>
        </span>
      </button>
    </div>
    <button data-action="click:sub-header#expandFilterInput" data-targets="sub-header.hiddenItemsOnExpandedFilter" id="icon-button-5f138dd6-1a2b-4275-992d-816b13566400" aria-labelledby="tooltip-3a7fff98-aa29-42d1-b674-f8eb71108fcf" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium d-inline-flex d-sm-none">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search Button-visual">
        <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
      </svg>
    </button><tool-tip id="tooltip-3a7fff98-aa29-42d1-b674-f8eb71108fcf" for="icon-button-5f138dd6-1a2b-4275-992d-816b13566400" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Filter</tool-tip>
  </div>
  <div class="SubHeader-middlePane" data-targets="sub-header.hiddenItemsOnExpandedFilter">
  </div>
  <div class="SubHeader-rightPane" data-targets="sub-header.hiddenItemsOnExpandedFilter">
    <div data-view-component="true">    <action-menu data-select-variant="none" data-view-component="true">
        <focus-group direction="vertical" mnemonics retain>
          <button id="menu-1-button" popovertarget="menu-1-overlay" aria-controls="menu-1-list" aria-haspopup="true" aria-labelledby="tooltip-e5f93f50-2533-4af8-bdc6-4ff6f08040a2" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-op-kebab-vertical Button-visual">
              <path d="M9.5 14.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 9.5 14.5Zm0-6.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 9.5 8ZM8 0a1.5 1.5 0 1 1-.001 3.001A1.5 1.5 0 0 1 8 0Z"></path>
            </svg>
          </button><tool-tip id="tooltip-e5f93f50-2533-4af8-bdc6-4ff6f08040a2" for="menu-1-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Menu</tool-tip>
          <anchored-position data-target="action-menu.overlay" id="menu-1-overlay" anchor="menu-1-button" 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 Overlay-body--paddingNone">          <action-list>
                  <div data-view-component="true">
                    <ul aria-labelledby="menu-1-button" id="menu-1-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap">
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button tabindex="-1" id="item-a5184bd8-95a8-45a3-a095-03c992cd430c" type="button" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
                          <span class="ActionListItem-visual ActionListItem-visual--leading">
                            <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-paste">
                              <path d="M3.626 3.533a.249.249 0 0 0-.126.217v9.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-9.5a.249.249 0 0 0-.126-.217.75.75 0 0 1 .752-1.298c.541.313.874.89.874 1.515v9.5A1.75 1.75 0 0 1 12.25 15h-8.5A1.75 1.75 0 0 1 2 13.25v-9.5c0-.625.333-1.202.874-1.515a.75.75 0 0 1 .752 1.298ZM5.75 1h4.5a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-.75.75h-4.5A.75.75 0 0 1 5 4.75v-3A.75.75 0 0 1 5.75 1Zm.75 3h3V2.5h-3Z"></path>
                            </svg>
                          </span>
                          <span data-view-component="true" class="ActionListItem-label">
                            Subitem 1
                          </span>
                        </button>
                      </li>
                      <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
                        <button tabindex="-1" id="item-fa52accb-675e-4ffe-9d82-b830fc7d270a" type="button" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
                          <span class="ActionListItem-visual ActionListItem-visual--leading">
                            <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-log">
                              <path d="M5 8.25a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4A.75.75 0 0 1 5 8.25ZM4 10.5A.75.75 0 0 0 4 12h4a.75.75 0 0 0 0-1.5H4Z"></path><path d="M13-.005c1.654 0 3 1.328 3 3 0 .982-.338 1.933-.783 2.818-.443.879-1.028 1.758-1.582 2.588l-.011.017c-.568.853-1.104 1.659-1.501 2.446-.398.789-.623 1.494-.623 2.136a1.5 1.5 0 1 0 2.333-1.248.75.75 0 0 1 .834-1.246A3 3 0 0 1 13 16H3a3 3 0 0 1-3-3c0-1.582.891-3.135 1.777-4.506.209-.322.418-.637.623-.946.473-.709.923-1.386 1.287-2.048H2.51c-.576 0-1.381-.133-1.907-.783A2.68 2.68 0 0 1 0 2.995a3 3 0 0 1 3-3Zm0 1.5a1.5 1.5 0 0 0-1.5 1.5c0 .476.223.834.667 1.132A.75.75 0 0 1 11.75 5.5H5.368c-.467 1.003-1.141 2.015-1.773 2.963-.192.289-.381.571-.558.845C2.13 10.711 1.5 11.916 1.5 13A1.5 1.5 0 0 0 3 14.5h7.401A2.989 2.989 0 0 1 10 13c0-.979.338-1.928.784-2.812.441-.874 1.023-1.748 1.575-2.576l.017-.026c.568-.853 1.103-1.658 1.501-2.448.398-.79.623-1.497.623-2.143 0-.838-.669-1.5-1.5-1.5Zm-10 0a1.5 1.5 0 0 0-1.5 1.5c0 .321.1.569.27.778.097.12.325.227.74.227h7.674A2.737 2.737 0 0 1 10 2.995c0-.546.146-1.059.401-1.5Z"></path>
                            </svg>
                          </span>
                          <span data-view-component="true" class="ActionListItem-label">
                            Subitem 2
                          </span>
                        </button>
                      </li>
                    </ul>
                  </div>
                </action-list>
              </div>
            </div>
          </anchored-position>  </focus-group>
      </action-menu>
    </div>
  </div>
</sub-header>

No notes provided.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%= render(Primer::OpenProject::SubHeader.new) do |component| %>
  <% component.with_filter_input(name: "filter", label: "Filter") %>
  <% component.with_action_component do %>
    <%= render Primer::Alpha::ActionMenu.new(menu_id: "menu-1") do |menu|
      menu.with_show_button(icon: :"op-kebab-vertical", "aria-label": "Menu")
      menu.with_item(label: "Subitem 1") do |item|
        item.with_leading_visual_icon(icon: :paste)
      end
      menu.with_item(label: "Subitem 2") do |item|
        item.with_leading_visual_icon(icon: :log)
      end
    end %>
  <% end %>
<% end %>

No params configured.