diff --git a/packages/main/package.json b/packages/main/package.json index 1d7d8762d2b..d314cf9d1b3 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -14,7 +14,7 @@ "license": "Apache-2.0", "private": false, "sideEffects": [ - "@ui5/webcomponents/dist/icons/*" + "@ui5/webcomponents-icons/dist/icons/*" ], "scripts": { "generateWebComponents": "ts-node -O '{\"module\": \"commonjs\"}' -r esm ./scripts/wrapperGeneration/index.js --onlyStopForMerge", @@ -22,7 +22,9 @@ "postbuild": "rollup -c rollup.config.js" }, "dependencies": { - "@ui5/webcomponents": "1.0.0-rc.4", + "@ui5/webcomponents": "1.0.0-rc.5", + "@ui5/webcomponents-fiori": "^1.0.0-rc.5", + "@ui5/webcomponents-icons": "^1.0.0-rc.5", "@ui5/webcomponents-react-base": "0.7.0-rc.1", "lodash.debounce": "^4.0.8", "react-content-loader": "^4.3.2", diff --git a/packages/main/scripts/wrapperGeneration/parseComponentNames.js b/packages/main/scripts/wrapperGeneration/parseComponentNames.js index a21ed1f38fa..72989659e84 100644 --- a/packages/main/scripts/wrapperGeneration/parseComponentNames.js +++ b/packages/main/scripts/wrapperGeneration/parseComponentNames.js @@ -2,22 +2,9 @@ const fs = require('fs'); const path = require('path'); const PATHS = require('../../../../config/paths'); -// create list of modules -const webComponentsModulePath = path.resolve(PATHS.nodeModules, '@ui5', 'webcomponents', 'dist'); -let files = fs - .readdirSync(webComponentsModulePath) - .filter((file) => file.endsWith('.js')) - .map((file) => path.basename(file, '.js')); - -const appDirectory = fs.realpathSync(process.cwd()); -const folderName = path.resolve(appDirectory, 'scripts', 'wrapperGeneration', 'json'); - -if (!fs.existsSync(folderName)) { - fs.mkdirSync(folderName); -} - const PRIVATE_COMPONENTS = [ 'CalendarHeader', + 'DefaultTheme', 'DayPicker', 'ListItem', 'ListItemBase', @@ -29,7 +16,26 @@ const PRIVATE_COMPONENTS = [ 'YearPicker' ]; -files = files.filter((file) => !PRIVATE_COMPONENTS.includes(file)); -console.log(files); +const appDirectory = fs.realpathSync(process.cwd()); +const folderName = path.resolve(appDirectory, 'scripts', 'wrapperGeneration', 'json'); + +if (!fs.existsSync(folderName)) { + fs.mkdirSync(folderName); +} -fs.writeFileSync(path.resolve(folderName, 'modules.json'), JSON.stringify(files)); +// create list of modules +const webComponentsModulePath = path.resolve(PATHS.nodeModules, '@ui5', 'webcomponents', 'dist'); +const standardWebComponents = fs + .readdirSync(webComponentsModulePath) + .filter((file) => file.endsWith('.js')) + .map((file) => path.basename(file, '.js')) + .filter((file) => !PRIVATE_COMPONENTS.includes(file)); +fs.writeFileSync(path.resolve(folderName, 'webcomponents.json'), JSON.stringify(standardWebComponents)); + +const fioriWebComponentsFolder = path.resolve(PATHS.nodeModules, '@ui5', 'webcomponents-fiori', 'dist'); +const fioriWebComponents = fs + .readdirSync(fioriWebComponentsFolder) + .filter((file) => file.endsWith('.js')) + .map((file) => path.basename(file, '.js')) + .filter((file) => !PRIVATE_COMPONENTS.includes(file)); +fs.writeFileSync(path.resolve(folderName, 'webcomponents-fiori.json'), JSON.stringify(fioriWebComponents)); diff --git a/packages/main/scripts/wrapperGeneration/puppeteerScript.js b/packages/main/scripts/wrapperGeneration/puppeteerScript.js index 78d64838e17..4bf9de95000 100644 --- a/packages/main/scripts/wrapperGeneration/puppeteerScript.js +++ b/packages/main/scripts/wrapperGeneration/puppeteerScript.js @@ -1,23 +1,34 @@ import { generateTypings } from './generateTypingsWeb'; -const modules = require('./json/modules'); +const modules = require('./json/webcomponents'); +const fioriWebComponents = require('./json/webcomponents-fiori'); + +const createAndLogDto = (componentName, module) => { + const WebComponent = module.default; + if (WebComponent && WebComponent.getMetadata) { + const metadata = WebComponent.getMetadata().metadata; + const dto = { + componentName, + metadata, + typings: generateTypings(metadata) + }; + console.log(JSON.stringify(dto)); + } +}; modules.forEach((moduleName) => { import( /* webpackMode: "eager" */ '@ui5/webcomponents/dist/' + moduleName ).then((module) => { - const WebComponent = module.default; - if (WebComponent && WebComponent.getMetadata) { - const metadata = WebComponent.getMetadata().metadata; - const dto = { - componentName: moduleName, - metadata, - typings: generateTypings(metadata) - }; - console.log(JSON.stringify(dto)); - } + createAndLogDto(moduleName, module); + }); +}); +fioriWebComponents.forEach((moduleName) => { + import( + /* webpackMode: "eager" */ + '@ui5/webcomponents-fiori/dist/' + moduleName + ).then((module) => { + createAndLogDto(moduleName, module); }); }); - -console.log(modules); diff --git a/packages/main/scripts/wrapperGeneration/steps/createDemo.js b/packages/main/scripts/wrapperGeneration/steps/createDemo.js index d117d625924..4970c4b17ef 100644 --- a/packages/main/scripts/wrapperGeneration/steps/createDemo.js +++ b/packages/main/scripts/wrapperGeneration/steps/createDemo.js @@ -42,7 +42,7 @@ function getKnownNumber(key, meta) { } const knownStrings = { - icon: "'sap-icon://add'" + icon: "'add'" }; function getStringValue(key, meta) { diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx index c702afacfb4..9f8e6c2b3d5 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx @@ -92,25 +92,25 @@ export const ColumnHeaderModal: FC = (props) => { > {showSort && ( - + Sort Ascending )} {showSort && ( - + Sort Descending )} {showFilter && !column.isGrouped && ( - + )} {showGroup && ( - + {column.isGrouped ? 'Ungroup' : 'Group'} )} diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx index 45b5c0122e2..7a72d7076e4 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx @@ -7,10 +7,10 @@ import { JSSTheme } from '../../../interfaces/JSSTheme'; import { Resizer } from './Resizer'; import { ColumnType } from '../types/ColumnType'; import { ColumnHeaderModal } from './ColumnHeaderModal'; -import '@ui5/webcomponents/dist/icons/filter'; -import '@ui5/webcomponents/dist/icons/group-2'; -import '@ui5/webcomponents/dist/icons/sort-descending'; -import '@ui5/webcomponents/dist/icons/sort-ascending'; +import '@ui5/webcomponents-icons/dist/icons/filter'; +import '@ui5/webcomponents-icons/dist/icons/group-2'; +import '@ui5/webcomponents-icons/dist/icons/sort-descending'; +import '@ui5/webcomponents-icons/dist/icons/sort-ascending'; export interface ColumnHeaderProps { id: string; @@ -101,9 +101,9 @@ export const ColumnHeader: FC = (props) => { const classNames = StyleClassHelper.of(classes.header); - const sortingIcon = column.isSorted ? : null; - const filterIcon = isFiltered ? : null; - const groupingIcon = column.isGrouped ? : null; + const sortingIcon = column.isSorted ? : null; + const filterIcon = isFiltered ? : null; + const groupingIcon = column.isGrouped ? : null; return (
diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap index d5a28e90ecc..02efcf22a16 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -67,7 +67,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` @@ -76,7 +76,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` @@ -130,7 +130,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` @@ -139,7 +139,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` @@ -193,7 +193,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` @@ -202,7 +202,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` @@ -257,7 +257,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` @@ -266,7 +266,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` @@ -521,7 +521,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = ` @@ -530,7 +530,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = ` @@ -584,7 +584,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = ` @@ -593,7 +593,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = ` @@ -647,7 +647,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = ` @@ -656,7 +656,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = ` @@ -711,7 +711,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = ` @@ -720,7 +720,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = ` @@ -975,7 +975,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = ` @@ -984,7 +984,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = ` @@ -1038,7 +1038,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = ` @@ -1047,7 +1047,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = ` @@ -1101,7 +1101,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = ` @@ -1110,7 +1110,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = ` @@ -1165,7 +1165,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = ` @@ -1174,7 +1174,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = ` @@ -1484,7 +1484,7 @@ exports[`AnalyticalTable Tree Table 1`] = ` @@ -1493,7 +1493,7 @@ exports[`AnalyticalTable Tree Table 1`] = ` @@ -1509,7 +1509,7 @@ exports[`AnalyticalTable Tree Table 1`] = ` > @@ -1577,7 +1577,7 @@ exports[`AnalyticalTable Tree Table 1`] = ` @@ -1593,7 +1593,7 @@ exports[`AnalyticalTable Tree Table 1`] = ` > @@ -1661,7 +1661,7 @@ exports[`AnalyticalTable Tree Table 1`] = ` @@ -1677,7 +1677,7 @@ exports[`AnalyticalTable Tree Table 1`] = ` > @@ -1746,7 +1746,7 @@ exports[`AnalyticalTable Tree Table 1`] = ` @@ -1762,7 +1762,7 @@ exports[`AnalyticalTable Tree Table 1`] = ` > @@ -2051,7 +2051,7 @@ exports[`AnalyticalTable custom row height 1`] = ` @@ -2060,7 +2060,7 @@ exports[`AnalyticalTable custom row height 1`] = ` @@ -2114,7 +2114,7 @@ exports[`AnalyticalTable custom row height 1`] = ` @@ -2123,7 +2123,7 @@ exports[`AnalyticalTable custom row height 1`] = ` @@ -2177,7 +2177,7 @@ exports[`AnalyticalTable custom row height 1`] = ` @@ -2186,7 +2186,7 @@ exports[`AnalyticalTable custom row height 1`] = ` @@ -2241,7 +2241,7 @@ exports[`AnalyticalTable custom row height 1`] = ` @@ -2250,7 +2250,7 @@ exports[`AnalyticalTable custom row height 1`] = ` @@ -2505,7 +2505,7 @@ exports[`AnalyticalTable test Asc desc 1`] = ` @@ -2514,7 +2514,7 @@ exports[`AnalyticalTable test Asc desc 1`] = ` @@ -2568,7 +2568,7 @@ exports[`AnalyticalTable test Asc desc 1`] = ` @@ -2577,7 +2577,7 @@ exports[`AnalyticalTable test Asc desc 1`] = ` @@ -2631,7 +2631,7 @@ exports[`AnalyticalTable test Asc desc 1`] = ` @@ -2640,7 +2640,7 @@ exports[`AnalyticalTable test Asc desc 1`] = ` @@ -2695,7 +2695,7 @@ exports[`AnalyticalTable test Asc desc 1`] = ` @@ -2704,7 +2704,7 @@ exports[`AnalyticalTable test Asc desc 1`] = ` @@ -2959,7 +2959,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` @@ -2968,7 +2968,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` @@ -3022,7 +3022,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` @@ -3031,7 +3031,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` @@ -3085,7 +3085,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` @@ -3094,7 +3094,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` @@ -3149,7 +3149,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` @@ -3158,7 +3158,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx index fec9470ebc2..36624fa5af4 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx @@ -48,7 +48,7 @@ export const Expandable = (props) => { {columnIndex === 0 && row.canExpand ? ( diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx index 7464dcb5c7b..219c8df51d4 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Grouped.tsx @@ -21,7 +21,7 @@ export const Grouped = (props) => { <> diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx index 8a66fb8a7fd..3337f0dfcdc 100644 --- a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx +++ b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx @@ -1,5 +1,5 @@ -import '@ui5/webcomponents/dist/icons/navigation-down-arrow'; -import '@ui5/webcomponents/dist/icons/navigation-right-arrow'; +import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow'; +import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow'; import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import { FixedSizeList } from 'react-window'; import { DEFAULT_COLUMN_WIDTH } from '../defaults/Column'; diff --git a/packages/main/src/components/Avatar/demo.stories.tsx b/packages/main/src/components/Avatar/demo.stories.tsx index 1c997a68eff..8b422ec4d04 100644 --- a/packages/main/src/components/Avatar/demo.stories.tsx +++ b/packages/main/src/components/Avatar/demo.stories.tsx @@ -4,7 +4,7 @@ import { Avatar } from '@ui5/webcomponents-react/lib/Avatar'; import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape'; import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize'; import { Icon } from '@ui5/webcomponents-react/lib/Icon'; -import '@ui5/webcomponents/dist/icons/employee'; +import '@ui5/webcomponents-icons/dist/icons/employee'; import React from 'react'; import notes from './Avatar.md'; @@ -33,7 +33,7 @@ export const withIcon = () => ( customFontSize={text('customFontSize', '1.125rem')} onClick={action('onClick')} > - + ); withIcon.story = { diff --git a/packages/main/src/components/Carousel/CarouselPagination.tsx b/packages/main/src/components/Carousel/CarouselPagination.tsx index f160325041c..c42f8e1a4da 100644 --- a/packages/main/src/components/Carousel/CarouselPagination.tsx +++ b/packages/main/src/components/Carousel/CarouselPagination.tsx @@ -3,8 +3,8 @@ import { CarouselArrowsPlacement } from '@ui5/webcomponents-react/lib/CarouselAr import { Icon } from '@ui5/webcomponents-react/lib/Icon'; import { Label } from '@ui5/webcomponents-react/lib/Label'; import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType'; -import '@ui5/webcomponents/dist/icons/slim-arrow-left'; -import '@ui5/webcomponents/dist/icons/slim-arrow-right'; +import '@ui5/webcomponents-icons/dist/icons/slim-arrow-left'; +import '@ui5/webcomponents-icons/dist/icons/slim-arrow-right'; import React, { Children, FC, useMemo } from 'react'; import { createUseStyles } from 'react-jss'; import { JSSTheme } from '../../interfaces/JSSTheme'; @@ -66,10 +66,10 @@ const CarouselPagination: FC = (props) => { return (
- +
- +
); @@ -89,7 +89,7 @@ const CarouselPagination: FC = (props) => { return (
- +
@@ -109,7 +109,7 @@ const CarouselPagination: FC = (props) => {
- +
); diff --git a/packages/main/src/components/Carousel/__snapshots__/Carousel.test.tsx.snap b/packages/main/src/components/Carousel/__snapshots__/Carousel.test.tsx.snap index 60172137508..9edd843e946 100644 --- a/packages/main/src/components/Carousel/__snapshots__/Carousel.test.tsx.snap +++ b/packages/main/src/components/Carousel/__snapshots__/Carousel.test.tsx.snap @@ -92,7 +92,7 @@ exports[`Carousel CarouselArrowsPlacement: Content 1`] = ` >
@@ -246,7 +246,7 @@ exports[`Carousel CarouselArrowsPlacement: PageIndicator 1`] = ` >
@@ -324,7 +324,7 @@ exports[`Carousel Page Indicator Placement: Top 1`] = ` >
@@ -478,7 +478,7 @@ exports[`Carousel Page Indicator Placement: Top 2`] = ` >
@@ -709,7 +709,7 @@ exports[`Carousel Renders without crashing 1`] = ` >
@@ -893,7 +893,7 @@ exports[`Carousel Should render a text indicator 1`] = ` >
@@ -1011,7 +1011,7 @@ exports[`Carousel Update activePage via prop 1`] = ` >
diff --git a/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap b/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap index ea60becb078..af78ec1d720 100644 --- a/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap +++ b/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap @@ -22,7 +22,7 @@ exports[`FilterBar Hide Filter Bar 1`] = ` @@ -186,7 +186,7 @@ exports[`FilterBar Render without crashing 1`] = ` @@ -339,7 +339,7 @@ exports[`FilterBar Select Filter Item 1`] = ` diff --git a/packages/main/src/components/Grid/index.tsx b/packages/main/src/components/Grid/index.tsx index f38129387b1..3f1a0d6ed26 100644 --- a/packages/main/src/components/Grid/index.tsx +++ b/packages/main/src/components/Grid/index.tsx @@ -92,7 +92,7 @@ const getIndentFromString = (indent) => { : [undefined, 0, 0, 0, 0][currentSpan]; }; -const useStyles = createUseStyles>(styles, { name: 'Grid' }); +const useStyles = createUseStyles(styles, { name: 'Grid' }); const Grid: FC = forwardRef((props: GridPropTypes, ref: Ref) => { const { diff --git a/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap b/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap index 15281cd07d7..16868b513ee 100644 --- a/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap +++ b/packages/main/src/components/MessageBox/__snapshots__/MessageBox.test.tsx.snap @@ -16,7 +16,7 @@ exports[`MessageBox Confirm - Cancel 1`] = ` > ; + return ; case MessageBoxTypes.ERROR: - return ; + return ; case MessageBoxTypes.INFORMATION: - return ; + return ; case MessageBoxTypes.SUCCESS: - return ; + return ; case MessageBoxTypes.WARNING: - return ; + return ; case MessageBoxTypes.HIGHLIGHT: - return ; + return ; } return null; diff --git a/packages/main/src/components/MessageToast/index.tsx b/packages/main/src/components/MessageToast/index.tsx index c8648589a63..f91632d15f4 100644 --- a/packages/main/src/components/MessageToast/index.tsx +++ b/packages/main/src/components/MessageToast/index.tsx @@ -8,9 +8,9 @@ import 'react-toastify/dist/ReactToastify.min.css'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; import styles from './MessageToast.jss'; -import '@ui5/webcomponents/dist/icons/message-error'; -import '@ui5/webcomponents/dist/icons/message-warning'; -import '@ui5/webcomponents/dist/icons/sys-enter'; +import '@ui5/webcomponents-icons/dist/icons/message-error'; +import '@ui5/webcomponents-icons/dist/icons/message-warning'; +import '@ui5/webcomponents-icons/dist/icons/sys-enter'; const coloredStyles = ({ parameters }: JSSTheme) => ({ base: { @@ -34,9 +34,9 @@ const useIconStyles = createUseStyles { +const ColoredIcon = ({ name, state }) => { const classes = useIconStyles(); - return ; + return ; }; const useMessageToastStyles = createUseStyles>(styles, { @@ -78,7 +78,7 @@ MessageToast.show = (text, options: CommonProps = {}) => { MessageToast.error = (text, options: CommonProps = {}) => { const toastContent = (
- + {text}
); @@ -89,7 +89,7 @@ MessageToast.error = (text, options: CommonProps = {}) => { MessageToast.success = (text, options: CommonProps = {}) => { const toastContent = (
- + {text}
); @@ -100,7 +100,7 @@ MessageToast.success = (text, options: CommonProps = {}) => { MessageToast.warning = (text, options: CommonProps = {}) => { const toastContent = (
- + {text}
); diff --git a/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap b/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap index e9c33899561..94387dcbc58 100644 --- a/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap +++ b/packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap @@ -240,7 +240,7 @@ exports[`Notification w/ Props 1`] = ` >
= forwardRef( } switch (prio) { case Priority.High: - return ; + return ; case Priority.Medium: - return ; + return ; case Priority.Low: - return ; + return ; case Priority.None: return null; default: diff --git a/packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap b/packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap index d64a5322725..fb48950a949 100644 --- a/packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap +++ b/packages/main/src/components/NotificationGroup/__snapshots__/NotificationGroup.test.tsx.snap @@ -174,7 +174,7 @@ Array [ >
({ } }, stickied: {}, - image: { - height: '0', - width: '0', - opacity: '0', - display: 'inline-block', - verticalAlign: 'middle' - }, headerContent: { paddingTop: '1.5rem', paddingBottom: '0.25rem', diff --git a/packages/main/src/components/ObjectPage/ObjectPage.test.tsx b/packages/main/src/components/ObjectPage/ObjectPage.test.tsx index a952c4023b8..906846c54d5 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.test.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPage.test.tsx @@ -94,14 +94,14 @@ describe('ObjectPage', () => { }); test('Just Some Sections', () => { - const wrapper = renderThemedComponent( + const wrapper = mountThemedComponent( Test Test 2 ); - expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.render()).toMatchSnapshot(); }); test('Not crashing with 1 section - Default Mode', () => { diff --git a/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx b/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx index 9fb387ad1ca..5552cbe78d9 100644 --- a/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx @@ -88,8 +88,7 @@ export const ObjectPageAnchorButton: FC = (props) => const navigationIcon = (
@@ -158,7 +158,7 @@ exports[`ObjectPage IconTabBar Mode 1`] = ` > @@ -209,7 +209,7 @@ exports[`ObjectPage IconTabBar Mode 1`] = ` > @@ -291,7 +291,126 @@ exports[`ObjectPage IconTabBar Mode 1`] = ` `; -exports[`ObjectPage Just Some Sections 1`] = `"

    • Test
    "`; +exports[`ObjectPage Just Some Sections 1`] = ` +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + Test +
    +
    +
    +
    +
    +
    +
    +
    +
    +`; exports[`ObjectPage No Header 1`] = `
    @@ -1290,7 +1409,7 @@ exports[`ObjectPage With Subsections 1`] = ` >
    @@ -1356,7 +1475,7 @@ exports[`ObjectPage With Subsections 1`] = ` >
    diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index b910d40a5d9..ac0efe32747 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -28,9 +28,9 @@ import { CollapsedAvatar } from './CollapsedAvatar'; import { IScroller, ObjectPageScroller } from './scroll/ObjectPageScroller'; import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize'; import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; -import '@ui5/webcomponents/dist/icons/navigation-up-arrow.js'; +import '@ui5/webcomponents-icons/dist/icons/navigation-up-arrow.js'; import { getScrollBarWidth } from '@ui5/webcomponents-react-base/lib/Utils'; -import '@ui5/webcomponents/dist/icons/navigation-down-arrow.js'; +import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow.js'; import { ObjectPageSubSectionPropTypes } from '../ObjectPageSubSection'; export interface ObjectPagePropTypes extends CommonProps { @@ -108,7 +108,7 @@ const ObjectPage: FC = forwardRef((props: ObjectPagePropTyp const hideHeaderButtonPressed = useRef(false); const stableContentOnScrollRef = useRef(null); const stableBarOnScrollRef = useRef(null); - const scroller = useConsolidatedRef(scrollerRef); + const scroller = useConsolidatedRef(scrollerRef); const [scrollbarWidth, setScrollbarWidth] = useState(defaultScrollbarWidth); const classes = useStyles(); @@ -171,6 +171,7 @@ const ObjectPage: FC = forwardRef((props: ObjectPagePropTyp }); }; + // @ts-ignore const observer = useRef(new ResizeObserver(adjustDummyDivHeight)); const renderAnchorBar = () => { @@ -226,9 +227,7 @@ const ObjectPage: FC = forwardRef((props: ObjectPagePropTyp left: 'calc(50% - 1rem)' } as any } - icon={ - !collapsedHeader || expandHeaderActive ? 'sap-icon://navigation-up-arrow' : 'sap-icon://navigation-down-arrow' - } + icon={!collapsedHeader || expandHeaderActive ? 'navigation-up-arrow' : 'navigation-down-arrow'} onClick={changeHeader} /> ); diff --git a/packages/main/src/components/ObjectStatus/__snapshots__/ObjectStatus.test.tsx.snap b/packages/main/src/components/ObjectStatus/__snapshots__/ObjectStatus.test.tsx.snap index c636bceda72..d50f38964f6 100644 --- a/packages/main/src/components/ObjectStatus/__snapshots__/ObjectStatus.test.tsx.snap +++ b/packages/main/src/components/ObjectStatus/__snapshots__/ObjectStatus.test.tsx.snap @@ -9,7 +9,7 @@ exports[`ObjectStatus ObjectStatus: state: Error 1`] = ` >
    @@ -25,7 +25,7 @@ exports[`ObjectStatus ObjectStatus: state: Information 1`] = ` >
    @@ -41,7 +41,7 @@ exports[`ObjectStatus ObjectStatus: state: None 1`] = ` > @@ -57,7 +57,7 @@ exports[`ObjectStatus ObjectStatus: state: Success 1`] = ` > @@ -73,7 +73,7 @@ exports[`ObjectStatus ObjectStatus: state: Warning 1`] = ` > @@ -89,7 +89,7 @@ exports[`ObjectStatus Render without Crashing 1`] = ` > @@ -110,7 +110,7 @@ exports[`ObjectStatus Text Deprecation 1`] = ` > diff --git a/packages/main/src/components/ObjectStatus/demo.stories.tsx b/packages/main/src/components/ObjectStatus/demo.stories.tsx index 4b48e578ea7..ded08400c05 100644 --- a/packages/main/src/components/ObjectStatus/demo.stories.tsx +++ b/packages/main/src/components/ObjectStatus/demo.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { Icon } from '@ui5/webcomponents-react/lib/Icon'; import { ObjectStatus } from '@ui5/webcomponents-react/lib/ObjectStatus'; import { ValueState } from '@ui5/webcomponents-react/lib/ValueState'; -import '@ui5/webcomponents/dist/icons/sys-cancel'; +import '@ui5/webcomponents-icons/dist/icons/sys-cancel'; import notes from './ObjectStatus.md'; export const onlyText = () => ( @@ -14,7 +14,7 @@ onlyText.story = { }; export const withIcon = () => ( - }> + }> Object Status ); @@ -35,7 +35,7 @@ withDefaultIcon.story = { }; export const withIconOnly = () => ( - } state={select('state', ValueState, ValueState.Success)} /> + } state={select('state', ValueState, ValueState.Success)} /> ); withIconOnly.story = { name: 'with Icon only' diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx index eb86ae3e254..f6e19e8eb74 100644 --- a/packages/main/src/components/ObjectStatus/index.tsx +++ b/packages/main/src/components/ObjectStatus/index.tsx @@ -6,11 +6,11 @@ import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; import styles from './ObjectStatus.jss'; -import '@ui5/webcomponents/dist/icons/status-negative'; -import '@ui5/webcomponents/dist/icons/status-positive'; -import '@ui5/webcomponents/dist/icons/status-critical'; -import '@ui5/webcomponents/dist/icons/status-inactive'; -import '@ui5/webcomponents/dist/icons/hint'; +import '@ui5/webcomponents-icons/dist/icons/status-negative'; +import '@ui5/webcomponents-icons/dist/icons/status-positive'; +import '@ui5/webcomponents-icons/dist/icons/status-critical'; +import '@ui5/webcomponents-icons/dist/icons/status-inactive'; +import '@ui5/webcomponents-icons/dist/icons/hint'; export interface ObjectStatusPropTypes extends CommonProps { children?: string | number | ReactNode; @@ -26,15 +26,15 @@ const defaultIconStyle = { const getDefaultIcon = (state) => { switch (state) { case ValueState.Error: - return ; + return ; case ValueState.Success: - return ; + return ; case ValueState.Warning: - return ; + return ; case ValueState.Information: - return ; + return ; default: - return ; + return ; } }; diff --git a/packages/main/src/components/Page/index.tsx b/packages/main/src/components/Page/index.tsx index 6b9052af869..c774ff4235e 100644 --- a/packages/main/src/components/Page/index.tsx +++ b/packages/main/src/components/Page/index.tsx @@ -12,7 +12,7 @@ import { Title } from '@ui5/webcomponents-react/lib/Title'; import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel'; import { BarPropTypes } from '../Bar'; import styles from './Page.jss'; -import '@ui5/webcomponents/dist/icons/navigation-left-arrow'; +import '@ui5/webcomponents-icons/dist/icons/navigation-left-arrow'; export interface PagePropTypes extends CommonProps { title?: string; diff --git a/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts b/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts index fb2ab4e6ba2..fa9e52fdb53 100644 --- a/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts +++ b/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts @@ -56,19 +56,19 @@ const styles = ({ parameters }: JSSTheme) => { progressBarTextColorHigh: { color: parameters.sapUiContentContrastTextColor }, - [`state${ValueState.None}`]: { + stateNone: { backgroundColor: parameters.sapUiNeutralElement }, - [`state${ValueState.Success}`]: { + stateSuccess: { backgroundColor: parameters.sapUiPositiveElement }, - [`state${ValueState.Warning}`]: { + stateWarning: { backgroundColor: parameters.sapUiCriticalElement }, - [`state${ValueState.Error}`]: { + stateError: { backgroundColor: parameters.sapUiNegativeElement }, - [`state${ValueState.Information}`]: { + stateInformation: { backgroundColor: parameters.sapUiInformativeElement } }; diff --git a/packages/main/src/components/SegmentedButton/demo.stories.tsx b/packages/main/src/components/SegmentedButton/demo.stories.tsx index 91b8a6bec1d..6c712012eac 100644 --- a/packages/main/src/components/SegmentedButton/demo.stories.tsx +++ b/packages/main/src/components/SegmentedButton/demo.stories.tsx @@ -13,8 +13,8 @@ export const renderStory = () => { onItemSelected={action('onItemSelected')} selectedKey={number('SelectedKey', 1)} > - } /> - }> + } /> + }> Button 2 diff --git a/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.test.tsx b/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.test.tsx index faf97c6b0e9..8c20ee7bde4 100644 --- a/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.test.tsx +++ b/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.test.tsx @@ -7,7 +7,7 @@ import { SegmentedButtonItem } from '@ui5/webcomponents-react/lib/SegmentedButto describe('SegmentedButtonItem', () => { test('Basic SegmentedButtonItem', () => { const wrapper = mountThemedComponent( - }> + }> My Item ); @@ -17,7 +17,7 @@ describe('SegmentedButtonItem', () => { test('Selected SegmentedButtonItem', () => { const wrapper = mountThemedComponent( // @ts-ignore - } selected> + } selected> My Item ); @@ -25,14 +25,14 @@ describe('SegmentedButtonItem', () => { }); test('SegmentedButtonItem Icon Only', () => { - const wrapper = mountThemedComponent(} />); + const wrapper = mountThemedComponent(} />); expect(wrapper.render()).toMatchSnapshot(); }); test('SegmentedButtonItem Disabled', () => { const callback = sinon.spy(); const wrapper = mountThemedComponent( - } disabled onClick={callback} /> + } disabled onClick={callback} /> ); wrapper.simulate('click'); expect(wrapper.render()).toMatchSnapshot(); @@ -41,7 +41,7 @@ describe('SegmentedButtonItem', () => { test('SegmentedButtonItem onClick', () => { const callback = sinon.spy(); - const wrapper = mountThemedComponent(} onClick={callback} />); + const wrapper = mountThemedComponent(} onClick={callback} />); wrapper.simulate('click'); expect(wrapper.render()).toMatchSnapshot(); expect(getEventFromCallback(callback).getParameter('selectedKey')).toEqual(1); diff --git a/packages/main/src/components/SegmentedButtonItem/__snapshots__/SegmentedButtonItem.test.tsx.snap b/packages/main/src/components/SegmentedButtonItem/__snapshots__/SegmentedButtonItem.test.tsx.snap index 713cffd0762..54473e645f2 100644 --- a/packages/main/src/components/SegmentedButtonItem/__snapshots__/SegmentedButtonItem.test.tsx.snap +++ b/packages/main/src/components/SegmentedButtonItem/__snapshots__/SegmentedButtonItem.test.tsx.snap @@ -10,7 +10,7 @@ exports[`SegmentedButtonItem Basic SegmentedButtonItem 1`] = ` > My Item @@ -27,7 +27,7 @@ exports[`SegmentedButtonItem SegmentedButtonItem Disabled 1`] = ` > @@ -43,7 +43,7 @@ exports[`SegmentedButtonItem SegmentedButtonItem Icon Only 1`] = ` > @@ -59,7 +59,7 @@ exports[`SegmentedButtonItem SegmentedButtonItem onClick 1`] = ` > @@ -75,7 +75,7 @@ exports[`SegmentedButtonItem Selected SegmentedButtonItem 1`] = ` > My Item diff --git a/packages/main/src/components/SideNavigation/SideNavigation.test.tsx b/packages/main/src/components/SideNavigation/SideNavigation.test.tsx index d1a0baa0e46..d1d25e83bac 100644 --- a/packages/main/src/components/SideNavigation/SideNavigation.test.tsx +++ b/packages/main/src/components/SideNavigation/SideNavigation.test.tsx @@ -11,19 +11,19 @@ describe('SideNavigation', () => { openState={SideNavigationOpenState.Expandend} selectedId={'sales-leads'} footerItems={[ - , - + , + ]} > - - - - - - - + + + + + + + - + ); expect(wrapper.render()).toMatchSnapshot(); @@ -36,19 +36,19 @@ describe('SideNavigation', () => { selectedId={'sales-leads'} noIcons footerItems={[ - , - + , + ]} > - - - - - - - + + + + + + + - + ); expect(wrapper.render()).toMatchSnapshot(); @@ -60,19 +60,19 @@ describe('SideNavigation', () => { openState={SideNavigationOpenState.Condensed} selectedId={'sales-leads'} footerItems={[ - , - + , + ]} > - - - - - - - + + + + + + + - + ); expect(wrapper.render()).toMatchSnapshot(); @@ -83,19 +83,19 @@ describe('SideNavigation', () => { openState={SideNavigationOpenState.Collapsed} selectedId={'sales-leads'} footerItems={[ - , - + , + ]} > - - - - - - - + + + + + + + - + ); expect(wrapper.render()).toMatchSnapshot(); diff --git a/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap b/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap index 0efc0ee4507..d081a5fbb29 100644 --- a/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap +++ b/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap @@ -20,7 +20,7 @@ exports[`SideNavigation Collapsed 1`] = ` >
    @@ -96,7 +96,7 @@ exports[`SideNavigation Collapsed 1`] = ` > @@ -134,7 +134,7 @@ exports[`SideNavigation Condensed 1`] = ` >
    @@ -210,7 +210,7 @@ exports[`SideNavigation Condensed 1`] = ` > @@ -249,7 +249,7 @@ exports[`SideNavigation Expanded 1`] = ` > @@ -370,7 +370,7 @@ exports[`SideNavigation Expanded 1`] = ` > diff --git a/packages/main/src/components/SideNavigation/demo.stories.tsx b/packages/main/src/components/SideNavigation/demo.stories.tsx index da3554e104a..1d96adae931 100644 --- a/packages/main/src/components/SideNavigation/demo.stories.tsx +++ b/packages/main/src/components/SideNavigation/demo.stories.tsx @@ -4,13 +4,13 @@ import { SideNavigation } from '@ui5/webcomponents-react/lib/SideNavigation'; import { SideNavigationListItem } from '@ui5/webcomponents-react/lib/SideNavigationListItem'; import { SideNavigationOpenState } from '@ui5/webcomponents-react/lib/SideNavigationOpenState'; import React from 'react'; -import '@ui5/webcomponents/dist/icons/compare'; -import '@ui5/webcomponents/dist/icons/chain-link'; -import '@ui5/webcomponents/dist/icons/home'; -import '@ui5/webcomponents/dist/icons/calendar'; -import '@ui5/webcomponents/dist/icons/employee'; -import '@ui5/webcomponents/dist/icons/lead'; -import '@ui5/webcomponents/dist/icons/add-product'; +import '@ui5/webcomponents-icons/dist/icons/compare'; +import '@ui5/webcomponents-icons/dist/icons/chain-link'; +import '@ui5/webcomponents-icons/dist/icons/home'; +import '@ui5/webcomponents-icons/dist/icons/calendar'; +import '@ui5/webcomponents-icons/dist/icons/employee'; +import '@ui5/webcomponents-icons/dist/icons/lead'; +import '@ui5/webcomponents-icons/dist/icons/add-product'; import notes from './SideNavigation.md'; export const defaultStory = () => ( @@ -21,24 +21,24 @@ export const defaultStory = () => ( noIcons={boolean('noIcons', false)} style={{ height: '900px' }} footerItems={[ - , - + , + ]} > - - - - + + + + - - + + - + ); diff --git a/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.test.tsx b/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.test.tsx index e6d51db3096..0b130c362e6 100644 --- a/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.test.tsx +++ b/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.test.tsx @@ -5,7 +5,7 @@ import React from 'react'; describe('SideNavigationListItem', () => { test('Basic', () => { - const wrapper = mountThemedComponent(); + const wrapper = mountThemedComponent(); expect(wrapper.render()).toMatchSnapshot(); }); @@ -13,7 +13,7 @@ describe('SideNavigationListItem', () => { const wrapper = mountThemedComponent( { }); test('compact size', () => { - const wrapper = mountThemedComponent(, { + const wrapper = mountThemedComponent(, { contentDensity: ContentDensity.Compact }); expect(wrapper.render()).toMatchSnapshot(); diff --git a/packages/main/src/components/SideNavigationListItem/__snapshots__/SideNavigationListItem.test.tsx.snap b/packages/main/src/components/SideNavigationListItem/__snapshots__/SideNavigationListItem.test.tsx.snap index 1b7f6f19aba..44413f8cfdb 100644 --- a/packages/main/src/components/SideNavigationListItem/__snapshots__/SideNavigationListItem.test.tsx.snap +++ b/packages/main/src/components/SideNavigationListItem/__snapshots__/SideNavigationListItem.test.tsx.snap @@ -9,7 +9,7 @@ exports[`SideNavigationListItem Basic 1`] = ` > `; @@ -23,7 +23,7 @@ exports[`SideNavigationListItem compact size 1`] = ` > `; @@ -38,7 +38,7 @@ exports[`SideNavigationListItem custom class name and style 1`] = ` > `; diff --git a/packages/main/src/components/SideNavigationListItem/index.tsx b/packages/main/src/components/SideNavigationListItem/index.tsx index b638425b41e..88867311000 100644 --- a/packages/main/src/components/SideNavigationListItem/index.tsx +++ b/packages/main/src/components/SideNavigationListItem/index.tsx @@ -8,8 +8,8 @@ import { PopoverVerticalAlign } from '@ui5/webcomponents-react/lib/PopoverVertic import { SideNavigationOpenState } from '@ui5/webcomponents-react/lib/SideNavigationOpenState'; import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem'; import { Text } from '@ui5/webcomponents-react/lib/Text'; -import '@ui5/webcomponents/dist/icons/navigation-down-arrow.js'; -import '@ui5/webcomponents/dist/icons/navigation-right-arrow.js'; +import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow.js'; +import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow.js'; import React, { Children, cloneElement, @@ -108,7 +108,7 @@ const SideNavigationListItem: FC = forwardRef( const popoverRef = useRef(); const displayedIcon = useMemo(() => { - return ; + return ; }, [classes.icon, icon]); const handleOpenPopover = useCallback( @@ -128,7 +128,7 @@ const SideNavigationListItem: FC = forwardRef( {text} {childCount > 0 && ( - + )} diff --git a/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap b/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap index 2602becaaae..87c881cbb87 100644 --- a/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap +++ b/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap @@ -17,7 +17,7 @@ Array [
    , diff --git a/packages/main/src/components/VariantManagement/index.tsx b/packages/main/src/components/VariantManagement/index.tsx index 03cc16abe0c..a2b21452c94 100644 --- a/packages/main/src/components/VariantManagement/index.tsx +++ b/packages/main/src/components/VariantManagement/index.tsx @@ -9,7 +9,7 @@ import { Popover } from '@ui5/webcomponents-react/lib/Popover'; import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem'; import { Title } from '@ui5/webcomponents-react/lib/Title'; import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel'; -import '@ui5/webcomponents/dist/icons/navigation-down-arrow'; +import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow'; import React, { FC, forwardRef, Ref, useCallback, useEffect, useMemo, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; @@ -129,7 +129,7 @@ const VariantManagement: FC = forwardRef( {selectedItem.label} -