Skip to content

Commit e345b56

Browse files
kineticjskineticjs
committed
feat(ui5-list): add sticky header property
1 parent f672e13 commit e345b56

10 files changed

Lines changed: 216 additions & 30 deletions

File tree

‎packages/main/cypress/specs/List.cy.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import ResponsivePopover from "../../src/ResponsivePopover.js";
1212
import Select from "../../src/Select.js";
1313
import Option from "../../src/Option.js";
1414
import CheckBox from "../../src/CheckBox.js";
15+
import Bar from "../../src/Bar.js";
1516

1617
function getGrowingWithScrollList(length: number, height: string = "100px") {
1718
return (
@@ -2516,4 +2517,77 @@ describe("List keyboard drag and drop tests", () => {
25162517

25172518
cy.get("#item9").prev().should("have.id", "item4");
25182519
});
2520+
});
2521+
2522+
describe("List sticky header", () => {
2523+
it("sticks default header", () => {
2524+
cy.mount(
2525+
<div id="scrollContainer" style="height: 100px;overflow: auto;">
2526+
<List headerText="Sticky Header" stickyHeader>
2527+
<ListItemStandard>Item 1</ListItemStandard>
2528+
<ListItemStandard>Item 2</ListItemStandard>
2529+
<ListItemStandard>Item 3</ListItemStandard>
2530+
</List>
2531+
<div id="bottomSpacer" style={{ height: "1000px" }}></div>
2532+
</div>
2533+
);
2534+
2535+
cy.get("#scrollContainer")
2536+
.as("container");
2537+
2538+
cy.get("[ui5-list]")
2539+
.shadow()
2540+
.find(".ui5-list-header")
2541+
.as("header");
2542+
2543+
cy.get("@header")
2544+
.then(($headerBefore) => {
2545+
const headerTopBefore = $headerBefore[0].getBoundingClientRect().top;
2546+
2547+
cy.get("@container")
2548+
.scrollTo(0, 50);
2549+
2550+
cy.get("@header")
2551+
.should(($headerAfter) => {
2552+
const headerTopAfter = $headerAfter[0].getBoundingClientRect().top;
2553+
expect(headerTopAfter).to.eq(headerTopBefore);
2554+
});
2555+
});
2556+
});
2557+
2558+
it("sticks custom header", () => {
2559+
cy.mount(
2560+
<div id="scrollContainer" style="height: 100px;overflow: auto;">
2561+
<List stickyHeader>
2562+
<Bar slot="header">
2563+
<Title>Sticky Header Bar</Title>
2564+
</Bar>
2565+
<ListItemStandard>Item 1</ListItemStandard>
2566+
<ListItemStandard>Item 2</ListItemStandard>
2567+
<ListItemStandard>Item 3</ListItemStandard>
2568+
</List>
2569+
<div id="bottomSpacer" style={{ height: "1000px" }}></div>
2570+
</div>
2571+
);
2572+
2573+
cy.get("#scrollContainer")
2574+
.as("container");
2575+
2576+
cy.get("[ui5-bar]")
2577+
.as("header");
2578+
2579+
cy.get("@header")
2580+
.then(($headerBefore) => {
2581+
const headerTopBefore = $headerBefore[0].getBoundingClientRect().top;
2582+
2583+
cy.get("@container")
2584+
.scrollTo(0, 50);
2585+
2586+
cy.get("@header")
2587+
.should(($headerAfter) => {
2588+
const headerTopAfter = $headerAfter[0].getBoundingClientRect().top;
2589+
expect(headerTopAfter).to.eq(headerTopBefore);
2590+
});
2591+
});
2592+
});
25192593
});

‎packages/main/src/List.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -396,6 +396,17 @@ class List extends UI5Element {
396396
@property({ type: Number })
397397
loadingDelay = 1000;
398398

399+
/**
400+
* Indicates whether the List header is sticky or not.
401+
* If stickyHeader is set to true, then whenever you scroll the content or
402+
* the application, the header of the list will be always visible.
403+
* @default false
404+
* @public
405+
* @since 2.18.0
406+
*/
407+
@property({ type: Boolean })
408+
stickyHeader = false;
409+
399410
/**
400411
* Defines the accessible name of the component.
401412
* @default undefined

‎packages/main/src/ListTemplate.tsx‎

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,7 @@ export default function ListTemplate(this: List) {
2929
active={this.showBusyIndicatorOverlay}
3030
class="ui5-list-busy-indicator"
3131
>
32-
33-
<div class="ui5-list-scroll-container">
32+
<div class="ui5-list-container">
3433
<span tabindex={-1} aria-hidden="true" class="ui5-list-start-marker"></span>
3534

3635
{this.header.length > 0 && <slot name="header" />}
@@ -41,40 +40,42 @@ export default function ListTemplate(this: List) {
4140
</header>
4241
}
4342

44-
{this.hasData &&
45-
<div id={`${this._id}-before`} tabindex={0} role="none" class="ui5-list-focusarea"></div>
46-
}
43+
<div class="ui5-list-scroll-container">
4744

48-
<span id={`${this._id}-modeLabel`} class="ui5-hidden-text">{this.ariaLabelModeText}</span>
45+
{this.hasData &&
46+
<div id={`${this._id}-before`} tabindex={0} role="none" class="ui5-list-focusarea"></div>
47+
}
4948

50-
<ul id={`${this._id}-listUl`}
51-
class="ui5-list-ul"
52-
role={this.listAccessibleRole}
53-
aria-label={this.ariaLabelTxt}
54-
aria-labelledby={this.ariaLabelledBy}
55-
aria-description={this.ariaDescriptionText}
56-
>
57-
<slot></slot>
49+
<span id={`${this._id}-modeLabel`} class="ui5-hidden-text">{this.ariaLabelModeText}</span>
5850

59-
{this.showNoDataText &&
60-
<li tabindex={0} id={`${this._id}-nodata`} class="ui5-list-nodata" role="listitem">
61-
<div id={`${this._id}-nodata-text`} class="ui5-list-nodata-text">
62-
{this.noDataText}
63-
</div>
64-
</li>
65-
}
66-
</ul>
51+
<ul id={`${this._id}-listUl`}
52+
class="ui5-list-ul"
53+
role={this.listAccessibleRole}
54+
aria-label={this.ariaLabelTxt}
55+
aria-labelledby={this.ariaLabelledBy}
56+
aria-description={this.ariaDescriptionText}
57+
>
58+
<slot></slot>
6759

68-
{ this.growsWithButton && moreRow.call(this) }
60+
{this.showNoDataText &&
61+
<li tabindex={0} id={`${this._id}-nodata`} class="ui5-list-nodata" role="listitem">
62+
<div id={`${this._id}-nodata-text`} class="ui5-list-nodata-text">
63+
{this.noDataText}
64+
</div>
65+
</li>
66+
}
67+
</ul>
6968

70-
{this.footerText &&
71-
<footer id={`${this._id}-footer`} class="ui5-list-footer">{this.footerText}</footer>
72-
}
69+
{ this.growsWithButton && moreRow.call(this) }
7370

74-
{this.hasData &&
75-
<div id={`${this._id}-after`} tabindex={0} role="none" class="ui5-list-focusarea"></div>
76-
}
71+
{this.footerText &&
72+
<footer id={`${this._id}-footer`} class="ui5-list-footer">{this.footerText}</footer>
73+
}
7774

75+
{this.hasData &&
76+
<div id={`${this._id}-after`} tabindex={0} role="none" class="ui5-list-focusarea"></div>
77+
}
78+
</div>
7879
<span tabindex={-1} aria-hidden="true" class="ui5-list-end-marker"></span>
7980
</div>
8081
<DropIndicator orientation="Horizontal" ownerReference={this}/>

‎packages/main/src/themes/List.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
}
1818

1919
.ui5-list-root,
20-
.ui5-list-busy-indicator {
20+
.ui5-list-busy-indicator,
21+
.ui5-list-container {
2122
width: 100%;
2223
height: 100%;
2324
position: relative;
@@ -111,4 +112,11 @@
111112
:host([growing="Scroll"]) .ui5-list-end-marker {
112113
/* Ensure the list-end-marker has a block property to always be stretched and "visible" on the screen */
113114
display: inline-block;
115+
}
116+
117+
:host([sticky-header]) ::slotted([slot="header"]),
118+
:host([sticky-header]) .ui5-list-header {
119+
position: sticky;
120+
top: 0;
121+
z-index: 100;
114122
}

‎packages/main/test/pages/List.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,46 @@
8989
</ui5-list>
9090

9191
<br/><br/>
92+
<h2>List with sticky header</h2>
93+
<ui5-list class="list6auto" sticky-header>
94+
<ui5-bar slot="header">
95+
<ui5-title>Sticky Header Bar</ui5-title>
96+
<ui5-button slot="endContent" icon="action">Action</ui5-button>
97+
</ui5-bar>
98+
<ui5-li >Item 1</ui5-li>
99+
<ui5-li >Item 2</ui5-li>
100+
<ui5-li >Item 3</ui5-li>
101+
<ui5-li >Item 4</ui5-li>
102+
<ui5-li >Item 5</ui5-li>
103+
<ui5-li >Item 6</ui5-li>
104+
<ui5-li >Item 7</ui5-li>
105+
<ui5-li >Item 8</ui5-li>
106+
<ui5-li >Item 9</ui5-li>
107+
<ui5-li >Item 10</ui5-li>
108+
<ui5-li >Item 11</ui5-li>
109+
<ui5-li >Item 12</ui5-li>
110+
<ui5-li >Item 13</ui5-li>
111+
<ui5-li >Item 14</ui5-li>
112+
<ui5-li >Item 15</ui5-li>
113+
</ui5-list>
114+
115+
<ui5-list class="list6auto" header-text="Sticky Header" sticky-header>
116+
<ui5-li >Item 1</ui5-li>
117+
<ui5-li >Item 2</ui5-li>
118+
<ui5-li >Item 3</ui5-li>
119+
<ui5-li >Item 4</ui5-li>
120+
<ui5-li >Item 5</ui5-li>
121+
<ui5-li >Item 6</ui5-li>
122+
<ui5-li >Item 7</ui5-li>
123+
<ui5-li >Item 8</ui5-li>
124+
<ui5-li >Item 9</ui5-li>
125+
<ui5-li >Item 10</ui5-li>
126+
<ui5-li >Item 11</ui5-li>
127+
<ui5-li >Item 12</ui5-li>
128+
<ui5-li >Item 13</ui5-li>
129+
<ui5-li >Item 14</ui5-li>
130+
<ui5-li >Item 15</ui5-li>
131+
</ui5-list>
92132

93133
<h2>List growing="Button" and growing-button-text property used</h2>
94134
<ui5-list id="infiniteScrollEx2" growing="Button" growing-button-text="Custom growing-button-text" class="list3auto">
@@ -688,6 +728,8 @@ <h2>With accessible description</h2>
688728
</ui5-li-custom>
689729
</ui5-list>
690730

731+
732+
691733
<script>
692734
'use strict';
693735

‎packages/main/test/pages/styles/List.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@
2323
justify-content: space-between
2424
}
2525

26+
.list6auto {
27+
height: 500px;
28+
}
29+
2630
.largeTopMargin {
2731
margin-top: 2rem;
2832
}

‎packages/website/docs/_components_pages/main/List/List.mdx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import SeparationTypes from "../../../_samples/main/List/SeparationTypes/Separat
1212
import DragAndDrop from "../../../_samples/main/List/DragAndDrop/DragAndDrop.md";
1313
import MultipleDrag from "../../../_samples/main/List/MultipleDrag/MultipleDrag.md";
1414
import WrappingBehavior from "../../../_samples/main/List/WrappingBehavior/WrappingBehavior.md";
15+
import StickyHeader from "../../../_samples/main/List/StickyHeader/StickyHeader.md";
1516

1617
<%COMPONENT_OVERVIEW%>
1718

@@ -75,3 +76,8 @@ This feature improves readability when displaying lengthy content in lists.
7576
The `<ui5-li-custom>` is intentionally designed as a generic container to provide maximum flexibility. It can be used alongside `ui5-expandable-text` for long text content.
7677

7778
<WrappingBehavior />
79+
80+
### Sticky Header
81+
Use the <b>stickyHeader</b> property to keep the header visible during scrolling.
82+
83+
<StickyHeader/>

‎packages/website/docs/_samples/main/List/StickyHeader/StickyHeader.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import html from '!!raw-loader!./sample.html';
2+
import js from '!!raw-loader!./main.js';
3+
4+
<Editor html={html} js={js} />

‎packages/website/docs/_samples/main/List/StickyHeader/main.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import "@ui5/webcomponents/dist/List.js";
2+
import "@ui5/webcomponents/dist/ListItemStandard.js";
3+
4+
import "@ui5/webcomponents-icons/dist/product.js";

‎packages/website/docs/_samples/main/List/StickyHeader/sample.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!-- playground-fold -->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Sample</title>
9+
</head>
10+
11+
<body style="background-color: var(--sapBackgroundColor)">
12+
<!-- playground-fold-end -->
13+
14+
<ui5-list headerText="Sticky Header" sticky-header>
15+
<ui5-li icon="product">Item #1</ui5-li>
16+
<ui5-li icon="product">Item #2</ui5-li>
17+
<ui5-li icon="product">Item #3</ui5-li>
18+
<ui5-li icon="product">Item #4</ui5-li>
19+
<ui5-li icon="product">Item #5</ui5-li>
20+
<ui5-li icon="product">Item #6</ui5-li>
21+
<ui5-li icon="product">Item #7</ui5-li>
22+
<ui5-li icon="product">Item #8</ui5-li>
23+
<ui5-li icon="product">Item #9</ui5-li>
24+
<ui5-li icon="product">Item #10</ui5-li>
25+
</ui5-list>
26+
27+
<!-- playground-fold -->
28+
<script type="module" src="main.js"></script>
29+
</body>
30+
31+
</html>
32+
<!-- playground-fold-end -->

0 commit comments

Comments
 (0)