fix(ObjectPage): RTL support for Header

Closes #366

Author: MarcusNotheis

.storybook/preview.js

@@ -1,21 +1,21 @@
 import { select, withKnobs } from '@storybook/addon-knobs';
 import { makeDecorator } from '@storybook/addons';
 import { addDecorator, addParameters } from '@storybook/react';
+import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme';
 import '@ui5/webcomponents-base/dist/features/browsersupport/IE11';
+import '@ui5/webcomponents-fiori/dist/json-imports/Themes';
 import '@ui5/webcomponents-react-base/polyfill/IE11';
 import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
 import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
 import { Themes } from '@ui5/webcomponents-react/lib/Themes';
 import '@ui5/webcomponents/dist/json-imports/i18n';
+import '@ui5/webcomponents/dist/json-imports/Themes';
 import '@webcomponents/webcomponentsjs/webcomponents-bundle';
 import { window } from 'global';
 import 'highlight.js/styles/solarized-dark.css';
 import qs from 'qs';
 import React, { useEffect } from 'react';
 import 'react-app-polyfill/ie11';
-import '@ui5/webcomponents/dist/json-imports/Themes';
-import '@ui5/webcomponents-fiori/dist/json-imports/Themes';
-import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme';
 
 addParameters({
   options: {
@@ -30,7 +30,7 @@ addParameters({
 
 addDecorator(withKnobs);
 
-const ThemeContainer = ({ theme, contentDensity, children, setQueryParam }) => {
+const ThemeContainer = ({ theme, contentDensity, children, setQueryParam, direction }) => {
   useEffect(() => {
     if (contentDensity === ContentDensity.Compact) {
       document.body.classList.add('ui5-content-density-compact');
@@ -39,6 +39,10 @@ const ThemeContainer = ({ theme, contentDensity, children, setQueryParam }) => {
     }
   }, [contentDensity, setQueryParam]);
 
+  useEffect(() => {
+    document.querySelector('html').setAttribute('dir', direction.toLowerCase());
+  }, [direction]);
+
   useEffect(() => {
     setTheme(theme);
   }, [theme]);
@@ -73,6 +77,7 @@ const withQuery = makeDecorator({
       <ThemeContainer
         theme={select('Theme', [Themes.sap_fiori_3, Themes.sap_fiori_3_dark], Themes.sap_fiori_3)}
         contentDensity={select('ContentDensity', ContentDensity, contentDensity)}
+        direction={select('Text Direction', ['LTR', 'RTL'], 'LTR')}
         setQueryParam={setQueryParam}
       >
         {getStory(context)}

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

@@ -1,11 +1,11 @@
+import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
-import React, { useEffect, useMemo, useRef, useState, ReactElement } from 'react';
-import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
+import React, { ReactElement, useEffect, useMemo, useRef, useState } from 'react';
 
 const styles = {
   base: {
-    marginRight: '1rem',
+    margin: 'var(--_ui5wcr_ObjectPage_avatar_margin)', // defined in ObjectPage JSS
     opacity: 0
   },
   hidden: {

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

@@ -1,5 +1,12 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 
+const ObjectPageCssVariables = {
+  anchorFloat: '--_ui5wcr_ObjectPage_actions_float',
+  anchorLeft: '--_ui5wcr_ObjectPage_actions_left',
+  anchorRight: '--_ui5wcr_ObjectPage_actions_right',
+  avatarMargin: '--_ui5wcr_ObjectPage_avatar_margin'
+};
+
 const styles = {
   objectPage: {
     width: '100%',
@@ -27,6 +34,18 @@ const styles = {
       display: 'none'
     }
   },
+  '@global html': {
+    [ObjectPageCssVariables.anchorFloat]: 'right',
+    [ObjectPageCssVariables.anchorRight]: '1.25rem',
+    [ObjectPageCssVariables.anchorLeft]: 'unset',
+    [ObjectPageCssVariables.avatarMargin]: '0 1rem 0 0'
+  },
+  '@global [dir="rtl"]': {
+    [ObjectPageCssVariables.anchorFloat]: 'left',
+    [ObjectPageCssVariables.anchorRight]: 'unset',
+    [ObjectPageCssVariables.anchorLeft]: '1.25rem',
+    [ObjectPageCssVariables.avatarMargin]: '0 0 0 1rem'
+  },
   iconTabBarMode: {
     '& section[data-component-name="ObjectPageSection"] > div[role="heading"]': {
       display: 'none'
@@ -103,9 +122,10 @@ const styles = {
     top: '0',
     paddingTop: '0.75rem',
     zIndex: 1,
-    right: '1.25rem',
+    right: `var(${ObjectPageCssVariables.anchorRight})`,
+    left: `var(${ObjectPageCssVariables.anchorLeft})`,
     display: 'inline-block',
-    float: 'right',
+    float: `var(${ObjectPageCssVariables.anchorFloat})`,
     verticalAlign: 'top',
     '& > *': {
       marginLeft: '0.5rem',
@@ -123,9 +143,6 @@ const styles = {
           marginBottom: '1rem'
         }
       }
-    },
-    '& $actions': {
-      // paddingTop: 0
     }
   },
   headerCustomContent: {
@@ -164,7 +181,7 @@ const styles = {
     flexDirection: 'row'
   },
   avatar: {
-    marginRight: '1rem'
+    margin: `var(${ObjectPageCssVariables.avatarMargin})`
   }
 };