feat(ObjectPage): Add 'Pin-Header' button (#354)

This PR includes a full refactoring of the ObjectPage using native CSS capabilities instead of custom scroll handlers. This might lead to problems in IE11 and needs to be tested as well.

The Anchor Bar was replaced with the UI5 Web Component TabContainer in order to improve accessibility and RTL. --> #345

Closes #334
Closes #248

Author: MarcusNotheis

config/jest.config.js

@@ -19,7 +19,8 @@ module.exports = {
     '!packages/main/src/components/AnalyticalTable/types/*', // no table enums
     '!packages/base/src/styling/sap_fiori_3.ts', // no old theming parameters
     '!packages/base/src/styling/HSLColor.ts', // no deprecated HSL Util
-    '!packages/base/src/styling/font72.ts' // no deprecated font
+    '!packages/base/src/styling/font72.ts', // no deprecated font
+    '!packages/base/src/Scroller/*' // no scroll lib as it is not longer used
   ],
   setupFiles: ['jest-canvas-mock'],
   setupFilesAfterEnv: ['./config/jestsetup.ts'],

config/jestsetup.ts

@@ -4,6 +4,7 @@ import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { createSerializer } from 'enzyme-to-json';
 import ResizeObserver from 'resize-observer-polyfill';
+import 'intersection-observer';
 import '@ui5/webcomponents/dist/json-imports/i18n';
 
 process.env.NODE_ENV = 'test';

package.json

@@ -65,6 +65,7 @@
     "gzip-size": "^5.1.0",
     "husky": "^4.2.1",
     "identity-obj-proxy": "^3.0.0",
+    "intersection-observer": "^0.7.0",
     "jest": "^25.1.0",
     "jest-canvas-mock": "^2.2.0",
     "jest-environment-jsdom-sixteen": "^1.0.2",

packages/base/package.json

@@ -16,7 +16,8 @@
     "**/modernizr.js",
     "core-js/**/*",
     "./src/polyfill/*.ts",
-    "./polyfill/*.js"
+    "./polyfill/*.js",
+    "intersection-observer"
   ],
   "scripts": {
     "clean": "rimraf cjs Device hooks lib polyfill styling types utils index.esm.js index.d.ts",
@@ -26,7 +27,9 @@
   },
   "dependencies": {
     "core-js": "3.6.4",
-    "resize-observer-polyfill": "^1.5.1"
+    "intersection-observer": "^0.7.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "smoothscroll-polyfill": "^0.4.4"
   },
   "peerDependencies": {
     "react": "^16.8.0",

packages/base/src/Scroller/Scroller.tsx

@@ -1,6 +1,6 @@
 import { IScroller } from '@ui5/webcomponents-react-base/interfaces/IScroller';
 import React, { forwardRef, RefObject, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-
+import { deprecationNotice } from '@ui5/webcomponents-react-base/lib/Utils';
 import { ScrollContentProvider } from './ScrollContextProvider';
 import { scrollTo } from './ScrollHelper';
 
@@ -10,6 +10,11 @@ export interface Props {
   forceSelection?: boolean;
 }
 
+deprecationNotice(
+  'Scroller',
+  "'@ui5/webcomponents-react-base/lib/Scroller' is deprecated and will be removed in the next major release."
+);
+
 export const Scroller = forwardRef((props: Props, ref: RefObject<IScroller>) => {
   const { children, scrollContainer, forceSelection = true } = props;
 

packages/base/src/polyfill/Edge.ts

@@ -1,4 +1,9 @@
 import ResizeObserver from 'resize-observer-polyfill';
+import 'intersection-observer';
+import smoothscroll from 'smoothscroll-polyfill';
 
 // @ts-ignore
 window.ResizeObserver = ResizeObserver;
+
+// required for scrollTo methods
+smoothscroll.polyfill();

packages/base/src/polyfill/IE11.ts

@@ -3,6 +3,11 @@ import 'core-js/modules/es.object.assign';
 import 'core-js/modules/es.object.values';
 import 'core-js/modules/es.array.from';
 import ResizeObserver from 'resize-observer-polyfill';
+import 'intersection-observer';
+import smoothscroll from 'smoothscroll-polyfill';
 
 // @ts-ignore
 window.ResizeObserver = ResizeObserver;
+
+// required for scrollTo methods
+smoothscroll.polyfill();

packages/main/src/components/AnalyticalTable/demo/generateData.ts

@@ -52,8 +52,6 @@ const makeTreeEntry = (...lens) => {
   return makeDataLevel();
 };
 
-
-
 const makeEntry = () => ({
   name: getRandomName(),
   longColumn: 'Really really long column content... don´t crop please',

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

@@ -1,6 +1,6 @@
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
-import React, { ReactElement, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState, ReactElement } from 'react';
 import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 
 const styles = {
@@ -51,7 +51,7 @@ export const CollapsedAvatar = (props: CollapsedAvatarPropTypes) => {
           className={classes.imageContainer}
           style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}
         >
-          <img className={classes.image} src={image} alt="Company Logo" />
+          <img className={classes.image} src={image} alt="Object Page Image" />
         </span>
       );
     } else {
@@ -65,10 +65,8 @@ export const CollapsedAvatar = (props: CollapsedAvatarPropTypes) => {
     }
   }, [image, imageShapeCircle]);
 
-  useLayoutEffect(() => {
-    requestAnimationFrame(() => {
-      setIsMounted(true);
-    });
+  useEffect(() => {
+    setIsMounted(true);
   }, []);
 
   const containerClasses = StyleClassHelper.of(classes.base);

packages/main/src/components/ObjectPage/ObjectPage.jss.ts

@@ -5,76 +5,66 @@ const styles = {
     width: '100%',
     height: '100%',
     position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    isolation: 'isolate',
     whiteSpace: 'normal',
     fontFamily: ThemingParameters.sapFontFamily,
-    backgroundColor: ThemingParameters.sapBackgroundColor
-  },
-  contentContainer: {
+    backgroundColor: ThemingParameters.sapBackgroundColor,
     overflowX: 'hidden',
     overflowY: 'auto',
-    position: 'relative',
-    flexGrow: 1
-  },
-  outerContentContainer: {
-    width: '100%',
-    height: '100%',
-    overflow: 'hidden'
-  },
-  contentScrollContainer: {
-    position: 'relative'
+    '&::-webkit-scrollbar': {
+      backgroundColor: ThemingParameters.sapScrollBar_TrackColor,
+      width: ThemingParameters.sapScrollBar_Dimension
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: ThemingParameters.sapScrollBar_BorderColor,
+      '&:hover': {
+        backgroundColor: ThemingParameters.sapScrollBar_Hover_FaceColor
+      }
+    },
+    '&::-webkit-scrollbar-corner': {
+      backgroundColor: ThemingParameters.sapScrollBar_TrackColor
+    },
+    '& section[id="ObjectPageSection-1"] > div[role="heading"]': {
+      display: 'none'
+    }
   },
-  anchorBar: {
-    paddingLeft: '2rem',
-    backgroundColor: ThemingParameters.sapObjectHeader_Background,
-    boxShadow: `inset 0 -0.0625rem ${ThemingParameters.sapObjectHeader_BorderColor}, inset 0 0.0625rem ${ThemingParameters.sapObjectHeader_BorderColor}`,
-    display: 'flex',
-    height: '2.75rem',
-    minHeight: '2.75rem',
-    position: 'relative'
+  iconTabBarMode: {
+    '& section[data-component-name="ObjectPageSection"] > div[role="heading"]': {
+      display: 'none'
+    }
   },
-  sectionsContainer: {
-    '&:before': {
-      display: 'table',
-      content: '""'
-    },
-    '& :first-child > div[role="heading"]': {
+  noHeader: {
+    '& $header': {
       display: 'none'
     },
-    position: 'relative',
-    height: '100%',
-    // overflowX: 'hidden',
-    // overflowY: 'auto',
-    overflow: 'hidden',
-    backgroundColor: ThemingParameters.sapBackgroundColor,
-    '&:after': {
-      clear: 'both',
-      display: 'table',
-      content: '""'
+    '& $contentHeader': {
+      display: 'none'
     }
   },
-  fillerDiv: {
-    backgroundColor: ThemingParameters.sapBackgroundColor
+  headerCollapsed: {
+    '& $contentHeader': {
+      display: 'none'
+    }
   },
   // header
   header: {
     flexShrink: 0,
-    position: 'relative',
     backgroundColor: ThemingParameters.sapObjectHeader_Background,
-    '&$stickied': {
-      '& $image': {
-        opacity: '1',
-        height: '3rem',
-        width: '3rem',
-        margin: '0.25rem 1rem 0.25rem 0'
-      }
-    }
+    position: 'sticky',
+    top: 0,
+    zIndex: 2
   },
   contentHeader: {
     backgroundColor: ThemingParameters.sapObjectHeader_Background,
-    position: 'relative'
+    position: 'sticky',
+    paddingBottom: '0.25rem',
+    maxHeight: '500px',
+    overflow: 'hidden',
+    paddingLeft: '2rem'
+  },
+  anchorBar: {
+    position: 'sticky',
+    zIndex: 2,
+    '--_ui5_tc_header_box_shadow': 'inset 0px -1px 0 0px rgba(0,0,0,0.15)'
   },
   titleBar: {
     padding: '0.5rem 2rem',
@@ -122,18 +112,8 @@ const styles = {
       padding: 0
     }
   },
-  stickied: {},
-  headerContent: {
-    //paddingTop: '1.5rem',
-    paddingBottom: '0.25rem',
-    transition: 'max-height 0.5s',
-    maxHeight: '500px',
-    overflow: 'hidden',
-    paddingLeft: '2rem',
-    position: 'relative'
-  },
   titleInHeaderContent: {
-    '& $headerContent': {
+    '& contentHeader': {
       paddingTop: 0,
       '& > *': {
         display: 'flex',
@@ -148,17 +128,6 @@ const styles = {
       // paddingTop: 0
     }
   },
-  alwaysVisibleHeader: {
-    '& $headerContent': {
-      paddingLeft: 0
-    },
-    '& $contentHeader': {
-      marginTop: '0.5rem'
-    },
-    '& $titleBar': {
-      paddingBottom: 0
-    }
-  },
   headerCustomContent: {
     display: 'inline-block',
     verticalAlign: 'top',
@@ -196,13 +165,6 @@ const styles = {
   },
   avatar: {
     marginRight: '1rem'
-  },
-  toggleHeaderButton: {
-    position: 'absolute',
-    '--_ui5_button_compact_height': '1.25rem',
-    '--_ui5_button_base_height': '1.25rem',
-    top: `-0.625rem`,
-    left: 'calc(50% - 1rem)'
   }
 };