diff --git a/.gitignore b/.gitignore
index c21482bdb95..803d929e863 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,14 +5,11 @@ yarn-error.log
.idea
coverage
/.env
-lib/
dist/
@types
typings
!/typings
.cache
-!packages/utils/src/Device/lib
-!packages/fiori3/src/lib
build
/packages/*/npm/**/*.d.ts
.out
diff --git a/README.md b/README.md
index 78007e39cf1..80a6a67f011 100644
--- a/README.md
+++ b/README.md
@@ -35,21 +35,16 @@ You can play around with our components by visiting our [Storybook](https://sap.
-#### [@ui5-webcomponents-react/styles](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/styles) - Styles
-[![](https://img.shields.io/npm/v/@ui5-webcomponents-react/styles.svg)](https://www.npmjs.com/package/@ui5-webcomponents-react/styles)
-
-
-
-#### [@ui5-webcomponents-react/utils](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/utils) - Utils
-[![](https://img.shields.io/npm/v/@ui5-webcomponents-react/utils.svg)](https://www.npmjs.com/package/@ui5-webcomponents-react/utils)
-
-
-
#### [@ui5-webcomponents-react/charts](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/charts) - Fiori Charts
[![](https://img.shields.io/npm/v/@ui5-webcomponents-react/charts.svg)](https://www.npmjs.com/package/@ui5-webcomponents-react/charts)
+#### [@ui5-webcomponents-react/base](https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/base) - Utils
+[![](https://img.shields.io/npm/v/@ui5-webcomponents-react/base.svg)](https://www.npmjs.com/package/@ui5-webcomponents-react/base)
+
+
+
diff --git a/package.json b/package.json
index 67a1b1adc8e..99ffcce28ab 100644
--- a/package.json
+++ b/package.json
@@ -27,14 +27,14 @@
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
- "@storybook/addon-actions": "^5.0.11",
- "@storybook/addon-info": "^5.0.11",
- "@storybook/addon-knobs": "^5.0.11",
- "@storybook/addon-options": "^5.0.11",
- "@storybook/addons": "^5.0.11",
- "@storybook/react": "^5.0.11",
+ "@storybook/addon-actions": "^5.1.9",
+ "@storybook/addon-info": "^5.1.9",
+ "@storybook/addon-knobs": "^5.1.9",
+ "@storybook/addon-options": "^5.1.9",
+ "@storybook/addons": "^5.1.9",
+ "@storybook/react": "^5.1.9",
"@storybook/storybook-deployer": "^2.8.1",
- "@storybook/theming": "^5.0.11",
+ "@storybook/theming": "^5.1.9",
"@types/chai": "^4.1.7",
"@types/enzyme": "^3.9.3",
"@types/hoist-non-react-statics": "^3.3.1",
@@ -85,7 +85,6 @@
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.5",
"karma-mocha-snapshot": "^0.2.1",
- "karma-selenium-grid-launcher": "^0.2.0",
"karma-snapshot": "^0.6.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^3.0.5",
diff --git a/packages/utils/README.md b/packages/base/README.md
similarity index 79%
rename from packages/utils/README.md
rename to packages/base/README.md
index cd29ae23583..64a979bbae0 100644
--- a/packages/utils/README.md
+++ b/packages/base/README.md
@@ -1,11 +1,11 @@
-# @ui5-webcomponents-react/utils
-Helper Utils for ui5-webcomponents-react
+# @ui5-webcomponents-react/base
+Base Utilities for ui5-webcomponents-react
## Installation
```
-yarn add @ui5-webcomponents-react/utils
+yarn add @ui5-webcomponents-react/base
OR
-npm install @ui5-webcomponents-react/utils --save
+npm install @ui5-webcomponents-react/base --save
```
## Modules
@@ -14,7 +14,7 @@ npm install @ui5-webcomponents-react/utils --save
Concat multiple CSS Module into an instance of this class helper and place them into a react component.
Example:
```javascript
-import { StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { StyleClassHelper } from '@ui5-webcomponents-react/base';
import style from 'YOUR_STYLESHEET';
const classes = new StyleClassHelper.of(style.text);
diff --git a/packages/styles/index.ts b/packages/base/index.ts
similarity index 100%
rename from packages/styles/index.ts
rename to packages/base/index.ts
diff --git a/packages/base/npm/index.cjs.js b/packages/base/npm/index.cjs.js
new file mode 100644
index 00000000000..8fe6cbdba19
--- /dev/null
+++ b/packages/base/npm/index.cjs.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+ module.exports = require('./cjs/base.production.min.js');
+} else {
+ module.exports = require('./cjs/base.development.js');
+}
diff --git a/packages/base/npm/index.esm.js b/packages/base/npm/index.esm.js
new file mode 100644
index 00000000000..f77b1978a1a
--- /dev/null
+++ b/packages/base/npm/index.esm.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+ module.exports = require('./esm/base.production.min.js');
+} else {
+ module.exports = require('./esm/base.development.js');
+}
diff --git a/packages/styles/package.json b/packages/base/package.json
similarity index 63%
rename from packages/styles/package.json
rename to packages/base/package.json
index 07a28eb975d..7c1f3b5c5d5 100644
--- a/packages/styles/package.json
+++ b/packages/base/package.json
@@ -1,20 +1,18 @@
{
- "name": "@ui5-webcomponents-react/styles",
+ "name": "@ui5-webcomponents-react/base",
"version": "0.3.2-rc.2",
- "description": "Stylesheets for ui5-webcomponents-react",
+ "description": "Base for ui5-webcomponents-react",
"main": "index.cjs.js",
"module": "index.esm.js",
"types": "index.d.ts",
- "repository": "https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/styles",
+ "repository": "https://github.com/SAP/ui5-webcomponents-react/tree/master/packages/base",
"author": "SAP SE (https://www.sap.com)",
"license": "Apache-2.0",
"dependencies": {
- "core-js": "^3.1.3",
+ "core-js": "^3.1.4",
+ "tslib": "^1.9.3",
"deepmerge": "^3.2.0",
"hoist-non-react-statics": "^3.3.0",
"react-jss": "^8.6.1"
- },
- "peerDependencies": {
- "react": "^16.8.0"
}
}
diff --git a/packages/styles/src/72.ts b/packages/base/src/72.ts
similarity index 100%
rename from packages/styles/src/72.ts
rename to packages/base/src/72.ts
diff --git a/packages/utils/src/Device/Browser.test.ts b/packages/base/src/Device/Browser.test.ts
similarity index 100%
rename from packages/utils/src/Device/Browser.test.ts
rename to packages/base/src/Device/Browser.test.ts
diff --git a/packages/utils/src/Device/Browser.ts b/packages/base/src/Device/Browser.ts
similarity index 100%
rename from packages/utils/src/Device/Browser.ts
rename to packages/base/src/Device/Browser.ts
diff --git a/packages/utils/src/Device/EventRegistry.test.ts b/packages/base/src/Device/EventRegistry.test.ts
similarity index 100%
rename from packages/utils/src/Device/EventRegistry.test.ts
rename to packages/base/src/Device/EventRegistry.test.ts
diff --git a/packages/utils/src/Device/EventRegistry.ts b/packages/base/src/Device/EventRegistry.ts
similarity index 100%
rename from packages/utils/src/Device/EventRegistry.ts
rename to packages/base/src/Device/EventRegistry.ts
diff --git a/packages/utils/src/Device/Media.test.ts b/packages/base/src/Device/Media.test.ts
similarity index 100%
rename from packages/utils/src/Device/Media.test.ts
rename to packages/base/src/Device/Media.test.ts
diff --git a/packages/utils/src/Device/Media.ts b/packages/base/src/Device/Media.ts
similarity index 100%
rename from packages/utils/src/Device/Media.ts
rename to packages/base/src/Device/Media.ts
diff --git a/packages/utils/src/Device/OS.test.ts b/packages/base/src/Device/OS.test.ts
similarity index 100%
rename from packages/utils/src/Device/OS.test.ts
rename to packages/base/src/Device/OS.test.ts
diff --git a/packages/utils/src/Device/OS.ts b/packages/base/src/Device/OS.ts
similarity index 100%
rename from packages/utils/src/Device/OS.ts
rename to packages/base/src/Device/OS.ts
diff --git a/packages/utils/src/Device/Orientation.test.ts b/packages/base/src/Device/Orientation.test.ts
similarity index 100%
rename from packages/utils/src/Device/Orientation.test.ts
rename to packages/base/src/Device/Orientation.test.ts
diff --git a/packages/utils/src/Device/Orientation.ts b/packages/base/src/Device/Orientation.ts
similarity index 100%
rename from packages/utils/src/Device/Orientation.ts
rename to packages/base/src/Device/Orientation.ts
diff --git a/packages/utils/src/Device/Resize.test.ts b/packages/base/src/Device/Resize.test.ts
similarity index 100%
rename from packages/utils/src/Device/Resize.test.ts
rename to packages/base/src/Device/Resize.test.ts
diff --git a/packages/utils/src/Device/Resize.ts b/packages/base/src/Device/Resize.ts
similarity index 100%
rename from packages/utils/src/Device/Resize.ts
rename to packages/base/src/Device/Resize.ts
diff --git a/packages/utils/src/Device/Support.ts b/packages/base/src/Device/Support.ts
similarity index 100%
rename from packages/utils/src/Device/Support.ts
rename to packages/base/src/Device/Support.ts
diff --git a/packages/utils/src/Device/System.test.ts b/packages/base/src/Device/System.test.ts
similarity index 100%
rename from packages/utils/src/Device/System.test.ts
rename to packages/base/src/Device/System.test.ts
diff --git a/packages/utils/src/Device/System.ts b/packages/base/src/Device/System.ts
similarity index 100%
rename from packages/utils/src/Device/System.ts
rename to packages/base/src/Device/System.ts
diff --git a/packages/utils/src/Device/Utils.test.ts b/packages/base/src/Device/Utils.test.ts
similarity index 100%
rename from packages/utils/src/Device/Utils.test.ts
rename to packages/base/src/Device/Utils.test.ts
diff --git a/packages/utils/src/Device/index.test.ts b/packages/base/src/Device/index.test.ts
similarity index 100%
rename from packages/utils/src/Device/index.test.ts
rename to packages/base/src/Device/index.test.ts
diff --git a/packages/utils/src/Device/index.ts b/packages/base/src/Device/index.ts
similarity index 100%
rename from packages/utils/src/Device/index.ts
rename to packages/base/src/Device/index.ts
diff --git a/packages/utils/src/Device/lib/modernizr-config.json b/packages/base/src/Device/lib/modernizr-config.json
similarity index 100%
rename from packages/utils/src/Device/lib/modernizr-config.json
rename to packages/base/src/Device/lib/modernizr-config.json
diff --git a/packages/utils/src/Device/lib/modernizr.js b/packages/base/src/Device/lib/modernizr.js
similarity index 100%
rename from packages/utils/src/Device/lib/modernizr.js
rename to packages/base/src/Device/lib/modernizr.js
diff --git a/packages/utils/src/Device/utils.ts b/packages/base/src/Device/utils.ts
similarity index 100%
rename from packages/utils/src/Device/utils.ts
rename to packages/base/src/Device/utils.ts
diff --git a/packages/utils/src/Event.ts b/packages/base/src/Event.ts
similarity index 100%
rename from packages/utils/src/Event.ts
rename to packages/base/src/Event.ts
diff --git a/packages/base/src/HSLColor.test.ts b/packages/base/src/HSLColor.test.ts
new file mode 100644
index 00000000000..0c7a8b17ad0
--- /dev/null
+++ b/packages/base/src/HSLColor.test.ts
@@ -0,0 +1,19 @@
+import { HSLColor } from './HSLColor';
+import { sapColorSemanticNegative, sapUiBrand, sapUiHighlight } from './sap_fiori_3';
+
+describe('HSL Color', () => {
+ test('lighten', () => {
+ const color = HSLColor.of(sapUiHighlight).lighten(63).hsl;
+ expect(color).toEqual('hsl(209.8, 90.9%, 95%)'); //hsl(208.4, 90.5%, 95.9%)
+ });
+
+ test('darken', () => {
+ const color = HSLColor.of(sapUiBrand).darken(10).hsl;
+ expect(color).toEqual('hsl(209.8, 90.9%, 32.9%)'); //hsl(210, 90.5%, 32.9%)
+ });
+
+ test('border bg colors', () => {
+ const color = HSLColor.of(sapColorSemanticNegative).lighten(59.5).hsl;
+ expect(color).toEqual('hsl(0, 100%, 95.5%)'); //hsl(0, 100%, 96.1%)
+ });
+});
diff --git a/packages/styles/src/HSLColor.ts b/packages/base/src/HSLColor.ts
similarity index 100%
rename from packages/styles/src/HSLColor.ts
rename to packages/base/src/HSLColor.ts
diff --git a/packages/utils/src/KeyCodes.ts b/packages/base/src/KeyCodes.ts
similarity index 100%
rename from packages/utils/src/KeyCodes.ts
rename to packages/base/src/KeyCodes.ts
diff --git a/packages/utils/src/Logger.test.ts b/packages/base/src/Logger.test.ts
similarity index 100%
rename from packages/utils/src/Logger.test.ts
rename to packages/base/src/Logger.test.ts
diff --git a/packages/utils/src/Logger.ts b/packages/base/src/Logger.ts
similarity index 97%
rename from packages/utils/src/Logger.ts
rename to packages/base/src/Logger.ts
index 4eedad1c441..07266db1268 100644
--- a/packages/utils/src/Logger.ts
+++ b/packages/base/src/Logger.ts
@@ -39,9 +39,7 @@ class DeviceLogger {
component: sComponent || ''
};
if (window.console) {
- const logText = `${oLogEntry.date} ${oLogEntry.time} ${this.sWindowName}${oLogEntry.message} - ${
- oLogEntry.component
- }`;
+ const logText = `${oLogEntry.date} ${oLogEntry.time} ${this.sWindowName}${oLogEntry.message} - ${oLogEntry.component}`;
switch (iLevel) {
case LOG_LEVEL.FATAL:
case LOG_LEVEL.ERROR:
diff --git a/packages/utils/src/Optional.ts b/packages/base/src/Optional.ts
similarity index 100%
rename from packages/utils/src/Optional.ts
rename to packages/base/src/Optional.ts
diff --git a/packages/utils/src/StyleClassHelper.ts b/packages/base/src/StyleClassHelper.ts
similarity index 100%
rename from packages/utils/src/StyleClassHelper.ts
rename to packages/base/src/StyleClassHelper.ts
diff --git a/packages/utils/src/Util.ts b/packages/base/src/Util.ts
similarity index 58%
rename from packages/utils/src/Util.ts
rename to packages/base/src/Util.ts
index 5665ac2db72..c36cbd8f208 100644
--- a/packages/utils/src/Util.ts
+++ b/packages/base/src/Util.ts
@@ -1,39 +1,3 @@
-import Themes from './Themes';
-
-type ThemeMap = { [theme in Themes]: object };
-
-export const getThemeClassFor = (theme: Themes, themes: ThemeMap) => {
- if ({}.hasOwnProperty.call(themes, theme)) {
- return themes[theme];
- }
- throw new Error('Could not match theme to Theme Class!');
-};
-
-/**
- * Create a Theme Map for given styles
- * @param light {object} Belize Theme CSS Module
- * @param dark {object} Belize Deep Theme CSS Module
- * @param hcb {object} High Contrast Black Theme CSS Module
- * @return {ThemeMap} Theme Map
- */
-export const createThemeMap = (light: object, dark: object, hcb: object = {}): ThemeMap => ({
- [Themes.sap_belize]: light,
- [Themes.sap_belize_plus]: dark,
- [Themes.sap_belize_hcb]: hcb
-});
-
-/**
- * Get overwrite theme class
- * @param {string} theme
- * @param {string} overwrite
- * @return {string} Theme String
- *
- */
-export const getThemeOverwrite = (theme: Themes, overwrite: Themes): Themes => {
- if ((Object as any).values(Themes).includes(overwrite)) return overwrite;
- return theme;
-};
-
export const deprecationNotice = (component: string, message: string) => {
const value = `* ui5-webcomponents-react Deprecation Notice - ${component}`;
const dots = '*'.padStart(value.length, '*');
diff --git a/packages/styles/src/bootstrap.ts b/packages/base/src/bootstrap.ts
similarity index 100%
rename from packages/styles/src/bootstrap.ts
rename to packages/base/src/bootstrap.ts
diff --git a/packages/styles/src/fonts.ts b/packages/base/src/fonts.ts
similarity index 100%
rename from packages/styles/src/fonts.ts
rename to packages/base/src/fonts.ts
diff --git a/packages/utils/src/index.ts b/packages/base/src/index.ts
similarity index 52%
rename from packages/utils/src/index.ts
rename to packages/base/src/index.ts
index 41afb7324fd..704914ddafd 100644
--- a/packages/utils/src/index.ts
+++ b/packages/base/src/index.ts
@@ -1,36 +1,39 @@
/**
* Created by d059190 at 16.03.18
*/
+import font72 from './72';
+import { bootstrap } from './bootstrap';
+import * as fonts from './fonts';
+import { HSLColor } from './HSLColor';
+import * as sap_fiori_3 from './sap_fiori_3';
+import * as spacing from './spacing';
+import { withStyles } from './withStyles';
+import { Device } from './Device';
import { Event } from './Event';
+import { isNumeric } from './isNumeric';
import KeyCodes from './KeyCodes';
import { LOG_LEVEL, Logger } from './Logger';
import Optional from './Optional';
import StyleClassHelper from './StyleClassHelper';
-import Themes from './Themes';
-import { isNumeric } from './isNumeric';
-import { Device } from './Device';
-import {
- createThemeMap,
- deprecationNotice,
- getThemeClassFor,
- getThemeOverwrite,
- pushElementBackInScreen
-} from './Util';
+import { deprecationNotice, pushElementBackInScreen } from './Util';
export {
StyleClassHelper,
KeyCodes,
Optional,
- getThemeClassFor,
- createThemeMap,
- getThemeOverwrite,
deprecationNotice,
pushElementBackInScreen,
- Themes,
Event,
Logger,
LOG_LEVEL,
isNumeric,
- Device
+ Device,
+ fonts,
+ font72,
+ spacing,
+ HSLColor,
+ sap_fiori_3,
+ bootstrap,
+ withStyles
};
diff --git a/packages/utils/src/isNumeric.ts b/packages/base/src/isNumeric.ts
similarity index 100%
rename from packages/utils/src/isNumeric.ts
rename to packages/base/src/isNumeric.ts
diff --git a/packages/styles/src/sap_fiori_3.ts b/packages/base/src/sap_fiori_3.ts
similarity index 100%
rename from packages/styles/src/sap_fiori_3.ts
rename to packages/base/src/sap_fiori_3.ts
diff --git a/packages/styles/src/spacing.ts b/packages/base/src/spacing.ts
similarity index 100%
rename from packages/styles/src/spacing.ts
rename to packages/base/src/spacing.ts
diff --git a/packages/utils/src/types/HTMLEvent.ts b/packages/base/src/types/HTMLEvent.ts
similarity index 100%
rename from packages/utils/src/types/HTMLEvent.ts
rename to packages/base/src/types/HTMLEvent.ts
diff --git a/packages/styles/src/withStyles/createGenerateClassName.test.ts b/packages/base/src/withStyles/createGenerateClassName.test.ts
similarity index 100%
rename from packages/styles/src/withStyles/createGenerateClassName.test.ts
rename to packages/base/src/withStyles/createGenerateClassName.test.ts
diff --git a/packages/styles/src/withStyles/createGenerateClassName.ts b/packages/base/src/withStyles/createGenerateClassName.ts
similarity index 100%
rename from packages/styles/src/withStyles/createGenerateClassName.ts
rename to packages/base/src/withStyles/createGenerateClassName.ts
diff --git a/packages/styles/src/withStyles/index.tsx b/packages/base/src/withStyles/index.tsx
similarity index 100%
rename from packages/styles/src/withStyles/index.tsx
rename to packages/base/src/withStyles/index.tsx
diff --git a/packages/styles/src/withStyles/withStyles.test.tsx b/packages/base/src/withStyles/withStyles.test.tsx
similarity index 100%
rename from packages/styles/src/withStyles/withStyles.test.tsx
rename to packages/base/src/withStyles/withStyles.test.tsx
diff --git a/packages/styles/tsconfig.json b/packages/base/tsconfig.json
similarity index 100%
rename from packages/styles/tsconfig.json
rename to packages/base/tsconfig.json
diff --git a/packages/charts/package.json b/packages/charts/package.json
index 846a53befd2..10aded1113c 100644
--- a/packages/charts/package.json
+++ b/packages/charts/package.json
@@ -13,8 +13,7 @@
"@types/chart.js": "^2.7.53"
},
"dependencies": {
- "@ui5-webcomponents-react/styles": "0.3.2-rc.2",
- "@ui5-webcomponents-react/utils": "0.3.2-rc.2",
+ "@ui5-webcomponents-react/base": "0.3.2-rc.2",
"chart.js": "^2.8.0",
"chartjs-plugin-datalabels": "^0.6.0",
"is-mergeable-object": "^1.1.0",
diff --git a/packages/charts/src/components/BarChart/index.tsx b/packages/charts/src/components/BarChart/index.tsx
index cc63eb24cce..54ea5d30992 100644
--- a/packages/charts/src/components/BarChart/index.tsx
+++ b/packages/charts/src/components/BarChart/index.tsx
@@ -6,7 +6,7 @@ import { DEFAULT_OPTIONS } from '../../config';
import { formatTooltipLabel, getTextWidth, mergeConfig } from '../../util/utils';
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
-import { LOG_LEVEL, Logger } from '@ui5-webcomponents-react/utils';
+import { LOG_LEVEL, Logger } from '@ui5-webcomponents-react/base';
import { withChartContainer } from '../ChartContainer/withChartContainer';
import { BarChartPlaceholder } from './Placeholder';
diff --git a/packages/charts/src/components/ChartContainer/withChartContainer.tsx b/packages/charts/src/components/ChartContainer/withChartContainer.tsx
index 96bbcf27f64..442cc7cd33f 100644
--- a/packages/charts/src/components/ChartContainer/withChartContainer.tsx
+++ b/packages/charts/src/components/ChartContainer/withChartContainer.tsx
@@ -1,5 +1,5 @@
import React, { ComponentType } from 'react';
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { withStyles } from '@ui5-webcomponents-react/base';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { DEFAULT_OPTIONS } from '../../config';
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
diff --git a/packages/charts/src/components/Loader/index.tsx b/packages/charts/src/components/Loader/index.tsx
index e92cdf7b830..e448d4b6cc8 100644
--- a/packages/charts/src/components/Loader/index.tsx
+++ b/packages/charts/src/components/Loader/index.tsx
@@ -1,4 +1,4 @@
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { withStyles } from '@ui5-webcomponents-react/base';
import * as React from 'react';
import { LoaderStyles } from './Loader.jss';
diff --git a/packages/charts/src/components/MicroBarChart/index.tsx b/packages/charts/src/components/MicroBarChart/index.tsx
index 5421fc3c31b..47f948f4838 100644
--- a/packages/charts/src/components/MicroBarChart/index.tsx
+++ b/packages/charts/src/components/MicroBarChart/index.tsx
@@ -1,4 +1,4 @@
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { withStyles } from '@ui5-webcomponents-react/base';
import React, { CSSProperties, PureComponent } from 'react';
import { ChartInternalProps } from '../../interfaces/ChartInternalProps';
import { CommonProps } from '../../interfaces/CommonProps';
diff --git a/packages/charts/src/components/RadarChart/index.tsx b/packages/charts/src/components/RadarChart/index.tsx
index a7a00364b72..ee368ddbd2a 100644
--- a/packages/charts/src/components/RadarChart/index.tsx
+++ b/packages/charts/src/components/RadarChart/index.tsx
@@ -5,7 +5,7 @@ import { ChartInternalProps } from '../../interfaces/ChartInternalProps';
import { formatTooltipLabel, mergeConfig } from '../../util/utils';
import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
-import { HSLColor } from '@ui5-webcomponents-react/styles';
+import { HSLColor } from '@ui5-webcomponents-react/base';
import { withChartContainer } from '../ChartContainer/withChartContainer';
export interface RadarChartPropTypes extends ChartBaseProps {}
diff --git a/packages/charts/src/components/RadialChart/index.tsx b/packages/charts/src/components/RadialChart/index.tsx
index a1f5420ad22..4cb61d2d026 100644
--- a/packages/charts/src/components/RadialChart/index.tsx
+++ b/packages/charts/src/components/RadialChart/index.tsx
@@ -1,5 +1,4 @@
-import { StyleClassHelper } from '@ui5-webcomponents-react/utils';
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import { ChartOptions } from 'chart.js';
import React, { CSSProperties, PureComponent, Ref } from 'react';
import { ChartInternalProps } from '../../interfaces/ChartInternalProps';
diff --git a/packages/cli/src/create-f4r-component.js b/packages/cli/src/create-f4r-component.js
index ff2a58fba53..f290909d95f 100644
--- a/packages/cli/src/create-f4r-component.js
+++ b/packages/cli/src/create-f4r-component.js
@@ -39,7 +39,7 @@ const jsxSpinner = ora('Creating index.tsx').start();
// create jsx
const jsxContent = `
import React, { Component, ComponentClass } from 'react';
-import { withStyles } from '@ui5-webcomponents-react/utils';
+import { withStyles } from '@ui5-webcomponents-react/base';
import styles from './${componentName}.jss';
import { ClassProps } from '../../types/ClassProps';
diff --git a/packages/docs/.storybook/webpack.config.js b/packages/docs/.storybook/webpack.config.js
index 8d065fd5609..3666d482e68 100644
--- a/packages/docs/.storybook/webpack.config.js
+++ b/packages/docs/.storybook/webpack.config.js
@@ -59,8 +59,7 @@ SKIP_DOC_GENERATION=true
'@shared': path.join(PATHS.root, 'shared'),
'@ui5-webcomponents-react/fiori3': path.join(PATHS.root, 'packages', 'fiori3', 'src', 'index.ts'),
'@ui5-webcomponents-react/charts': path.join(PATHS.root, 'packages', 'charts', 'src', 'index.ts'),
- '@ui5-webcomponents-react/utils': path.join(PATHS.root, 'packages', 'utils', 'src', 'index.ts'),
- '@ui5-webcomponents-react/styles': path.join(PATHS.root, 'packages', 'styles', 'src', 'index.ts')
+ '@ui5-webcomponents-react/base': path.join(PATHS.root, 'packages', 'base', 'src', 'index.ts')
}
}
};
diff --git a/packages/fiori3/package.json b/packages/fiori3/package.json
index 4f51c4792dc..68af0678824 100644
--- a/packages/fiori3/package.json
+++ b/packages/fiori3/package.json
@@ -16,10 +16,8 @@
"test:karma:update": "cross-env UPDATE=1 yarn run test:karma"
},
"dependencies": {
- "@ui5-webcomponents-react/styles": "0.3.2-rc.2",
- "@ui5-webcomponents-react/utils": "0.3.2-rc.2",
+ "@ui5-webcomponents-react/base": "0.3.2-rc.2",
"@ui5/webcomponents": "0.12.0",
- "core-js": "^2.6.4",
"react-scroll": "^1.7.11",
"react-toastify": "^5.0.1"
},
diff --git a/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js b/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js
index 0392fef7b36..c4407090ecc 100644
--- a/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js
+++ b/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js
@@ -214,7 +214,7 @@ export function generateTypings(meta) {
.forEach(([key]) => {
typings[mapEventName(key)] = {
tsType: '(event : Event) => void',
- importStatement: "import { Event } from '@ui5-webcomponents-react/utils';"
+ importStatement: "import { Event } from '@ui5-webcomponents-react/base';"
};
});
diff --git a/packages/fiori3/scripts/wrapperGeneration/generateWebComponentWrappers.js b/packages/fiori3/scripts/wrapperGeneration/generateWebComponentWrappers.js
index 1df242cbc2b..d5acf945270 100644
--- a/packages/fiori3/scripts/wrapperGeneration/generateWebComponentWrappers.js
+++ b/packages/fiori3/scripts/wrapperGeneration/generateWebComponentWrappers.js
@@ -40,9 +40,7 @@ async function generateWebComponentWrapper(dto) {
'\n\n',
tsTypings.interfaceStatement,
'\n\n',
- `const ${componentName}: FC<${tsTypings.interfaceName}> = withWebComponent<${
- tsTypings.interfaceName
- }>(${ui5ComponentName});`,
+ `const ${componentName}: FC<${tsTypings.interfaceName}> = withWebComponent<${tsTypings.interfaceName}>(${ui5ComponentName});`,
'\n\n',
`${componentName}.displayName = '${componentName}';`,
'\n\n',
diff --git a/packages/fiori3/scripts/wrapperGeneration/puppeteer.html b/packages/fiori3/scripts/wrapperGeneration/puppeteer.html
index 0433dee4a08..302e3c7cbda 100644
--- a/packages/fiori3/scripts/wrapperGeneration/puppeteer.html
+++ b/packages/fiori3/scripts/wrapperGeneration/puppeteer.html
@@ -1,6 +1,6 @@
-
-
-
+
+
+
diff --git a/packages/fiori3/scripts/wrapperGeneration/puppeteerScript.js b/packages/fiori3/scripts/wrapperGeneration/puppeteerScript.js
index ae924aa324d..78d64838e17 100644
--- a/packages/fiori3/scripts/wrapperGeneration/puppeteerScript.js
+++ b/packages/fiori3/scripts/wrapperGeneration/puppeteerScript.js
@@ -1,4 +1,5 @@
import { generateTypings } from './generateTypingsWeb';
+
const modules = require('./json/modules');
modules.forEach((moduleName) => {
diff --git a/packages/fiori3/scripts/wrapperGeneration/showOptions.js b/packages/fiori3/scripts/wrapperGeneration/showOptions.js
index 46703c083e7..856b6b32685 100644
--- a/packages/fiori3/scripts/wrapperGeneration/showOptions.js
+++ b/packages/fiori3/scripts/wrapperGeneration/showOptions.js
@@ -1,4 +1,5 @@
import { generateDiff } from './diff';
+
const inquirer = require('inquirer');
const fs = require('fs');
const chalk = require('chalk');
diff --git a/packages/fiori3/src/components/ActionSheet/ActionSheet.karma.tsx b/packages/fiori3/src/components/ActionSheet/ActionSheet.karma.tsx
index e56e5cff8ac..53ad628edb5 100644
--- a/packages/fiori3/src/components/ActionSheet/ActionSheet.karma.tsx
+++ b/packages/fiori3/src/components/ActionSheet/ActionSheet.karma.tsx
@@ -1,8 +1,8 @@
-import { Button } from '../../lib/Button';
import { mountThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
import React from 'react';
+import { Button } from '../../lib/Button';
import { ActionSheet } from './index';
use(matchSnapshot);
diff --git a/packages/fiori3/src/components/ActionSheet/demo.stories.tsx b/packages/fiori3/src/components/ActionSheet/demo.stories.tsx
index c788679d823..23aaf2a2c46 100644
--- a/packages/fiori3/src/components/ActionSheet/demo.stories.tsx
+++ b/packages/fiori3/src/components/ActionSheet/demo.stories.tsx
@@ -1,10 +1,10 @@
-import { ActionSheet } from '../../lib/ActionSheet';
-import { Button } from '../../lib/Button';
-import { PlacementType } from '../../lib/PlacementType';
import { select } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
import { propTablesExclude } from '../../../../docs/.storybook/config';
+import { ActionSheet } from '../../lib/ActionSheet';
+import { Button } from '../../lib/Button';
+import { PlacementType } from '../../lib/PlacementType';
storiesOf('Components | ActionSheet', module)
.addParameters({
diff --git a/packages/fiori3/src/components/ActionSheet/index.tsx b/packages/fiori3/src/components/ActionSheet/index.tsx
index f89e729763e..7336a61ee73 100644
--- a/packages/fiori3/src/components/ActionSheet/index.tsx
+++ b/packages/fiori3/src/components/ActionSheet/index.tsx
@@ -1,11 +1,10 @@
-import { withStyles } from '@ui5-webcomponents-react/styles';
-import { Device, StyleClassHelper } from '@ui5-webcomponents-react/utils';
-import { ButtonType } from '../../lib/ButtonType';
-import { PlacementType } from '../../lib/PlacementType';
-import { Popover } from '../../lib/Popover';
+import { Device, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { Children, cloneElement, Component, ReactElement, ReactNode } from 'react';
import { ClassProps } from '../../interfaces/ClassProps';
import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
+import { ButtonType } from '../../lib/ButtonType';
+import { PlacementType } from '../../lib/PlacementType';
+import { Popover } from '../../lib/Popover';
import { ButtonPropTypes } from '../../webComponents/Button';
import styles from './ActionSheet.jss';
diff --git a/packages/fiori3/src/components/AnalyticalCard/AnalyticalCard.jss.ts b/packages/fiori3/src/components/AnalyticalCard/AnalyticalCard.jss.ts
index 9e3d1884a17..eb10327ba30 100644
--- a/packages/fiori3/src/components/AnalyticalCard/AnalyticalCard.jss.ts
+++ b/packages/fiori3/src/components/AnalyticalCard/AnalyticalCard.jss.ts
@@ -1,5 +1,5 @@
+import { fonts } from '@ui5-webcomponents-react/base';
import { JSSTheme } from '../../interfaces/JSSTheme';
-import { fonts } from '@ui5-webcomponents-react/styles';
const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
card: {
diff --git a/packages/fiori3/src/components/AnalyticalCard/AnalyticalCard.karma.tsx b/packages/fiori3/src/components/AnalyticalCard/AnalyticalCard.karma.tsx
index 7100646cbbf..fd554f38e9b 100644
--- a/packages/fiori3/src/components/AnalyticalCard/AnalyticalCard.karma.tsx
+++ b/packages/fiori3/src/components/AnalyticalCard/AnalyticalCard.karma.tsx
@@ -1,12 +1,12 @@
+import { mountThemedComponent } from '@shared/tests/utils';
+import { expect, use } from 'chai';
+import { matchSnapshot } from 'chai-karma-snapshot';
+import React from 'react';
import { AnalyticalCard } from '../../lib/AnalyticalCard';
import { AnalyticalCardHeader } from '../../lib/AnalyticalCardHeader';
import { DeviationIndicator } from '../../lib/DeviationIndicator';
import { Text } from '../../lib/Text';
import { ValueState } from '../../lib/ValueState';
-import { mountThemedComponent } from '@shared/tests/utils';
-import { expect, use } from 'chai';
-import { matchSnapshot } from 'chai-karma-snapshot';
-import React from 'react';
use(matchSnapshot);
diff --git a/packages/fiori3/src/components/AnalyticalCard/demo.stories.tsx b/packages/fiori3/src/components/AnalyticalCard/demo.stories.tsx
index 9560efc0036..6c0e680e94d 100644
--- a/packages/fiori3/src/components/AnalyticalCard/demo.stories.tsx
+++ b/packages/fiori3/src/components/AnalyticalCard/demo.stories.tsx
@@ -1,12 +1,12 @@
+import { action } from '@storybook/addon-actions';
+import { boolean, select } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
import { LineChart } from '@ui5-webcomponents-react/charts';
+import React from 'react';
import { AnalyticalCard } from '../../lib/AnalyticalCard';
import { AnalyticalCardHeader } from '../../lib/AnalyticalCardHeader';
import { DeviationIndicator } from '../../lib/DeviationIndicator';
import { ValueState } from '../../lib/ValueState';
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
-import React from 'react';
storiesOf('Components | Analytical Card', module).add('default', () => (
({
helpText: {
diff --git a/packages/fiori3/src/components/AnalyticalCard/header/AnalyticalCardHeader.tsx b/packages/fiori3/src/components/AnalyticalCard/header/AnalyticalCardHeader.tsx
index d691d67dc1c..ed67ad6f8c5 100644
--- a/packages/fiori3/src/components/AnalyticalCard/header/AnalyticalCardHeader.tsx
+++ b/packages/fiori3/src/components/AnalyticalCard/header/AnalyticalCardHeader.tsx
@@ -1,13 +1,12 @@
-import { Event, StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { Event, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
+import React, { Fragment, PureComponent } from 'react';
+import { ClassProps } from '../../../interfaces/ClassProps';
+import { CommonProps } from '../../../interfaces/CommonProps';
import { BusyIndicator } from '../../../lib/BusyIndicator';
import { DeviationIndicator } from '../../../lib/DeviationIndicator';
import { Label } from '../../../lib/Label';
import { Text } from '../../../lib/Text';
import { ValueState } from '../../../lib/ValueState';
-import React, { Fragment, PureComponent } from 'react';
-import { ClassProps } from '../../../interfaces/ClassProps';
-import { CommonProps } from '../../../interfaces/CommonProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
import styles from './AnalyticalCardHeader.jss';
export interface AnalyticalCardHeaderPropTypes extends CommonProps {
diff --git a/packages/fiori3/src/components/AnalyticalCard/index.tsx b/packages/fiori3/src/components/AnalyticalCard/index.tsx
index 16479b9dee0..6b9a3c539af 100644
--- a/packages/fiori3/src/components/AnalyticalCard/index.tsx
+++ b/packages/fiori3/src/components/AnalyticalCard/index.tsx
@@ -1,11 +1,10 @@
-import { StyleClassHelper } from '@ui5-webcomponents-react/utils';
-import { ContentDensity } from '../../lib/ContentDensity';
-import { Themes } from '../../lib/Themes';
+import { StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { PureComponent, ReactNode, ReactNodeArray } from 'react';
import { ClassProps } from '../../interfaces/ClassProps';
import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
import { JSSTheme } from '../../interfaces/JSSTheme';
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { ContentDensity } from '../../lib/ContentDensity';
+import { Themes } from '../../lib/Themes';
import styles from './AnalyticalCard.jss';
export interface AnalyticalCardTypes extends Fiori3CommonProps {
diff --git a/packages/fiori3/src/components/AnalyticalTable/AnalyticalTable.karma.tsx b/packages/fiori3/src/components/AnalyticalTable/AnalyticalTable.karma.tsx
index 4407b371c18..b1d67164ba0 100644
--- a/packages/fiori3/src/components/AnalyticalTable/AnalyticalTable.karma.tsx
+++ b/packages/fiori3/src/components/AnalyticalTable/AnalyticalTable.karma.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { AnalyticalTable } from '../../lib/AnalyticalTable';
import { mountThemedComponent } from '@shared/tests/utils';
-import { matchSnapshot } from 'chai-karma-snapshot';
import { expect, use } from 'chai';
+import { matchSnapshot } from 'chai-karma-snapshot';
+import React from 'react';
+import { AnalyticalTable } from '../../lib/AnalyticalTable';
const columns = [
{
diff --git a/packages/fiori3/src/components/AnalyticalTable/AnayticalTable.jss.ts b/packages/fiori3/src/components/AnalyticalTable/AnayticalTable.jss.ts
index 3d4c4dfe38a..bfb70c10b52 100644
--- a/packages/fiori3/src/components/AnalyticalTable/AnayticalTable.jss.ts
+++ b/packages/fiori3/src/components/AnalyticalTable/AnayticalTable.jss.ts
@@ -1,6 +1,6 @@
-import { fonts } from '@ui5-webcomponents-react/styles';
-import { ContentDensity } from '../../lib/ContentDensity';
+import { fonts } from '@ui5-webcomponents-react/base';
import { JSSTheme } from '../../interfaces/JSSTheme';
+import { ContentDensity } from '../../lib/ContentDensity';
const styles = ({ parameters, contentDensity }: JSSTheme) => ({
tHead: {
diff --git a/packages/fiori3/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx b/packages/fiori3/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx
index d78744c5208..9133e677eac 100644
--- a/packages/fiori3/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx
+++ b/packages/fiori3/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx
@@ -1,5 +1,4 @@
-import { withStyles } from '@ui5-webcomponents-react/styles';
-import { Event } from '@ui5-webcomponents-react/utils';
+import { Event, withStyles } from '@ui5-webcomponents-react/base';
import React, { Component, FC, ReactNode } from 'react';
import { ClassProps } from '../../../interfaces/ClassProps';
import { JSSTheme } from '../../../interfaces/JSSTheme';
diff --git a/packages/fiori3/src/components/AnalyticalTable/columnHeader/index.tsx b/packages/fiori3/src/components/AnalyticalTable/columnHeader/index.tsx
index 8acbc2dccc0..3dcd8b9bad9 100644
--- a/packages/fiori3/src/components/AnalyticalTable/columnHeader/index.tsx
+++ b/packages/fiori3/src/components/AnalyticalTable/columnHeader/index.tsx
@@ -1,5 +1,4 @@
-import { fonts, withStyles } from '@ui5-webcomponents-react/styles';
-import { Event, StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { Event, fonts, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { Component, ReactNode, ReactNodeArray } from 'react';
import { ClassProps } from '../../../interfaces/ClassProps';
import { JSSTheme } from '../../../interfaces/JSSTheme';
diff --git a/packages/fiori3/src/components/AnalyticalTable/index.tsx b/packages/fiori3/src/components/AnalyticalTable/index.tsx
index 7f6f375a584..64f63d0640c 100644
--- a/packages/fiori3/src/components/AnalyticalTable/index.tsx
+++ b/packages/fiori3/src/components/AnalyticalTable/index.tsx
@@ -1,4 +1,4 @@
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { withStyles } from '@ui5-webcomponents-react/base';
import React, { Component, CSSProperties, ReactNode, ReactText } from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
diff --git a/packages/fiori3/src/components/AnalyticalTable/pagination/index.tsx b/packages/fiori3/src/components/AnalyticalTable/pagination/index.tsx
index c28c21ac608..b9a484222d6 100644
--- a/packages/fiori3/src/components/AnalyticalTable/pagination/index.tsx
+++ b/packages/fiori3/src/components/AnalyticalTable/pagination/index.tsx
@@ -1,4 +1,4 @@
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { withStyles } from '@ui5-webcomponents-react/base';
import React, { Component, FC, Fragment } from 'react';
import { ClassProps } from '../../../interfaces/ClassProps';
import { JSSTheme } from '../../../interfaces/JSSTheme';
diff --git a/packages/fiori3/src/components/AnalyticalTable/titleBar/index.tsx b/packages/fiori3/src/components/AnalyticalTable/titleBar/index.tsx
index 1665c5582e6..d713a2b1690 100644
--- a/packages/fiori3/src/components/AnalyticalTable/titleBar/index.tsx
+++ b/packages/fiori3/src/components/AnalyticalTable/titleBar/index.tsx
@@ -1,4 +1,4 @@
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { withStyles } from '@ui5-webcomponents-react/base';
import React, { FC, isValidElement, ReactNode, ReactText } from 'react';
import { Title } from '../../../lib/Title';
diff --git a/packages/fiori3/src/components/AutoCloseOnOutsideClick/AutoCloseOnOutsideClick.test.tsx b/packages/fiori3/src/components/AutoCloseOnOutsideClick/AutoCloseOnOutsideClick.test.tsx
index eab18aed98e..ecf9f43300c 100644
--- a/packages/fiori3/src/components/AutoCloseOnOutsideClick/AutoCloseOnOutsideClick.test.tsx
+++ b/packages/fiori3/src/components/AutoCloseOnOutsideClick/AutoCloseOnOutsideClick.test.tsx
@@ -1,7 +1,7 @@
+import { mount } from 'enzyme';
import React from 'react';
-import { AutoCloseOnOutsideClick } from './index';
import sinon from 'sinon';
-import { mount } from 'enzyme';
+import { AutoCloseOnOutsideClick } from './index';
describe('AutoCloseOnOutsideClick', () => {
test('Loose Focus', () => {
diff --git a/packages/fiori3/src/components/AutoCloseOnOutsideClick/index.tsx b/packages/fiori3/src/components/AutoCloseOnOutsideClick/index.tsx
index b397023f6fb..1f679c48736 100644
--- a/packages/fiori3/src/components/AutoCloseOnOutsideClick/index.tsx
+++ b/packages/fiori3/src/components/AutoCloseOnOutsideClick/index.tsx
@@ -1,4 +1,4 @@
-import { Event } from '@ui5-webcomponents-react/utils';
+import { Event } from '@ui5-webcomponents-react/base';
import React, { PureComponent, ReactNode } from 'react';
export interface AutoCloseOnOutsideClickPropTypes {
diff --git a/packages/fiori3/src/components/Avatar/Avatar.jss.ts b/packages/fiori3/src/components/Avatar/Avatar.jss.ts
index a3cc31cbefe..fc263f348df 100644
--- a/packages/fiori3/src/components/Avatar/Avatar.jss.ts
+++ b/packages/fiori3/src/components/Avatar/Avatar.jss.ts
@@ -1,4 +1,4 @@
-import { fonts } from '@ui5-webcomponents-react/styles';
+import { fonts } from '@ui5-webcomponents-react/base';
import { JSSTheme } from '../../interfaces/JSSTheme';
const size = (s) => ({
diff --git a/packages/fiori3/src/components/Avatar/Avatar.karma.tsx b/packages/fiori3/src/components/Avatar/Avatar.karma.tsx
index f2763226c1f..5d1f8fe3adc 100644
--- a/packages/fiori3/src/components/Avatar/Avatar.karma.tsx
+++ b/packages/fiori3/src/components/Avatar/Avatar.karma.tsx
@@ -1,11 +1,11 @@
-import { KeyCodes } from '@ui5-webcomponents-react/utils';
-import { AvatarShape } from '../../lib/AvatarShape';
-import { AvatarSize } from '../../lib/AvatarSize';
import { mountThemedComponent } from '@shared/tests/utils';
+import { KeyCodes } from '@ui5-webcomponents-react/base';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
import React from 'react';
import sinon from 'sinon';
+import { AvatarShape } from '../../lib/AvatarShape';
+import { AvatarSize } from '../../lib/AvatarSize';
import { Avatar } from './index';
use(matchSnapshot);
diff --git a/packages/fiori3/src/components/Avatar/demo.stories.tsx b/packages/fiori3/src/components/Avatar/demo.stories.tsx
index 6e4d51cd8f0..9592a110ec9 100644
--- a/packages/fiori3/src/components/Avatar/demo.stories.tsx
+++ b/packages/fiori3/src/components/Avatar/demo.stories.tsx
@@ -1,11 +1,11 @@
-import { Avatar } from '../../lib/Avatar';
-import { AvatarShape } from '../../lib/AvatarShape';
-import { AvatarSize } from '../../lib/AvatarSize';
-import { Icon } from '../../lib/Icon';
import { action } from '@storybook/addon-actions/';
import { select, text } from '@storybook/addon-knobs/';
import { storiesOf } from '@storybook/react';
import React from 'react';
+import { Avatar } from '../../lib/Avatar';
+import { AvatarShape } from '../../lib/AvatarShape';
+import { AvatarSize } from '../../lib/AvatarSize';
+import { Icon } from '../../lib/Icon';
const sampleAvatar =
'data:image/png;base64,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';
diff --git a/packages/fiori3/src/components/Avatar/index.tsx b/packages/fiori3/src/components/Avatar/index.tsx
index 10a4d247587..018d8cd7563 100644
--- a/packages/fiori3/src/components/Avatar/index.tsx
+++ b/packages/fiori3/src/components/Avatar/index.tsx
@@ -1,10 +1,9 @@
-import { Event, KeyCodes } from '@ui5-webcomponents-react/utils';
-import { AvatarShape } from '../../lib/AvatarShape';
-import { AvatarSize } from '../../lib/AvatarSize';
+import { Event, KeyCodes, withStyles } from '@ui5-webcomponents-react/base';
import React, { CSSProperties, PureComponent } from 'react';
import { ClassProps } from '../../interfaces/ClassProps';
import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { AvatarShape } from '../../lib/AvatarShape';
+import { AvatarSize } from '../../lib/AvatarSize';
import styles from './Avatar.jss';
export interface AvatarPropTypes extends Fiori3CommonProps {
diff --git a/packages/fiori3/src/components/Bar/Bar.jss.ts b/packages/fiori3/src/components/Bar/Bar.jss.ts
index a1bc0fae37d..922d1390972 100644
--- a/packages/fiori3/src/components/Bar/Bar.jss.ts
+++ b/packages/fiori3/src/components/Bar/Bar.jss.ts
@@ -4,7 +4,7 @@ import { ContentDensity } from '../../lib/ContentDensity';
* Style Class Generator Function
*
* @param {Object} themeContext - Current Theme Context by JSS Provider.
- * @param {string} obj.theme - Current Theme (sap_belize, sap_belize_plus, etc.)
+ * @param {string} obj.theme - Current Theme (sap_fiori_3)
* @param {string} obj.contentDensity - Current Content Density (Cozy, Compact)
* @param {object} obj.parameters - Theming parameters (e.g. LabelColor)
*/
diff --git a/packages/fiori3/src/components/Bar/Bar.test.tsx b/packages/fiori3/src/components/Bar/Bar.test.tsx
index 4b594b0b5ad..58a9cbefdcf 100644
--- a/packages/fiori3/src/components/Bar/Bar.test.tsx
+++ b/packages/fiori3/src/components/Bar/Bar.test.tsx
@@ -1,6 +1,6 @@
-import { Bar } from '../../lib/Bar';
import { mountThemedComponent, renderThemedComponent } from '@shared/tests/utils';
import React from 'react';
+import { Bar } from '../../lib/Bar';
const createRenderLabel = (text) => () => {
return {text}
;
diff --git a/packages/fiori3/src/components/Bar/demo.stories.tsx b/packages/fiori3/src/components/Bar/demo.stories.tsx
index 9884dac6114..d98cc2419d9 100644
--- a/packages/fiori3/src/components/Bar/demo.stories.tsx
+++ b/packages/fiori3/src/components/Bar/demo.stories.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { storiesOf } from '@storybook/react';
+import React from 'react';
import { Bar } from '../../lib/Bar';
import { Label } from '../../lib/Label';
diff --git a/packages/fiori3/src/components/Bar/index.tsx b/packages/fiori3/src/components/Bar/index.tsx
index 99111343ac3..85e31ed0444 100644
--- a/packages/fiori3/src/components/Bar/index.tsx
+++ b/packages/fiori3/src/components/Bar/index.tsx
@@ -1,8 +1,7 @@
-import { StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { Component } from 'react';
-import { CommonProps } from '../../interfaces/CommonProps';
import { ClassProps } from '../../interfaces/ClassProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { CommonProps } from '../../interfaces/CommonProps';
import styles from './Bar.jss';
export interface BarPropTypes extends CommonProps {
diff --git a/packages/fiori3/src/components/Carousel/Carousel.jss.ts b/packages/fiori3/src/components/Carousel/Carousel.jss.ts
index 01b7b39d832..68a306fdca6 100644
--- a/packages/fiori3/src/components/Carousel/Carousel.jss.ts
+++ b/packages/fiori3/src/components/Carousel/Carousel.jss.ts
@@ -1,5 +1,5 @@
+import { fonts } from '@ui5-webcomponents-react/base';
import { JSSTheme } from '../../interfaces/JSSTheme';
-import { fonts } from '@ui5-webcomponents-react/styles';
const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
carousel: {
diff --git a/packages/fiori3/src/components/Carousel/Carousel.karma.tsx b/packages/fiori3/src/components/Carousel/Carousel.karma.tsx
index 5be96b43da8..93418803e7c 100644
--- a/packages/fiori3/src/components/Carousel/Carousel.karma.tsx
+++ b/packages/fiori3/src/components/Carousel/Carousel.karma.tsx
@@ -1,12 +1,12 @@
-import { Carousel } from '../../lib/Carousel';
-import { CarouselArrowsPlacement } from '../../lib/CarouselArrowsPlacement';
-import { Icon } from '../../lib/Icon';
-import { PlacementType } from '../../lib/PlacementType';
import { getEventFromCallback, mountThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
import React, { cloneElement } from 'react';
import * as sinon from 'sinon';
+import { Carousel } from '../../lib/Carousel';
+import { CarouselArrowsPlacement } from '../../lib/CarouselArrowsPlacement';
+import { Icon } from '../../lib/Icon';
+import { PlacementType } from '../../lib/PlacementType';
use(matchSnapshot);
diff --git a/packages/fiori3/src/components/Carousel/CarouselPagination.jss.ts b/packages/fiori3/src/components/Carousel/CarouselPagination.jss.ts
index 85fe7b737ea..8aa40b51fc8 100644
--- a/packages/fiori3/src/components/Carousel/CarouselPagination.jss.ts
+++ b/packages/fiori3/src/components/Carousel/CarouselPagination.jss.ts
@@ -1,6 +1,6 @@
-import { JSSTheme } from '../../interfaces/JSSTheme';
+import { HSLColor } from '@ui5-webcomponents-react/base';
import { ZIndex } from '../../enums/ZIndex';
-import { HSLColor } from '@ui5-webcomponents-react/styles';
+import { JSSTheme } from '../../interfaces/JSSTheme';
const lighten = HSLColor.lighten;
diff --git a/packages/fiori3/src/components/Carousel/CarouselPagination.tsx b/packages/fiori3/src/components/Carousel/CarouselPagination.tsx
index 187c11115e1..14014108f20 100644
--- a/packages/fiori3/src/components/Carousel/CarouselPagination.tsx
+++ b/packages/fiori3/src/components/Carousel/CarouselPagination.tsx
@@ -1,11 +1,10 @@
-import { Event, StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { Event, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
+import React, { Children, Component } from 'react';
+import { ClassProps } from '../../interfaces/ClassProps';
import { CarouselArrowsPlacement } from '../../lib/CarouselArrowsPlacement';
import { Icon } from '../../lib/Icon';
import { Label } from '../../lib/Label';
import { PlacementType } from '../../lib/PlacementType';
-import React, { Children, Component } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
import styles from './CarouselPagination.jss';
export interface CarouselPaginationPropTypes {
diff --git a/packages/fiori3/src/components/Carousel/demo.stories.tsx b/packages/fiori3/src/components/Carousel/demo.stories.tsx
index fa7c7361181..4d631e4f26f 100644
--- a/packages/fiori3/src/components/Carousel/demo.stories.tsx
+++ b/packages/fiori3/src/components/Carousel/demo.stories.tsx
@@ -1,10 +1,10 @@
+import { boolean, number, select } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
import { Carousel } from '../../lib/Carousel';
import { CarouselArrowsPlacement } from '../../lib/CarouselArrowsPlacement';
import { Label } from '../../lib/Label';
import { PlacementType } from '../../lib/PlacementType';
-import { boolean, number, select } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
-import React from 'react';
function renderCarousel() {
return (
diff --git a/packages/fiori3/src/components/Carousel/index.tsx b/packages/fiori3/src/components/Carousel/index.tsx
index 67b01e3fd56..3087602c54f 100644
--- a/packages/fiori3/src/components/Carousel/index.tsx
+++ b/packages/fiori3/src/components/Carousel/index.tsx
@@ -1,10 +1,9 @@
-import { Event, StyleClassHelper } from '@ui5-webcomponents-react/utils';
-import { CarouselArrowsPlacement } from '../../lib/CarouselArrowsPlacement';
-import { PlacementType } from '../../lib/PlacementType';
+import { Event, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { Children, Component, CSSProperties, Fragment, ReactNode, ReactNodeArray } from 'react';
import { ClassProps } from '../../interfaces/ClassProps';
import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { CarouselArrowsPlacement } from '../../lib/CarouselArrowsPlacement';
+import { PlacementType } from '../../lib/PlacementType';
import styles from './Carousel.jss';
import { CarouselPagination, CarouselPaginationPropTypes } from './CarouselPagination';
diff --git a/packages/fiori3/src/components/FilterBar/FilterBar.jss.ts b/packages/fiori3/src/components/FilterBar/FilterBar.jss.ts
index e8aebc93ccb..ef1dee5e198 100644
--- a/packages/fiori3/src/components/FilterBar/FilterBar.jss.ts
+++ b/packages/fiori3/src/components/FilterBar/FilterBar.jss.ts
@@ -1,4 +1,4 @@
-import { fonts } from '@ui5-webcomponents-react/styles';
+import { fonts } from '@ui5-webcomponents-react/base';
import { JSSTheme } from '../../interfaces/JSSTheme';
const styles = ({ theme, contentDensity, parameters }: JSSTheme) => {
diff --git a/packages/fiori3/src/components/FilterBar/FilterBar.karma.tsx b/packages/fiori3/src/components/FilterBar/FilterBar.karma.tsx
index ba238a8f853..868fa977f54 100644
--- a/packages/fiori3/src/components/FilterBar/FilterBar.karma.tsx
+++ b/packages/fiori3/src/components/FilterBar/FilterBar.karma.tsx
@@ -1,13 +1,13 @@
-import { FilterBar } from '../../lib/FilterBar';
-import React from 'react';
import { mountThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
-import { VariantManagement } from '../../lib/VariantManagement';
+import React from 'react';
+import { FilterBar } from '../../lib/FilterBar';
import { FilterItem } from '../../lib/FilterItem';
import { FilterType } from '../../lib/FilterType';
-import { Switch } from '../../lib/Switch';
import { Input } from '../../lib/Input';
+import { Switch } from '../../lib/Switch';
+import { VariantManagement } from '../../lib/VariantManagement';
const variantItems = [{ label: 'Variant 1', key: '1' }, { label: 'Variant 2', key: '2' }];
const filterItems = [{ text: 'Text 1', key: '1' }, { text: 'Text 2', key: '2' }];
diff --git a/packages/fiori3/src/components/FilterBar/demo.stories.tsx b/packages/fiori3/src/components/FilterBar/demo.stories.tsx
index 4ac2d7e0ba6..40117b82d6c 100644
--- a/packages/fiori3/src/components/FilterBar/demo.stories.tsx
+++ b/packages/fiori3/src/components/FilterBar/demo.stories.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
import { boolean, select } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
import { FilterBar } from '../../lib/FilterBar';
-import { VariantManagement } from '../../lib/VariantManagement';
import { FilterItem } from '../../lib/FilterItem';
-import { PlacementType } from '../../lib/PlacementType';
-import { TitleLevel } from '../../lib/TitleLevel';
import { FilterType } from '../../lib/FilterType';
-import { Switch } from '../../lib/Switch';
import { Input } from '../../lib/Input';
+import { PlacementType } from '../../lib/PlacementType';
+import { Switch } from '../../lib/Switch';
+import { TitleLevel } from '../../lib/TitleLevel';
+import { VariantManagement } from '../../lib/VariantManagement';
const flavours = [];
for (let i = 1; i <= 9; i++) {
diff --git a/packages/fiori3/src/components/FilterBar/index.tsx b/packages/fiori3/src/components/FilterBar/index.tsx
index d69bcfed671..8be8b85c9ae 100644
--- a/packages/fiori3/src/components/FilterBar/index.tsx
+++ b/packages/fiori3/src/components/FilterBar/index.tsx
@@ -1,10 +1,10 @@
-import { ClassProps } from '../../interfaces/ClassProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { withStyles } from '@ui5-webcomponents-react/base';
import React, { PureComponent, ReactNode, ReactNodeArray } from 'react';
+import { ClassProps } from '../../interfaces/ClassProps';
import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
-import styles from './FilterBar.jss';
import { Button } from '../../lib/Button';
import { ButtonType } from '../../lib/ButtonType';
+import styles from './FilterBar.jss';
export interface FilterBarPropTypes extends Fiori3CommonProps {
renderVariants?: () => JSX.Element;
diff --git a/packages/fiori3/src/components/FilterItem/index.tsx b/packages/fiori3/src/components/FilterItem/index.tsx
index 60649a0ee1a..25cb066efe4 100644
--- a/packages/fiori3/src/components/FilterItem/index.tsx
+++ b/packages/fiori3/src/components/FilterItem/index.tsx
@@ -1,16 +1,15 @@
-import { ClassProps } from '../../interfaces/ClassProps';
+import { Event, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { PureComponent, ReactNode } from 'react';
-import styles from './FilterItem.jss';
-import { Label } from '../../lib/Label';
-import { Input } from '../../lib/Input';
-import { Select } from '../../lib/Select';
-import { StandardListItem } from '../../lib/StandardListItem';
+import { ClassProps } from '../../interfaces/ClassProps';
+import { CommonProps } from '../../interfaces/CommonProps';
import { BusyIndicator } from '../../lib/BusyIndicator';
import { FilterType } from '../../lib/FilterType';
-import { Event, StyleClassHelper } from '@ui5-webcomponents-react/utils';
-import { withStyles } from '@ui5-webcomponents-react/styles';
-import { CommonProps } from '../../interfaces/CommonProps';
+import { Input } from '../../lib/Input';
+import { Label } from '../../lib/Label';
import { ListItemTypes } from '../../lib/ListItemTypes';
+import { Select } from '../../lib/Select';
+import { StandardListItem } from '../../lib/StandardListItem';
+import styles from './FilterItem.jss';
export interface FilterItemPropTypes extends CommonProps {
placeholder?: string;
diff --git a/packages/fiori3/src/components/FlexBox/FlexBox.test.tsx b/packages/fiori3/src/components/FlexBox/FlexBox.test.tsx
index a745b23a0b1..a9f42f2fa6a 100644
--- a/packages/fiori3/src/components/FlexBox/FlexBox.test.tsx
+++ b/packages/fiori3/src/components/FlexBox/FlexBox.test.tsx
@@ -1,7 +1,7 @@
-import { FlexBox } from '../../lib/FlexBox';
-import { FlexBoxJustifyContent } from '../../lib/FlexBoxJustifyContent';
import { mountThemedComponent } from '@shared/tests/utils';
import * as React from 'react';
+import { FlexBox } from '../../lib/FlexBox';
+import { FlexBoxJustifyContent } from '../../lib/FlexBoxJustifyContent';
describe('FlexBox', () => {
test('JustifyContent: End', () => {
diff --git a/packages/fiori3/src/components/FlexBox/index.tsx b/packages/fiori3/src/components/FlexBox/index.tsx
index 98aab80e4a6..d50a38d0abe 100644
--- a/packages/fiori3/src/components/FlexBox/index.tsx
+++ b/packages/fiori3/src/components/FlexBox/index.tsx
@@ -1,8 +1,7 @@
-import { StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { Component, CSSProperties, ReactNode, ReactNodeArray } from 'react';
import { ClassProps } from '../../interfaces/ClassProps';
import { CommonProps } from '../../interfaces/CommonProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
import { styles } from './Flexbox.jss';
export enum FlexBoxJustifyContent {
diff --git a/packages/fiori3/src/components/Grid/Grid.test.tsx b/packages/fiori3/src/components/Grid/Grid.test.tsx
index 4038f0bab35..d4f055ee4a1 100644
--- a/packages/fiori3/src/components/Grid/Grid.test.tsx
+++ b/packages/fiori3/src/components/Grid/Grid.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { mount } from '@shared/tests/utils';
+import React from 'react';
import { Grid, GridPosition } from './index';
const GridContent = () => (
diff --git a/packages/fiori3/src/components/Grid/index.tsx b/packages/fiori3/src/components/Grid/index.tsx
index a4b946454aa..02b89af00d0 100644
--- a/packages/fiori3/src/components/Grid/index.tsx
+++ b/packages/fiori3/src/components/Grid/index.tsx
@@ -1,8 +1,7 @@
-import { Device, StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { Device, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { Children, Component, CSSProperties, ReactElement, ReactNode, ReactNodeArray } from 'react';
import { ClassProps } from '../../interfaces/ClassProps';
import { CommonProps } from '../../interfaces/CommonProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
import { styles } from './Grid.jss';
export enum GridPosition {
diff --git a/packages/fiori3/src/components/MessageBox/MessageBox.jss.ts b/packages/fiori3/src/components/MessageBox/MessageBox.jss.ts
index 7353ad8945e..f24d5ba1925 100644
--- a/packages/fiori3/src/components/MessageBox/MessageBox.jss.ts
+++ b/packages/fiori3/src/components/MessageBox/MessageBox.jss.ts
@@ -1,6 +1,6 @@
-import { fonts } from '@ui5-webcomponents-react/styles';
-import { JSSTheme } from '../../interfaces/JSSTheme';
+import { fonts } from '@ui5-webcomponents-react/base';
import { ZIndex } from '../../enums/ZIndex';
+import { JSSTheme } from '../../interfaces/JSSTheme';
import { ContentDensity } from '../../lib/ContentDensity';
const style = ({ parameters, contentDensity }: JSSTheme) => ({
diff --git a/packages/fiori3/src/components/MessageBox/MessageBox.karma.tsx b/packages/fiori3/src/components/MessageBox/MessageBox.karma.tsx
index 62109f0e1d6..36018794a63 100644
--- a/packages/fiori3/src/components/MessageBox/MessageBox.karma.tsx
+++ b/packages/fiori3/src/components/MessageBox/MessageBox.karma.tsx
@@ -1,11 +1,11 @@
-import { MessageBox } from '../../lib/MessageBox';
-import { MessageBoxActions } from '../../lib/MessageBoxActions';
-import { MessageBoxTypes } from '../../lib/MessageBoxTypes';
import { getEventFromCallback, mountThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
import React from 'react';
import { spy } from 'sinon';
+import { MessageBox } from '../../lib/MessageBox';
+import { MessageBoxActions } from '../../lib/MessageBoxActions';
+import { MessageBoxTypes } from '../../lib/MessageBoxTypes';
use(matchSnapshot);
diff --git a/packages/fiori3/src/components/MessageBox/MessageBoxButton.tsx b/packages/fiori3/src/components/MessageBox/MessageBoxButton.tsx
index e03c850d984..e02855107f7 100644
--- a/packages/fiori3/src/components/MessageBox/MessageBoxButton.tsx
+++ b/packages/fiori3/src/components/MessageBox/MessageBoxButton.tsx
@@ -1,7 +1,7 @@
+import React, { PureComponent } from 'react';
import { Button } from '../../lib/Button';
import { ButtonType } from '../../lib/ButtonType';
import { MessageBoxActions } from '../../lib/MessageBoxActions';
-import React, { PureComponent } from 'react';
export class MessageBoxButton extends PureComponent<{
action: MessageBoxActions;
diff --git a/packages/fiori3/src/components/MessageBox/demo.stories.tsx b/packages/fiori3/src/components/MessageBox/demo.stories.tsx
index 2b20c356742..3fd2057147a 100644
--- a/packages/fiori3/src/components/MessageBox/demo.stories.tsx
+++ b/packages/fiori3/src/components/MessageBox/demo.stories.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { boolean, select, text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
import { MessageBox } from '../../lib/MessageBox';
import { MessageBoxTypes } from '../../lib/MessageBoxTypes';
diff --git a/packages/fiori3/src/components/MessageBox/index.tsx b/packages/fiori3/src/components/MessageBox/index.tsx
index 35e9b813cf8..f02f55940ba 100644
--- a/packages/fiori3/src/components/MessageBox/index.tsx
+++ b/packages/fiori3/src/components/MessageBox/index.tsx
@@ -1,13 +1,12 @@
-import { Event, StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { Event, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
+import React, { isValidElement, PureComponent, ReactNode } from 'react';
+import { ClassProps } from '../../interfaces/ClassProps';
+import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
import { Icon } from '../../lib/Icon';
import { MessageBoxButton } from '../../lib/MessageBoxButton';
import { Text } from '../../lib/Text';
import { Title } from '../../lib/Title';
import { TitleLevel } from '../../lib/TitleLevel';
-import React, { isValidElement, PureComponent, ReactNode } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
-import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
import styles from './MessageBox.jss';
export enum MessageBoxActions {
diff --git a/packages/fiori3/src/components/MessageToast/MessageToast.jss.ts b/packages/fiori3/src/components/MessageToast/MessageToast.jss.ts
index bb9d83bcbf8..a2542be8a20 100644
--- a/packages/fiori3/src/components/MessageToast/MessageToast.jss.ts
+++ b/packages/fiori3/src/components/MessageToast/MessageToast.jss.ts
@@ -1,4 +1,4 @@
-import { fonts } from '@ui5-webcomponents-react/styles';
+import { fonts } from '@ui5-webcomponents-react/base';
import { JSSTheme } from '../../interfaces/JSSTheme';
export default ({ parameters }: JSSTheme) => ({
diff --git a/packages/fiori3/src/components/MessageToast/MessageToast.karma.tsx b/packages/fiori3/src/components/MessageToast/MessageToast.karma.tsx
index 4e617f1e8f9..03cfd97c4a7 100644
--- a/packages/fiori3/src/components/MessageToast/MessageToast.karma.tsx
+++ b/packages/fiori3/src/components/MessageToast/MessageToast.karma.tsx
@@ -1,11 +1,12 @@
-import { MessageToast } from '../../lib/MessageToast';
+import { bootstrap } from '@ui5-webcomponents-react/base';
import { expect } from 'chai';
import sinon from 'sinon';
import { ExtendedWindow } from '../../interfaces/ExtendedWindow';
-import { bootstrap } from '@ui5-webcomponents-react/styles';
+import { MessageToast } from '../../lib/MessageToast';
bootstrap();
+// TODO Do we still need this?
(window as ExtendedWindow).Fiori4React.__SECRET_INTERNALS_DO_NOT_USE.messageToast = {
toast: () => {}
};
diff --git a/packages/fiori3/src/components/MessageToast/demo.stories.tsx b/packages/fiori3/src/components/MessageToast/demo.stories.tsx
index 0945dd83191..94a19e60eb1 100644
--- a/packages/fiori3/src/components/MessageToast/demo.stories.tsx
+++ b/packages/fiori3/src/components/MessageToast/demo.stories.tsx
@@ -1,8 +1,8 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
import { Button } from '../../lib/Button';
import { MessageToast } from '../../lib/MessageToast';
import { ThemeProvider } from '../../lib/ThemeProvider';
-import { storiesOf } from '@storybook/react';
-import React from 'react';
storiesOf('Components | MessageToast', module).add(
'Default',
diff --git a/packages/fiori3/src/components/MessageToast/index.tsx b/packages/fiori3/src/components/MessageToast/index.tsx
index be9e260fff0..977240d8d20 100644
--- a/packages/fiori3/src/components/MessageToast/index.tsx
+++ b/packages/fiori3/src/components/MessageToast/index.tsx
@@ -1,5 +1,4 @@
-import { Icon } from '../../lib/Icon';
-import { ValueState } from '../../lib/ValueState';
+import { withStyles } from '@ui5-webcomponents-react/base';
import React, { PureComponent } from 'react';
import { createPortal } from 'react-dom';
import { toast, ToastContainer } from 'react-toastify';
@@ -7,8 +6,9 @@ import 'react-toastify/dist/ReactToastify.min.css';
import { ClassProps } from '../../interfaces/ClassProps';
import { CommonProps } from '../../interfaces/CommonProps';
import { JSSTheme } from '../../interfaces/JSSTheme';
+import { Icon } from '../../lib/Icon';
+import { ValueState } from '../../lib/ValueState';
import styles from './MessageToast.jss';
-import { withStyles } from '@ui5-webcomponents-react/styles';
const coloredStyles = ({ parameters }: JSSTheme) => ({
base: {
diff --git a/packages/fiori3/src/components/ObjectPage/ObjectPage.jss.ts b/packages/fiori3/src/components/ObjectPage/ObjectPage.jss.ts
index 56c76a3883e..8791d064c74 100644
--- a/packages/fiori3/src/components/ObjectPage/ObjectPage.jss.ts
+++ b/packages/fiori3/src/components/ObjectPage/ObjectPage.jss.ts
@@ -1,6 +1,6 @@
-import { JSSTheme } from '../../interfaces/JSSTheme';
-import { fonts, HSLColor } from '@ui5-webcomponents-react/styles';
+import { fonts, HSLColor } from '@ui5-webcomponents-react/base';
import { ZIndex } from '../../enums/ZIndex';
+import { JSSTheme } from '../../interfaces/JSSTheme';
const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
objectPage: {
diff --git a/packages/fiori3/src/components/ObjectPage/ObjectPage.karma.tsx b/packages/fiori3/src/components/ObjectPage/ObjectPage.karma.tsx
index 129e1f4150e..5ef669ec2af 100644
--- a/packages/fiori3/src/components/ObjectPage/ObjectPage.karma.tsx
+++ b/packages/fiori3/src/components/ObjectPage/ObjectPage.karma.tsx
@@ -1,3 +1,8 @@
+import { getEventFromCallback, mountThemedComponent, renderThemedComponent } from '@shared/tests/utils';
+import { expect, use } from 'chai';
+import { matchSnapshot } from 'chai-karma-snapshot';
+import React from 'react';
+import * as sinon from 'sinon';
import { Button } from '../../lib/Button';
import { Label } from '../../lib/Label';
import { Link } from '../../lib/Link';
@@ -6,11 +11,6 @@ import { ObjectPageMode } from '../../lib/ObjectPageMode';
import { ObjectPageSection } from '../../lib/ObjectPageSection';
import { ObjectPageSubSection } from '../../lib/ObjectPageSubSection';
import { Text } from '../../lib/Text';
-import { getEventFromCallback, mountThemedComponent, renderThemedComponent } from '@shared/tests/utils';
-import { expect, use } from 'chai';
-import { matchSnapshot } from 'chai-karma-snapshot';
-import React from 'react';
-import * as sinon from 'sinon';
use(matchSnapshot);
diff --git a/packages/fiori3/src/components/ObjectPage/ObjectPageAnchor.tsx b/packages/fiori3/src/components/ObjectPage/ObjectPageAnchor.tsx
index 60d8cca1faf..8d856b27c04 100644
--- a/packages/fiori3/src/components/ObjectPage/ObjectPageAnchor.tsx
+++ b/packages/fiori3/src/components/ObjectPage/ObjectPageAnchor.tsx
@@ -1,4 +1,7 @@
-import { Event, StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { Event, StyleClassHelper } from '@ui5-webcomponents-react/base';
+import React, { Component } from 'react';
+import { Link } from 'react-scroll';
+import { ObjectWithVariableKeys } from '../../interfaces/ObjectWithVariableKeys';
import { Button } from '../../lib/Button';
import { ButtonType } from '../../lib/ButtonType';
import { CustomListItem } from '../../lib/CustomListItem';
@@ -9,9 +12,6 @@ import { ListItemTypes } from '../../lib/ListItemTypes';
import { ObjectPageMode } from '../../lib/ObjectPageMode';
import { PlacementType } from '../../lib/PlacementType';
import { Popover } from '../../lib/Popover';
-import React, { Component } from 'react';
-import { Link } from 'react-scroll';
-import { ObjectWithVariableKeys } from '../../interfaces/ObjectWithVariableKeys';
export interface ObjectPageAnchorPropTypes {
section: any;
diff --git a/packages/fiori3/src/components/ObjectPage/demo.stories.tsx b/packages/fiori3/src/components/ObjectPage/demo.stories.tsx
index 072fc365173..b286b019a75 100644
--- a/packages/fiori3/src/components/ObjectPage/demo.stories.tsx
+++ b/packages/fiori3/src/components/ObjectPage/demo.stories.tsx
@@ -1,3 +1,8 @@
+import { action } from '@storybook/addon-actions';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { propTablesExclude } from '../../../../docs/.storybook/config';
import { Button } from '../../lib/Button';
import { ButtonType } from '../../lib/ButtonType';
import { Label } from '../../lib/Label';
@@ -7,11 +12,6 @@ import { ObjectPageMode } from '../../lib/ObjectPageMode';
import { ObjectPageSection } from '../../lib/ObjectPageSection';
import { ObjectPageSubSection } from '../../lib/ObjectPageSubSection';
import { Text } from '../../lib/Text';
-import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { propTablesExclude } from '../../../../docs/.storybook/config';
// @ts-ignore
import SampleImage from './DemoImage.png';
diff --git a/packages/fiori3/src/components/ObjectPage/index.tsx b/packages/fiori3/src/components/ObjectPage/index.tsx
index ba1360b2226..ba4c5093642 100644
--- a/packages/fiori3/src/components/ObjectPage/index.tsx
+++ b/packages/fiori3/src/components/ObjectPage/index.tsx
@@ -1,14 +1,13 @@
-import { ObjectPageMode } from '../../lib/ObjectPageMode';
-import { ClassProps } from '../../interfaces/ClassProps';
-import { JSSTheme } from '../../interfaces/JSSTheme';
-import { withStyles } from '@ui5-webcomponents-react/styles';
-import { Event, StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { Event, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { Children, cloneElement, PureComponent, ReactElement, ReactNode, ReactNodeArray } from 'react';
import { scroller } from 'react-scroll';
+import { ClassProps } from '../../interfaces/ClassProps';
import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
+import { Button } from '../../lib/Button';
+import { ObjectPageMode } from '../../lib/ObjectPageMode';
import styles from './ObjectPage.jss';
import { ObjectPageAnchor } from './ObjectPageAnchor';
-import { Button } from '../../lib/Button';
const objectPageContentStyles = ({ parameters }: JSSTheme) => ({
sectionsContainer: {
diff --git a/packages/fiori3/src/components/ObjectPageSection/ObjectPageSection.jss.ts b/packages/fiori3/src/components/ObjectPageSection/ObjectPageSection.jss.ts
index 3b191aab130..e4dc5582580 100644
--- a/packages/fiori3/src/components/ObjectPageSection/ObjectPageSection.jss.ts
+++ b/packages/fiori3/src/components/ObjectPageSection/ObjectPageSection.jss.ts
@@ -1,5 +1,5 @@
+import { fonts, HSLColor } from '@ui5-webcomponents-react/base';
import { JSSTheme } from '../../interfaces/JSSTheme';
-import { fonts, HSLColor } from '@ui5-webcomponents-react/styles';
const styles = ({ theme, parameters }: JSSTheme) => ({
header: {
diff --git a/packages/fiori3/src/components/ObjectPageSection/ObjectPageSection.karma.tsx b/packages/fiori3/src/components/ObjectPageSection/ObjectPageSection.karma.tsx
index bf6b7ea0a49..7a33b34bdba 100644
--- a/packages/fiori3/src/components/ObjectPageSection/ObjectPageSection.karma.tsx
+++ b/packages/fiori3/src/components/ObjectPageSection/ObjectPageSection.karma.tsx
@@ -1,9 +1,9 @@
-import { ObjectPageSection } from '../../lib/ObjectPageSection';
import { renderThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
import { shallow } from 'enzyme';
import React from 'react';
+import { ObjectPageSection } from '../../lib/ObjectPageSection';
use(matchSnapshot);
diff --git a/packages/fiori3/src/components/ObjectPageSection/index.tsx b/packages/fiori3/src/components/ObjectPageSection/index.tsx
index ecdb9e2cecd..d8b0abd188c 100644
--- a/packages/fiori3/src/components/ObjectPageSection/index.tsx
+++ b/packages/fiori3/src/components/ObjectPageSection/index.tsx
@@ -1,10 +1,9 @@
+import { StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { PureComponent, ReactNode, ReactNodeArray } from 'react';
-import { StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { ClassProps } from '../../interfaces/ClassProps';
import { CommonProps } from '../../interfaces/CommonProps';
import { EmptyIdPropException } from '../ObjectPage/EmptyIdPropException';
-import { ClassProps } from '../../interfaces/ClassProps';
import styles from './ObjectPageSection.jss';
-import { withStyles } from '@ui5-webcomponents-react/styles';
export interface ObjectPageSectionPropTypes extends CommonProps {
title?: string;
diff --git a/packages/fiori3/src/components/ObjectPageSubSection/ObjectPageSubSection.karma.tsx b/packages/fiori3/src/components/ObjectPageSubSection/ObjectPageSubSection.karma.tsx
index 7c7adb08891..6277ad3305a 100644
--- a/packages/fiori3/src/components/ObjectPageSubSection/ObjectPageSubSection.karma.tsx
+++ b/packages/fiori3/src/components/ObjectPageSubSection/ObjectPageSubSection.karma.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
-import { ObjectPageSubSection } from '../../lib/ObjectPageSubSection';
-import { shallow } from 'enzyme';
import { renderThemedComponent } from '@shared/tests/utils';
-import { matchSnapshot } from 'chai-karma-snapshot';
import { expect, use } from 'chai';
+import { matchSnapshot } from 'chai-karma-snapshot';
+import { shallow } from 'enzyme';
+import React from 'react';
+import { ObjectPageSubSection } from '../../lib/ObjectPageSubSection';
+
use(matchSnapshot);
describe('ObjectPageSubSection', () => {
diff --git a/packages/fiori3/src/components/ObjectPageSubSection/index.tsx b/packages/fiori3/src/components/ObjectPageSubSection/index.tsx
index 71daf5c00e8..588280f8d6e 100644
--- a/packages/fiori3/src/components/ObjectPageSubSection/index.tsx
+++ b/packages/fiori3/src/components/ObjectPageSubSection/index.tsx
@@ -1,11 +1,9 @@
+import { fonts, HSLColor, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { PureComponent, ReactNode, ReactNodeArray } from 'react';
import { ClassProps } from '../../interfaces/ClassProps';
import { CommonProps } from '../../interfaces/CommonProps';
import { JSSTheme } from '../../interfaces/JSSTheme';
import { EmptyIdPropException } from '../ObjectPage/EmptyIdPropException';
-import { fonts, HSLColor } from '@ui5-webcomponents-react/styles';
-import { withStyles } from '@ui5-webcomponents-react/styles';
-import { StyleClassHelper } from '@ui5-webcomponents-react/utils';
const lighten = (amount, color) => HSLColor.of(color).lighten(amount * 100).hsl;
diff --git a/packages/fiori3/src/components/ObjectStatus/ObjectStatus.jss.ts b/packages/fiori3/src/components/ObjectStatus/ObjectStatus.jss.ts
index 010ca21f30c..f68b028c657 100644
--- a/packages/fiori3/src/components/ObjectStatus/ObjectStatus.jss.ts
+++ b/packages/fiori3/src/components/ObjectStatus/ObjectStatus.jss.ts
@@ -1,4 +1,4 @@
-import { fonts } from '@ui5-webcomponents-react/styles';
+import { fonts } from '@ui5-webcomponents-react/base';
import { JSSTheme } from '../../interfaces/JSSTheme';
const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
diff --git a/packages/fiori3/src/components/ObjectStatus/ObjectStatus.karma.tsx b/packages/fiori3/src/components/ObjectStatus/ObjectStatus.karma.tsx
index 0e0af6ff38c..2d8488258d7 100644
--- a/packages/fiori3/src/components/ObjectStatus/ObjectStatus.karma.tsx
+++ b/packages/fiori3/src/components/ObjectStatus/ObjectStatus.karma.tsx
@@ -1,9 +1,9 @@
-import { ValueState } from '../../lib/ValueState';
-import React from 'react';
-import { ObjectStatus } from '../../lib/ObjectStatus';
import { mountThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
+import React from 'react';
+import { ObjectStatus } from '../../lib/ObjectStatus';
+import { ValueState } from '../../lib/ValueState';
use(matchSnapshot);
diff --git a/packages/fiori3/src/components/ObjectStatus/demo.stories.tsx b/packages/fiori3/src/components/ObjectStatus/demo.stories.tsx
index 86b394a5536..8c3216834c5 100644
--- a/packages/fiori3/src/components/ObjectStatus/demo.stories.tsx
+++ b/packages/fiori3/src/components/ObjectStatus/demo.stories.tsx
@@ -1,9 +1,9 @@
-import { Icon } from '../../lib/Icon';
-import { ObjectStatus } from '../../lib/ObjectStatus';
-import { ValueState } from '../../lib/ValueState';
import { boolean, select } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
+import { Icon } from '../../lib/Icon';
+import { ObjectStatus } from '../../lib/ObjectStatus';
+import { ValueState } from '../../lib/ValueState';
storiesOf('Components | ObjectStatus', module)
.add('Only Text', () => (
diff --git a/packages/fiori3/src/components/ObjectStatus/index.tsx b/packages/fiori3/src/components/ObjectStatus/index.tsx
index fa0925f288e..0c176f9b839 100644
--- a/packages/fiori3/src/components/ObjectStatus/index.tsx
+++ b/packages/fiori3/src/components/ObjectStatus/index.tsx
@@ -1,10 +1,9 @@
-import { ValueState } from '../../lib/ValueState';
-import { ClassProps } from '../../interfaces/ClassProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
-import { StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { FC, ReactNode } from 'react';
+import { ClassProps } from '../../interfaces/ClassProps';
import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
import { Icon } from '../../lib/Icon';
+import { ValueState } from '../../lib/ValueState';
import styles from './ObjectStatus.jss';
export interface ObjectStatusPropTypes extends Fiori3CommonProps {
diff --git a/packages/fiori3/src/components/Page/Page.jss.ts b/packages/fiori3/src/components/Page/Page.jss.ts
index 9d6485cf7b8..74e39eb9df5 100644
--- a/packages/fiori3/src/components/Page/Page.jss.ts
+++ b/packages/fiori3/src/components/Page/Page.jss.ts
@@ -5,7 +5,7 @@ import { ContentDensity } from '../../lib/ContentDensity';
* Style Class Generator Function
*
* @param {Object} obj - Current Theme Context by JSS Provider.
- * @param {string} obj.theme - Current Theme (sap_belize, sap_belize_plus, etc.)
+ * @param {string} obj.theme - Current Theme (sap_fiori_3)
* @param {string} obj.contentDensity - Current Content Density (Cozy, Compact)
* @param {object} obj.parameters - Theming parameters (e.g. LabelColor)
*/
diff --git a/packages/fiori3/src/components/Page/demo.stories.tsx b/packages/fiori3/src/components/Page/demo.stories.tsx
index 8a83a1817ed..55df3ba48e9 100644
--- a/packages/fiori3/src/components/Page/demo.stories.tsx
+++ b/packages/fiori3/src/components/Page/demo.stories.tsx
@@ -1,11 +1,11 @@
+import { boolean, select } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
import { Bar } from '../../lib/Bar';
import { Button } from '../../lib/Button';
import { Label } from '../../lib/Label';
import { Page } from '../../lib/Page';
import { PageBackgroundDesign } from '../../lib/PageBackgroundDesign';
-import { boolean, select } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
-import React from 'react';
const renderPage = () => (
diff --git a/packages/fiori3/src/components/Page/index.tsx b/packages/fiori3/src/components/Page/index.tsx
index bf9b52b5e50..878fc453d0a 100644
--- a/packages/fiori3/src/components/Page/index.tsx
+++ b/packages/fiori3/src/components/Page/index.tsx
@@ -1,14 +1,13 @@
-import { Event, StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { Event, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
+import React, { Component, ReactElement, ReactNode } from 'react';
+import { ClassProps } from '../../interfaces/ClassProps';
+import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
import { Bar } from '../../lib/Bar';
import { Button } from '../../lib/Button';
import { ButtonType } from '../../lib/ButtonType';
import { PageBackgroundDesign } from '../../lib/PageBackgroundDesign';
import { Title } from '../../lib/Title';
import { TitleLevel } from '../../lib/TitleLevel';
-import React, { Component, ReactElement, ReactNode } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
-import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
import { BarPropTypes } from '../Bar';
import styles from './Page.jss';
diff --git a/packages/fiori3/src/components/Page/page.karma.tsx b/packages/fiori3/src/components/Page/page.karma.tsx
index 4904bff8958..3fc99a3bea7 100644
--- a/packages/fiori3/src/components/Page/page.karma.tsx
+++ b/packages/fiori3/src/components/Page/page.karma.tsx
@@ -1,9 +1,9 @@
-import { Page } from '../../lib/Page';
import { renderThemedComponent, ThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
import { shallow } from 'enzyme';
import React from 'react';
+import { Page } from '../../lib/Page';
use(matchSnapshot);
diff --git a/packages/fiori3/src/components/ProgressIndicator/ProgressIndicator.jss.ts b/packages/fiori3/src/components/ProgressIndicator/ProgressIndicator.jss.ts
index 371f9a451e9..b78f37fe69f 100644
--- a/packages/fiori3/src/components/ProgressIndicator/ProgressIndicator.jss.ts
+++ b/packages/fiori3/src/components/ProgressIndicator/ProgressIndicator.jss.ts
@@ -1,6 +1,6 @@
-import { ValueState } from '../../lib/ValueState';
+import { fonts, HSLColor } from '@ui5-webcomponents-react/base';
import { JSSTheme } from '../../interfaces/JSSTheme';
-import { fonts, HSLColor } from '@ui5-webcomponents-react/styles';
+import { ValueState } from '../../lib/ValueState';
function getBackgroundColor(state) {
switch (state) {
diff --git a/packages/fiori3/src/components/ProgressIndicator/ProgressIndicator.karma.tsx b/packages/fiori3/src/components/ProgressIndicator/ProgressIndicator.karma.tsx
index 1a4208b5a51..55201d51bb0 100644
--- a/packages/fiori3/src/components/ProgressIndicator/ProgressIndicator.karma.tsx
+++ b/packages/fiori3/src/components/ProgressIndicator/ProgressIndicator.karma.tsx
@@ -1,9 +1,9 @@
-import { ContentDensity } from '../../lib/ContentDensity';
-import { ProgressIndicator } from '../../lib/ProgressIndicator';
-import { ValueState } from '../../lib/ValueState';
import { mountThemedComponent } from '@shared/tests/utils';
import { expect } from 'chai';
import React from 'react';
+import { ContentDensity } from '../../lib/ContentDensity';
+import { ProgressIndicator } from '../../lib/ProgressIndicator';
+import { ValueState } from '../../lib/ValueState';
const testFactory = () => {
Object.values(ValueState).forEach((state) => {
diff --git a/packages/fiori3/src/components/ProgressIndicator/demo.stories.tsx b/packages/fiori3/src/components/ProgressIndicator/demo.stories.tsx
index c30003cfda5..36f221b14d0 100644
--- a/packages/fiori3/src/components/ProgressIndicator/demo.stories.tsx
+++ b/packages/fiori3/src/components/ProgressIndicator/demo.stories.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { storiesOf } from '@storybook/react';
+import React from 'react';
import { ProgressIndicator } from '../../lib/ProgressIndicator';
function renderStory() {
diff --git a/packages/fiori3/src/components/ProgressIndicator/index.tsx b/packages/fiori3/src/components/ProgressIndicator/index.tsx
index 6b163958e3e..7e3d8021932 100644
--- a/packages/fiori3/src/components/ProgressIndicator/index.tsx
+++ b/packages/fiori3/src/components/ProgressIndicator/index.tsx
@@ -1,10 +1,9 @@
-import { ContentDensity } from '../../lib/ContentDensity';
-import { ClassProps } from '../../interfaces/ClassProps';
-import { JSSTheme } from '../../interfaces/JSSTheme';
-import { withStyles } from '@ui5-webcomponents-react/styles';
-import { StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { PureComponent } from 'react';
+import { ClassProps } from '../../interfaces/ClassProps';
import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
+import { ContentDensity } from '../../lib/ContentDensity';
import styles from './ProgressIndicator.jss';
export interface ProgressIndicatorPropTypes extends Fiori3CommonProps {
diff --git a/packages/fiori3/src/components/SegmentedButton/SegmentedButton.karma.tsx b/packages/fiori3/src/components/SegmentedButton/SegmentedButton.karma.tsx
index 16d8e323677..80ff86a2cd5 100644
--- a/packages/fiori3/src/components/SegmentedButton/SegmentedButton.karma.tsx
+++ b/packages/fiori3/src/components/SegmentedButton/SegmentedButton.karma.tsx
@@ -1,10 +1,10 @@
-import { SegmentedButton } from '../../lib/SegmentedButton';
-import { SegmentedButtonItem } from '../../lib/SegmentedButtonItem';
import { getEventFromCallback, mountThemedComponent } from '@shared/tests/utils';
import { expect } from 'chai';
import { mount } from 'enzyme';
import React from 'react';
import sinon from 'sinon';
+import { SegmentedButton } from '../../lib/SegmentedButton';
+import { SegmentedButtonItem } from '../../lib/SegmentedButtonItem';
describe('SegmentedButton', () => {
it('Selection', () => {
diff --git a/packages/fiori3/src/components/SegmentedButton/demo.stories.tsx b/packages/fiori3/src/components/SegmentedButton/demo.stories.tsx
index 568b06ee084..14299f3f79b 100644
--- a/packages/fiori3/src/components/SegmentedButton/demo.stories.tsx
+++ b/packages/fiori3/src/components/SegmentedButton/demo.stories.tsx
@@ -1,10 +1,10 @@
-import { Icon } from '../../lib/Icon';
-import { SegmentedButton } from '../../lib/SegmentedButton';
-import { SegmentedButtonItem } from '../../lib/SegmentedButtonItem';
import { action } from '@storybook/addon-actions';
import { boolean, number } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
+import { Icon } from '../../lib/Icon';
+import { SegmentedButton } from '../../lib/SegmentedButton';
+import { SegmentedButtonItem } from '../../lib/SegmentedButtonItem';
function renderStory() {
return (
diff --git a/packages/fiori3/src/components/SegmentedButton/index.tsx b/packages/fiori3/src/components/SegmentedButton/index.tsx
index 11864d91677..e5caeceace7 100644
--- a/packages/fiori3/src/components/SegmentedButton/index.tsx
+++ b/packages/fiori3/src/components/SegmentedButton/index.tsx
@@ -1,9 +1,8 @@
-import { ContentDensity } from '../../lib/ContentDensity';
-import { ClassProps } from '../../interfaces/ClassProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
-import { Event, StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { Event, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { Children, cloneElement, Component, CSSProperties, ReactElement } from 'react';
+import { ClassProps } from '../../interfaces/ClassProps';
import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
+import { ContentDensity } from '../../lib/ContentDensity';
import { SegmentedButtonItemPropTypes } from '../SegmentedButtonItem';
export type SelectedKey = string | number;
diff --git a/packages/fiori3/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts b/packages/fiori3/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts
index 89c52042bb0..2bde44b5011 100644
--- a/packages/fiori3/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts
+++ b/packages/fiori3/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts
@@ -1,6 +1,6 @@
-import { ContentDensity } from '../../lib/ContentDensity';
-import { fonts } from '@ui5-webcomponents-react/styles';
+import { fonts } from '@ui5-webcomponents-react/base';
import { JSSTheme } from '../../interfaces/JSSTheme';
+import { ContentDensity } from '../../lib/ContentDensity';
const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
segmentedButtonItem: {
diff --git a/packages/fiori3/src/components/SegmentedButtonItem/SegmentedButtonItem.karma.tsx b/packages/fiori3/src/components/SegmentedButtonItem/SegmentedButtonItem.karma.tsx
index 226add05c1c..2ecffb2bb73 100644
--- a/packages/fiori3/src/components/SegmentedButtonItem/SegmentedButtonItem.karma.tsx
+++ b/packages/fiori3/src/components/SegmentedButtonItem/SegmentedButtonItem.karma.tsx
@@ -1,10 +1,10 @@
-import { Icon } from '../../lib/Icon';
-import { SegmentedButtonItem } from '../../lib/SegmentedButtonItem';
import { getEventFromCallback, mountThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
import React from 'react';
import sinon from 'sinon';
+import { Icon } from '../../lib/Icon';
+import { SegmentedButtonItem } from '../../lib/SegmentedButtonItem';
use(matchSnapshot);
diff --git a/packages/fiori3/src/components/SegmentedButtonItem/index.tsx b/packages/fiori3/src/components/SegmentedButtonItem/index.tsx
index 3af46a8f65a..ac3a7fce82a 100644
--- a/packages/fiori3/src/components/SegmentedButtonItem/index.tsx
+++ b/packages/fiori3/src/components/SegmentedButtonItem/index.tsx
@@ -1,8 +1,7 @@
-import { Event, StyleClassHelper } from '@ui5-webcomponents-react/utils';
+import { Event, StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { CSSProperties, PureComponent } from 'react';
import { ClassProps } from '../../interfaces/ClassProps';
import { CommonProps } from '../../interfaces/CommonProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
import { SelectedKey } from '../SegmentedButton';
import styles from './SegmentedButtonItem.jss';
diff --git a/packages/fiori3/src/components/Spinner/Spinner.test.tsx b/packages/fiori3/src/components/Spinner/Spinner.test.tsx
index 5a3d1409eaf..7a0e981cc9a 100644
--- a/packages/fiori3/src/components/Spinner/Spinner.test.tsx
+++ b/packages/fiori3/src/components/Spinner/Spinner.test.tsx
@@ -1,7 +1,7 @@
-import { Size } from '../../lib/Size';
-import { Spinner } from '../../lib/Spinner';
import { renderThemedComponent } from '@shared/tests/utils';
import React from 'react';
+import { Size } from '../../lib/Size';
+import { Spinner } from '../../lib/Spinner';
describe('Spinner', () => {
test('small', () => {
diff --git a/packages/fiori3/src/components/Spinner/demo.stories.tsx b/packages/fiori3/src/components/Spinner/demo.stories.tsx
index f4fe2b583a3..a340f5c4e32 100644
--- a/packages/fiori3/src/components/Spinner/demo.stories.tsx
+++ b/packages/fiori3/src/components/Spinner/demo.stories.tsx
@@ -1,8 +1,8 @@
-import { Size } from '../../lib/Size';
-import { Spinner } from '../../lib/Spinner';
import { select } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
+import { Size } from '../../lib/Size';
+import { Spinner } from '../../lib/Spinner';
const renderSpinner = () =>
;
diff --git a/packages/fiori3/src/components/Spinner/index.tsx b/packages/fiori3/src/components/Spinner/index.tsx
index 9c2afedaf22..997afc322fa 100644
--- a/packages/fiori3/src/components/Spinner/index.tsx
+++ b/packages/fiori3/src/components/Spinner/index.tsx
@@ -1,9 +1,8 @@
-import { StyleClassHelper } from '@ui5-webcomponents-react/utils';
-import { Size } from '../../lib/Size';
+import { StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
import React, { FC } from 'react';
import { ClassProps } from '../../interfaces/ClassProps';
import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { Size } from '../../lib/Size';
import { styles } from './Spinner.jss';
export interface SpinnerProps extends Fiori3CommonProps {
diff --git a/packages/fiori3/src/components/Text/Text.jss.ts b/packages/fiori3/src/components/Text/Text.jss.ts
index de24f1029ab..ec06717f531 100644
--- a/packages/fiori3/src/components/Text/Text.jss.ts
+++ b/packages/fiori3/src/components/Text/Text.jss.ts
@@ -1,4 +1,4 @@
-import { fonts } from '@ui5-webcomponents-react/styles';
+import { fonts } from '@ui5-webcomponents-react/base';
import { JSSTheme } from '../../interfaces/JSSTheme';
export const TextStyles = ({ parameters }: JSSTheme) => ({
diff --git a/packages/fiori3/src/components/Text/Text.karma.tsx b/packages/fiori3/src/components/Text/Text.karma.tsx
index 22916b3820b..c75ce03057b 100644
--- a/packages/fiori3/src/components/Text/Text.karma.tsx
+++ b/packages/fiori3/src/components/Text/Text.karma.tsx
@@ -1,8 +1,8 @@
-import { Text } from '../../lib/Text';
import { mountThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
import React from 'react';
+import { Text } from '../../lib/Text';
use(matchSnapshot);
diff --git a/packages/fiori3/src/components/Text/demo.stories.tsx b/packages/fiori3/src/components/Text/demo.stories.tsx
index 0d819069c9c..5602ba79b48 100644
--- a/packages/fiori3/src/components/Text/demo.stories.tsx
+++ b/packages/fiori3/src/components/Text/demo.stories.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
import { boolean, text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
import { Text } from '../../lib/Text';
function renderStory() {
diff --git a/packages/fiori3/src/components/Text/index.tsx b/packages/fiori3/src/components/Text/index.tsx
index 5d24fa12591..c420a7c6bc4 100644
--- a/packages/fiori3/src/components/Text/index.tsx
+++ b/packages/fiori3/src/components/Text/index.tsx
@@ -1,9 +1,8 @@
+import { StyleClassHelper, withStyles } from '@ui5-webcomponents-react/base';
+import React, { CSSProperties, FC, ReactNode } from 'react';
import { ClassProps } from '../../interfaces/ClassProps';
import { CommonProps } from '../../interfaces/CommonProps';
import { ThemeOptions } from '../../interfaces/ThemeOptions';
-import { withStyles } from '@ui5-webcomponents-react/styles';
-import { StyleClassHelper } from '@ui5-webcomponents-react/utils';
-import React, { CSSProperties, ReactNode, FC } from 'react';
import { TextStyles } from './Text.jss';
export interface TextProps extends CommonProps {
diff --git a/packages/fiori3/src/components/ThemeProvider/ThemeProvider.karma.tsx b/packages/fiori3/src/components/ThemeProvider/ThemeProvider.karma.tsx
index 779bd47c4b5..bf17edc6989 100644
--- a/packages/fiori3/src/components/ThemeProvider/ThemeProvider.karma.tsx
+++ b/packages/fiori3/src/components/ThemeProvider/ThemeProvider.karma.tsx
@@ -1,8 +1,8 @@
-import { ThemeProvider } from '../../lib/ThemeProvider';
+import { withStyles } from '@ui5-webcomponents-react/base';
import { expect } from 'chai';
import { mount } from 'enzyme';
import React from 'react';
-import { withStyles } from '@ui5-webcomponents-react/styles';
+import { ThemeProvider } from '../../lib/ThemeProvider';
describe('ThemeProvider', () => {
it('Provides Correct Context', (done) => {
diff --git a/packages/fiori3/src/components/ThemeProvider/index.tsx b/packages/fiori3/src/components/ThemeProvider/index.tsx
index 3f67fda01b3..fae411af374 100644
--- a/packages/fiori3/src/components/ThemeProvider/index.tsx
+++ b/packages/fiori3/src/components/ThemeProvider/index.tsx
@@ -1,12 +1,10 @@
+import { sap_fiori_3 } from '@ui5-webcomponents-react/base';
+import { getCompactSize, getTheme } from '@ui5/webcomponents-base/src/Configuration';
+import React, { Fragment, PureComponent, ReactNode } from 'react';
+import { jss, ThemeProvider as ReactJssThemeProvider } from 'react-jss';
import { ContentDensity } from '../../lib/ContentDensity';
import { MessageToast } from '../../lib/MessageToast';
import { Themes } from '../../lib/Themes';
-import { jss, ThemeProvider as ReactJssThemeProvider } from 'react-jss';
-import React, { Fragment, PureComponent, ReactNode } from 'react';
-import { bootstrap, sap_fiori_3 } from '@ui5-webcomponents-react/styles';
-import { getCompactSize, getTheme } from '@ui5/webcomponents-base/src/Configuration';
-
-bootstrap();
export interface ThemeProviderProps {
withToastContainer?: boolean;
diff --git a/packages/fiori3/src/components/VariantManagement/VariantManagement.karma.tsx b/packages/fiori3/src/components/VariantManagement/VariantManagement.karma.tsx
index 83d87c78910..8d5c6410be4 100644
--- a/packages/fiori3/src/components/VariantManagement/VariantManagement.karma.tsx
+++ b/packages/fiori3/src/components/VariantManagement/VariantManagement.karma.tsx
@@ -1,8 +1,8 @@
-import { VariantManagement } from '../../lib/VariantManagement';
import { mountThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
import React from 'react';
+import { VariantManagement } from '../../lib/VariantManagement';
const variantItems = [{ label: 'Variant 1', key: '1' }, { label: 'Variant 2', key: '2' }];
diff --git a/packages/fiori3/src/components/VariantManagement/demo.stories.tsx b/packages/fiori3/src/components/VariantManagement/demo.stories.tsx
index 7b0b02ee9c5..4b9d9bccd17 100644
--- a/packages/fiori3/src/components/VariantManagement/demo.stories.tsx
+++ b/packages/fiori3/src/components/VariantManagement/demo.stories.tsx
@@ -1,10 +1,10 @@
-import { PlacementType } from '../../lib/PlacementType';
-import { TitleLevel } from '../../lib/TitleLevel';
-import { VariantManagement } from '../../lib/VariantManagement';
import { action } from '@storybook/addon-actions';
import { boolean, select } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
+import { PlacementType } from '../../lib/PlacementType';
+import { TitleLevel } from '../../lib/TitleLevel';
+import { VariantManagement } from '../../lib/VariantManagement';
function renderStory() {
const variantItems = [{ label: 'Variant 1', key: '1' }, { label: 'Variant 2', key: '2' }];
diff --git a/packages/fiori3/src/components/VariantManagement/index.tsx b/packages/fiori3/src/components/VariantManagement/index.tsx
index dd90fe18cf1..18573d793ea 100644
--- a/packages/fiori3/src/components/VariantManagement/index.tsx
+++ b/packages/fiori3/src/components/VariantManagement/index.tsx
@@ -1,4 +1,8 @@
-import { Event } from '@ui5-webcomponents-react/utils';
+import { Event, withStyles } from '@ui5-webcomponents-react/base';
+import React, { Component, ReactElement } from 'react';
+import { ClassProps } from '../../interfaces/ClassProps';
+import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
import { Button } from '../../lib/Button';
import { ButtonType } from '../../lib/ButtonType';
import { List } from '../../lib/List';
@@ -9,11 +13,6 @@ import { Popover } from '../../lib/Popover';
import { StandardListItem } from '../../lib/StandardListItem';
import { Title } from '../../lib/Title';
import { TitleLevel } from '../../lib/TitleLevel';
-import React, { Component, ReactElement } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
-import { CommonProps } from '../../interfaces/CommonProps';
-import { JSSTheme } from '../../interfaces/JSSTheme';
-import { withStyles } from '@ui5-webcomponents-react/styles';
import { ButtonPropTypes } from '../../webComponents/Button';
export interface VariantItem {
diff --git a/packages/fiori3/src/index.ts b/packages/fiori3/src/index.ts
index ecac053cbd9..b992b69faae 100644
--- a/packages/fiori3/src/index.ts
+++ b/packages/fiori3/src/index.ts
@@ -88,11 +88,11 @@ import { Switch } from './lib/Switch';
import { Tab } from './lib/Tab';
import { TabBase } from './lib/TabBase';
import { TabContainer } from './lib/TabContainer';
-import { TabSeparator } from './lib/TabSeparator';
import { Table } from './lib/Table';
import { TableCell } from './lib/TableCell';
import { TableColumn } from './lib/TableColumn';
import { TableRow } from './lib/TableRow';
+import { TabSeparator } from './lib/TabSeparator';
import { Text } from './lib/Text';
import { TextAlign } from './lib/TextAlign';
import { TextArea } from './lib/TextArea';
diff --git a/packages/fiori3/src/interfaces/InputBaseItemType.ts b/packages/fiori3/src/interfaces/InputBaseItemType.ts
index 84d107590d8..6f21fea8763 100644
--- a/packages/fiori3/src/interfaces/InputBaseItemType.ts
+++ b/packages/fiori3/src/interfaces/InputBaseItemType.ts
@@ -1,5 +1,5 @@
-import { ListItemShape } from './ListItemShape';
import { ReactText } from 'react';
+import { ListItemShape } from './ListItemShape';
export interface InputBaseItemType extends ListItemShape {
key: ReactText;
diff --git a/packages/fiori3/src/interfaces/JSSTheme.ts b/packages/fiori3/src/interfaces/JSSTheme.ts
index 3aec77ff2dd..9604994643e 100644
--- a/packages/fiori3/src/interfaces/JSSTheme.ts
+++ b/packages/fiori3/src/interfaces/JSSTheme.ts
@@ -1,6 +1,6 @@
+import { sap_fiori_3 } from '@ui5-webcomponents-react/base';
import { ContentDensity } from '../enums/ContentDensity';
import { Themes } from '../enums/Themes';
-import { sap_fiori_3 } from '@ui5-webcomponents-react/styles';
export interface JSSTheme {
theme: Themes;
diff --git a/packages/fiori3/src/internal/WithWebComponent.karma.tsx b/packages/fiori3/src/internal/WithWebComponent.karma.tsx
index dee1a877d05..f71d1d42b68 100644
--- a/packages/fiori3/src/internal/WithWebComponent.karma.tsx
+++ b/packages/fiori3/src/internal/WithWebComponent.karma.tsx
@@ -1,9 +1,9 @@
-import { withWebComponent } from './withWebComponent';
-import UI5Button from '@ui5/webcomponents/dist/Button';
import { mountThemedComponent } from '@shared/tests/utils';
+import UI5Button from '@ui5/webcomponents/dist/Button';
import { expect } from 'chai';
-import React, { FC, cloneElement } from 'react';
+import React, { cloneElement, FC } from 'react';
import { spy } from 'sinon';
+import { withWebComponent } from './withWebComponent';
describe('withWebComponent', () => {
it('Unmount Event Handlers correctly after prop update', () => {
diff --git a/packages/fiori3/src/internal/withWebComponent.tsx b/packages/fiori3/src/internal/withWebComponent.tsx
index e25c9de4caf..1226d29c311 100644
--- a/packages/fiori3/src/internal/withWebComponent.tsx
+++ b/packages/fiori3/src/internal/withWebComponent.tsx
@@ -1,4 +1,4 @@
-import { Event } from '@ui5-webcomponents-react/utils';
+import { Event } from '@ui5-webcomponents-react/base';
import React, { Children, cloneElement, Component, CSSProperties, FC, ReactElement } from 'react';
import { withTheme } from 'react-jss';
import { Fiori3CommonProps } from '../interfaces/Fiori3CommonProps';
diff --git a/packages/fiori3/src/webComponents/Badge/index.tsx b/packages/fiori3/src/webComponents/Badge/index.tsx
index 9a1d6ae8bdc..583e7988178 100644
--- a/packages/fiori3/src/webComponents/Badge/index.tsx
+++ b/packages/fiori3/src/webComponents/Badge/index.tsx
@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
import UI5Badge from '@ui5/webcomponents/dist/Badge';
+import React, { FC } from 'react';
import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
export interface BadgePropTypes extends WithWebComponentPropTypes {
diff --git a/packages/fiori3/src/webComponents/BusyIndicator/index.tsx b/packages/fiori3/src/webComponents/BusyIndicator/index.tsx
index 82088137fc1..26a3bb91350 100644
--- a/packages/fiori3/src/webComponents/BusyIndicator/index.tsx
+++ b/packages/fiori3/src/webComponents/BusyIndicator/index.tsx
@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
import UI5BusyIndicator from '@ui5/webcomponents/dist/BusyIndicator';
-import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
+import React, { FC } from 'react';
import { BusyIndicatorType } from '../../enums/BusyIndicatorType';
+import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
export interface BusyIndicatorPropTypes extends WithWebComponentPropTypes {
size?: BusyIndicatorType; // @generated
diff --git a/packages/fiori3/src/webComponents/Button/Button.karma.tsx b/packages/fiori3/src/webComponents/Button/Button.karma.tsx
index 8da03c0a902..6d610ef3031 100644
--- a/packages/fiori3/src/webComponents/Button/Button.karma.tsx
+++ b/packages/fiori3/src/webComponents/Button/Button.karma.tsx
@@ -1,8 +1,8 @@
-import { Button } from '../../lib/Button';
import { mountThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
import React from 'react';
+import { Button } from '../../lib/Button';
use(matchSnapshot);
diff --git a/packages/fiori3/src/webComponents/Button/demo.stories.tsx b/packages/fiori3/src/webComponents/Button/demo.stories.tsx
index 844c4645978..6bef6f18ed0 100644
--- a/packages/fiori3/src/webComponents/Button/demo.stories.tsx
+++ b/packages/fiori3/src/webComponents/Button/demo.stories.tsx
@@ -1,9 +1,9 @@
-import { Button } from '../../lib/Button';
-import { ButtonType } from '../../lib/ButtonType';
import { action } from '@storybook/addon-actions';
import { boolean, select } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
+import { Button } from '../../lib/Button';
+import { ButtonType } from '../../lib/ButtonType';
const customStyle1 = {
color: 'red'
diff --git a/packages/fiori3/src/webComponents/Button/index.tsx b/packages/fiori3/src/webComponents/Button/index.tsx
index 1bd08a396e5..30b5b283f22 100644
--- a/packages/fiori3/src/webComponents/Button/index.tsx
+++ b/packages/fiori3/src/webComponents/Button/index.tsx
@@ -1,8 +1,8 @@
-import { Event } from '@ui5-webcomponents-react/utils';
-import { ButtonType } from '../../lib/ButtonType';
+import { Event } from '@ui5-webcomponents-react/base';
import UI5Button from '@ui5/webcomponents/dist/Button';
import React, { FC } from 'react';
import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
+import { ButtonType } from '../../lib/ButtonType';
export interface ButtonPropTypes extends WithWebComponentPropTypes {
type?: ButtonType; // @generated
diff --git a/packages/fiori3/src/webComponents/Calendar/Calendar.karma.tsx b/packages/fiori3/src/webComponents/Calendar/Calendar.karma.tsx
index 994d23b75dd..c18fefd71b5 100644
--- a/packages/fiori3/src/webComponents/Calendar/Calendar.karma.tsx
+++ b/packages/fiori3/src/webComponents/Calendar/Calendar.karma.tsx
@@ -1,8 +1,8 @@
-import { Calendar } from '../../lib/Calendar';
import { mountThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
import React from 'react';
+import { Calendar } from '../../lib/Calendar';
use(matchSnapshot);
diff --git a/packages/fiori3/src/webComponents/Calendar/demo.stories.tsx b/packages/fiori3/src/webComponents/Calendar/demo.stories.tsx
index ed48cae245f..11bf71302d4 100644
--- a/packages/fiori3/src/webComponents/Calendar/demo.stories.tsx
+++ b/packages/fiori3/src/webComponents/Calendar/demo.stories.tsx
@@ -1,8 +1,8 @@
-import { Calendar } from '../../lib/Calendar';
-import { CalendarType } from '../../lib/CalendarType';
import { select } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
+import { Calendar } from '../../lib/Calendar';
+import { CalendarType } from '../../lib/CalendarType';
const now = new Date().getTime();
diff --git a/packages/fiori3/src/webComponents/Calendar/index.tsx b/packages/fiori3/src/webComponents/Calendar/index.tsx
index 936b6fb6a12..8b4e3d23b9e 100644
--- a/packages/fiori3/src/webComponents/Calendar/index.tsx
+++ b/packages/fiori3/src/webComponents/Calendar/index.tsx
@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
-import { CalendarType } from '../../lib/CalendarType';
-import { Event } from '@ui5-webcomponents-react/utils';
+import { Event } from '@ui5-webcomponents-react/base';
import UI5Calendar from '@ui5/webcomponents/dist/Calendar';
+import React, { FC } from 'react';
import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
+import { CalendarType } from '../../lib/CalendarType';
export interface CalendarPropTypes extends WithWebComponentPropTypes {
timestamp?: number; // @generated
diff --git a/packages/fiori3/src/webComponents/CalendarHeader/CalendarHeader.karma.tsx b/packages/fiori3/src/webComponents/CalendarHeader/CalendarHeader.karma.tsx
index efab047eb2a..dde844f81b1 100644
--- a/packages/fiori3/src/webComponents/CalendarHeader/CalendarHeader.karma.tsx
+++ b/packages/fiori3/src/webComponents/CalendarHeader/CalendarHeader.karma.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { mountThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
+import React from 'react';
import { CalendarHeader } from '../../lib/CalendarHeader';
-import { mountThemedComponent } from '@shared/tests/utils';
use(matchSnapshot);
diff --git a/packages/fiori3/src/webComponents/CalendarHeader/index.tsx b/packages/fiori3/src/webComponents/CalendarHeader/index.tsx
index 8813fad05a4..06406f295e5 100644
--- a/packages/fiori3/src/webComponents/CalendarHeader/index.tsx
+++ b/packages/fiori3/src/webComponents/CalendarHeader/index.tsx
@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import { Event } from '@ui5-webcomponents-react/utils';
+import { Event } from '@ui5-webcomponents-react/base';
import UI5CalendarHeader from '@ui5/webcomponents/dist/CalendarHeader';
+import React, { FC } from 'react';
import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
export interface CalendarHeaderPropTypes extends WithWebComponentPropTypes {
diff --git a/packages/fiori3/src/webComponents/Card/Card.karma.tsx b/packages/fiori3/src/webComponents/Card/Card.karma.tsx
index a338cf46b98..55780204a2e 100644
--- a/packages/fiori3/src/webComponents/Card/Card.karma.tsx
+++ b/packages/fiori3/src/webComponents/Card/Card.karma.tsx
@@ -1,8 +1,8 @@
-import { Card } from '../../lib/Card';
import { mountThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
import React from 'react';
+import { Card } from '../../lib/Card';
use(matchSnapshot);
diff --git a/packages/fiori3/src/webComponents/Card/demo.stories.tsx b/packages/fiori3/src/webComponents/Card/demo.stories.tsx
index 11d537de100..eb7dd161f26 100644
--- a/packages/fiori3/src/webComponents/Card/demo.stories.tsx
+++ b/packages/fiori3/src/webComponents/Card/demo.stories.tsx
@@ -1,8 +1,8 @@
-import { Card } from '../../lib/Card';
-import { Text } from '../../lib/Text';
import { storiesOf } from '@storybook/react';
import React from 'react';
import { propTablesExclude } from '../../../../docs/.storybook/config';
+import { Card } from '../../lib/Card';
+import { Text } from '../../lib/Text';
storiesOf('UI5 Web Components | Card', module).add(
'Generated default story',
diff --git a/packages/fiori3/src/webComponents/Card/index.tsx b/packages/fiori3/src/webComponents/Card/index.tsx
index e2885534503..ca5bb1c553e 100644
--- a/packages/fiori3/src/webComponents/Card/index.tsx
+++ b/packages/fiori3/src/webComponents/Card/index.tsx
@@ -1,5 +1,5 @@
-import React, { FC, ReactNode } from 'react';
import UI5Card from '@ui5/webcomponents/dist/Card';
+import React, { FC, ReactNode } from 'react';
import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent';
export interface CardPropTypes extends WithWebComponentPropTypes {
diff --git a/packages/fiori3/src/webComponents/CheckBox/CheckBox.karma.tsx b/packages/fiori3/src/webComponents/CheckBox/CheckBox.karma.tsx
index 9cef90cbf50..06213a59739 100644
--- a/packages/fiori3/src/webComponents/CheckBox/CheckBox.karma.tsx
+++ b/packages/fiori3/src/webComponents/CheckBox/CheckBox.karma.tsx
@@ -1,8 +1,8 @@
-import { CheckBox } from '../../lib/CheckBox';
import { mountThemedComponent } from '@shared/tests/utils';
import { expect, use } from 'chai';
import { matchSnapshot } from 'chai-karma-snapshot';
import React from 'react';
+import { CheckBox } from '../../lib/CheckBox';
use(matchSnapshot);
diff --git a/packages/fiori3/src/webComponents/CheckBox/demo.stories.tsx b/packages/fiori3/src/webComponents/CheckBox/demo.stories.tsx
index 7d67ca18990..344a80bc557 100644
--- a/packages/fiori3/src/webComponents/CheckBox/demo.stories.tsx
+++ b/packages/fiori3/src/webComponents/CheckBox/demo.stories.tsx
@@ -1,9 +1,9 @@
-import { CheckBox } from '../../lib/CheckBox';
-import { ValueState } from '../../lib/ValueState';
import { action } from '@storybook/addon-actions';
import { boolean, select, text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
+import { CheckBox } from '../../lib/CheckBox';
+import { ValueState } from '../../lib/ValueState';
storiesOf('UI5 Web Components | CheckBox', module).add('Default story', () => (
(
(