refactor(ObjectPage & DynamicPage): consolidates API of ObjectPage and DynamicPage

docs/2-MigrationGuide.stories.mdx

@@ -15,6 +15,7 @@ or the [changelog](https://github.com/SAP/ui5-webcomponents-react/blob/master/CH
 
 ## Table of Contents
 
+- [0.16.x to 0.17.0](#migrating-from-016x-to-0170)
 - [0.15.x to 0.16.0](#migrating-from-015x-to-0160)
 - [0.14.x to 0.15.0](#migrating-from-014x-to-0150)
 - [0.13.x to 0.14.0](#migrating-from-013x-to-0140)
@@ -24,6 +25,98 @@ or the [changelog](https://github.com/SAP/ui5-webcomponents-react/blob/master/CH
 - [0.9.x to 0.10.0](#migrating-from-09x-to-0100)
 - [0.8.x to 0.9.0](#migrating-from-08x-to-090)
 
+## Migrating from 0.16.x to 0.17.0
+
+### Consolidate API of ObjectPage and DynamicPage
+
+The DynamicPage and the ObjectPage are very similar but had completely different APIs and props.
+We streamlined those APIs by adding components used by the `DynamicPage` to the `ObjectPage`.
+
+#### DynamicPage changes
+
+- `title` has been renamed to `headerTitle`.
+- **`DynamicPageTitle`:** `subHeading` has been renamed to `subheading`.
+- **`DynamicPageHeader`:** `children` are no longer displayed as `flex` items to support other display types like `grid`. To align children you now need to add the container (like `FlexBox`) and CSS yourself.
+  <br />
+  <br />
+  Example for aligning items next to each other:
+
+```jsx
+// Before
+<DynamicPageHeader>
+  <div>Content 1</div>
+  <div>Content 2</div>
+</DynamicPageHeader>
+
+// Now
+<DynamicPageHeader>
+  <FlexBox>
+    <div>Content 1</div>
+    <div>Content 2</div>
+  </FlexBox>
+</DynamicPageHeader>
+```
+
+#### ObjectPage changes
+
+- **`ObjectPageSection`:** `title` and `titleUppercase` has been renamed. Please use `heading` and `headingUppercase` instead.
+- **`ObjectPageSubSection`:** `title` has been renamed to `heading`.
+- `title` has been renamed to `headerTitle` and is now defining the upper, static, title section of the `ObjectPage`. It expects to receive the `DynamicPageTitle` component.
+- `headerContent` has been renamed to `header` and expects now the `DynamicPageHeader` component to be passed.
+- `noHeader` has been removed. It is now sufficient not to set `headerTitle` and `header` to achieve the same behavior.
+- `title`, `subTitle`, `headerActions`, `breadcrumbs` and `keyInfos` should now be passed to the corresponding `DynamicPageTitle` props.
+
+Setting the title section of the `ObjectPage`:
+
+```jsx
+//Before
+<ObjectPage
+  title="Heading"
+  subTitle="Subheading"
+  breadcrumbs={
+    <Breadcrumbs currentLocationText="current Breadcrumb">
+      <Link>Breadcrumb 1</Link>
+      <Link>Breadcrumb 2</Link>
+    </Breadcrumbs>
+  }
+  headerActions={
+    <>
+      <Button>Action 1</Button>
+      <Button>Action 2</Button>
+    </>
+  }
+  keyInfos={<ObjectStatus>keyInfo</ObjectStatus>}
+>
+  ObjectPage Content
+</ObjectPage>
+
+//Now
+<ObjectPage
+  headerTitle={
+    <DynamicPageTitle
+      heading="Heading" // replaces `title`
+      subheading="Subheading" // replaces `subTitle`
+      breadcrumbs={
+        <Breadcrumbs currentLocationText="current Breadcrumb">
+          <Link>Breadcrumb 1</Link>
+          <Link>Breadcrumb 2</Link>
+        </Breadcrumbs>
+      }
+      actions={ /* replaces `headerActions`*/
+        <>
+          <Button>Action 1</Button>
+          <Button>Action 2</Button>
+        </>
+      }
+    >
+      <ObjectStatus>keyInfo</ObjectStatus>  {/* replaces `keyInfos` */}
+    </DynamicPageTitle>
+  }
+>
+  ObjectPage Content
+</ObjectPage>
+```
+
 ## Migrating from 0.15.x to 0.16.0
 
 <br />

packages/base/src/dist/Utils.ts

@@ -1,4 +1,4 @@
-import { deprecationNotice, enrichEventWithDetails, getScrollBarWidth } from '../utils';
+import { deprecationNotice, enrichEventWithDetails } from '../utils';
 import { debounce } from '../utils/debounce';
 
-export { deprecationNotice, getScrollBarWidth, enrichEventWithDetails, debounce };
+export { deprecationNotice, enrichEventWithDetails, debounce };

packages/base/src/hooks/useIsRTL.ts

@@ -5,6 +5,9 @@ import { RefObject, useState } from 'react';
 const GLOBAL_DIR_CSS_VAR = '--_ui5_dir';
 
 const detectRTL = (elementRef: RefObject<HTMLElement>) => {
+  if (!elementRef.current) {
+    return getRTL();
+  }
   const doc = window.document;
   const dirValues = ['ltr', 'rtl']; // exclude "auto" and "" from all calculations
   const locallyAppliedDir = getComputedStyle(elementRef.current).getPropertyValue(GLOBAL_DIR_CSS_VAR);
@@ -29,7 +32,6 @@ const detectRTL = (elementRef: RefObject<HTMLElement>) => {
 
 const useIsRTL = (elementRef: RefObject<HTMLElement>): boolean => {
   const [isRTL, setRTL] = useState<boolean>(getRTL()); // use config RTL as best guess
-
   useIsomorphicLayoutEffect(() => {
     setRTL(detectRTL(elementRef)); // update immediately while rendering
     const targets = [document.documentElement, document.body, elementRef.current].filter(Boolean);

packages/base/src/index.ts

@@ -10,13 +10,12 @@ import { StyleClassHelper } from './dist/StyleClassHelper';
 import { ThemingParameters } from './dist/ThemingParameters';
 import { useConsolidatedRef } from './dist/useConsolidatedRef';
 import { usePassThroughHtmlProps } from './dist/usePassThroughHtmlProps';
-import { deprecationNotice, enrichEventWithDetails, getScrollBarWidth, debounce } from './dist/Utils';
+import { deprecationNotice, enrichEventWithDetails, debounce } from './dist/Utils';
 
 export {
   StyleClassHelper,
   deprecationNotice,
   debounce,
-  getScrollBarWidth,
   Logger,
   LOG_LEVEL,
   useConsolidatedRef,

packages/base/src/utils/index.ts

@@ -8,34 +8,6 @@ export const deprecationNotice = (component: string, message: string) => {
   }
 };
 
-export const getScrollBarWidth = () => {
-  const inner = document.createElement('p');
-  inner.style.width = '100%';
-  inner.style.height = '200px';
-
-  const outer = document.createElement('div');
-  outer.style.position = 'absolute';
-  outer.style.top = '0px';
-  outer.style.left = '0px';
-  outer.style.visibility = 'hidden';
-  outer.style.width = '200px';
-  outer.style.height = '150px';
-  outer.style.overflow = 'hidden';
-  outer.appendChild(inner);
-
-  document.body.appendChild(outer);
-  const w1 = inner.offsetWidth;
-  outer.style.overflow = 'scroll';
-  let w2 = inner.offsetWidth;
-
-  if (w1 === w2) {
-    w2 = outer.clientWidth;
-  }
-
-  document.body.removeChild(outer);
-  return w1 - w2;
-};
-
 export const enrichEventWithDetails = <T extends Record<string, unknown>, ReturnType = CustomEvent<T>>(
   event: UIEvent,
   payload: T = null

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

@@ -1,4 +1,3 @@
-import { sapUiResponsiveContentPadding } from '@ui5/webcomponents-react-base/dist/spacing';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/dist/ThemingParameters';
 
 export const DynamicPageCssVariables = {
@@ -43,8 +42,7 @@ export const styles = {
     backgroundColor: ThemingParameters.sapObjectHeader_Background
   },
   contentContainer: {
-    ...sapUiResponsiveContentPadding,
-    paddingTop: '1rem !important',
+    paddingTop: '1rem',
     boxSizing: 'border-box',
     width: '100%',
     height: 'auto',