Skip to content

Commit a651b1a

Browse files
ianmcburnieianmcburnie
committed
docs: rename flyout to popover #139 
1 parent 5f04b3c commit a651b1a

File tree

10 files changed

+84
-84
lines changed

10 files changed

+84
-84
lines changed

_disclosure/flyout/index.html renamed to _disclosure/popover/index.html

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
layout: page
3-
title: Flyout
3+
title: Popover
44
---
55

66
<style>
7-
.flyout__content {
7+
.popover__content {
88
background-color: #eee;
99
border: 1px solid #ccc;
1010
color: black;
@@ -15,17 +15,17 @@
1515
<h1>{{ page.title }}</h1>
1616

1717
<h2 class="clipped">Readme</h2>
18-
<p>A non-modal overlay, showing contextually relevant content. <a href={{ "disclosure/flyout" | prepend: site.patterns_baseurl | prepend: site.patterns_url }}>Read more</a>.</p>
18+
<p>A non-modal overlay, showing contextually relevant content. <a href={{ "disclosure/popover" | prepend: site.patterns_baseurl | prepend: site.patterns_url }}>Read more</a>.</p>
1919

2020
<hr />
2121

2222
<h2>Example 1: Click Activated</h2>
23-
<p>A click activated flyout (i.e. launched using a button) is the recommended way to open a custom flyout.</p>
24-
<div class="flyout flyout--click">
25-
<button class="btn btn--secondary flyout__host">Button</button>
26-
<div class="flyout__live-region" aria-live="off">
27-
<div class="flyout__content">
28-
<p>Any kind of HTML control can go inside of a flyout...</p>
23+
<p>A click activated popover (i.e. launched using a button) is the recommended way to open a custom popover.</p>
24+
<div class="popover popover--click">
25+
<button class="btn btn--secondary popover__host">Button</button>
26+
<div class="popover__live-region" aria-live="off">
27+
<div class="popover__content">
28+
<p>Any kind of HTML control can go inside of a popover...</p>
2929
<p>A link: <a href="http://www.ebay.com">www.ebay.com</a></p>
3030
<p>A button: <button>Click Me</button></p>
3131
<p>An input: <input type="text" aria-label="Dummy textbox"></p>
@@ -39,13 +39,13 @@ <h2>Example 1: Click Activated</h2>
3939
<h2>Example 2: Hover Activated (discouraged)</h2>
4040
<p>Keyboard users cannot hover; as a workaround, a click-activated stealth button is available immediately after the link (appears on keyboard focus).</p>
4141
<div>
42-
<span class="flyout flyout--hover-only">
43-
<a class="flyout__host" href="http://www.ebay.com">Link</a>
44-
<span class="flyout flyout--click">
45-
<button class="flyout__host button stealth-button stealth">Expand</button>
46-
<div class="flyout__live-region" aria-live="off">
47-
<div class="flyout__content">
48-
<p>Any kind of HTML control can go inside of a flyout...</p>
42+
<span class="popover popover--hover-only">
43+
<a class="popover__host" href="http://www.ebay.com">Link</a>
44+
<span class="popover popover--click">
45+
<button class="popover__host button stealth-button stealth">Expand</button>
46+
<div class="popover__live-region" aria-live="off">
47+
<div class="popover__content">
48+
<p>Any kind of HTML control can go inside of a popover...</p>
4949
<p>A link: <a href="http://www.ebay.com">www.ebay.com</a></p>
5050
<p>A button: <button>Click Me</button></p>
5151
<p>An input: <input type="text" aria-label="Dummy textbox"></p>
@@ -59,13 +59,13 @@ <h2>Example 2: Hover Activated (discouraged)</h2>
5959
<hr />
6060

6161
<h2>Example 3: Focus Activated (discouraged)</h2>
62-
<p>This pattern is discouraged because it <em>forces</em> a keyboard user to navigate through all interactive items of the flyout. The exception here would be if there is an aria-activedescendant relationship with the flyout content (e.g. a combobox).</p>
63-
<div class="flyout flyout--focus">
62+
<p>This pattern is discouraged because it <em>forces</em> a keyboard user to navigate through all interactive items of the popover. The exception here would be if there is an aria-activedescendant relationship with the popover content (e.g. a combobox).</p>
63+
<div class="popover popover--focus">
6464
<span class="textbox">
65-
<input type="text" class="textbox__control flyout__host" aria-label="dummy textbox" />
66-
<div class="flyout__live-region" aria-live="off">
67-
<span class="flyout__content">
68-
<p>Any kind of HTML control can go inside of a flyout...</p>
65+
<input type="text" class="textbox__control popover__host" aria-label="dummy textbox" />
66+
<div class="popover__live-region" aria-live="off">
67+
<span class="popover__content">
68+
<p>Any kind of HTML control can go inside of a popover...</p>
6969
<p>A link: <a href="http://www.ebay.com">www.ebay.com</a></p>
7070
<p>A button: <button>Click Me</button></p>
7171
<p>An input: <input type="text" aria-label="Dummy textbox"></p>
@@ -78,12 +78,12 @@ <h2>Example 3: Focus Activated (discouraged)</h2>
7878
<hr />
7979

8080
<h2>Example 4: Hover and Focus Activated (discouraged)</h2>
81-
<p>This pattern is discouraged because it <em>forces</em> a keyboard user to navigate through all interactive items of the flyout.</p>
82-
<div class="flyout flyout--hover">
83-
<a class="flyout__host" href="http://www.ebay.com">Link</a>
84-
<div class="flyout__live-region" aria-live="off">
85-
<div class="flyout__content">
86-
<p>Any kind of HTML control can go inside of a flyout...</p>
81+
<p>This pattern is discouraged because it <em>forces</em> a keyboard user to navigate through all interactive items of the popover.</p>
82+
<div class="popover popover--hover">
83+
<a class="popover__host" href="http://www.ebay.com">Link</a>
84+
<div class="popover__live-region" aria-live="off">
85+
<div class="popover__content">
86+
<p>Any kind of HTML control can go inside of a popover...</p>
8787
<p>A link: <a href="http://www.ebay.com">www.ebay.com</a></p>
8888
<p>A button: <button>Click Me</button></p>
8989
<p>An input: <input type="text" aria-label="Dummy textbox"></p>
@@ -94,4 +94,4 @@ <h2>Example 4: Hover and Focus Activated (discouraged)</h2>
9494

9595
<hr />
9696

97-
<p><i>Updated</i>: March 24th, 2020</p>
97+
<p><i>Updated</i>: Jun 12th, 2025</p>

‎_input/listbox-button/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
</style>
5252

5353
<h1>{{ page.title }}</h1>
54-
<p>A button that expands to reveal a listbox in a flyout. <a href={{ "input/listbox-button" | prepend:
54+
<p>A button that expands to reveal a listbox in a popover. <a href={{ "input/listbox-button" | prepend:
5555
site.patterns_baseurl | prepend: site.patterns_url }}>Read more</a>.</p>
5656

5757
<hr />

‎_input/menu-button/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</style>
1111

1212
<h1>{{ page.title }}</h1>
13-
<p>A button that expands to reveal a menu within a flyout. <a href={{ "input/menu-button" | prepend: site.patterns_baseurl | prepend: site.patterns_url }}>Read more</a>.</p>
13+
<p>A button that expands to reveal a menu within a popover. <a href={{ "input/menu-button" | prepend: site.patterns_baseurl | prepend: site.patterns_url }}>Read more</a>.</p>
1414

1515
<hr />
1616

‎_js/main.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -142,42 +142,42 @@ document.addEventListener('DOMContentLoaded', function() {
142142
dialogWidget._el.addEventListener('dialog-cancel', logEvent);
143143
});
144144

145-
document.querySelectorAll('.flyout--click').forEach(function(widgetEl) {
145+
document.querySelectorAll('.popover--click').forEach(function(widgetEl) {
146146
pageWidgets.push(new Expander(widgetEl, {
147-
contentSelector: '.flyout__content',
147+
contentSelector: '.popover__content',
148148
expandOnClick: true,
149149
collapseOnClick: true,
150150
collapseOnClickOut: true,
151151
collapseOnFocusOut: true,
152-
hostSelector: '.flyout__host'
152+
hostSelector: '.popover__host'
153153
}));
154154
});
155155

156-
document.querySelectorAll('.flyout--focus').forEach(function(widgetEl) {
156+
document.querySelectorAll('.popover--focus').forEach(function(widgetEl) {
157157
pageWidgets.push(new Expander(widgetEl, {
158-
contentSelector: '.flyout__content',
158+
contentSelector: '.popover__content',
159159
expandOnFocus: true,
160160
autoCollapse: true,
161-
hostSelector: '.flyout__host'
161+
hostSelector: '.popover__host'
162162
}));
163163
});
164164

165-
document.querySelectorAll('.flyout--hover').forEach(function(widgetEl) {
165+
document.querySelectorAll('.popover--hover').forEach(function(widgetEl) {
166166
pageWidgets.push(new Expander(widgetEl, {
167-
contentSelector: '.flyout__content',
167+
contentSelector: '.popover__content',
168168
expandOnFocus: true,
169169
expandOnHover: true,
170170
autoCollapse: true,
171-
hostSelector: '.flyout__host'
171+
hostSelector: '.popover__host'
172172
}));
173173
});
174174

175-
document.querySelectorAll('.flyout--hover-only').forEach(function(widgetEl) {
175+
document.querySelectorAll('.popover--hover-only').forEach(function(widgetEl) {
176176
pageWidgets.push(new Expander(widgetEl, {
177-
contentSelector: '.flyout__content',
177+
contentSelector: '.popover__content',
178178
expandOnHover: true,
179179
autoCollapse: true,
180-
hostSelector: '.flyout__host'
180+
hostSelector: '.popover__host'
181181
}));
182182
});
183183

‎_navigation/fake-menu-button/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</style>
99

1010
<h1>{{ page.title }}</h1>
11-
<p>A button which opens a single column of links and/or buttons in a flyout. <a href={{ "navigation/fake-menu-button" | prepend: site.patterns_baseurl | prepend: site.patterns_url }}>Read more</a>.</p>
11+
<p>A button which opens a single column of links and/or buttons in a popover. <a href={{ "navigation/fake-menu-button" | prepend: site.patterns_baseurl | prepend: site.patterns_url }}>Read more</a>.</p>
1212
<hr />
1313

1414
<h2>Example 1: Links</h2>

‎_sass/_flyout.scss‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎_sass/_popover.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.popover {
2+
position: relative;
3+
}
4+
5+
.popover .popover {
6+
position: static;
7+
}
8+
9+
.popover__content,
10+
.popover__overlay {
11+
display: none;
12+
left: 0;
13+
position: absolute;
14+
z-index: 1;
15+
}
16+
17+
.popover__trigger[aria-expanded=true] ~ .popover__live-region .popover__overlay,
18+
.popover__trigger[aria-expanded=true] ~ .popover__overlay,
19+
.popover__trigger[aria-expanded=true] ~ .popover .popover__overlay {
20+
display: block;
21+
}
22+
23+
.popover__host[aria-expanded=true] ~ .popover__live-region .popover__content,
24+
.popover__host[aria-expanded=true] ~ .popover__overlay,
25+
.popover__host[aria-expanded=true] ~ .popover__content,
26+
.popover__host[aria-expanded=true] ~ .popover .popover__content {
27+
display: block;
28+
}
29+
30+
.popover__trigger.clipped--stealth {
31+
background-color: #eee;
32+
border: 1px solid #ccc;
33+
border-radius: 4px;
34+
font-size: 1em;
35+
padding: 4px 8px;
36+
white-space: nowrap;
37+
}

‎css/main.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"carousel",
1212
"details",
1313
"fake-tabs",
14-
"flyout",
14+
"popover",
1515
"infotip",
1616
"star-rating",
1717
"tabs",

‎static/browser.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/browser.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)