feat(ThemeProvider): Add jss and noInjectThemeProperties prop

With the `jss` prop, you can pass a custom JSS instance if required. With the `noInjectThemeProperties`, you can skip the injection of the UI5 Web Components Theming Variables
SAP · Aug 20, 2019 · c9107d8 · c9107d8
1 parent f7a7958
commit c9107d8
Show file tree

Hide file tree

Showing 12 changed files with 159 additions and 140 deletions.
diff --git a/packages/main/__karma_snapshots__/ActionSheet.md b/packages/main/__karma_snapshots__/ActionSheet.md
@@ -3,8 +3,8 @@
 #### `Render without Crashing`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <ActionSheet openBy={{...}} placement="Bottom">
         <Popover openBy={{...}} placementType="Bottom" style={[undefined]} slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">

diff --git a/packages/main/__karma_snapshots__/AnalyticalCard.md b/packages/main/__karma_snapshots__/AnalyticalCard.md
@@ -3,8 +3,8 @@
 #### `Render without Crashing`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <AnalyticalCard header={{...}} width="20rem">
         <div className="AnalyticalCard--card---" style={{...}} title={[undefined]}>

diff --git a/packages/main/__karma_snapshots__/AnalyticalTable.md b/packages/main/__karma_snapshots__/AnalyticalTable.md
@@ -3,8 +3,8 @@
 #### `test Asc desc`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(AnalyticalTable) showPagination={true} data={{...}} title="Test" columns={{...}} alternateRowColors={false} loading={false} sortable={true} filterable={false} groupable={false} cellHeight={{...}} defaultPageSize={10} minRows={10} numItems={{...}} pivotBy={{...}} getTrProps={[Function: getTrProps]}>
         <AnalyticalTable showPagination={true} data={{...}} title="Test" columns={{...}} alternateRowColors={false} loading={false} sortable={true} filterable={false} groupable={false} cellHeight={{...}} defaultPageSize={10} minRows={10} numItems={{...}} pivotBy={{...}} getTrProps={[Function: getTrProps]} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -656,8 +656,8 @@
 #### `pagination`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(AnalyticalTable) defaultPageSize={1} showPagination={true} data={{...}} title="Test" columns={{...}} alternateRowColors={false} loading={false} sortable={true} filterable={false} groupable={false} cellHeight={{...}} minRows={10} numItems={{...}} pivotBy={{...}} getTrProps={[Function: getTrProps]}>
         <AnalyticalTable defaultPageSize={1} showPagination={true} data={{...}} title="Test" columns={{...}} alternateRowColors={false} loading={false} sortable={true} filterable={false} groupable={false} cellHeight={{...}} minRows={10} numItems={{...}} pivotBy={{...}} getTrProps={[Function: getTrProps]} innerRef={{...}} classes={{...}} theme={{...}}>

diff --git a/packages/main/__karma_snapshots__/Avatar.md b/packages/main/__karma_snapshots__/Avatar.md
@@ -3,8 +3,8 @@
 #### `Avatar - size: XL shape: Circle`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="XL" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeXL--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -17,8 +17,8 @@
 #### `Avatar - size: XL shape: Square`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="XL" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeXL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -31,8 +31,8 @@
 #### `Avatar - size: L shape: Circle`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="L" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeL--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -45,8 +45,8 @@
 #### `Avatar - size: L shape: Square`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="L" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -59,8 +59,8 @@
 #### `Avatar - size: M shape: Circle`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="M" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeM--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -73,8 +73,8 @@
 #### `Avatar - size: M shape: Square`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="M" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeM---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -87,8 +87,8 @@
 #### `Avatar - size: S shape: Circle`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="S" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeS--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -101,8 +101,8 @@
 #### `Avatar - size: S shape: Square`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="S" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -115,8 +115,8 @@
 #### `Avatar - size: XS shape: Circle`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="XS" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeXS--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -129,8 +129,8 @@
 #### `Avatar - size: XS shape: Square`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="XS" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeXS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -143,8 +143,8 @@
 #### `Avatar - size: Custom shape: Circle`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="Custom" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -157,8 +157,8 @@
 #### `Avatar - size: Custom shape: Square`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="Custom" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -171,8 +171,8 @@
 #### `with Initials`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="XL" initials="JD" shape="Circle" image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeXL--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]}>

diff --git a/packages/main/__karma_snapshots__/Carousel.md b/packages/main/__karma_snapshots__/Carousel.md
@@ -3,8 +3,8 @@
 #### `Renders without crashing`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(Carousel) activePage={0} arrowsPlacement="Content" onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
         <Carousel activePage={0} arrowsPlacement="Content" onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom" innerRef={{...}} classes={{...}} theme={{...}}>
@@ -98,8 +98,8 @@
 #### `Should render a text indicator`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(Carousel) activePage={0} arrowsPlacement="Content" onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
         <Carousel activePage={0} arrowsPlacement="Content" onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom" innerRef={{...}} classes={{...}} theme={{...}}>
@@ -192,8 +192,8 @@
 #### `CarouselArrowsPlacement: Content`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(Carousel) arrowsPlacement="Content" activePage={0} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
         <Carousel arrowsPlacement="Content" activePage={0} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom" innerRef={{...}} classes={{...}} theme={{...}}>
@@ -287,8 +287,8 @@
 #### `CarouselArrowsPlacement: PageIndicator`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(Carousel) arrowsPlacement="PageIndicator" activePage={0} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
         <Carousel arrowsPlacement="PageIndicator" activePage={0} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom" innerRef={{...}} classes={{...}} theme={{...}}>
@@ -382,8 +382,8 @@
 #### `Page Indicator Placement: Top`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(Carousel) arrowsPlacement="PageIndicator" pageIndicatorPlacement="Top" activePage={0} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false}>
         <Carousel arrowsPlacement="PageIndicator" pageIndicatorPlacement="Top" activePage={0} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -477,8 +477,8 @@
 #### `Update activePage via prop`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(Carousel) activePage={0} arrowsPlacement="Content" onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
         <Carousel activePage={0} arrowsPlacement="Content" onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom" innerRef={{...}} classes={{...}} theme={{...}}>

diff --git a/packages/main/__karma_snapshots__/FilterBar.md b/packages/main/__karma_snapshots__/FilterBar.md
@@ -3,8 +3,8 @@
 #### `Render without crashing`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <FilterBar renderSearch={[Function: renderSearch]} renderVariants={[Function: renderVariants]}>
         <div className="FilterBar--outerContainer---">
@@ -116,8 +116,8 @@
 #### `Hide Filter Bar`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <FilterBar renderVariants={[Function: renderVariants]}>
         <div className="FilterBar--outerContainer---">
@@ -238,8 +238,8 @@
 #### `Select Filter Item`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <FilterBar renderVariants={[Function: renderVariants]}>
         <div className="FilterBar--outerContainer---">