Midwest Component Library v0.24.0

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
<div class="flex items-center justify-center p-16">
  <button popovertarget="playground-popover" class="midwest-button variant-default size-default theme-primary" name="button">
    <span class="midwest-button-content">Open popover</span>
    <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
      <div class="midwest-loading-icon-inner">
        <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
        <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
          <circle cx="15" cy="15" r="15">
            <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
            <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
          </circle>
          <circle cx="60" cy="15" r="9" fill-opacity="0.3">
            <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
            <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
          </circle>
          <circle cx="105" cy="15" r="15">
            <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
            <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
          </circle>
        </svg>
      </div>
    </div>
  </button>
  <div id="playground-popover" popover="auto" class="midwest-popover anchored" style="anchor-name: --playground-popover">
    <div class="p-4">
      <p class="text-sm font-semibold mb-1">Popover</p>
      <p class="text-sm text-gray-6">control: auto</p>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<% popover_name = params[:name] || "playground-popover" %>
<% popover_control = params[:control] || "auto" %>
<div class="flex items-center justify-center p-16">
  <%= midwest_popover(name: popover_name, control: popover_control) do |pop| %>
    <% pop.with_toggler do %>
      <%= midwest_button("Open popover", as: :button, popovertarget: popover_name) %>
    <% end %>
    <div class="p-4">
      <p class="text-sm font-semibold mb-1">Popover</p>
      <p class="text-sm text-gray-6">control: <%= popover_control %></p>
    </div>
  <% end %>
</div>

Playground

This example uses dynamic preview parameters which can be edited live in the Lookbook UI

Param Description Input

Unique ID for the popover (must match popovertarget on the toggler)

auto dismisses on outside click; manual requires explicit JS control

Pin the popover to a specific side

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Popover/playground

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."