chore: consolidate APIs

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
 };

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

@@ -3,7 +3,6 @@
 exports[`Analytical Card Render without Crashing 1`] = `
 <div
   class="AnalyticalCard-card-0"
-  style="width: 20rem;"
 >
   <div
     class="AnalyticalCardHeader-cardHeader-0"

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

@@ -17,7 +17,6 @@ export default {
 
 export const defaultStory = () => (
   <AnalyticalCard
-    width={text('width', '20rem')}
     header={
       <AnalyticalCardHeader
         title={text('title', 'Title')}

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,46 +15,31 @@ export interface AnalyticalCardTypes extends CommonProps {
    * Expected one or more React Components
    */
   children: ReactNode | ReactNodeArray;
-  width?: CSSProperties['width'];
 }
 
 const useStyles = createComponentStyles(styles, { name: 'AnalyticalCard' });
 
 /**
  * <code>import { AnalyticalCard } from '@ui5/webcomponents-react/lib/AnalyticalCard';</code>
  */
-export const AnalyticalCard: FC<AnalyticalCardTypes> = forwardRef(
-  (props: AnalyticalCardTypes, ref: Ref<HTMLDivElement>) => {
-    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 (
-      <div
-        ref={ref}
-        className={classNameString.toString()}
-        style={analyticalCardStyles}
-        title={tooltip}
-        {...passThroughProps}
-      >
-        {header}
-        <div className={classes.content}>{children}</div>
-      </div>
-    );
+const AnalyticalCard: FC<AnalyticalCardTypes> = forwardRef((props: AnalyticalCardTypes, ref: Ref<HTMLDivElement>) => {
+  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 (
+    <div ref={ref} className={classNameString.toString()} style={style} title={tooltip} {...passThroughProps}>
+      {header}
+      <div className={classes.content}>{children}</div>
+    </div>
+  );
+});
 
 AnalyticalCard.displayName = 'AnalyticalCard';
-AnalyticalCard.defaultProps = { width: '20rem', header: null };
+
+export { AnalyticalCard };

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';
 

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

@@ -18,7 +18,7 @@ describe('FlexBox', () => {
 
   test('Height and Width', () => {
     const wrapper = mount(
-      <FlexBox height="1337px" width="42px">
+      <FlexBox style={{ height: '1337px', width: '42px' }}>
         <span>Test 1</span>
       </FlexBox>
     );

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

@@ -13,8 +13,6 @@ 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)}
   >
     <Label>Item 1</Label>

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<FlexBoxPropTypes> = forwardRef((props: FlexBoxPropTypes, ref:
     justifyContent,
     direction,
     alignItems,
-    height,
-    width,
     displayInline,
     wrap,
     style,
@@ -61,31 +57,10 @@ const FlexBox: FC<FlexBoxPropTypes> = 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 (
-    <div
-      ref={ref}
-      className={flexBoxClasses.valueOf()}
-      style={memoizedStyles}
-      title={tooltip}
-      slot={slot}
-      {...passThroughProps}
-    >
+    <div ref={ref} className={flexBoxClasses.valueOf()} style={style} title={tooltip} slot={slot} {...passThroughProps}>
       {children}
     </div>
   );
@@ -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';

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

@@ -15,7 +15,9 @@ const testFactory = () => {
 
 describe('ProgressIndicator', () => {
   test('Custom', () => {
-    const wrapper = mount(<ProgressIndicator displayValue="sdf" width="50%" height="50%" percentValue={40} />);
+    const wrapper = mount(
+      <ProgressIndicator displayValue="sdf" style={{ width: '50%', height: '50%' }} percentValue={40} />
+    );
     expect(wrapper.render()).toMatchSnapshot();
   });
 

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`] = `
 <div
   class="ProgressIndicator-wrapper-0"
-  style="width: auto;"
 >
   <div
     class="ProgressIndicator-progressbar-0 ProgressIndicator-stateError-0"
@@ -45,7 +44,6 @@ exports[`ProgressIndicator ProgressIndicator with state Error 1`] = `
 exports[`ProgressIndicator ProgressIndicator with state Information 1`] = `
 <div
   class="ProgressIndicator-wrapper-0"
-  style="width: auto;"
 >
   <div
     class="ProgressIndicator-progressbar-0 ProgressIndicator-stateInformation-0"
@@ -66,7 +64,6 @@ exports[`ProgressIndicator ProgressIndicator with state Information 1`] = `
 exports[`ProgressIndicator ProgressIndicator with state None 1`] = `
 <div
   class="ProgressIndicator-wrapper-0"
-  style="width: auto;"
 >
   <div
     class="ProgressIndicator-progressbar-0 ProgressIndicator-stateNone-0"
@@ -87,7 +84,6 @@ exports[`ProgressIndicator ProgressIndicator with state None 1`] = `
 exports[`ProgressIndicator ProgressIndicator with state Success 1`] = `
 <div
   class="ProgressIndicator-wrapper-0"
-  style="width: auto;"
 >
   <div
     class="ProgressIndicator-progressbar-0 ProgressIndicator-stateSuccess-0"
@@ -108,7 +104,6 @@ exports[`ProgressIndicator ProgressIndicator with state Success 1`] = `
 exports[`ProgressIndicator ProgressIndicator with state Warning 1`] = `
 <div
   class="ProgressIndicator-wrapper-0"
-  style="width: auto;"
 >
   <div
     class="ProgressIndicator-progressbar-0 ProgressIndicator-stateWarning-0"
@@ -129,7 +124,6 @@ exports[`ProgressIndicator ProgressIndicator with state Warning 1`] = `
 exports[`ProgressIndicator State 1`] = `
 <div
   class="ProgressIndicator-wrapper-0"
-  style="width: auto;"
 >
   <div
     class="ProgressIndicator-progressbar-0 ProgressIndicator-stateError-0"

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

@@ -8,12 +8,12 @@ export const renderStory = () => {
     <div>
       <ProgressIndicator
         percentValue={number('percentValue', 5)}
-        width={text('width', '50%')}
+        style={{ width: '50%' }}
         displayValue={text('displayValue', '5%')}
         // @ts-ignore
         state={select('state', ValueState, ValueState.None)}
       />
-      <ProgressIndicator percentValue={95} width="50%" displayValue="95%" />
+      <ProgressIndicator percentValue={95} style={{ width: '50%' }} displayValue="95%" />
       <ProgressIndicator percentValue={25} state={ValueState.Success} displayValue="25 GB" />
       <ProgressIndicator percentValue={50} state={ValueState.Warning} displayValue="50/100" />
       <ProgressIndicator percentValue={75} state={ValueState.Error} displayValue="75%" />

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

@@ -1,7 +1,7 @@
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
 import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
-import React, { FC, forwardRef, Ref, useMemo } from 'react';
+import React, { FC, forwardRef, Ref } from 'react';
 import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 import { CommonProps } from '../../interfaces/CommonProps';
 import styles from './ProgressIndicator.jss';
@@ -16,16 +16,6 @@ export interface ProgressIndicatorPropTypes extends CommonProps {
    */
   displayValue?: string;
 
-  /*
-   * Specified width of component
-   */
-  width?: string;
-
-  /*
-   * Specified height of component
-   */
-  height?: string;
-
   /*
    * State of indicator (using ValueState)
    */
@@ -39,7 +29,7 @@ const useStyles = createComponentStyles(styles, { name: 'ProgressIndicator' });
  */
 const ProgressIndicator: FC<ProgressIndicatorPropTypes> = forwardRef(
   (props: ProgressIndicatorPropTypes, ref: Ref<HTMLDivElement>) => {
-    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<ProgressIndicatorPropTypes> = forwardRef(
       wrapperClasses.put(className);
     }
 
-    const progressBarContainerStyle = useMemo(() => ({ ...style, width, height }), [style, width, height]);
-
     const passThroughProps = usePassThroughHtmlProps(props);
 
     return (
       <div
         ref={ref}
         className={wrapperClasses.valueOf()}
-        style={progressBarContainerStyle}
+        style={style}
         title={tooltip}
         slot={slot}
         {...passThroughProps}
@@ -94,8 +82,6 @@ ProgressIndicator.displayName = 'ProgressIndicator';
 ProgressIndicator.defaultProps = {
   percentValue: 0,
   displayValue: '',
-  width: 'auto',
-  height: '',
   state: ValueState.None
 };
 

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

@@ -26,7 +26,7 @@ describe('Text', () => {
   });
 
   test('custom width', () => {
-    const wrapper = mount(<Text width="300px">Test</Text>);
+    const wrapper = mount(<Text style={{ width: '300px' }}>Test</Text>);
     expect(window.getComputedStyle(wrapper.getDOMNode()).width).toEqual('300px');
   });
 

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

@@ -4,11 +4,7 @@ import React from 'react';
 
 export const renderStory = () => {
   return (
-    <Text
-      wrapping={boolean('wrapping', true)}
-      renderWhitespace={boolean('renderWhitespace', false)}
-      width={text('width', '')}
-    >
+    <Text wrapping={boolean('wrapping', true)} renderWhitespace={boolean('renderWhitespace', false)}>
       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'}