From 46383655f2eee730c216455f0e38f045457d781a Mon Sep 17 00:00:00 2001 From: Lukas 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 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 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 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(); + expect(wrapper).toMatchSnapshot(); + }); + + test('medium', () => { + const wrapper = renderThemedComponent(); + expect(wrapper).toMatchSnapshot(); + }); + + test('large', () => { + const wrapper = renderThemedComponent(); + expect(wrapper).toMatchSnapshot(); + }); + + test('with custom class name', () => { + const wrapper = renderThemedComponent(); + 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`] = ` +
+`; + +exports[`Loader medium 1`] = ` +
+`; + +exports[`Loader small 1`] = ` +
+`; + +exports[`Loader with custom class name 1`] = ` +
+`; 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 = () => ( + +); +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 = forwardRef((props: LoaderProps, ref: RefObject) => { + 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 ( +
+ ); +}); + +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 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 --- 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>(styles, { name: 'Loader' }); const Loader: FC = forwardRef((props: LoaderProps, ref: RefObject) => { const { className, type, progressBarWidth, tooltip, slot, style } = props; From f6acda7d764dea3d31e9f59fc92b1c27bc03a32e Mon Sep 17 00:00:00 2001 From: Lukas 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(); expect(wrapper).toMatchSnapshot(); }); - test('medium', () => { + test('determinate', () => { const wrapper = renderThemedComponent(); expect(wrapper).toMatchSnapshot(); }); - test('large', () => { - const wrapper = renderThemedComponent(); + test('determinate with progress prop', () => { + const wrapper = renderThemedComponent(); expect(wrapper).toMatchSnapshot(); }); - test('with custom class name', () => { + test('default', () => { const wrapper = renderThemedComponent(); 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 = () => ( - + ); 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>(styles, { name: 'Loader' }); const Loader: FC = forwardRef((props: LoaderProps, ref: RefObject) => { - 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 = forwardRef((props: LoaderProps, ref: RefObject { + return type !== LoaderType.Determinate ? '40%' : progress; + }, [progress]); + return (
= forwardRef((props: LoaderProps, ref: RefObject ); }); Loader.defaultProps = { type: LoaderType.Indeterminate, - progressBarWidth: '0px' + progress: '0px' }; Loader.displayName = 'Loader'; From d3a23a4030e71b01aec608078e7bc73349a96bd6 Mon Sep 17 00:00:00 2001 From: MarcusNotheis 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 = forwardRef((props: LoaderProps, ref: RefObject { - return type !== LoaderType.Determinate ? '40%' : progress; - }, [progress]); + const inlineStyles = useMemo(() => { + const backgroundSize = type !== LoaderType.Determinate ? '40%' : progress; + return { + ...style, + backgroundSize + }; + }, [progress, style, type]); return (
= forwardRef((props: LoaderProps, ref: RefObject ); }); From b9b643c0600127c45f3106559f67a97cb875b4c7 Mon Sep 17 00:00:00 2001 From: MarcusNotheis 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(); expect(wrapper).toMatchSnapshot(); }); + + test('with Custom Class Name', () => { + const wrapper = renderThemedComponent(); + 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`] = `
`; -exports[`Loader medium 1`] = ` +exports[`Loader determinate 1`] = `
`; -exports[`Loader small 1`] = ` +exports[`Loader determinate with progress prop 1`] = `
`; -exports[`Loader with custom class name 1`] = ` +exports[`Loader indeterminate 1`] = `
+`; + +exports[`Loader with Custom Class Name 1`] = ` +
`;