Skip to content

Commit bea48ae

Browse files
MarcusNotheisMarcusNotheis
authored
chore: consolidate APIs (#514)
BREAKING CHANGE: **AnalyticalCard**: remove prop `width`, please use `style` or `className` instead BREAKING CHANGE: **Text**: remove prop `width`, please use `style` or `className` instead BREAKING CHANGE: **ProgressIndicator**: remove props `width` and `height`, please use `style` or `className` instead BREAKING CHANGE: **FlexBox**: remove props `width` and `height`, please use `style` or `className` instead
1 parent 781fe4e commit bea48ae

File tree

15 files changed

+40
-125
lines changed

15 files changed

+40
-125
lines changed

‎packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ const styles = {
1111
overflow: 'hidden',
1212
position: 'relative',
1313
fontFamily: ThemingParameters.sapFontFamily,
14-
boxSizing: 'border-box'
14+
boxSizing: 'border-box',
15+
width: '20rem'
1516
},
1617
content: spacing.sapUiContentPadding
1718
};

‎packages/main/src/components/AnalyticalCard/__snapshots__/AnalyticalCard.test.tsx.snap

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
exports[`Analytical Card Render without Crashing 1`] = `
44
<div
55
class="AnalyticalCard-card-0"
6-
style="width: 20rem;"
76
>
87
<div
98
class="AnalyticalCardHeader-cardHeader-0"

‎packages/main/src/components/AnalyticalCard/demo.stories.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ export default {
1717

1818
export const defaultStory = () => (
1919
<AnalyticalCard
20-
width={text('width', '20rem')}
2120
header={
2221
<AnalyticalCardHeader
2322
title={text('title', 'Title')}

‎packages/main/src/components/AnalyticalCard/index.tsx

Lines changed: 20 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
12
import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
23
import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
3-
import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react';
4-
import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
4+
import React, { FC, forwardRef, ReactNode, ReactNodeArray, Ref } from 'react';
55
import { CommonProps } from '../../interfaces/CommonProps';
66

77
import styles from './AnalyticalCard.jss';
@@ -15,46 +15,31 @@ export interface AnalyticalCardTypes extends CommonProps {
1515
* Expected one or more React Components
1616
*/
1717
children: ReactNode | ReactNodeArray;
18-
width?: CSSProperties['width'];
1918
}
2019

2120
const useStyles = createComponentStyles(styles, { name: 'AnalyticalCard' });
2221

2322
/**
2423
* <code>import { AnalyticalCard } from '@ui5/webcomponents-react/lib/AnalyticalCard';</code>
2524
*/
26-
export const AnalyticalCard: FC<AnalyticalCardTypes> = forwardRef(
27-
(props: AnalyticalCardTypes, ref: Ref<HTMLDivElement>) => {
28-
const { children, style, className, tooltip, header, width } = props;
29-
const classes = useStyles();
30-
const classNameString = StyleClassHelper.of(classes.card);
31-
if (className) {
32-
classNameString.put(className);
33-
}
34-
35-
const analyticalCardStyles = useMemo(() => {
36-
return {
37-
width,
38-
...style
39-
};
40-
}, [style, width]);
41-
42-
const passThroughProps = usePassThroughHtmlProps(props);
43-
44-
return (
45-
<div
46-
ref={ref}
47-
className={classNameString.toString()}
48-
style={analyticalCardStyles}
49-
title={tooltip}
50-
{...passThroughProps}
51-
>
52-
{header}
53-
<div className={classes.content}>{children}</div>
54-
</div>
55-
);
25+
const AnalyticalCard: FC<AnalyticalCardTypes> = forwardRef((props: AnalyticalCardTypes, ref: Ref<HTMLDivElement>) => {
26+
const { children, style, className, tooltip, header } = props;
27+
const classes = useStyles();
28+
const classNameString = StyleClassHelper.of(classes.card);
29+
if (className) {
30+
classNameString.put(className);
5631
}
57-
);
32+
33+
const passThroughProps = usePassThroughHtmlProps(props);
34+
35+
return (
36+
<div ref={ref} className={classNameString.toString()} style={style} title={tooltip} {...passThroughProps}>
37+
{header}
38+
<div className={classes.content}>{children}</div>
39+
</div>
40+
);
41+
});
5842

5943
AnalyticalCard.displayName = 'AnalyticalCard';
60-
AnalyticalCard.defaultProps = { width: '20rem', header: null };
44+
45+
export { AnalyticalCard };

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow';
33
import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
44
import { GlobalStyleClasses } from '@ui5/webcomponents-react/lib/GlobalStyleClasses';
55
import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
6-
import { Text } from '@ui5/webcomponents-react/lib/Text';
76
import React, { MutableRefObject, useCallback, useRef } from 'react';
87
import { useVirtual } from 'react-virtual';
98

‎packages/main/src/components/FlexBox/FlexBox.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ describe('FlexBox', () => {
1818

1919
test('Height and Width', () => {
2020
const wrapper = mount(
21-
<FlexBox height="1337px" width="42px">
21+
<FlexBox style={{ height: '1337px', width: '42px' }}>
2222
<span>Test 1</span>
2323
</FlexBox>
2424
);

‎packages/main/src/components/FlexBox/demo.stories.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@ export const defaultStory = () => (
1313
alignItems={select('alignItems', FlexBoxAlignItems, FlexBoxAlignItems.Stretch)}
1414
direction={select('direction', FlexBoxDirection, FlexBoxDirection.Row)}
1515
wrap={select('wrap', FlexBoxWrap, FlexBoxWrap.NoWrap)}
16-
height={text('height', 'auto')}
17-
width={text('width', '500px')}
1816
displayInline={boolean('displayInline', false)}
1917
>
2018
<Label>Item 1</Label>

‎packages/main/src/components/FlexBox/index.tsx

Lines changed: 3 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1+
import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
12
import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
23
import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
34
import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
45
import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
56
import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
67
import { FlexBoxWrap } from '@ui5/webcomponents-react/lib/FlexBoxWrap';
7-
import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react';
8-
import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
8+
import React, { FC, forwardRef, ReactNode, ReactNodeArray, Ref } from 'react';
99
import { CommonProps } from '../../interfaces/CommonProps';
1010
import { styles } from './Flexbox.jss';
1111

@@ -16,9 +16,7 @@ export interface FlexBoxPropTypes extends CommonProps {
1616
direction?: FlexBoxDirection;
1717
displayInline?: boolean;
1818
fitContainer?: boolean;
19-
height?: CSSProperties['height'];
2019
justifyContent?: FlexBoxJustifyContent;
21-
width?: CSSProperties['width'];
2220
wrap?: FlexBoxWrap;
2321
children: ReactNode | ReactNodeArray;
2422
}
@@ -32,8 +30,6 @@ const FlexBox: FC<FlexBoxPropTypes> = forwardRef((props: FlexBoxPropTypes, ref:
3230
justifyContent,
3331
direction,
3432
alignItems,
35-
height,
36-
width,
3733
displayInline,
3834
wrap,
3935
style,
@@ -61,31 +57,10 @@ const FlexBox: FC<FlexBoxPropTypes> = forwardRef((props: FlexBoxPropTypes, ref:
6157
flexBoxClasses.put(className);
6258
}
6359

64-
const memoizedStyles = useMemo(() => {
65-
const innerStyles: CSSProperties = {};
66-
if (height) {
67-
innerStyles.height = height;
68-
}
69-
if (width) {
70-
innerStyles.width = width;
71-
}
72-
if (style) {
73-
Object.assign(innerStyles, style);
74-
}
75-
return innerStyles;
76-
}, [height, width, style]);
77-
7860
const passThroughProps = usePassThroughHtmlProps(props);
7961

8062
return (
81-
<div
82-
ref={ref}
83-
className={flexBoxClasses.valueOf()}
84-
style={memoizedStyles}
85-
title={tooltip}
86-
slot={slot}
87-
{...passThroughProps}
88-
>
63+
<div ref={ref} className={flexBoxClasses.valueOf()} style={style} title={tooltip} slot={slot} {...passThroughProps}>
8964
{children}
9065
</div>
9166
);
@@ -95,9 +70,7 @@ FlexBox.defaultProps = {
9570
alignItems: FlexBoxAlignItems.Stretch,
9671
direction: FlexBoxDirection.Row,
9772
displayInline: false,
98-
height: '',
9973
justifyContent: FlexBoxJustifyContent.Start,
100-
width: '',
10174
wrap: FlexBoxWrap.NoWrap
10275
};
10376
FlexBox.displayName = 'FlexBox';

‎packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ const testFactory = () => {
1515

1616
describe('ProgressIndicator', () => {
1717
test('Custom', () => {
18-
const wrapper = mount(<ProgressIndicator displayValue="sdf" width="50%" height="50%" percentValue={40} />);
18+
const wrapper = mount(
19+
<ProgressIndicator displayValue="sdf" style={{ width: '50%', height: '50%' }} percentValue={40} />
20+
);
1921
expect(wrapper.render()).toMatchSnapshot();
2022
});
2123

‎packages/main/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ exports[`ProgressIndicator Custom 1`] = `
2424
exports[`ProgressIndicator ProgressIndicator with state Error 1`] = `
2525
<div
2626
class="ProgressIndicator-wrapper-0"
27-
style="width: auto;"
2827
>
2928
<div
3029
class="ProgressIndicator-progressbar-0 ProgressIndicator-stateError-0"
@@ -45,7 +44,6 @@ exports[`ProgressIndicator ProgressIndicator with state Error 1`] = `
4544
exports[`ProgressIndicator ProgressIndicator with state Information 1`] = `
4645
<div
4746
class="ProgressIndicator-wrapper-0"
48-
style="width: auto;"
4947
>
5048
<div
5149
class="ProgressIndicator-progressbar-0 ProgressIndicator-stateInformation-0"
@@ -66,7 +64,6 @@ exports[`ProgressIndicator ProgressIndicator with state Information 1`] = `
6664
exports[`ProgressIndicator ProgressIndicator with state None 1`] = `
6765
<div
6866
class="ProgressIndicator-wrapper-0"
69-
style="width: auto;"
7067
>
7168
<div
7269
class="ProgressIndicator-progressbar-0 ProgressIndicator-stateNone-0"
@@ -87,7 +84,6 @@ exports[`ProgressIndicator ProgressIndicator with state None 1`] = `
8784
exports[`ProgressIndicator ProgressIndicator with state Success 1`] = `
8885
<div
8986
class="ProgressIndicator-wrapper-0"
90-
style="width: auto;"
9187
>
9288
<div
9389
class="ProgressIndicator-progressbar-0 ProgressIndicator-stateSuccess-0"
@@ -108,7 +104,6 @@ exports[`ProgressIndicator ProgressIndicator with state Success 1`] = `
108104
exports[`ProgressIndicator ProgressIndicator with state Warning 1`] = `
109105
<div
110106
class="ProgressIndicator-wrapper-0"
111-
style="width: auto;"
112107
>
113108
<div
114109
class="ProgressIndicator-progressbar-0 ProgressIndicator-stateWarning-0"
@@ -129,7 +124,6 @@ exports[`ProgressIndicator ProgressIndicator with state Warning 1`] = `
129124
exports[`ProgressIndicator State 1`] = `
130125
<div
131126
class="ProgressIndicator-wrapper-0"
132-
style="width: auto;"
133127
>
134128
<div
135129
class="ProgressIndicator-progressbar-0 ProgressIndicator-stateError-0"

‎packages/main/src/components/ProgressIndicator/demo.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ export const renderStory = () => {
88
<div>
99
<ProgressIndicator
1010
percentValue={number('percentValue', 5)}
11-
width={text('width', '50%')}
11+
style={{ width: '50%' }}
1212
displayValue={text('displayValue', '5%')}
1313
// @ts-ignore
1414
state={select('state', ValueState, ValueState.None)}
1515
/>
16-
<ProgressIndicator percentValue={95} width="50%" displayValue="95%" />
16+
<ProgressIndicator percentValue={95} style={{ width: '50%' }} displayValue="95%" />
1717
<ProgressIndicator percentValue={25} state={ValueState.Success} displayValue="25 GB" />
1818
<ProgressIndicator percentValue={50} state={ValueState.Warning} displayValue="50/100" />
1919
<ProgressIndicator percentValue={75} state={ValueState.Error} displayValue="75%" />

‎packages/main/src/components/ProgressIndicator/index.tsx

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
22
import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
33
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
4-
import React, { FC, forwardRef, Ref, useMemo } from 'react';
4+
import React, { FC, forwardRef, Ref } from 'react';
55
import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
66
import { CommonProps } from '../../interfaces/CommonProps';
77
import styles from './ProgressIndicator.jss';
@@ -16,16 +16,6 @@ export interface ProgressIndicatorPropTypes extends CommonProps {
1616
*/
1717
displayValue?: string;
1818

19-
/*
20-
* Specified width of component
21-
*/
22-
width?: string;
23-
24-
/*
25-
* Specified height of component
26-
*/
27-
height?: string;
28-
2919
/*
3020
* State of indicator (using ValueState)
3121
*/
@@ -39,7 +29,7 @@ const useStyles = createComponentStyles(styles, { name: 'ProgressIndicator' });
3929
*/
4030
const ProgressIndicator: FC<ProgressIndicatorPropTypes> = forwardRef(
4131
(props: ProgressIndicatorPropTypes, ref: Ref<HTMLDivElement>) => {
42-
const { percentValue, displayValue, width, height, className, style, tooltip, state, slot } = props;
32+
const { percentValue, displayValue, className, style, tooltip, state, slot } = props;
4333

4434
const classes = useStyles();
4535

@@ -67,15 +57,13 @@ const ProgressIndicator: FC<ProgressIndicatorPropTypes> = forwardRef(
6757
wrapperClasses.put(className);
6858
}
6959

70-
const progressBarContainerStyle = useMemo(() => ({ ...style, width, height }), [style, width, height]);
71-
7260
const passThroughProps = usePassThroughHtmlProps(props);
7361

7462
return (
7563
<div
7664
ref={ref}
7765
className={wrapperClasses.valueOf()}
78-
style={progressBarContainerStyle}
66+
style={style}
7967
title={tooltip}
8068
slot={slot}
8169
{...passThroughProps}
@@ -94,8 +82,6 @@ ProgressIndicator.displayName = 'ProgressIndicator';
9482
ProgressIndicator.defaultProps = {
9583
percentValue: 0,
9684
displayValue: '',
97-
width: 'auto',
98-
height: '',
9985
state: ValueState.None
10086
};
10187

‎packages/main/src/components/Text/Text.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ describe('Text', () => {
2626
});
2727

2828
test('custom width', () => {
29-
const wrapper = mount(<Text width="300px">Test</Text>);
29+
const wrapper = mount(<Text style={{ width: '300px' }}>Test</Text>);
3030
expect(window.getComputedStyle(wrapper.getDOMNode()).width).toEqual('300px');
3131
});
3232

‎packages/main/src/components/Text/demo.stories.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,7 @@ import React from 'react';
44

55
export const renderStory = () => {
66
return (
7-
<Text
8-
wrapping={boolean('wrapping', true)}
9-
renderWhitespace={boolean('renderWhitespace', false)}
10-
width={text('width', '')}
11-
>
7+
<Text wrapping={boolean('wrapping', true)} renderWhitespace={boolean('renderWhitespace', false)}>
128
Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
139
magna aliquyam erat, sed diam voluptua.
1410
{'\n\n'}

0 commit comments

Comments
 (0)