Skip to content

Commit 7d338e1

Browse files
Lukas742Lukas742
committed
feat(ObjectPage): make section headers sticky
1 parent ee1796f commit 7d338e1

7 files changed

Lines changed: 192 additions & 41 deletions

File tree

‎packages/main/src/components/ObjectPage/ObjectPage.cy.tsx‎

Lines changed: 93 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ describe('ObjectPage', () => {
114114
cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 15').should('have.attr', 'aria-selected', 'true');
115115

116116
if (mode === ObjectPageMode.Default) {
117-
cy.findByTestId('op').scrollTo(0, 4750);
117+
cy.findByTestId('op').scrollTo(0, 4858);
118118

119119
cy.findByText('Content 7').should('be.visible');
120120
cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 7').should('have.attr', 'aria-selected', 'true');
@@ -124,7 +124,7 @@ describe('ObjectPage', () => {
124124
for (let i = 0; i < 15; i++) {
125125
cy.findByText('Add').click();
126126
}
127-
cy.findByTestId('op').scrollTo(0, 4750);
127+
cy.findByTestId('op').scrollTo(0, 4858);
128128

129129
cy.findByText('Content 7').should('be.visible');
130130
cy.get('[ui5-tabcontainer]').findUi5TabByText('Section 7').should('have.attr', 'aria-selected', 'true');
@@ -374,12 +374,6 @@ describe('ObjectPage', () => {
374374
);
375375
cy.wait(200);
376376

377-
// first titleText should never be displayed (not.be.visible doesn't work here - only invisible for sighted users)
378-
cy.findByText('Goals')
379-
.parent()
380-
.should('have.css', 'width', '1px')
381-
.and('have.css', 'margin', '-1px')
382-
.and('have.css', 'position', 'absolute');
383377
cy.findByText('Employment').should('not.be.visible');
384378
cy.findByText('Test').should('be.visible');
385379

@@ -712,19 +706,19 @@ describe('ObjectPage', () => {
712706
};
713707
cy.mount(<TestComp height="2000px" mode={ObjectPageMode.Default} />);
714708
cy.findByText('Update Heights').click();
715-
cy.findByText('{"offset":1080,"scroll":2290}').should('exist');
709+
cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
716710

717711
cy.findByTestId('op').scrollTo('bottom');
718712
cy.findByText('Update Heights').click({ force: true });
719-
cy.findByText('{"offset":1080,"scroll":2290}').should('exist');
713+
cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
720714

721715
cy.mount(<TestComp height="2000px" withFooter mode={ObjectPageMode.Default} />);
722716
cy.findByText('Update Heights').click();
723-
cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
717+
cy.findByText('{"offset":1080,"scroll":2370}').should('exist');
724718

725719
cy.findByTestId('op').scrollTo('bottom');
726720
cy.findByText('Update Heights').click({ force: true });
727-
cy.findByText('{"offset":1080,"scroll":2330}').should('exist');
721+
cy.findByText('{"offset":1080,"scroll":2370}').should('exist');
728722

729723
cy.mount(<TestComp height="400px" mode={ObjectPageMode.Default} />);
730724
cy.findByText('Update Heights').click();
@@ -923,12 +917,6 @@ describe('ObjectPage', () => {
923917
cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click();
924918
cy.findByText('Custom Header Section One').should('be.visible');
925919
cy.findByText('toggle titleText1').click({ scrollBehavior: false, force: true });
926-
// first titleText should never be displayed (not.be.visible doesn't work here - only invisible for sighted users)
927-
cy.findByText('Goals')
928-
.parent()
929-
.should('have.css', 'width', '1px')
930-
.and('have.css', 'margin', '-1px')
931-
.and('have.css', 'position', 'absolute');
932920
cy.findByText('Custom Header Section One').should('be.visible');
933921

934922
cy.get('[ui5-tabcontainer]').findUi5TabByText('Personal').click();
@@ -1843,6 +1831,55 @@ describe('ObjectPage', () => {
18431831
}
18441832
cy.focused().should('be.visible').and('have.attr', 'ui5-table-row');
18451833
});
1834+
1835+
it('sticky headers', () => {
1836+
cy.mount(
1837+
<ObjectPage
1838+
titleArea={DPTitle}
1839+
headerArea={DPContent}
1840+
mode="IconTabBar"
1841+
style={{ height: '1000px' }}
1842+
data-testid="op"
1843+
>
1844+
{OPContent}
1845+
{OPContentWithCustomHeaderSections}
1846+
</ObjectPage>,
1847+
);
1848+
1849+
cy.findByText('Goals').should('not.be.visible');
1850+
cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').click();
1851+
cy.findByText('Employment').should('not.be.visible');
1852+
cy.findByText('Employee Details').parent().should('have.css', 'position', 'sticky');
1853+
1854+
cy.mount(
1855+
<ObjectPage titleArea={DPTitle} headerArea={DPContent} style={{ height: '1000px' }} data-testid="op">
1856+
{OPContent}
1857+
{OPContentWithCustomHeaderSections}
1858+
</ObjectPage>,
1859+
);
1860+
1861+
cy.findByText('Goals').should('be.visible').parent().should('have.css', 'position', 'sticky');
1862+
cy.findByTestId('op').scrollTo(0, 500);
1863+
cy.findByText('Goals').should('be.visible');
1864+
cy.get('[ui5-tabcontainer]').findUi5TabByText('Personal').click();
1865+
// has subsections -> only subsection headers are sticky
1866+
cy.findByText('Personal').should('be.visible').parent().should('have.css', 'position', 'static');
1867+
cy.findByText('Connect').should('be.visible').parent().should('have.css', 'position', 'sticky');
1868+
cy.findByTestId('op').scrollTo(0, 2500);
1869+
cy.findByText('Goals').should('not.be.visible');
1870+
cy.findByText('Payment Information').should('be.visible');
1871+
cy.get('[ui5-tabcontainer]').findUi5TabByText('Custom Header Section One').click();
1872+
cy.findByText('Custom Header Section One').should('be.visible').parent().should('have.css', 'position', 'sticky');
1873+
cy.findByTestId('op').scrollTo(0, 3500);
1874+
cy.findByText('Custom Header Section One').should('be.visible');
1875+
cy.get('[ui5-tabcontainer]').findUi5TabByText('Custom Header Section Two').click();
1876+
// has subsections -> only subsection headers are sticky
1877+
cy.findByText('Custom Header Section Two').should('be.visible').parent().should('have.css', 'position', 'static');
1878+
cy.findByText('Subsection1').should('be.visible').parent().should('have.css', 'position', 'sticky');
1879+
cy.findByTestId('op').scrollTo(0, 4000);
1880+
cy.findByText('Custom Header Section Two').should('not.be.visible');
1881+
cy.findByText('Subsection1').should('be.visible');
1882+
});
18461883
});
18471884

18481885
const DPTitle = (
@@ -1942,6 +1979,44 @@ const OPContent = [
19421979
</ObjectPageSection>,
19431980
];
19441981

1982+
const OPContentWithCustomHeaderSections = [
1983+
<ObjectPageSection
1984+
key={'customheader1'}
1985+
titleText="Custom Header Section One"
1986+
hideTitleText
1987+
id="custom1"
1988+
header={<Title>Custom Header Section One</Title>}
1989+
>
1990+
<div style={{ width: '100%', height: '200px', background: 'lightgreen' }} />
1991+
</ObjectPageSection>,
1992+
<ObjectPageSection
1993+
key={'customheader2'}
1994+
titleText="Custom Header Section Two"
1995+
hideTitleText
1996+
id="custom2"
1997+
header={<MessageStrip hideCloseButton>Custom Header Section Two</MessageStrip>}
1998+
>
1999+
<ObjectPageSubSection
2000+
titleText="Subsection1"
2001+
id="sub1"
2002+
actions={
2003+
<>
2004+
<Button design={ButtonDesign.Emphasized} style={{ minWidth: '120px' }}>
2005+
Custom Action
2006+
</Button>
2007+
<Button design={ButtonDesign.Transparent} icon="action-settings" tooltip="settings" />
2008+
<Button design={ButtonDesign.Transparent} icon="download" tooltip="download" />
2009+
</>
2010+
}
2011+
>
2012+
<div style={{ width: '100%', height: '300px', background: 'cadetblue' }} />
2013+
</ObjectPageSubSection>
2014+
<ObjectPageSubSection titleText="Subsection2" id="sub2">
2015+
<div style={{ width: '100%', height: '300px', background: 'cadetblue' }} />
2016+
</ObjectPageSubSection>
2017+
</ObjectPageSection>,
2018+
];
2019+
19452020
const HeaderWithLargeForm = (
19462021
<ObjectPageHeader>
19472022
<Form layout="S1 M2 L2 XL2">

‎packages/main/src/components/ObjectPage/ObjectPage.module.css‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
container: objectPage / inline-size;
33
--_ui5wcr_ObjectPage_header_display: block;
44
--_ui5wcr_ObjectPage_title_fontsize: var(--sapObjectHeader_Title_FontSize);
5+
--_ui5wcr_ObjectPage_header_height: 0;
56

67
box-sizing: border-box;
78
position: relative;
@@ -23,19 +24,6 @@
2324
&[data-in-iframe='true'] {
2425
scroll-behavior: auto;
2526
}
26-
27-
/*invisible first heading*/
28-
section[id*='ObjectPageSection-']:first-of-type > div[role='heading'] {
29-
position: absolute;
30-
width: 1px;
31-
height: 1px;
32-
padding: 0;
33-
margin: -1px;
34-
overflow: hidden;
35-
clip: rect(0, 0, 0, 0);
36-
border: 0;
37-
white-space: nowrap;
38-
}
3927
}
4028

4129
.iconTabBarMode section[data-component-name='ObjectPageSection'] > div[role='heading'] {
@@ -49,7 +37,7 @@
4937
background-color: var(--sapObjectHeader_Background);
5038
position: sticky;
5139
inset-block-start: 0;
52-
z-index: 4;
40+
z-index: 5;
5341
cursor: pointer;
5442
display: grid;
5543
grid-auto-columns: 100%;
@@ -102,7 +90,7 @@
10290

10391
.anchorBar {
10492
position: sticky;
105-
z-index: 4;
93+
z-index: 5;
10694
}
10795

10896
.tabContainerSpacer {
@@ -112,7 +100,7 @@
112100

113101
.tabContainer {
114102
position: sticky;
115-
z-index: 3;
103+
z-index: 4;
116104
background: var(--sapObjectHeader_Background);
117105
}
118106

@@ -169,6 +157,7 @@
169157
position: sticky;
170158
inset-block-end: 0.5rem;
171159
margin: 0 0.5rem;
160+
z-index: 4;
172161
}
173162

174163
.footerSpacer {

‎packages/main/src/components/ObjectPage/ObjectPage.stories.tsx‎

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,68 @@ export const SectionWithCustomHeader: Story = {
345345
aria-label="Personal"
346346
header={<MessageStrip hideCloseButton>Custom Header Section Two</MessageStrip>}
347347
>
348-
<div style={{ width: '100%', height: '500px', background: 'cadetblue' }} />
348+
<ObjectPageSubSection
349+
titleText="Connect"
350+
id="personal-connect"
351+
aria-label="Connect"
352+
actions={
353+
<>
354+
<Button design={ButtonDesign.Emphasized} style={{ minWidth: '120px' }}>
355+
Custom Action
356+
</Button>
357+
<Button design={ButtonDesign.Transparent} icon="action-settings" tooltip="settings" />
358+
<Button design={ButtonDesign.Transparent} icon="download" tooltip="download" />
359+
</>
360+
}
361+
>
362+
<Form style={{ alignItems: 'baseline' }}>
363+
<FormGroup headerText="Phone Numbers">
364+
<FormItem labelContent={<Label showColon>Home</Label>}>
365+
<Text>+1 234-567-8901</Text>
366+
<Text>+1 234-567-5555</Text>
367+
</FormItem>
368+
</FormGroup>
369+
<FormGroup headerText="Social Accounts">
370+
<FormItem labelContent={<Label showColon>LinkedIn</Label>}>
371+
<Text>/DeniseSmith</Text>
372+
</FormItem>
373+
<FormItem labelContent={<Label showColon>Twitter</Label>}>
374+
<Text>@DeniseSmith</Text>
375+
</FormItem>
376+
</FormGroup>
377+
<FormGroup headerText="Addresses">
378+
<FormItem labelContent={<Label showColon>Home Address</Label>}>
379+
<Text>2096 Mission Street</Text>
380+
</FormItem>
381+
<FormItem labelContent={<Label showColon>Mailing Address</Label>}>
382+
<Text>PO Box 32114</Text>
383+
</FormItem>
384+
</FormGroup>
385+
<FormGroup headerText="Mailing Address">
386+
<FormItem labelContent={<Label showColon>Work</Label>}>
387+
<Text>DeniseSmith@sap.com</Text>
388+
</FormItem>
389+
</FormGroup>
390+
</Form>
391+
</ObjectPageSubSection>
392+
<ObjectPageSubSection
393+
titleText="Payment Information"
394+
id="personal-payment-information"
395+
aria-label="Payment Information"
396+
>
397+
<Form>
398+
<FormGroup headerText="Salary">
399+
<FormItem labelContent={<Label showColon>Bank Transfer</Label>}>
400+
<Text>Money Bank, Inc.</Text>
401+
</FormItem>
402+
</FormGroup>
403+
<FormGroup headerText="Payment method for Expenses">
404+
<FormItem labelContent={<Label showColon>Extra Travel Expenses</Label>}>
405+
<Text>Cash 100 USD</Text>
406+
</FormItem>
407+
</FormGroup>
408+
</Form>
409+
</ObjectPageSubSection>
349410
</ObjectPageSection>
350411
<ObjectPageSection
351412
titleText="Employment"

‎packages/main/src/components/ObjectPage/index.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import { useOnScrollEnd } from './useOnScrollEnd.js';
3838
const ObjectPageCssVariables = {
3939
headerDisplay: '--_ui5wcr_ObjectPage_header_display',
4040
titleFontSize: '--_ui5wcr_ObjectPage_title_fontsize',
41+
fullHeaderHeight: '--_ui5wcr_ObjectPage_header_height',
4142
};
4243

4344
const TAB_CONTAINER_HEADER_HEIGHT = 44 + 4; // tabbar height + custom 4px padding-block-start
@@ -610,7 +611,11 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
610611
});
611612
const objectPageStyles: CSSProperties = {
612613
...style,
613-
};
614+
[ObjectPageCssVariables.fullHeaderHeight]:
615+
headerPinned || scrolledHeaderExpanded
616+
? `${topHeaderHeight + (headerCollapsed === true ? 0 : headerContentHeight) + TAB_CONTAINER_HEADER_HEIGHT}px`
617+
: `${topHeaderHeight + TAB_CONTAINER_HEADER_HEIGHT}px`,
618+
} as CSSProperties;
614619
if (headerCollapsed === true && headerArea) {
615620
objectPageStyles[ObjectPageCssVariables.titleFontSize] = ThemingParameters.sapObjectHeader_Title_SnappedFontSize;
616621
}

‎packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.section {
22
box-sizing: border-box;
3+
background: var(--sapBackgroundColor);
34

45
&:first-of-type {
56
margin-block-start: 1px;
@@ -16,6 +17,10 @@
1617
outline-offset: calc(-1 * var(--sapContent_FocusWidth));
1718
}
1819

20+
.outlineSpacerDiv {
21+
height: 2px;
22+
}
23+
1924
.headerContainer {
2025
padding-block: 0.5rem;
2126
color: var(--sapGroup_TitleTextColor);
@@ -28,6 +33,14 @@
2833
height: 2.25rem;
2934
}
3035

36+
.sticky {
37+
position: sticky;
38+
background: var(--sapBackgroundColor);
39+
/*-1 -> subpixel rounding errors */
40+
inset-block-start: calc(var(--_ui5wcr_ObjectPage_header_height) - 1px);
41+
z-index: 3;
42+
}
43+
3144
.title {
3245
height: 2.25rem;
3346
line-height: 2.25rem;

‎packages/main/src/components/ObjectPageSection/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -246,12 +246,15 @@ const ObjectPageSection = forwardRef<HTMLElement, ObjectPageSectionPropTypes>((p
246246
onBlur={objectPageMode === ObjectPageMode.Default ? handleBlur : props.onBlur}
247247
onKeyDown={objectPageMode === ObjectPageMode.Default ? handleKeyDown : props.onKeyDown}
248248
>
249-
{!!header && <div className={classNames.headerContainer}>{header}</div>}
249+
<div className={classNames.outlineSpacerDiv} aria-hidden="true" />
250+
{!!header && (
251+
<div className={clsx(classNames.headerContainer, !hasSubSection ? classNames.sticky : undefined)}>{header}</div>
252+
)}
250253
{!hideTitleText && (
251254
<div
252255
role="heading"
253256
aria-level={parseInt(titleTextLevel.slice(1))}
254-
className={classNames.titleContainer}
257+
className={clsx(classNames.titleContainer, !header && !hasSubSection ? classNames.sticky : undefined)}
255258
data-component-name="ObjectPageSectionTitleText"
256259
>
257260
<div className={titleClasses}>{titleText}</div>

0 commit comments

Comments
 (0)