feat(WebComponents): Update to v1.0.0-rc.3 (#175)

BREAKING CHANGE: Configuration Script is now identified via `data-ui5-config` instead of `data-id="sap-ui-config"` BREAKING CHANGE: `BusyIndicatorType` is renamed to `BusyIndicatorSize` BREAKING CHANGE: `Popover`: stayOpenOnScroll is now removed Popover will no longer close when the browser is scrolled and its parent (opener) is visible in the viewport. BREAKING CHANGE: `ListItem`: CSS variable --ui5-listitem-background-color is removed, set the desired background directly on the tag. BREAKING CHANGE: `TableColumn`: width property of the ui5-table-column has been removed, use CSS to give width to the columns. BREAKING CHANGE: `MultiComboBox`: property validateInput is removed, use the property allowCustomValues, note built in validation is enabled by default. BREAKING CHANGE: `Icon`: SVG icons have to imported, e.g. `import @ui5/webcomponents/dist/icons/add';`
SAP · Oct 9, 2019 · f294e67 · f294e67
1 parent 4d6eaa4
commit f294e67
Show file tree

Hide file tree

Showing 63 changed files with 425 additions and 378 deletions.
diff --git a/README.md b/README.md
@@ -98,7 +98,7 @@ You could import all components also from `@ui5/webcomponents-react` directly, b
 UI5 Web Components supports ```Compact``` and ```Cozy``` mode. It is set to ```Cozy``` by default. To enable ```Compact``` globally, provide the option ```compactSize: true``` in the configuration ```script``` tag:
 
 ```html
-<script data-id="sap-ui-config" type="application/json">
+<script data-ui5-config type="application/json">
 {
   "compactSize": true
 }
@@ -110,7 +110,7 @@ UI5 Web Components supports ```Compact``` and ```Cozy``` mode. It is set to ```C
 If you want your application to run in IE11, you will have to polyfill some features by importing these polyfills as **first** imports in your `src/index.js`:
 ```js
 import 'react-app-polyfill/ie11';
-import '@ui5/webcomponents-base/src/features/browsersupport/IE11';
+import '@ui5/webcomponents-base/dist/features/browsersupport/IE11';
 import '@ui5/webcomponents-react-base/polyfill/IE11';
 import '@webcomponents/webcomponentsjs/webcomponents-bundle';
 ```

diff --git a/package.json b/package.json
@@ -15,15 +15,15 @@
     "prettier:all": "prettier --write --config ./prettier.config.js \"packages/**/*.{ts,tsx}\""
   },
   "dependencies": {
-    "@storybook/addon-actions": "^5.2.1",
-    "@storybook/addon-docs": "^5.2.1",
-    "@storybook/addon-info": "^5.2.1",
-    "@storybook/addon-knobs": "^5.2.1",
-    "@storybook/addon-options": "^5.2.1",
-    "@storybook/addons": "^5.2.1",
-    "@storybook/cli": "^5.2.1",
-    "@storybook/react": "^5.2.1",
-    "@storybook/theming": "^5.2.1"
+    "@storybook/addon-actions": "5.2.3",
+    "@storybook/addon-docs": "5.2.3",
+    "@storybook/addon-info": "5.2.3",
+    "@storybook/addon-knobs": "5.2.3",
+    "@storybook/addon-options": "5.2.3",
+    "@storybook/addons": "5.2.3",
+    "@storybook/cli": "5.2.3",
+    "@storybook/react": "5.2.3",
+    "@storybook/theming": "5.2.3"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",
@@ -35,7 +35,6 @@
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/sinon": "^7.0.12",
-    "@types/storybook__react": "^4.0.1",
     "@webcomponents/webcomponentsjs": "^2.2.10",
     "babel-code-frame": "^6.26.0",
     "babel-loader": "^8.0.5",

diff --git a/packages/base/scripts/cssVariables/parse.js b/packages/base/scripts/cssVariables/parse.js
@@ -1,5 +1,7 @@
 const { writeFileSync } = require('fs');
-const { _: Fiori3ThemingVariables } = require('@ui5/webcomponents/dist/themes/sap_fiori_3/parameters-bundle.css.json');
+const {
+  _: Fiori3ThemingVariables
+} = require('@ui5/webcomponents/dist/assets/themes/sap_fiori_3/parameters-bundle.css.json');
 const PATHS = require('../../../../config/paths');
 const path = require('path');
 

diff --git a/packages/docs/.storybook/config.js b/packages/docs/.storybook/config.js
@@ -1,7 +1,7 @@
 import { select, withKnobs } from '@storybook/addon-knobs';
 import { makeDecorator } from '@storybook/addons';
 import { addDecorator, addParameters, configure } from '@storybook/react';
-import '@ui5/webcomponents-base/src/features/browsersupport/IE11';
+import '@ui5/webcomponents-base/dist/features/browsersupport/IE11';
 import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
 import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
 import { Themes } from '@ui5/webcomponents-react/lib/Themes';

diff --git a/packages/docs/.storybook/manager-head.html b/packages/docs/.storybook/manager-head.html
@@ -22,7 +22,7 @@
     }
 </style>
 
-<script data-id="sap-ui-config" type="application/json">
+<script data-ui5-config type="application/json">
     {
         "theme": "sap_fiori_3",
         "language": "EN"

diff --git a/packages/docs/.storybook/preview-head.html b/packages/docs/.storybook/preview-head.html
@@ -7,7 +7,7 @@
         padding: 1rem;
     }
 </style>
-<script data-id="sap-ui-config" type="application/json">
+<script data-ui5-config type="application/json">
     {
         "theme": "sap_fiori_3",
         "language": "EN",

diff --git a/packages/docs/Welcome.stories.mdx b/packages/docs/Welcome.stories.mdx
@@ -57,7 +57,7 @@ You could import all components also from `@ui5/webcomponents-react` directly, b
 UI5 Web Components supports ```Compact``` and ```Cozy``` mode. It is set to ```Cozy``` by default. To enable ```Compact``` globally, provide the option ```compactSize: true``` in the configuration ```script``` tag:
 
 ```html
-<script data-id="sap-ui-config" type="application/json">
+<script data-ui5-config type="application/json">
 {
   "compactSize": true
 }

diff --git a/packages/main/package.json b/packages/main/package.json
@@ -19,7 +19,7 @@
     "postbuild": "rollup -c rollup.config.js"
   },
   "dependencies": {
-    "@ui5/webcomponents": "1.0.0-rc.2",
+    "@ui5/webcomponents": "1.0.0-rc.3",
     "@ui5/webcomponents-react-base": "0.6.0-rc.11",
     "lodash.debounce": "^4.0.8",
     "react-table": "7.0.0-beta.5",

diff --git a/packages/main/scripts/wrapperGeneration/generateTypingStatements.js b/packages/main/scripts/wrapperGeneration/generateTypingStatements.js
@@ -18,7 +18,7 @@ const f4rEnums = {
   PopoverVerticalAlign: require(path.resolve(fiori3Enums, 'PopoverVerticalAlign.ts')).PopoverVerticalAlign,
   SemanticColor: require(path.resolve(fiori3Enums, 'SemanticColor.ts')).SemanticColor,
   TitleLevel: require(path.resolve(fiori3Enums, 'TitleLevel.ts')).TitleLevel,
-  BusyIndicatorType: require(path.resolve(fiori3Enums, 'BusyIndicatorType.ts')).BusyIndicatorType
+  BusyIndicatorSize: require(path.resolve(fiori3Enums, 'BusyIndicatorSize.ts')).BusyIndicatorSize
 };
 
 function getDefaultPropValue(meta) {

diff --git a/packages/main/scripts/wrapperGeneration/generateTypingsWeb.js b/packages/main/scripts/wrapperGeneration/generateTypingsWeb.js
@@ -5,18 +5,18 @@ import UI5LinkDesign from '@ui5/webcomponents/dist/types/LinkDesign';
 import UI5ListMode from '@ui5/webcomponents/dist/types/ListMode';
 import UI5ListItemTypes from '@ui5/webcomponents/dist/types/ListItemType';
 import UI5PopoverPlacementTypes from '@ui5/webcomponents/dist/types/PopoverPlacementType';
-import UI5BusyIndicatorType from '@ui5/webcomponents/dist/types/BusyIndicatorType';
+import UI5BusyIndicatorSize from '@ui5/webcomponents/dist/types/BusyIndicatorSize';
 import UI5ListSeparators from '@ui5/webcomponents/dist/types/ListSeparators';
 import UI5PanelAccessibleRoles from '@ui5/webcomponents/dist/types/PanelAccessibleRole';
 import UI5PopoverHorizontalAligns from '@ui5/webcomponents/dist/types/PopoverHorizontalAlign';
 import UI5PopoverVerticalAligns from '@ui5/webcomponents/dist/types/PopoverVerticalAlign';
 import UI5SemanticColors from '@ui5/webcomponents/dist/types/SemanticColor';
 import UI5TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel';
 import UI5MessageStripType from '@ui5/webcomponents/dist/types/MessageStripType';
-import CSSSize from '@ui5/webcomponents-base/src/types/CSSSize';
-import Integer from '@ui5/webcomponents-base/src/types/Integer';
-import UI5ValueState from '@ui5/webcomponents-base/src/types/ValueState';
-import UI5CalendarType from '@ui5/webcomponents-base/src/dates/CalendarType';
+import CSSSize from '@ui5/webcomponents-base/dist/types/CSSSize';
+import Integer from '@ui5/webcomponents-base/dist/types/Integer';
+import UI5ValueState from '@ui5/webcomponents-base/dist/types/ValueState';
+import UI5CalendarType from '@ui5/webcomponents-base/dist/dates/CalendarType';
 import TimelineItem from '@ui5/webcomponents/dist/TimelineItem';
 
 const mappings = {
@@ -30,9 +30,9 @@ const mappings = {
     tsType: 'PlacementType',
     isEnum: true
   },
-  [UI5BusyIndicatorType]: {
-    importStatement: "import { BusyIndicatorType } from '@ui5/webcomponents-react/lib/BusyIndicatorType';",
-    tsType: 'BusyIndicatorType',
+  [UI5BusyIndicatorSize]: {
+    importStatement: "import { BusyIndicatorSize } from '@ui5/webcomponents-react/lib/BusyIndicatorSize';",
+    tsType: 'BusyIndicatorSize',
     isEnum: true
   },
   [UI5PopoverHorizontalAligns]: {

diff --git a/packages/main/scripts/wrapperGeneration/steps/createDemo.js b/packages/main/scripts/wrapperGeneration/steps/createDemo.js
@@ -14,6 +14,7 @@ const COMPONENT_DEMO_BLACKLIST = [
   'ListItem',
   'ListItemBase',
   'MonthPicker',
+  'Option',
   'Popup',
   'ShellBarItem',
   'StandardListItem',

diff --git a/packages/main/src/components/ActionSheet/__snapshots__/ActionSheet.test.tsx.snap b/packages/main/src/components/ActionSheet/__snapshots__/ActionSheet.test.tsx.snap
@@ -12,7 +12,6 @@ Array [
   </div>,
   <ui5-popover
     class=""
-    header-text=""
     horizontal-align="Center"
     placement-type="Bottom"
     vertical-align="Center"

diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -7,6 +7,10 @@ import { JSSTheme } from '../../../interfaces/JSSTheme';
 import { Resizer } from '../Resizer';
 import { ColumnType } from '../types/ColumnType';
 import { ColumnHeaderModal } from './ColumnHeaderModal';
+import '@ui5/webcomponents/dist/icons/filter';
+import '@ui5/webcomponents/dist/icons/group-2';
+import '@ui5/webcomponents/dist/icons/sort-descending';
+import '@ui5/webcomponents/dist/icons/sort-ascending';
 
 export interface ColumnHeaderProps {
   defaultSortDesc: boolean;

diff --git a/packages/main/src/components/AnalyticalTable/LoadingComponent/index.tsx b/packages/main/src/components/AnalyticalTable/LoadingComponent/index.tsx
@@ -1,5 +1,5 @@
 import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator';
-import { BusyIndicatorType } from '@ui5/webcomponents-react/lib/BusyIndicatorType';
+import { BusyIndicatorSize } from '@ui5/webcomponents-react/lib/BusyIndicatorSize';
 import React from 'react';
 
 const LoadingComponent = () => {
@@ -17,7 +17,7 @@ const LoadingComponent = () => {
         backgroundColor: 'rgba(247,247,247,0.72)' // TODO is there a theming parameter available?
       }}
     >
-      <BusyIndicator size={BusyIndicatorType.Medium} active style={{ backgroundColor: 'transparent' }} />
+      <BusyIndicator size={BusyIndicatorSize.Medium} active style={{ backgroundColor: 'transparent' }} />
     </div>
   );
 };

diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
@@ -43,7 +43,6 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           </div>
           <ui5-popover
             class=""
-            header-text=""
             horizontal-align="Left"
             no-arrow="true"
             placement-type="Bottom"
@@ -103,7 +102,6 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           </div>
           <ui5-popover
             class=""
-            header-text=""
             horizontal-align="Left"
             no-arrow="true"
             placement-type="Bottom"
@@ -163,7 +161,6 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           </div>
           <ui5-popover
             class=""
-            header-text=""
             horizontal-align="Left"
             no-arrow="true"
             placement-type="Bottom"
@@ -225,7 +222,6 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           </div>
           <ui5-popover
             class=""
-            header-text=""
             horizontal-align="Left"
             no-arrow="true"
             placement-type="Bottom"

diff --git a/packages/main/src/components/Avatar/demo.stories.tsx b/packages/main/src/components/Avatar/demo.stories.tsx
diff --git a/packages/main/src/components/Carousel/CarouselPagination.tsx b/packages/main/src/components/Carousel/CarouselPagination.tsx
@@ -7,6 +7,8 @@ import { Icon } from '@ui5/webcomponents-react/lib/Icon';
 import { Label } from '@ui5/webcomponents-react/lib/Label';
 import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
 import styles from './CarouselPagination.jss';
+import '@ui5/webcomponents/dist/icons/arrow-left';
+import '@ui5/webcomponents/dist/icons/arrow-right';
 
 const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'CarouselPagination' });
 

diff --git a/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap b/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`FilterBar Hide Filter Bar 1`] = `
         <ui5-button
           class=""
           design="Transparent"
-          icon="navigation-down-arrow"
+          icon="sap-icon://navigation-down-arrow"
         />
       </div>
     </div>
@@ -186,7 +186,7 @@ exports[`FilterBar Render without crashing 1`] = `
         <ui5-button
           class=""
           design="Transparent"
-          icon="navigation-down-arrow"
+          icon="sap-icon://navigation-down-arrow"
         />
       </div>
     </div>
@@ -339,7 +339,7 @@ exports[`FilterBar Select Filter Item 1`] = `
         <ui5-button
           class=""
           design="Transparent"
-          icon="navigation-down-arrow"
+          icon="sap-icon://navigation-down-arrow"
         />
       </div>
     </div>

diff --git a/packages/main/src/components/FilterItem/index.tsx b/packages/main/src/components/FilterItem/index.tsx
@@ -12,7 +12,7 @@ import { MultiComboBox } from '@ui5/webcomponents-react/lib/MultiComboBox';
 import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem';
 import { Option } from '@ui5/webcomponents-react/lib/Option';
 import styles from './FilterItem.jss';
-import { BusyIndicatorType } from '@ui5/webcomponents-react/lib/BusyIndicatorType';
+import { BusyIndicatorSize } from '@ui5/webcomponents-react/lib/BusyIndicatorSize';
 
 export interface FilterItemPropTypes extends CommonProps {
   placeholder?: string;
@@ -72,7 +72,7 @@ const FilterItem: FC<FilterItemPropTypes> = forwardRef((props: FilterItemPropTyp
         <div className={classes.loadingContainer}>
           <BusyIndicator
             active
-            size={BusyIndicatorType.Medium}
+            size={BusyIndicatorSize.Medium}
             style={{ backgroundColor: 'transparent', width: '80px' }}
           />
         </div>

diff --git a/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap b/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`MessageBox Confirm - Cancel 1`] = `
     >
       <ui5-icon
         class=""
-        src="question-mark"
+        src="sap-icon://question-mark"
       />
     </div>
     <ui5-title
@@ -60,6 +60,7 @@ exports[`MessageBox Confirm - OK 1`] = `
   class=""
   header-text=""
   open="true"
+  opened=""
 >
   <header
     class="MessageBox--header-"
@@ -71,7 +72,7 @@ exports[`MessageBox Confirm - OK 1`] = `
     >
       <ui5-icon
         class=""
-        src="question-mark"
+        src="sap-icon://question-mark"
       />
     </div>
     <ui5-title
@@ -126,7 +127,7 @@ exports[`MessageBox Error 1`] = `
     >
       <ui5-icon
         class=""
-        src="message-error"
+        src="sap-icon://message-error"
       />
     </div>
     <ui5-title
@@ -173,7 +174,7 @@ exports[`MessageBox Information 1`] = `
     >
       <ui5-icon
         class=""
-        src="message-information"
+        src="sap-icon://message-information"
       />
     </div>
     <ui5-title
@@ -209,6 +210,7 @@ exports[`MessageBox No Title 1`] = `
   class=""
   header-text=""
   open="true"
+  opened=""
 >
   <header
     class="MessageBox--header-"
@@ -220,7 +222,7 @@ exports[`MessageBox No Title 1`] = `
     >
       <ui5-icon
         class=""
-        src="question-mark"
+        src="sap-icon://question-mark"
       />
     </div>
     <ui5-title
@@ -275,7 +277,7 @@ exports[`MessageBox Not open 1`] = `
     >
       <ui5-icon
         class=""
-        src="message-success"
+        src="sap-icon://message-success"
       />
     </div>
     <ui5-title
@@ -322,7 +324,7 @@ exports[`MessageBox Show 1`] = `
     >
       <ui5-icon
         class=""
-        src="question-mark"
+        src="sap-icon://question-mark"
       />
     </div>
     <ui5-title
@@ -377,7 +379,7 @@ exports[`MessageBox Success 1`] = `
     >
       <ui5-icon
         class=""
-        src="message-success"
+        src="sap-icon://message-success"
       />
     </div>
     <ui5-title
@@ -424,7 +426,7 @@ exports[`MessageBox Success w/ custom title 1`] = `
     >
       <ui5-icon
         class=""
-        src="message-success"
+        src="sap-icon://message-success"
       />
     </div>
     <ui5-title
@@ -471,7 +473,7 @@ exports[`MessageBox Warning 1`] = `
     >
       <ui5-icon
         class=""
-        src="message-warning"
+        src="sap-icon://message-warning"
       />
     </div>
     <ui5-title