From 46383655f2eee730c216455f0e38f045457d781a Mon Sep 17 00:00:00 2001
From: Lukas <lukas742@gmx.net>
Date: Tue, 24 Sep 2019 09:34:16 +0200
Subject: [PATCH 1/8] fix(FilterBar): Added scrolling and wrapping for small
 screens

---
 packages/main/src/components/FilterBar/FilterBar.jss.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/components/FilterBar/FilterBar.jss.ts b/packages/main/src/components/FilterBar/FilterBar.jss.ts
index 217014a62fe..5153a9db19c 100644
--- a/packages/main/src/components/FilterBar/FilterBar.jss.ts
+++ b/packages/main/src/components/FilterBar/FilterBar.jss.ts
@@ -16,7 +16,8 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => {
       background: parameters.sapUiObjectHeaderBackground,
       minHeight: '3rem',
       paddingBottom: '0.5rem',
-      boxShadow: 'none'
+      boxShadow: 'none',
+      flexWrap: 'wrap'
     },
     vLine: {
       borderLeft: '1px solid gray',
@@ -33,11 +34,13 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => {
     filterAreaClosed: {
       maxHeight: '0',
       opacity: 0,
-      padding: 0
+      padding: 0,
+      overflow: 'scroll'
     },
     filterAreaOpen: {
       maxHeight: '500px',
-      opacity: 1
+      opacity: 1,
+      overflowY: 'scroll'
     },
     headerRowRight: {
       display: 'flex',

From 55a55acc131369dbb3005692263e1a9377f950a5 Mon Sep 17 00:00:00 2001
From: Lukas <lukas742@gmx.net>
Date: Tue, 24 Sep 2019 09:42:10 +0200
Subject: [PATCH 2/8] fix(FilterBar): Replaced width:100% with flexGrow

---
 packages/main/src/components/FilterBar/FilterBar.jss.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/components/FilterBar/FilterBar.jss.ts b/packages/main/src/components/FilterBar/FilterBar.jss.ts
index 5153a9db19c..1b54a96dac4 100644
--- a/packages/main/src/components/FilterBar/FilterBar.jss.ts
+++ b/packages/main/src/components/FilterBar/FilterBar.jss.ts
@@ -45,7 +45,7 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => {
     headerRowRight: {
       display: 'flex',
       justifyContent: 'flex-end',
-      width: '100%'
+      flexGrow: 1
     },
     // is being applied to the span which represents the InfoLabel Text
     label: {

From 577a16b8250da1888ee1089c6cab0e6c55fe872a Mon Sep 17 00:00:00 2001
From: Lukas <lukas742@gmx.net>
Date: Tue, 24 Sep 2019 09:46:03 +0200
Subject: [PATCH 3/8] fix(FilterBar): overflow-y

---
 packages/main/src/components/FilterBar/FilterBar.jss.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/components/FilterBar/FilterBar.jss.ts b/packages/main/src/components/FilterBar/FilterBar.jss.ts
index 1b54a96dac4..c44ad8ca89b 100644
--- a/packages/main/src/components/FilterBar/FilterBar.jss.ts
+++ b/packages/main/src/components/FilterBar/FilterBar.jss.ts
@@ -35,7 +35,7 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => {
       maxHeight: '0',
       opacity: 0,
       padding: 0,
-      overflow: 'scroll'
+      overflowY: 'scroll'
     },
     filterAreaOpen: {
       maxHeight: '500px',

From 66333bc2d979bb6dc20f946600ba03462c2bb4ac Mon Sep 17 00:00:00 2001
From: Lukas <lukas742@gmx.net>
Date: Wed, 25 Sep 2019 11:56:58 +0200
Subject: [PATCH 4/8] feat(Loader): Added Loader component.

---
 .../main/src/components/Loader/Loader.jss.ts  | 36 +++++++++++++++
 .../src/components/Loader/Loader.test.tsx     | 26 +++++++++++
 .../Loader/__snapshots__/Loader.test.tsx.snap | 41 +++++++++++++++++
 .../src/components/Loader/demo.stories.tsx    | 19 ++++++++
 packages/main/src/components/Loader/index.tsx | 46 +++++++++++++++++++
 packages/main/src/enums/LoaderType.ts         |  4 ++
 packages/main/src/index.ts                    |  6 ++-
 packages/main/src/lib/Loader.ts               |  3 ++
 packages/main/src/lib/LoaderType.ts           |  3 ++
 9 files changed, 183 insertions(+), 1 deletion(-)
 create mode 100644 packages/main/src/components/Loader/Loader.jss.ts
 create mode 100644 packages/main/src/components/Loader/Loader.test.tsx
 create mode 100644 packages/main/src/components/Loader/__snapshots__/Loader.test.tsx.snap
 create mode 100644 packages/main/src/components/Loader/demo.stories.tsx
 create mode 100644 packages/main/src/components/Loader/index.tsx
 create mode 100644 packages/main/src/enums/LoaderType.ts
 create mode 100644 packages/main/src/lib/Loader.ts
 create mode 100644 packages/main/src/lib/LoaderType.ts

diff --git a/packages/main/src/components/Loader/Loader.jss.ts b/packages/main/src/components/Loader/Loader.jss.ts
new file mode 100644
index 00000000000..17eb2cc839f
--- /dev/null
+++ b/packages/main/src/components/Loader/Loader.jss.ts
@@ -0,0 +1,36 @@
+import { JSSTheme } from '../../interfaces/JSSTheme';
+
+export const styles = ({ parameters }: JSSTheme) => ({
+  '@keyframes scroll': {
+    '0%': { backgroundPosition: '-100% 0' },
+    '100%': { backgroundPosition: '200% 0' }
+  },
+
+  loader: {
+    height: '0.25rem',
+    width: '100%',
+    '&$loaderDeterminate': {
+      background: `linear-gradient(to right, ${parameters.sapUiContentIconColor}, ${parameters.sapUiContentIconColor})`,
+      backgroundColor: 'rgba(8, 84, 160, 0.15)',
+      backgroundSize: (props) => props.progressBarWidth,
+      backgroundRepeat: 'repeat-y'
+    },
+    '&$loaderIndeterminate': {
+      background: `linear-gradient(
+      to right,
+      rgba(8, 84, 160, 0) 0px,
+      rgba(8, 84, 160, 1) calc(50% - 2rem),
+      ${parameters.sapUiContentIconColor} calc(50% - 2rem),
+      ${parameters.sapUiContentIconColor} calc(50% + 2rem),
+      rgba(8, 84, 160, 1) calc(50% + 2rem),
+      rgba(8, 84, 160, 0) 100%
+    )`,
+      backgroundColor: 'rgba(8, 84, 160, 0.15)',
+      backgroundSize: '40%',
+      backgroundRepeat: 'repeat-y',
+      animation: '$scroll 1.2s linear infinite'
+    }
+  },
+  loaderDeterminate: {},
+  loaderIndeterminate: {}
+});
diff --git a/packages/main/src/components/Loader/Loader.test.tsx b/packages/main/src/components/Loader/Loader.test.tsx
new file mode 100644
index 00000000000..dbf870b678a
--- /dev/null
+++ b/packages/main/src/components/Loader/Loader.test.tsx
@@ -0,0 +1,26 @@
+import { renderThemedComponent } from '@shared/tests/utils';
+import React from 'react';
+import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
+import { Loader } from '@ui5/webcomponents-react/lib/Loader';
+
+describe('Loader', () => {
+  test('small', () => {
+    const wrapper = renderThemedComponent(<Loader type={LoaderType.Indeterminate} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('medium', () => {
+    const wrapper = renderThemedComponent(<Loader type={LoaderType.Determinate} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('large', () => {
+    const wrapper = renderThemedComponent(<Loader type={LoaderType.Determinate} progressBarWidth="42%" />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('with custom class name', () => {
+    const wrapper = renderThemedComponent(<Loader />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/packages/main/src/components/Loader/__snapshots__/Loader.test.tsx.snap b/packages/main/src/components/Loader/__snapshots__/Loader.test.tsx.snap
new file mode 100644
index 00000000000..8c6d657e3f0
--- /dev/null
+++ b/packages/main/src/components/Loader/__snapshots__/Loader.test.tsx.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loader large 1`] = `
+<div
+  aria-busy="true"
+  class="Loader--loader- Loader--loader-0- Loader--loaderDeterminate-"
+  data-component-name="Loader"
+  role="progressbar"
+  title="Please wait"
+/>
+`;
+
+exports[`Loader medium 1`] = `
+<div
+  aria-busy="true"
+  class="Loader--loader- Loader--loader-0- Loader--loaderDeterminate-"
+  data-component-name="Loader"
+  role="progressbar"
+  title="Please wait"
+/>
+`;
+
+exports[`Loader small 1`] = `
+<div
+  aria-busy="true"
+  class="Loader--loader- Loader--loader-0- Loader--loaderIndeterminate-"
+  data-component-name="Loader"
+  role="progressbar"
+  title="Please wait"
+/>
+`;
+
+exports[`Loader with custom class name 1`] = `
+<div
+  aria-busy="true"
+  class="Loader--loader- Loader--loader-0- Loader--loaderIndeterminate-"
+  data-component-name="Loader"
+  role="progressbar"
+  title="Please wait"
+/>
+`;
diff --git a/packages/main/src/components/Loader/demo.stories.tsx b/packages/main/src/components/Loader/demo.stories.tsx
new file mode 100644
index 00000000000..6804f613533
--- /dev/null
+++ b/packages/main/src/components/Loader/demo.stories.tsx
@@ -0,0 +1,19 @@
+import { select, text } from '@storybook/addon-knobs';
+import React from 'react';
+import { Loader } from '@ui5/webcomponents-react/lib/Loader';
+import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
+
+export const renderLoader = () => (
+  <Loader
+    type={select('type', LoaderType, LoaderType.Indeterminate)}
+    progressBarWidth={text('progressBarWidth', '40%')}
+  />
+);
+renderLoader.story = {
+  name: 'Default'
+};
+
+export default {
+  title: 'Components | Loader',
+  component: Loader
+};
diff --git a/packages/main/src/components/Loader/index.tsx b/packages/main/src/components/Loader/index.tsx
new file mode 100644
index 00000000000..8914d73d101
--- /dev/null
+++ b/packages/main/src/components/Loader/index.tsx
@@ -0,0 +1,46 @@
+import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
+import React, { forwardRef, RefObject, FC, CSSProperties } from 'react';
+import { createUseStyles } from 'react-jss';
+import { CommonProps } from '../../interfaces/CommonProps';
+import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
+import { styles } from './Loader.jss';
+
+export interface LoaderProps extends CommonProps {
+  type?: LoaderType;
+  progressBarWidth?: CSSProperties['width'];
+}
+
+const useStyles = createUseStyles(styles, { name: 'Loader' });
+
+const Loader: FC<LoaderProps> = forwardRef((props: LoaderProps, ref: RefObject<HTMLDivElement>) => {
+  const { className, type, progressBarWidth, tooltip, slot, style } = props;
+  const classes = useStyles(props);
+
+  const loaderClasses = StyleClassHelper.of(classes.loader);
+  if (className) {
+    loaderClasses.put(className);
+  }
+  loaderClasses.put(classes[`loader${type}`]);
+
+  return (
+    <div
+      ref={ref}
+      className={loaderClasses.valueOf()}
+      data-component-name="Loader"
+      aria-busy="true"
+      role="progressbar"
+      title={tooltip || 'Please wait'}
+      slot={slot}
+      style={style}
+    />
+  );
+});
+
+Loader.defaultProps = {
+  type: LoaderType.Indeterminate,
+  progressBarWidth: '0px'
+};
+
+Loader.displayName = 'Loader';
+
+export { Loader };
diff --git a/packages/main/src/enums/LoaderType.ts b/packages/main/src/enums/LoaderType.ts
new file mode 100644
index 00000000000..2341fd7dc40
--- /dev/null
+++ b/packages/main/src/enums/LoaderType.ts
@@ -0,0 +1,4 @@
+export enum LoaderType {
+  Determinate = 'Determinate',
+  Indeterminate = 'Indeterminate'
+}
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index ac807763ad3..b39c0cf994f 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -107,6 +107,8 @@ import { Tokenizer } from './lib/Tokenizer';
 import { ValueState } from './lib/ValueState';
 import { VariantManagement } from './lib/VariantManagement';
 import { VerticalAlign } from './lib/VerticalAlign';
+import { Loader } from './lib/Loader';
+import { LoaderType } from './lib/LoaderType';
 
 export {
   ActionSheet,
@@ -213,5 +215,7 @@ export {
   Tokenizer,
   ValueState,
   VariantManagement,
-  VerticalAlign
+  VerticalAlign,
+  Loader,
+  LoaderType
 };
diff --git a/packages/main/src/lib/Loader.ts b/packages/main/src/lib/Loader.ts
new file mode 100644
index 00000000000..98b3d7a2b56
--- /dev/null
+++ b/packages/main/src/lib/Loader.ts
@@ -0,0 +1,3 @@
+import { Loader } from '../components/Loader';
+
+export { Loader };
diff --git a/packages/main/src/lib/LoaderType.ts b/packages/main/src/lib/LoaderType.ts
new file mode 100644
index 00000000000..381a9262a10
--- /dev/null
+++ b/packages/main/src/lib/LoaderType.ts
@@ -0,0 +1,3 @@
+import { LoaderType } from '../enums/LoaderType';
+
+export { LoaderType };

From e619f6a1c7603dcfd1d5280fccd1a04edd0cdfc5 Mon Sep 17 00:00:00 2001
From: Lukas <lukas742@gmx.net>
Date: Wed, 25 Sep 2019 12:09:00 +0200
Subject: [PATCH 5/8] Update packages/main/src/components/Loader/index.tsx

Co-Authored-By: Marcus Notheis <MarcusNotheis@users.noreply.github.com>
---
 packages/main/src/components/Loader/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/components/Loader/index.tsx b/packages/main/src/components/Loader/index.tsx
index 8914d73d101..4554b28a9e0 100644
--- a/packages/main/src/components/Loader/index.tsx
+++ b/packages/main/src/components/Loader/index.tsx
@@ -10,7 +10,7 @@ export interface LoaderProps extends CommonProps {
   progressBarWidth?: CSSProperties['width'];
 }
 
-const useStyles = createUseStyles(styles, { name: 'Loader' });
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'Loader' });
 
 const Loader: FC<LoaderProps> = forwardRef((props: LoaderProps, ref: RefObject<HTMLDivElement>) => {
   const { className, type, progressBarWidth, tooltip, slot, style } = props;

From f6acda7d764dea3d31e9f59fc92b1c27bc03a32e Mon Sep 17 00:00:00 2001
From: Lukas <lukas742@gmx.net>
Date: Wed, 25 Sep 2019 12:28:34 +0200
Subject: [PATCH 6/8] feat(Loader): Test description and requested changes

---
 packages/main/src/components/Loader/Loader.jss.ts |  3 +--
 .../main/src/components/Loader/Loader.test.tsx    | 10 +++++-----
 .../main/src/components/Loader/demo.stories.tsx   |  5 +----
 packages/main/src/components/Loader/index.tsx     | 15 ++++++++++-----
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/main/src/components/Loader/Loader.jss.ts b/packages/main/src/components/Loader/Loader.jss.ts
index 17eb2cc839f..b90297d94ef 100644
--- a/packages/main/src/components/Loader/Loader.jss.ts
+++ b/packages/main/src/components/Loader/Loader.jss.ts
@@ -1,18 +1,17 @@
 import { JSSTheme } from '../../interfaces/JSSTheme';
 
+//todo use theme colors when available
 export const styles = ({ parameters }: JSSTheme) => ({
   '@keyframes scroll': {
     '0%': { backgroundPosition: '-100% 0' },
     '100%': { backgroundPosition: '200% 0' }
   },
-
   loader: {
     height: '0.25rem',
     width: '100%',
     '&$loaderDeterminate': {
       background: `linear-gradient(to right, ${parameters.sapUiContentIconColor}, ${parameters.sapUiContentIconColor})`,
       backgroundColor: 'rgba(8, 84, 160, 0.15)',
-      backgroundSize: (props) => props.progressBarWidth,
       backgroundRepeat: 'repeat-y'
     },
     '&$loaderIndeterminate': {
diff --git a/packages/main/src/components/Loader/Loader.test.tsx b/packages/main/src/components/Loader/Loader.test.tsx
index dbf870b678a..3cb8013603d 100644
--- a/packages/main/src/components/Loader/Loader.test.tsx
+++ b/packages/main/src/components/Loader/Loader.test.tsx
@@ -4,22 +4,22 @@ import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
 import { Loader } from '@ui5/webcomponents-react/lib/Loader';
 
 describe('Loader', () => {
-  test('small', () => {
+  test('indeterminate', () => {
     const wrapper = renderThemedComponent(<Loader type={LoaderType.Indeterminate} />);
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('medium', () => {
+  test('determinate', () => {
     const wrapper = renderThemedComponent(<Loader type={LoaderType.Determinate} />);
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('large', () => {
-    const wrapper = renderThemedComponent(<Loader type={LoaderType.Determinate} progressBarWidth="42%" />);
+  test('determinate with progress prop', () => {
+    const wrapper = renderThemedComponent(<Loader type={LoaderType.Determinate} progress="42%" />);
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('with custom class name', () => {
+  test('default', () => {
     const wrapper = renderThemedComponent(<Loader />);
     expect(wrapper).toMatchSnapshot();
   });
diff --git a/packages/main/src/components/Loader/demo.stories.tsx b/packages/main/src/components/Loader/demo.stories.tsx
index 6804f613533..d9432f45f42 100644
--- a/packages/main/src/components/Loader/demo.stories.tsx
+++ b/packages/main/src/components/Loader/demo.stories.tsx
@@ -4,10 +4,7 @@ import { Loader } from '@ui5/webcomponents-react/lib/Loader';
 import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
 
 export const renderLoader = () => (
-  <Loader
-    type={select('type', LoaderType, LoaderType.Indeterminate)}
-    progressBarWidth={text('progressBarWidth', '40%')}
-  />
+  <Loader type={select('type', LoaderType, LoaderType.Indeterminate)} progress={text('progress', '40%')} />
 );
 renderLoader.story = {
   name: 'Default'
diff --git a/packages/main/src/components/Loader/index.tsx b/packages/main/src/components/Loader/index.tsx
index 4554b28a9e0..db122d8a079 100644
--- a/packages/main/src/components/Loader/index.tsx
+++ b/packages/main/src/components/Loader/index.tsx
@@ -1,19 +1,20 @@
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
-import React, { forwardRef, RefObject, FC, CSSProperties } from 'react';
+import React, { CSSProperties, FC, forwardRef, RefObject, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
 import { styles } from './Loader.jss';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 
 export interface LoaderProps extends CommonProps {
   type?: LoaderType;
-  progressBarWidth?: CSSProperties['width'];
+  progress?: CSSProperties['width'];
 }
 
 const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'Loader' });
 
 const Loader: FC<LoaderProps> = forwardRef((props: LoaderProps, ref: RefObject<HTMLDivElement>) => {
-  const { className, type, progressBarWidth, tooltip, slot, style } = props;
+  const { className, type, progress, tooltip, slot, style } = props;
   const classes = useStyles(props);
 
   const loaderClasses = StyleClassHelper.of(classes.loader);
@@ -22,6 +23,10 @@ const Loader: FC<LoaderProps> = forwardRef((props: LoaderProps, ref: RefObject<H
   }
   loaderClasses.put(classes[`loader${type}`]);
 
+  const backgroundSize = useMemo(() => {
+    return type !== LoaderType.Determinate ? '40%' : progress;
+  }, [progress]);
+
   return (
     <div
       ref={ref}
@@ -31,14 +36,14 @@ const Loader: FC<LoaderProps> = forwardRef((props: LoaderProps, ref: RefObject<H
       role="progressbar"
       title={tooltip || 'Please wait'}
       slot={slot}
-      style={style}
+      style={{ ...style, backgroundSize }}
     />
   );
 });
 
 Loader.defaultProps = {
   type: LoaderType.Indeterminate,
-  progressBarWidth: '0px'
+  progress: '0px'
 };
 
 Loader.displayName = 'Loader';

From d3a23a4030e71b01aec608078e7bc73349a96bd6 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Thu, 26 Sep 2019 09:07:19 +0200
Subject: [PATCH 7/8] WIP: Change Style Memoization

---
 packages/main/src/components/Loader/index.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/main/src/components/Loader/index.tsx b/packages/main/src/components/Loader/index.tsx
index db122d8a079..feab0fd8085 100644
--- a/packages/main/src/components/Loader/index.tsx
+++ b/packages/main/src/components/Loader/index.tsx
@@ -1,10 +1,10 @@
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
+import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
 import React, { CSSProperties, FC, forwardRef, RefObject, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
-import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
-import { styles } from './Loader.jss';
 import { JSSTheme } from '../../interfaces/JSSTheme';
+import { styles } from './Loader.jss';
 
 export interface LoaderProps extends CommonProps {
   type?: LoaderType;
@@ -23,9 +23,13 @@ const Loader: FC<LoaderProps> = forwardRef((props: LoaderProps, ref: RefObject<H
   }
   loaderClasses.put(classes[`loader${type}`]);
 
-  const backgroundSize = useMemo(() => {
-    return type !== LoaderType.Determinate ? '40%' : progress;
-  }, [progress]);
+  const inlineStyles = useMemo(() => {
+    const backgroundSize = type !== LoaderType.Determinate ? '40%' : progress;
+    return {
+      ...style,
+      backgroundSize
+    };
+  }, [progress, style, type]);
 
   return (
     <div
@@ -36,7 +40,7 @@ const Loader: FC<LoaderProps> = forwardRef((props: LoaderProps, ref: RefObject<H
       role="progressbar"
       title={tooltip || 'Please wait'}
       slot={slot}
-      style={{ ...style, backgroundSize }}
+      style={inlineStyles}
     />
   );
 });

From b9b643c0600127c45f3106559f67a97cb875b4c7 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Thu, 26 Sep 2019 09:11:22 +0200
Subject: [PATCH 8/8] WIP: Added Tests

---
 .../src/components/Loader/Loader.test.tsx     |  5 +++
 .../Loader/__snapshots__/Loader.test.tsx.snap | 31 ++++++++++++++-----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/packages/main/src/components/Loader/Loader.test.tsx b/packages/main/src/components/Loader/Loader.test.tsx
index 3cb8013603d..6e868e137be 100644
--- a/packages/main/src/components/Loader/Loader.test.tsx
+++ b/packages/main/src/components/Loader/Loader.test.tsx
@@ -23,4 +23,9 @@ describe('Loader', () => {
     const wrapper = renderThemedComponent(<Loader />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  test('with Custom Class Name', () => {
+    const wrapper = renderThemedComponent(<Loader className="myTestClass" />);
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/packages/main/src/components/Loader/__snapshots__/Loader.test.tsx.snap b/packages/main/src/components/Loader/__snapshots__/Loader.test.tsx.snap
index 8c6d657e3f0..b32e4cceaa0 100644
--- a/packages/main/src/components/Loader/__snapshots__/Loader.test.tsx.snap
+++ b/packages/main/src/components/Loader/__snapshots__/Loader.test.tsx.snap
@@ -1,41 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loader large 1`] = `
+exports[`Loader default 1`] = `
 <div
   aria-busy="true"
-  class="Loader--loader- Loader--loader-0- Loader--loaderDeterminate-"
+  class="Loader--loader- Loader--loaderIndeterminate-"
   data-component-name="Loader"
   role="progressbar"
+  style="background-size:40%"
   title="Please wait"
 />
 `;
 
-exports[`Loader medium 1`] = `
+exports[`Loader determinate 1`] = `
 <div
   aria-busy="true"
-  class="Loader--loader- Loader--loader-0- Loader--loaderDeterminate-"
+  class="Loader--loader- Loader--loaderDeterminate-"
   data-component-name="Loader"
   role="progressbar"
+  style="background-size:0px"
   title="Please wait"
 />
 `;
 
-exports[`Loader small 1`] = `
+exports[`Loader determinate with progress prop 1`] = `
 <div
   aria-busy="true"
-  class="Loader--loader- Loader--loader-0- Loader--loaderIndeterminate-"
+  class="Loader--loader- Loader--loaderDeterminate-"
   data-component-name="Loader"
   role="progressbar"
+  style="background-size:42%"
   title="Please wait"
 />
 `;
 
-exports[`Loader with custom class name 1`] = `
+exports[`Loader indeterminate 1`] = `
 <div
   aria-busy="true"
-  class="Loader--loader- Loader--loader-0- Loader--loaderIndeterminate-"
+  class="Loader--loader- Loader--loaderIndeterminate-"
   data-component-name="Loader"
   role="progressbar"
+  style="background-size:40%"
+  title="Please wait"
+/>
+`;
+
+exports[`Loader with Custom Class Name 1`] = `
+<div
+  aria-busy="true"
+  class="Loader--loader- myTestClass Loader--loaderIndeterminate-"
+  data-component-name="Loader"
+  role="progressbar"
+  style="background-size:40%"
   title="Please wait"
 />
 `;