Skip to content

fix(ObjectPage): correct position of snapped image #7151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Apr 7, 2025
Merged

fix(ObjectPage): correct position of snapped image #7151

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
229e32f
fix(ObjectPage): improve focus and scroll behavior
Lukas742 Mar 27, 2025
8e4ea58
Merge branch 'main' into fix/op-scroll-header-expand
Lukas742 Mar 27, 2025
8d56733
Update index.tsx
Lukas742 Mar 27, 2025
735a102
fix(ObjectPage): correct position of snapped `image`
Lukas742 Mar 27, 2025
3211be8
fix collapse/expand header scroll behavior if `image` is defined
Lukas742 Mar 28, 2025
9e1d311
fix build & flaky test
Lukas742 Mar 28, 2025
aea0568
always show snapped `image` if `headerArea` is not available
Lukas742 Mar 28, 2025
a010526
Update ObjectPageTitle.cy.tsx
Lukas742 Mar 28, 2025
c649251
cleanup
Lukas742 Mar 28, 2025
0975190
fix sub-section scroll
Lukas742 Mar 31, 2025
740287e
Merge branch 'fix/op-scroll-header-expand' into fix/op-snapped-image
Lukas742 Mar 31, 2025
e2dfed6
Merge branch 'main' into fix/op-snapped-image
Lukas742 Apr 7, 2025
f73a45f
Update eslint.config.mjs
Lukas742 Apr 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 106 additions & 3 deletions packages/main/src/components/ObjectPage/ObjectPage.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,12 @@ describe('ObjectPage', () => {
it('scroll to sections - default mode', () => {
document.body.style.margin = '0px';
cy.mount(
<ObjectPage titleArea={DPTitle} headerArea={DPContent} style={{ height: '100vh', scrollBehavior: 'auto' }}>
<ObjectPage
data-testid="op"
titleArea={DPTitle}
headerArea={DPContent}
style={{ height: '100vh', scrollBehavior: 'auto' }}
>
{OPContent}
</ObjectPage>
);
Expand All @@ -362,6 +367,16 @@ describe('ObjectPage', () => {
cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').realClick();
cy.findByText('Test').should('be.visible');

// no scroll when focusing something in the header area
cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
cy.findByText('Job Information').should('be.visible');
cy.findByTestId('op').invoke('scrollTop').as('scrollTop');
cy.wait(100);
cy.realPress('ArrowLeft');
cy.get('@scrollTop').then((scrollTop) => {
cy.findByTestId('op').invoke('scrollTop').should('equal', scrollTop);
});

cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').focus();
cy.realPress('ArrowDown');
cy.realPress('ArrowDown');
Expand All @@ -371,6 +386,7 @@ describe('ObjectPage', () => {

cy.mount(
<ObjectPage
data-testid
titleArea={DPTitle}
headerArea={DPContent}
footerArea={Footer}
Expand All @@ -394,9 +410,10 @@ describe('ObjectPage', () => {

cy.wait(200);
//fallback click
cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').click();
cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
cy.findByTestId('footer').should('be.visible');
cy.findByText('Employment').should('be.visible');
cy.findByText('Job Information').should('be.visible');

cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click();
cy.findByText('Test').should('be.visible');
Expand All @@ -413,12 +430,90 @@ describe('ObjectPage', () => {
cy.findByText('Job Relationship').should('be.visible');

cy.findByTestId('footer').should('be.visible');

cy.mount(
<ObjectPage
data-testid
titleArea={DPTitle}
headerArea={DPContent}
footerArea={Footer}
style={{ height: '100vh', scrollBehavior: 'auto' }}
>
{OPContent}
<ObjectPageSection aria-label="Long Section" id="long-section" titleText="Long Section">
<ObjectPageSubSection aria-label="Long Subsection 1" id="sub1" titleText="Long Subsection 1">
<FlexBox style={{ height: '2000px' }} direction="Column" justifyContent="SpaceBetween">
<span>Start SubSection1</span>
<span>End SubSection1</span>
</FlexBox>
</ObjectPageSubSection>
<ObjectPageSubSection aria-label="Long Subsection 2" id="sub2" titleText="Long Subsection 2">
<FlexBox style={{ height: '1000px' }} direction="Column" justifyContent="SpaceBetween">
<span>Start SubSection2</span>
<span>End SubSection2</span>
</FlexBox>
</ObjectPageSubSection>
</ObjectPageSection>
</ObjectPage>
);
cy.wait(100);

cy.get('[ui5-tabcontainer]').findUi5TabByText('Long Section').focus();
cy.realPress('ArrowDown');
cy.get('[ui5-responsive-popover]').should('be.visible');
cy.realPress('ArrowDown');
cy.wait(50);
cy.realPress('ArrowDown');
cy.realPress('Enter');
// wait for scroll
cy.wait(200);
cy.findByText('Start SubSection2').should('be.visible');
});

it('scroll to sections - tab mode', () => {
document.body.style.margin = '0px';

cy.mount(
<ObjectPage
data-testid
titleArea={DPTitle}
headerArea={DPContent}
footerArea={Footer}
style={{ height: '100vh', scrollBehavior: 'auto' }}
>
{OPContent}
<ObjectPageSection aria-label="Long Section" id="long-section" titleText="Long Section">
<ObjectPageSubSection aria-label="Long Subsection 1" id="sub1" titleText="Long Subsection 1">
<FlexBox style={{ height: '2000px' }} direction="Column" justifyContent="SpaceBetween">
<span>Start SubSection1</span>
<span>End SubSection1</span>
</FlexBox>
</ObjectPageSubSection>
<ObjectPageSubSection aria-label="Long Subsection 2" id="sub2" titleText="Long Subsection 2">
<FlexBox style={{ height: '1000px' }} direction="Column" justifyContent="SpaceBetween">
<span>Start SubSection2</span>
<span>End SubSection2</span>
</FlexBox>
</ObjectPageSubSection>
</ObjectPageSection>
</ObjectPage>
);
cy.wait(100);

cy.get('[ui5-tabcontainer]').findUi5TabByText('Long Section').focus();
cy.realPress('ArrowDown');
cy.get('[ui5-responsive-popover]').should('be.visible');
cy.realPress('ArrowDown');
cy.wait(50);
cy.realPress('ArrowDown');
cy.realPress('Enter');
// wait for scroll
cy.wait(200);
cy.findByText('Start SubSection2').should('be.visible');

cy.mount(
<ObjectPage
data-testid="op"
titleArea={DPTitle}
headerArea={DPContent}
mode={ObjectPageMode.IconTabBar}
Expand All @@ -430,9 +525,17 @@ describe('ObjectPage', () => {
cy.findByText('Job Information').should('not.exist');
cy.findByTestId('section 1').should('be.visible');

cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').click();
cy.wait(100);
cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
cy.findByText('Job Information').should('be.visible');
cy.findByTestId('section 1').should('not.exist');
// no scroll when focusing something in the header area
cy.findByTestId('op').invoke('scrollTop').as('scrollTop');
cy.wait(100);
cy.realPress('ArrowLeft');
cy.get('@scrollTop').then((scrollTop) => {
cy.findByTestId('op').invoke('scrollTop').should('equal', scrollTop);
});

cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').click();
cy.findByText('section 2').should('not.exist');
Expand Down
20 changes: 1 addition & 19 deletions packages/main/src/components/ObjectPage/ObjectPage.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,6 @@
}
}

.withFooter {
scroll-padding-block-end: calc(var(--_ui5wcr-BarHeight) + 0.5rem);
}

.iconTabBarMode section[data-component-name='ObjectPageSection'] > div[role='heading'] {
display: none;
}
Expand All @@ -51,16 +47,7 @@
z-index: 4;
cursor: pointer;
display: grid;

[data-component-name='ObjectPageTitle'] {
grid-column: 2;
padding-inline: 0;
}
}

/*:has cannot be nested*/
.header:has([data-component-name='ATwithImageSnappedContentContainer']) [data-component-name='ObjectPageTitle'] {
padding-block-end: 0;
grid-auto-columns: 100%;
}

.headerCollapsed {
Expand Down Expand Up @@ -188,11 +175,6 @@
padding: 0;
}

.snappedContent {
grid-column: 1 / span 2;
padding-block-end: 0.5rem;
}

.clickArea {
position: absolute;
inset: 0;
Expand Down
12 changes: 10 additions & 2 deletions packages/main/src/components/ObjectPage/ObjectPage.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,16 @@ const meta = {
<BreadcrumbsItem>Employee Details</BreadcrumbsItem>
</Breadcrumbs>
}
expandedContent={<MessageStrip>Information (only visible if header content is expanded)</MessageStrip>}
snappedContent={<MessageStrip>Information (only visible if header content is collapsed/snapped)</MessageStrip>}
expandedContent={
<MessageStrip style={{ paddingBlockStart: '0.5rem' }}>
Information (only visible if header content is expanded)
</MessageStrip>
}
snappedContent={
<MessageStrip style={{ paddingBlockStart: '0.5rem' }}>
Information (only visible if header content is collapsed/snapped)
</MessageStrip>
}
>
<ObjectStatus state={ValueState.Positive}>employed</ObjectStatus>
</ObjectPageTitle>
Expand Down
Loading
Loading