From d8f79f148ac6ad14b6b5333c83629d9fd46bfb8a Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Fri, 15 May 2020 08:04:49 +0200 Subject: [PATCH 1/7] chore: remove width prop from AnalyticalCard BREAKING CHANGE: **AnalyticalCard**: prop `width` has been removed, please set the width via element-style or `className` --- .../AnalyticalCard/AnalyticalCard.jss.ts | 3 +- .../src/components/AnalyticalCard/index.tsx | 55 +++++++------------ 2 files changed, 22 insertions(+), 36 deletions(-) diff --git a/packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts b/packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts index 72e9250b654..fba0b2adbe6 100644 --- a/packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts +++ b/packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts @@ -11,7 +11,8 @@ const styles = { overflow: 'hidden', position: 'relative', fontFamily: ThemingParameters.sapFontFamily, - boxSizing: 'border-box' + boxSizing: 'border-box', + width: '20rem' }, content: spacing.sapUiContentPadding }; diff --git a/packages/main/src/components/AnalyticalCard/index.tsx b/packages/main/src/components/AnalyticalCard/index.tsx index 45c2470d3af..63aea1c2cef 100644 --- a/packages/main/src/components/AnalyticalCard/index.tsx +++ b/packages/main/src/components/AnalyticalCard/index.tsx @@ -1,7 +1,7 @@ +import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; -import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react'; -import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles'; +import React, { FC, forwardRef, ReactNode, ReactNodeArray, Ref } from 'react'; import { CommonProps } from '../../interfaces/CommonProps'; import styles from './AnalyticalCard.jss'; @@ -15,7 +15,6 @@ export interface AnalyticalCardTypes extends CommonProps { * Expected one or more React Components */ children: ReactNode | ReactNodeArray; - width?: CSSProperties['width']; } const useStyles = createComponentStyles(styles, { name: 'AnalyticalCard' }); @@ -23,38 +22,24 @@ const useStyles = createComponentStyles(styles, { name: 'AnalyticalCard' }); /** * import { AnalyticalCard } from '@ui5/webcomponents-react/lib/AnalyticalCard'; */ -export const AnalyticalCard: FC = forwardRef( - (props: AnalyticalCardTypes, ref: Ref) => { - const { children, style, className, tooltip, header, width } = props; - const classes = useStyles(); - const classNameString = StyleClassHelper.of(classes.card); - if (className) { - classNameString.put(className); - } - - const analyticalCardStyles = useMemo(() => { - return { - width, - ...style - }; - }, [style, width]); - - const passThroughProps = usePassThroughHtmlProps(props); - - return ( -
- {header} -
{children}
-
- ); +const AnalyticalCard: FC = forwardRef((props: AnalyticalCardTypes, ref: Ref) => { + const { children, style, className, tooltip, header } = props; + const classes = useStyles(); + const classNameString = StyleClassHelper.of(classes.card); + if (className) { + classNameString.put(className); } -); + + const passThroughProps = usePassThroughHtmlProps(props); + + return ( +
+ {header} +
{children}
+
+ ); +}); AnalyticalCard.displayName = 'AnalyticalCard'; -AnalyticalCard.defaultProps = { width: '20rem', header: null }; + +export { AnalyticalCard }; From 0fbbd2e912d59443e6e5f225c83ed026608f3dc4 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Fri, 15 May 2020 08:05:05 +0200 Subject: [PATCH 2/7] Update VirtualTableBody.tsx --- .../AnalyticalTable/virtualization/VirtualTableBody.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx index 8c384a512f4..80a2bdb5d9e 100644 --- a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx +++ b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx @@ -3,7 +3,6 @@ import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; import { GlobalStyleClasses } from '@ui5/webcomponents-react/lib/GlobalStyleClasses'; import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; -import { Text } from '@ui5/webcomponents-react/lib/Text'; import React, { MutableRefObject, useCallback, useRef } from 'react'; import { useVirtual } from 'react-virtual'; From f57ea2c24ac3a4bbf7380b37fdd7f58534353b5b Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Fri, 15 May 2020 08:08:43 +0200 Subject: [PATCH 3/7] chore: remove width from text BREAKING CHANGE: delete prop `width`, please use `style` or `className` instead --- .../main/src/components/Text/Text.test.tsx | 2 +- packages/main/src/components/Text/index.tsx | 25 +++---------------- 2 files changed, 5 insertions(+), 22 deletions(-) diff --git a/packages/main/src/components/Text/Text.test.tsx b/packages/main/src/components/Text/Text.test.tsx index c628b9d38b6..e4f97c0373f 100644 --- a/packages/main/src/components/Text/Text.test.tsx +++ b/packages/main/src/components/Text/Text.test.tsx @@ -26,7 +26,7 @@ describe('Text', () => { }); test('custom width', () => { - const wrapper = mount(Test); + const wrapper = mount(Test); expect(window.getComputedStyle(wrapper.getDOMNode()).width).toEqual('300px'); }); diff --git a/packages/main/src/components/Text/index.tsx b/packages/main/src/components/Text/index.tsx index cc0b6a8a4e1..a317b7d73cd 100644 --- a/packages/main/src/components/Text/index.tsx +++ b/packages/main/src/components/Text/index.tsx @@ -1,8 +1,7 @@ -import { deprecationNotice } from '@ui5/webcomponents-react-base/lib/Utils'; import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; -import React, { CSSProperties, FC, forwardRef, ReactNode, Ref, useMemo } from 'react'; +import React, { FC, forwardRef, ReactNode, Ref } from 'react'; import { CommonProps } from '../../interfaces/CommonProps'; import { TextStyles } from './Text.jss'; @@ -15,8 +14,6 @@ export interface TextProps extends CommonProps { renderWhitespace?: boolean; wrapping?: boolean; - - width?: CSSProperties['width']; } const useStyles = createComponentStyles(TextStyles, { name: 'Text' }); @@ -25,7 +22,7 @@ const useStyles = createComponentStyles(TextStyles, { name: 'Text' }); * import { Text } from '@ui5/webcomponents-react/lib/Text'; */ const Text: FC = forwardRef((props: TextProps, ref: Ref) => { - const { children, renderWhitespace, wrapping, width, className, style, tooltip, slot } = props; + const { children, renderWhitespace, wrapping, className, style, tooltip, slot } = props; const classes = useStyles(); const classNameString = StyleClassHelper.of(classes.text); if (wrapping === false) { @@ -38,25 +35,12 @@ const Text: FC = forwardRef((props: TextProps, ref: Ref { - if (width !== null && width !== undefined) { - deprecationNotice( - 'Text', - 'The prop `width` is deprecated and will be removed in the v0.10.0. Please use the `style` object instead.' - ); - } - return { - width, - ...style - }; - }, [style, width]); - const passThroughProps = usePassThroughHtmlProps(props); return ( = forwardRef((props: TextProps, ref: Ref Date: Fri, 15 May 2020 08:14:36 +0200 Subject: [PATCH 4/7] chore: remove width and height prop from ProgressIndicator BREAKING CHANGE: **ProgressIndicator**: removed props `width` and `height`, please use `style` or `className` instead --- .../ProgressIndicator.test.tsx | 4 +++- .../ProgressIndicator.test.tsx.snap | 6 ------ .../components/ProgressIndicator/index.tsx | 20 +++---------------- 3 files changed, 6 insertions(+), 24 deletions(-) diff --git a/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx b/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx index 4060a3199fd..648e71dff0e 100644 --- a/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx +++ b/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx @@ -15,7 +15,9 @@ const testFactory = () => { describe('ProgressIndicator', () => { test('Custom', () => { - const wrapper = mount(); + const wrapper = mount( + + ); expect(wrapper.render()).toMatchSnapshot(); }); diff --git a/packages/main/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap b/packages/main/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap index af7c8fa74c9..97a0286a1f7 100644 --- a/packages/main/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap +++ b/packages/main/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap @@ -24,7 +24,6 @@ exports[`ProgressIndicator Custom 1`] = ` exports[`ProgressIndicator ProgressIndicator with state Error 1`] = `
= forwardRef( (props: ProgressIndicatorPropTypes, ref: Ref) => { - const { percentValue, displayValue, width, height, className, style, tooltip, state, slot } = props; + const { percentValue, displayValue, className, style, tooltip, state, slot } = props; const classes = useStyles(); @@ -67,15 +57,13 @@ const ProgressIndicator: FC = forwardRef( wrapperClasses.put(className); } - const progressBarContainerStyle = useMemo(() => ({ ...style, width, height }), [style, width, height]); - const passThroughProps = usePassThroughHtmlProps(props); return (
Date: Fri, 15 May 2020 08:19:12 +0200 Subject: [PATCH 5/7] chore: delete width and height from FlexBox BREAKING CHANGE: **FlexBox**: delete props `width` and `height`, please use `style` or `className` instead --- .../src/components/FlexBox/FlexBox.test.tsx | 2 +- .../main/src/components/FlexBox/index.tsx | 33 ++----------------- 2 files changed, 4 insertions(+), 31 deletions(-) diff --git a/packages/main/src/components/FlexBox/FlexBox.test.tsx b/packages/main/src/components/FlexBox/FlexBox.test.tsx index ccb5006736e..8d58c46abbd 100644 --- a/packages/main/src/components/FlexBox/FlexBox.test.tsx +++ b/packages/main/src/components/FlexBox/FlexBox.test.tsx @@ -18,7 +18,7 @@ describe('FlexBox', () => { test('Height and Width', () => { const wrapper = mount( - + Test 1 ); diff --git a/packages/main/src/components/FlexBox/index.tsx b/packages/main/src/components/FlexBox/index.tsx index 30f32abf637..c088f99293c 100644 --- a/packages/main/src/components/FlexBox/index.tsx +++ b/packages/main/src/components/FlexBox/index.tsx @@ -1,11 +1,11 @@ +import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems'; import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection'; import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent'; import { FlexBoxWrap } from '@ui5/webcomponents-react/lib/FlexBoxWrap'; -import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react'; -import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles'; +import React, { FC, forwardRef, ReactNode, ReactNodeArray, Ref } from 'react'; import { CommonProps } from '../../interfaces/CommonProps'; import { styles } from './Flexbox.jss'; @@ -16,9 +16,7 @@ export interface FlexBoxPropTypes extends CommonProps { direction?: FlexBoxDirection; displayInline?: boolean; fitContainer?: boolean; - height?: CSSProperties['height']; justifyContent?: FlexBoxJustifyContent; - width?: CSSProperties['width']; wrap?: FlexBoxWrap; children: ReactNode | ReactNodeArray; } @@ -32,8 +30,6 @@ const FlexBox: FC = forwardRef((props: FlexBoxPropTypes, ref: justifyContent, direction, alignItems, - height, - width, displayInline, wrap, style, @@ -61,31 +57,10 @@ const FlexBox: FC = forwardRef((props: FlexBoxPropTypes, ref: flexBoxClasses.put(className); } - const memoizedStyles = useMemo(() => { - const innerStyles: CSSProperties = {}; - if (height) { - innerStyles.height = height; - } - if (width) { - innerStyles.width = width; - } - if (style) { - Object.assign(innerStyles, style); - } - return innerStyles; - }, [height, width, style]); - const passThroughProps = usePassThroughHtmlProps(props); return ( -
+
{children}
); @@ -95,9 +70,7 @@ FlexBox.defaultProps = { alignItems: FlexBoxAlignItems.Stretch, direction: FlexBoxDirection.Row, displayInline: false, - height: '', justifyContent: FlexBoxJustifyContent.Start, - width: '', wrap: FlexBoxWrap.NoWrap }; FlexBox.displayName = 'FlexBox'; From 941a73459fbd26d03e9296cce8f98b426db04ebb Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Fri, 15 May 2020 08:19:31 +0200 Subject: [PATCH 6/7] update stories --- .../main/src/components/AnalyticalCard/demo.stories.tsx | 1 - packages/main/src/components/FlexBox/demo.stories.tsx | 2 -- .../main/src/components/ProgressIndicator/demo.stories.tsx | 4 ++-- packages/main/src/components/Text/demo.stories.tsx | 6 +----- 4 files changed, 3 insertions(+), 10 deletions(-) diff --git a/packages/main/src/components/AnalyticalCard/demo.stories.tsx b/packages/main/src/components/AnalyticalCard/demo.stories.tsx index 3e5c2dca970..774e63a7158 100644 --- a/packages/main/src/components/AnalyticalCard/demo.stories.tsx +++ b/packages/main/src/components/AnalyticalCard/demo.stories.tsx @@ -17,7 +17,6 @@ export default { export const defaultStory = () => ( ( alignItems={select('alignItems', FlexBoxAlignItems, FlexBoxAlignItems.Stretch)} direction={select('direction', FlexBoxDirection, FlexBoxDirection.Row)} wrap={select('wrap', FlexBoxWrap, FlexBoxWrap.NoWrap)} - height={text('height', 'auto')} - width={text('width', '500px')} displayInline={boolean('displayInline', false)} > diff --git a/packages/main/src/components/ProgressIndicator/demo.stories.tsx b/packages/main/src/components/ProgressIndicator/demo.stories.tsx index 4f1a70a8c60..85ae9bd9c0b 100644 --- a/packages/main/src/components/ProgressIndicator/demo.stories.tsx +++ b/packages/main/src/components/ProgressIndicator/demo.stories.tsx @@ -8,12 +8,12 @@ export const renderStory = () => {
- + diff --git a/packages/main/src/components/Text/demo.stories.tsx b/packages/main/src/components/Text/demo.stories.tsx index b03957a1eb5..6a207a1a2aa 100644 --- a/packages/main/src/components/Text/demo.stories.tsx +++ b/packages/main/src/components/Text/demo.stories.tsx @@ -4,11 +4,7 @@ import React from 'react'; export const renderStory = () => { return ( - + Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. {'\n\n'} From aab6472661bf77ca80ceac1aa32a25182a5074e6 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Fri, 15 May 2020 08:20:47 +0200 Subject: [PATCH 7/7] Update AnalyticalCard.test.tsx.snap --- .../AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/main/src/components/AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap b/packages/main/src/components/AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap index 6f0e1d9ae7b..14871deb805 100644 --- a/packages/main/src/components/AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap +++ b/packages/main/src/components/AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap @@ -3,7 +3,6 @@ exports[`Analytical Card Render without Crashing 1`] = `