feat(ThemeProvider): add global css classes (#400)

Author: MarcusNotheis

docs/welcome/Styling.stories.mdx

@@ -8,7 +8,7 @@ import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
 # How can I style my Web Components?
 [Open Github Project](https://github.com/SAP/ui5-webcomponents-react)
 
-## Change styles for exisiting components
+## Change styles for existing components
 You can easily change the appearance of the Web Components by using [CSS Variables](https://www.w3schools.com/Css/css3_variables.asp).
 Per default, we are injecting the Fiori 3 theme parameters as CSS Variables into the `document head`.
 If you want to change e.g. the color of all texts, you can do that by creating another `style` element with the following content:
@@ -23,6 +23,14 @@ You can change CSS Variables on any level - in the head, or on every single elem
 A full list of all supported CSS Variables can be found [here](https://github.com/SAP/ui5-webcomponents-react/blob/master/packages/base/src/styling/sap_fiori_3.ts) 
 or in the [SAPUI5 Theming Parameters Toolbox](https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/theming/webapp/index.html).
 
+## Reuse global style classes
+The `ThemeProvider` component is offering global css classes that can be reused in your applications code to help you to achieve a Fiori look-and-feel.
+All globally available style classes are tracked in the `GlobalStyleClasses` enum which can be imported from `import { GlobalStyleClasses } from "@ui5/webcomponents-react/lib/GlobalStyleClasses";`.
+
+|CSS Class|Description|
+|---------|-----------|
+|`sapScrollBar`|If added to an container that supports scrolling, the scrollbar will be styled according to the Fiori guidelines. |
+
 ## Style your own components
 It's quite likely that you have to create some custom components when you are building an app.
 In order to reuse our central styling approach, you can easily hook into our theming by using [`react-jss`](https://cssinjs.org/react-jss/?v=v10.0.0).

packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts

@@ -39,22 +39,7 @@ const styles = {
     zIndex: 0,
     backgroundColor: ThemingParameters.sapList_Background,
     overflowX: 'hidden !important',
-    overflowY: 'auto !important',
-    '&::-webkit-scrollbar': {
-      backgroundColor: ThemingParameters.sapScrollBar_TrackColor,
-      width: ThemingParameters.sapScrollBar_Dimension
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: ThemingParameters.sapScrollBar_FaceColor,
-      width: ThemingParameters.sapScrollBar_Dimension,
-      borderRadius: '0.25rem',
-      '&:hover': {
-        backgroundColor: ThemingParameters.sapScrollBar_Hover_FaceColor
-      }
-    },
-    '&::-webkit-scrollbar-corner': {
-      backgroundColor: ThemingParameters.sapScrollBar_TrackColor
-    }
+    overflowY: 'auto !important'
   },
   alternateRowColor: {
     backgroundColor: ThemingParameters.sapList_HeaderBackground

packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap

@@ -279,7 +279,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable-tbody-0"
+        class="AnalyticalTable-tbody-0 sapScrollBar"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -770,7 +770,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable-tbody-0"
+        class="AnalyticalTable-tbody-0 sapScrollBar"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -1884,7 +1884,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable-tbody-0 AnalyticalTable-selectable-0"
+        class="AnalyticalTable-tbody-0 sapScrollBar AnalyticalTable-selectable-0"
         style="position: relative; height: 220px; width: 636px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -2437,7 +2437,7 @@ exports[`AnalyticalTable custom row height 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable-tbody-0"
+        class="AnalyticalTable-tbody-0 sapScrollBar"
         style="position: relative; height: 300px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -3217,7 +3217,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable-tbody-0"
+        class="AnalyticalTable-tbody-0 sapScrollBar"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -3708,7 +3708,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable-tbody-0"
+        class="AnalyticalTable-tbody-0 sapScrollBar"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -4199,7 +4199,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable-tbody-0"
+        class="AnalyticalTable-tbody-0 sapScrollBar"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -4690,7 +4690,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable-tbody-0"
+        class="AnalyticalTable-tbody-0 sapScrollBar"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -5231,7 +5231,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable-tbody-0 AnalyticalTable-selectable-0"
+        class="AnalyticalTable-tbody-0 sapScrollBar AnalyticalTable-selectable-0"
         style="position: relative; height: 220px; width: 642px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -5786,7 +5786,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
         </div>
       </header>
       <div
-        class="AnalyticalTable-tbody-0 AnalyticalTable-selectable-0"
+        class="AnalyticalTable-tbody-0 sapScrollBar AnalyticalTable-selectable-0"
         style="position: relative; height: 220px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div

packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx

@@ -4,6 +4,7 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHe
 import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
 import React, { useCallback, useMemo, useRef } from 'react';
 import { FixedSizeList } from 'react-window';
+import { GlobalStyleClasses } from '@ui5/webcomponents-react/lib/GlobalStyleClasses';
 import { VirtualTableRow } from './VirtualTableRow';
 
 export const VirtualTableBody = (props) => {
@@ -58,7 +59,7 @@ export const VirtualTableBody = (props) => {
     [prepareRow]
   );
 
-  const classNames = StyleClassHelper.of(classes.tbody);
+  const classNames = StyleClassHelper.of(classes.tbody, GlobalStyleClasses.sapScrollBar);
   if (selectionMode === TableSelectionMode.SINGLE_SELECT || selectionMode === TableSelectionMode.MULTI_SELECT) {
     classNames.put(classes.selectable);
   }

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

@@ -18,19 +18,6 @@ const styles = {
     backgroundColor: ThemingParameters.sapBackgroundColor,
     overflowX: 'hidden',
     overflowY: 'auto',
-    '&::-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-"] > div[role="heading"]': {
       display: 'none'
     },

packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ObjectPage IconTabBar Mode 1`] = `
 <div
-  class="ObjectPage-objectPage-0 ObjectPage-iconTabBarMode-0"
+  class="ObjectPage-objectPage-0 sapScrollBar ObjectPage-iconTabBarMode-0"
   data-component-name="ObjectPage"
 >
   <header
@@ -196,7 +196,7 @@ exports[`ObjectPage IconTabBar Mode 1`] = `
 
 exports[`ObjectPage Just Some Sections 1`] = `
 <div
-  class="ObjectPage-objectPage-0 ObjectPage-iconTabBarMode-0"
+  class="ObjectPage-objectPage-0 sapScrollBar ObjectPage-iconTabBarMode-0"
   data-component-name="ObjectPage"
 >
   <header
@@ -312,7 +312,7 @@ exports[`ObjectPage Just Some Sections 1`] = `
 
 exports[`ObjectPage Key Infos 1`] = `
 <div
-  class="ObjectPage-objectPage-0"
+  class="ObjectPage-objectPage-0 sapScrollBar"
   data-component-name="ObjectPage"
 >
   <header
@@ -521,7 +521,7 @@ exports[`ObjectPage Key Infos 1`] = `
 
 exports[`ObjectPage No Header 1`] = `
 <div
-  class="ObjectPage-objectPage-0 ObjectPage-noHeader-0"
+  class="ObjectPage-objectPage-0 sapScrollBar ObjectPage-noHeader-0"
   data-component-name="ObjectPage"
 >
   <header
@@ -660,7 +660,7 @@ exports[`ObjectPage No Header 1`] = `
 
 exports[`ObjectPage Not crashing with 0 sections 1`] = `
 <div
-  class="ObjectPage-objectPage-0 ObjectPage-iconTabBarMode-0"
+  class="ObjectPage-objectPage-0 sapScrollBar ObjectPage-iconTabBarMode-0"
   data-component-name="ObjectPage"
 >
   <header
@@ -735,7 +735,7 @@ exports[`ObjectPage Not crashing with 0 sections 1`] = `
 
 exports[`ObjectPage Not crashing with 1 section - Default Mode 1`] = `
 <div
-  class="ObjectPage-objectPage-0"
+  class="ObjectPage-objectPage-0 sapScrollBar"
   data-component-name="ObjectPage"
 >
   <header
@@ -843,7 +843,7 @@ exports[`ObjectPage Not crashing with 1 section - Default Mode 1`] = `
 
 exports[`ObjectPage Not crashing with 1 section - IconTabBar Mode 1`] = `
 <div
-  class="ObjectPage-objectPage-0 ObjectPage-iconTabBarMode-0"
+  class="ObjectPage-objectPage-0 sapScrollBar ObjectPage-iconTabBarMode-0"
   data-component-name="ObjectPage"
 >
   <header
@@ -951,7 +951,7 @@ exports[`ObjectPage Not crashing with 1 section - IconTabBar Mode 1`] = `
 
 exports[`ObjectPage Only Sections 1`] = `
 <div
-  class="ObjectPage-objectPage-0"
+  class="ObjectPage-objectPage-0 sapScrollBar"
   data-component-name="ObjectPage"
 >
   <header
@@ -1181,7 +1181,7 @@ exports[`ObjectPage Only Sections 1`] = `
 
 exports[`ObjectPage Set selected section id 1`] = `
 <div
-  class="ObjectPage-objectPage-0 ObjectPage-iconTabBarMode-0"
+  class="ObjectPage-objectPage-0 sapScrollBar ObjectPage-iconTabBarMode-0"
   data-component-name="ObjectPage"
 >
   <header
@@ -1297,7 +1297,7 @@ exports[`ObjectPage Set selected section id 1`] = `
 
 exports[`ObjectPage With Subsections 1`] = `
 <div
-  class="ObjectPage-objectPage-0"
+  class="ObjectPage-objectPage-0 sapScrollBar"
   data-component-name="ObjectPage"
 >
   <header

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

@@ -6,6 +6,7 @@ import { enrichEventWithDetails, getScrollBarWidth } from '@ui5/webcomponents-re
 import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
 import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
 import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
+import { GlobalStyleClasses } from '@ui5/webcomponents-react/lib/GlobalStyleClasses';
 import { Label } from '@ui5/webcomponents-react/lib/Label';
 import { ObjectPageMode } from '@ui5/webcomponents-react/lib/ObjectPageMode';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
@@ -348,7 +349,7 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
     isMounted.current = true;
   }, [isMounted, setScrollbarWidth]);
 
-  const objectPageClasses = StyleClassHelper.of(classes.objectPage);
+  const objectPageClasses = StyleClassHelper.of(classes.objectPage, GlobalStyleClasses.sapScrollBar);
   if (className) {
     objectPageClasses.put(className);
   }

packages/main/src/components/ThemeProvider/GlobalStyleClasses.jss.ts

@@ -0,0 +1,24 @@
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { GlobalStyleClasses } from '@ui5/webcomponents-react/lib/GlobalStyleClasses';
+
+export const GlobalStyleClassesStyles = {
+  '@global': {
+    [`.${GlobalStyleClasses.sapScrollBar}`]: {
+      '&::-webkit-scrollbar': {
+        backgroundColor: ThemingParameters.sapScrollBar_TrackColor,
+        width: ThemingParameters.sapScrollBar_Dimension
+      },
+      '&::-webkit-scrollbar-thumb': {
+        backgroundColor: ThemingParameters.sapScrollBar_FaceColor,
+        width: ThemingParameters.sapScrollBar_Dimension,
+        borderRadius: '0.25rem',
+        '&:hover': {
+          backgroundColor: ThemingParameters.sapScrollBar_Hover_FaceColor
+        }
+      },
+      '&::-webkit-scrollbar-corner': {
+        backgroundColor: ThemingParameters.sapScrollBar_TrackColor
+      }
+    }
+  }
+};

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

@@ -1,16 +1,19 @@
 import { root as sap_fiori_3 } from '@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/variables.json';
 import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme';
 import { getRTL } from '@ui5/webcomponents-base/dist/config/RTL';
+import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 import { cssVariablesStyles } from '@ui5/webcomponents-react-base/lib/CssSizeVariables';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
 import { Themes } from '@ui5/webcomponents-react/lib/Themes';
 import React, { FC, ReactNode, useEffect, useMemo } from 'react';
 import { ThemeProvider as ReactJssThemeProvider } from 'react-jss';
 import { JSSTheme } from '../../interfaces/JSSTheme';
+import { GlobalStyleClassesStyles } from './GlobalStyleClasses.jss';
 
 const themeMap = window['@ui5/webcomponents-react-theming'] || (window['@ui5/webcomponents-react-theming'] = new Map());
 themeMap.set('sap_fiori_3', sap_fiori_3);
+const useStyles = createComponentStyles(GlobalStyleClassesStyles);
 
 const insertThemeDesignerParameters = (parameters = {}) => {
   let element = document.querySelector('head #ui5wcr-theming-parameters');
@@ -56,6 +59,7 @@ if (!document.querySelector('style[data-ui5-webcomponents-react-sizes]')) {
 const ThemeProvider: FC<ThemeProviderProps> = (props: ThemeProviderProps) => {
   const { children, theme = getTheme() } = props;
   const isCompactSize = document.body.classList.contains('ui5-content-density-compact');
+  useStyles();
 
   useEffect(() => {
     if (themeMap) {

packages/main/src/enums/GlobalStyleClasses.ts

@@ -0,0 +1,3 @@
+export enum GlobalStyleClasses {
+  sapScrollBar = 'sapScrollBar'
+}

packages/main/src/index.ts

@@ -47,6 +47,7 @@ import { FlexBoxWrap } from './lib/FlexBoxWrap';
 import { Form } from './lib/Form';
 import { FormGroup } from './lib/FormGroup';
 import { FormItem } from './lib/FormItem';
+import { GlobalStyleClasses } from './lib/GlobalStyleClasses';
 import { Grid } from './lib/Grid';
 import { GridPosition } from './lib/GridPosition';
 import { GroupHeaderListItem } from './lib/GroupHeaderListItem';
@@ -181,6 +182,7 @@ export {
   Form,
   FormGroup,
   FormItem,
+  GlobalStyleClasses,
   Grid,
   GridPosition,
   GroupHeaderListItem,

packages/main/src/lib/GlobalStyleClasses.ts

@@ -0,0 +1,3 @@
+import { GlobalStyleClasses } from '../enums/GlobalStyleClasses';
+
+export { GlobalStyleClasses };