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

Author: Lukas742

eslint.config.mjs

@@ -26,7 +26,8 @@ const ignorePatterns = {
     '**/shared',
     '**/examples',
     '**/templates',
-    '**/*.module.css.ts'
+    '**/*.module.css.ts',
+    '.yarn'
   ]
 };
 

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

@@ -511,6 +511,44 @@ describe('ObjectPage', () => {
     cy.wait(200);
     cy.findByText('Start SubSection2').should('be.visible');
 
+    cy.mount(
+      <ObjectPage
+        data-testid="op"
+        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"
@@ -525,6 +563,7 @@ describe('ObjectPage', () => {
     cy.findByText('Job Information').should('not.exist');
     cy.findByTestId('section 1').should('be.visible');
 
+    cy.wait(100);
     cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').realClick();
     cy.findByText('Job Information').should('be.visible');
     cy.findByTestId('section 1').should('not.exist');

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

@@ -47,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 {
@@ -184,11 +175,6 @@
   padding: 0;
 }
 
-.snappedContent {
-  grid-column: 1 / span 2;
-  padding-block-end: 0.5rem;
-}
-
 .clickArea {
   position: absolute;
   inset: 0;

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

@@ -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>

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

@@ -87,7 +87,6 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
   const objectPageContentRef = useRef<HTMLDivElement>(null);
   const selectionScrollTimeout = useRef(null);
   const isToggledRef = useRef(false);
-  const isInitial = useRef(true);
   const scrollTimeout = useRef(0);
 
   const [selectedSubSectionId, setSelectedSubSectionId] = useState<undefined | string>(undefined);
@@ -468,16 +467,6 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
     }
   };
 
-  const snappedHeaderInObjPage = titleArea && titleArea.props.snappedContent && headerCollapsed === true && !!image;
-
-  useEffect(() => {
-    if (!isInitial.current) {
-      scrollTimeout.current = performance.now() + 200;
-    } else {
-      isInitial.current = false;
-    }
-  }, [snappedHeaderInObjPage]);
-
   const renderHeaderContentSection = () => {
     if (headerArea?.props) {
       return cloneElement(headerArea as ReactElement<ObjectPageHeaderPropTypesWithInternals>, {
@@ -598,33 +587,23 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
         data-not-clickable={!!preserveHeaderStateOnClick}
         aria-roledescription={accessibilityAttributes?.objectPageTopHeader?.ariaRoledescription ?? 'Object Page header'}
         className={classNames.header}
-        style={{
-          gridAutoColumns: `min-content ${
-            titleArea && image && headerCollapsed === true ? `calc(100% - 3rem - 1rem)` : '100%'
-          }`
-        }}
       >
         <span
           className={classNames.clickArea}
           onClick={onTitleClick}
           data-component-name="ObjectPageTitleAreaClickElement"
         />
-        {titleArea && image && headerCollapsed === true && (
-          <CollapsedAvatar image={image} imageShapeCircle={imageShapeCircle} />
-        )}
         {titleArea &&
           cloneElement(titleArea as ReactElement<ObjectPageTitlePropsWithDataAttributes>, {
             className: clsx(titleArea?.props?.className),
             onToggleHeaderContentVisibility: onTitleClick,
             'data-not-clickable': !!preserveHeaderStateOnClick,
             'data-header-content-visible': headerArea && headerCollapsed !== true,
-            'data-is-snapped-rendered-outside': snappedHeaderInObjPage
+            _snappedAvatar:
+              !headerArea || (titleArea && image && headerCollapsed === true) ? (
+                <CollapsedAvatar image={image} imageShapeCircle={imageShapeCircle} />
+              ) : null
           })}
-        {snappedHeaderInObjPage && (
-          <div className={classNames.snappedContent} data-component-name="ATwithImageSnappedContentContainer">
-            {titleArea.props.snappedContent}
-          </div>
-        )}
       </header>
       {renderHeaderContentSection()}
       {headerArea && titleArea && (

packages/main/src/components/ObjectPage/types/index.ts

@@ -9,7 +9,7 @@ import type { ObjectPageSectionPropTypes } from '../../ObjectPageSection/index.j
 import type {
   InternalProps as ObjectPageTitlePropTypesWithInternals,
   ObjectPageTitlePropTypes
-} from '../../ObjectPageTitle/index.js';
+} from '../../ObjectPageTitle/types/index.js';
 
 type ObjectPageSectionType = ReactElement<ObjectPageSectionPropTypes> | boolean;
 

packages/main/src/components/ObjectPageTitle/ObjectPageTitle.cy.tsx

@@ -127,11 +127,6 @@ describe('ObjectPageTitle', () => {
       cy.findByTestId('page').scrollTo(0, 500);
       cy.findByText('snappedContent').should('exist');
       cy.findByTestId('expandedContent').should('not.exist');
-      if (headerContent && image) {
-        cy.get('[data-component-name="ATwithImageSnappedContentContainer"]').should('exist');
-      } else {
-        cy.get('[data-component-name="ATwithImageSnappedContentContainer"]').should('not.exist');
-      }
     });
   });
 });

packages/main/src/components/ObjectPageTitle/ObjectPageTitle.module.css

@@ -67,6 +67,10 @@
   }
 }
 
+.snappedAvatarContainer:has([data-component-name='ObjectPageCollapsedAvatar']) {
+  flex-shrink: 0;
+}
+
 @container (min-width: 600px) and (max-width: 1023px) {
   .title {
     padding-block-start: 0.6875rem;
@@ -93,6 +97,11 @@
   padding-inline-start: 0;
 }
 
+.contentContainer {
+  flex-basis: 100%;
+  flex-grow: 1;
+}
+
 .content {
   display: flex;
   flex-shrink: 1.6;