Skip to content

Commit 22d7536

Browse files
zeroedinbennypowers
zeroedin
and
bennypowers
authored
feat(back-to-top): pf-back-to-top element (#2589)
* feat(back-to-top): add back-to-top * fix(back-to-top): improve accessibility * fix(back-to-top): add href implementation, update demos * docs(back-to-top): improve demos * fix(back-to-top): inline-flex * docs(back-to-top): fix fragment anchors * fix(back-to-top): add button part to link * docs(back-to-top): use main target for all examples * docs(back-to-top): use main target for overview * test(back-to-top): add basic tests * fix(back-to-top): rename part to trigger to avoid confusion with button * docs(back-to-top): update cssprop documentation * docs(back-to-top): correct slot descriptions * chore(back-to-top): add changeset * chore: update typescript version * chore: pat typescript on the head * style(back-to-top): small refactors * perf(back-to-top): prevent memory leak * docs(back-to-top): add readme * docs(back-to-top): update readme * docs(back-to-top): move css link to top of demos * fix(back-to-top): remove type assertion * fix(back-to-top): memeber ordering * fix(back-to-top): rename classes variable * fix(back-to-top): update var * test(back-to-top): improve test ordering * fix(back-to-top): move eventlistener bindings to reactive callback * fix(back-to-top): wait for updatecomplete to reattach listener * fix(back-to-top): reorganizing code with suggestions from review * refactor(back-to-top): refactor element and tests * fix(back-to-top): add label ifDefined back accidental removal * docs(back-to-top): fix inline doc demos * fix(back-to-top): re-add vertical alignment for pf-icon * docs(back-to-top): update scrollable selector inline demos * docs(back-to-top): fix inline scroll selector demos * docs(back-to-top): update jsdoc * chore: remove errant changeset * chore: readd changeset misread review comment * docs: fix elements/readme, was incorrectly edited * test(back-to-top): fix describe async nesting * docs(back-to-top): remove content guidelines copy * refactor(back-to-top): label attribute * docs(back-to-top): clarify scrollable selector and distance usage * test(back-to-top): add tests for label attribute * test(back-to-top): test for keyboard accessibility * test(back-to-top): use snapshot to check that it doesnt exist in a11y tree * test(back-to-top): add async to a11y axe tests --------- Co-authored-by: Benny Powers <web@bennypowers.com>
1 parent c71bbe5 commit 22d7536

22 files changed

+1001
-115
lines changed

‎.changeset/khaki-bananas-perform.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@patternfly/elements": minor
3+
---
4+
5+
✨ Added `<pf-back-to-top>`
6+
7+
```html
8+
<pf-back-to-top href="#top" scrollable-selector="main">Back to Top</pf-back-to-top>
9+
```

‎.changeset/pfe-tools-ts52.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
"@patternfly/pfe-tools": patch
3+
---
4+
Update typescript version

‎elements/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
# PatternFly Elements
22

3-
See [PatternFly Elements Docs](https://patternflyelements.org) for more
3+
See [PatternFly Elements Docs](https://patternflyelements.org) for more
44
information.

‎elements/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"./pf-accordion/pf-accordion.js": "./pf-accordion/pf-accordion.js",
1919
"./pf-avatar/BaseAvatar.js": "./pf-avatar/BaseAvatar.js",
2020
"./pf-avatar/pf-avatar.js": "./pf-avatar/pf-avatar.js",
21+
"./pf-back-to-top/pf-back-to-top.js": "./pf-back-to-top/pf-back-to-top.js",
2122
"./pf-background-image/pf-background-image.js": "./pf-background-image/pf-background-image.js",
2223
"./pf-badge/BaseBadge.js": "./pf-badge/BaseBadge.js",
2324
"./pf-badge/pf-badge.js": "./pf-badge/pf-badge.js",

‎elements/pf-back-to-top/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Back to top
2+
3+
The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.
4+
5+
6+
## Installation
7+
Load `<pf-back-to-top>` via CDN:
8+
9+
```html
10+
<script src="https://jspm.dev/@patternfly/elements/pf-back-to-top/pf-back-to-top.js"></script>
11+
12+
13+
Or, if you are using [NPM](https://npm.im), install it
14+
15+
```bash
16+
npm install @patternfly/elements
17+
```
18+
19+
Then once installed, import it to your application:
20+
21+
```js
22+
import '@patternfly/elements/pf-back-to-top/pf-back-to-top.js';
23+
```
24+
25+
## Usage
26+
27+
```html
28+
<pf-back-to-top href="#top">Back to Top</pf-back-to-top>
29+
30+
```
31+
32+
[docs]: https://patternflyelements.org/components/back-to-top

‎elements/pf-back-to-top/demo/always-visible.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<link rel="stylesheet" href="demo.css">
2+
3+
<div class="outer-container padded" id="top">
4+
<h2>Always visible</h2>
5+
<a href="#focusable-element-top" id="top">Focusable element (top)</a>
6+
</div>
7+
8+
<pf-back-to-top always-visible href="#top">Back to top</pf-back-to-top>
9+
10+
<script type="module">
11+
import '@patternfly/elements/pf-back-to-top/pf-back-to-top.js';
12+
</script>

‎elements/pf-back-to-top/demo/button-no-text.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<link rel="stylesheet" href="demo.css">
2+
3+
<div class="outer-container" id="top">
4+
<div class="scroll-indicator padded">
5+
<h2>Button No Text</h2>
6+
<p><a href="#focusable-element-top">Focusable element (top)</a></p>
7+
<pf-icon icon="arrow-down"></pf-icon> Scroll down to end of cyan box, 400px (default).
8+
</div>
9+
</div>
10+
<a href="#focusable-element-bottom">Focusable element (bottom)</a>
11+
12+
<pf-back-to-top scrollable-selector="main"></pf-back-to-top>
13+
14+
<script type="module">
15+
import '@patternfly/elements/pf-back-to-top/pf-back-to-top.js';
16+
document.querySelector('pf-back-to-top').addEventListener('click', function() {
17+
// scroll to some element
18+
const target = document.querySelector('#top');
19+
target.scrollIntoView();
20+
target.focus();
21+
});
22+
</script>

‎elements/pf-back-to-top/demo/button.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<link rel="stylesheet" href="demo.css">
2+
3+
<pf-banner variant="info" id="top">
4+
<pf-icon icon="info-circle" slot="icon"></pf-icon>
5+
<strong>Accessibility Warning</strong> Using the Button/JS variant, implementation must apply click event and focus to the element that is scrolled to.
6+
</pf-banner>
7+
<div class="outer-container">
8+
<div class="scroll-indicator padded">
9+
<h2>Button</h2>
10+
<p><a href="#focusable-element-top">Focusable element (top)</a></p>
11+
<pf-icon icon="arrow-down"></pf-icon> Scroll down to end of cyan box, 400px (default).
12+
</div>
13+
</div>
14+
<a href="#focusable-element-bottom">Focusable element (bottom)</a>
15+
16+
<pf-back-to-top scrollable-selector="main">Back to top</pf-back-to-top>
17+
18+
<script type="module">
19+
import '@patternfly/elements/pf-back-to-top/pf-back-to-top.js';
20+
import '@patternfly/elements/pf-banner/pf-banner.js';
21+
document.querySelector('pf-back-to-top').addEventListener('click', function() {
22+
// scroll to some element
23+
const target = document.querySelector('#top');
24+
target.scrollIntoView();
25+
target.focus();
26+
});
27+
</script>

‎elements/pf-back-to-top/demo/demo.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
:root {
2+
--_scroll-distance: 400px;
3+
}
4+
5+
main {
6+
scroll-behavior: smooth;
7+
}
8+
9+
.scroll-distance {
10+
--_scroll-distance: 200px;
11+
}
12+
13+
.outer-container {
14+
height: calc(100vh - var(--pf-demo-header-height) + var(--_scroll-distance));
15+
}
16+
17+
.padded {
18+
padding: var(--pf-global--spacer--md, 1rem);
19+
}
20+
21+
.scroll-indicator {
22+
height: var(--_scroll-distance);
23+
background-color: var(--pf-global--palette--cyan-50, #f2f9f9) !important;
24+
}
25+

‎elements/pf-back-to-top/demo/label.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<link rel="stylesheet" href="demo.css">
2+
3+
<div class="outer-container" id="top">
4+
<div class="scroll-indicator padded">
5+
<h2>Default</h2>
6+
<p><a href="#focusable-element-top">Focusable element (top)</a></p>
7+
<pf-icon icon="arrow-down"></pf-icon> Scroll down to end of cyan box, 400px (default).
8+
</div>
9+
</div>
10+
<a href="#focusable-element-bottom">Focusable element (bottom)</a>
11+
12+
<pf-back-to-top scrollable-selector="main" href="#top" label="Top"></pf-back-to-top>
13+
14+
<script type="module">
15+
import '@patternfly/elements/pf-back-to-top/pf-back-to-top.js';
16+
</script>

0 commit comments

Comments
 (0)