From bfb3881c4126a92e3fe1f0327dca70a47c99c39a Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Sun, 21 Apr 2024 19:46:20 +0200 Subject: [PATCH 01/13] feat(core): replace with ix-icons v3 --- BREAKING_CHANGES.md | 48 +++++++++++++++ packages/angular-test-app/angular.json | 10 +++- .../src/app/app.component.html | 1 + packages/core/component-doc.json | 13 ++--- packages/core/package.json | 2 +- packages/core/playwright-ct.config.ts | 4 ++ packages/core/scripts/e2e/load-e2e-runtime.js | 19 +++--- packages/core/src/components.d.ts | 8 +-- .../application-header/application-header.tsx | 7 ++- .../application-switch-modal.tsx | 3 +- packages/core/src/components/blind/blind.tsx | 3 +- .../breadcrumb-item/breadcrumb-item.tsx | 3 +- .../card-accordion/card-accordion.tsx | 3 +- .../src/components/card-list/card-list.tsx | 5 +- .../category-filter/category-filter.tsx | 7 ++- packages/core/src/components/chip/chip.tsx | 3 +- .../content-header/content-header.tsx | 3 +- .../components/date-picker/date-picker.tsx | 13 +++-- .../core/src/components/drawer/drawer.tsx | 3 +- .../dropdown-button/dropdown-button.tsx | 3 +- .../dropdown-item/dropdown-item.tsx | 8 ++- .../components/dropdown/test/dropdown.ct.ts | 2 +- .../event-list-item/event-list-item.tsx | 3 +- .../expanding-search/expanding-search.tsx | 7 ++- .../components/filter-chip/filter-chip.tsx | 3 +- .../src/components/flip-tile/flip-tile.tsx | 3 +- .../components/group/group-context-menu.tsx | 3 +- packages/core/src/components/group/group.tsx | 6 +- packages/core/src/components/kpi/kpi.tsx | 5 +- .../components/link-button/link-button.tsx | 3 +- .../map-navigation-overlay.tsx | 3 +- .../map-navigation/map-navigation.tsx | 3 +- .../menu-about-news/menu-about-news.tsx | 5 +- .../menu-category/menu-category.tsx | 3 +- .../src/components/menu-item/menu-item.tsx | 5 +- .../src/components/menu/menu-expand-icon.tsx | 12 ++-- packages/core/src/components/menu/menu.tsx | 3 +- .../core/src/components/menu/test/menu.ct.ts | 18 ++---- .../components/message-bar/message-bar.tsx | 16 +++-- .../components/modal-header/modal-header.tsx | 3 +- .../src/components/modal/test/modal.ct.ts | 6 +- .../src/components/pagination/pagination.tsx | 8 ++- packages/core/src/components/pane/pane.tsx | 33 ++++++----- packages/core/src/components/pill/pill.tsx | 2 +- .../components/playground/example-modal.tsx | 3 +- .../src/components/playground/playground.tsx | 1 - .../src/components/push-card/push-card.tsx | 2 +- .../core/src/components/select/select.tsx | 5 +- .../components/split-button/split-button.tsx | 7 ++- packages/core/src/components/tabs/tabs.tsx | 8 ++- .../components/time-picker/time-picker.tsx | 9 +-- packages/core/src/components/toast/toast.tsx | 17 ++++-- .../src/components/tree-item/tree-item.tsx | 3 +- .../core/src/components/upload/upload.tsx | 5 +- .../utils/menu-tabs/menu-tabs-fc.tsx | 3 +- .../workflow-step/workflow-step.tsx | 28 +++++---- packages/core/src/index.html | 58 ++++++++++--------- packages/core/src/setup.ts | 16 +---- packages/core/src/tests/utils/test/page.ts | 19 ++++-- packages/core/stencil.config.ts | 28 +++++++-- packages/core/tsconfig.json | 2 +- .../src/components/Guideline.tsx | 9 ++- 62 files changed, 357 insertions(+), 190 deletions(-) diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index 1a5acd37888..866aad84ebe 100644 --- a/BREAKING_CHANGES.md +++ b/BREAKING_CHANGES.md @@ -1,5 +1,53 @@ # Breaking Changes +## v3.0.0 + +### Remove package from from library `@siemens/ix-icon` + +One major change is the removal of the package from the library `@siemens/ix-icon`. This change allows for more individual icons to be used in your applications. Please refer to the installation instructions for details on how to include the new icons. + +TODO: Link to installation instruction + +#### Usage of icons inside `@siemens/ix-react` and `@siemens/ix-vue` changed + +TODO: Rewrite this section + +Import the icon you want +```tsx +import { iconStar } from '@siemens/ix-icons/icons'; +``` + +React/Vue: +```tsx + +``` + +#### Installation instruction of `@siemens/ix-angular` changed + +TODO: Rewrite this section + +Configuration +```json +{ + "glob": "**/*.svg", + "input": "node_modules/@siemens/ix-icons/dist/svg", + "output": "./svg" +} +``` + +Add to assets property inside the `angular.json` file +```json +"assets": [ + "src/favicon.ico", + "src/assets", + { + "glob": "**/*.svg", + "input": "node_modules/@siemens/ix-icons/dist/svg", + "output": "./svg" + } +], +``` + ## v2.0.0 ### `input[class="form-control"]` and `textarea[class="form-control"]` are deprecated diff --git a/packages/angular-test-app/angular.json b/packages/angular-test-app/angular.json index ea051ff35d3..60f8dbf7bb3 100644 --- a/packages/angular-test-app/angular.json +++ b/packages/angular-test-app/angular.json @@ -46,7 +46,15 @@ "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], + "assets": [ + "src/favicon.ico", + "src/assets", + { + "glob": "**/*.svg", + "input": "node_modules/@siemens/ix-icons/dist/svg", + "output": "./svg" + } + ], "styles": ["src/styles.scss"], "scripts": [] }, diff --git a/packages/angular-test-app/src/app/app.component.html b/packages/angular-test-app/src/app/app.component.html index f87755a3a8c..28d71c757bf 100644 --- a/packages/angular-test-app/src/app/app.component.html +++ b/packages/angular-test-app/src/app/app.component.html @@ -4,4 +4,5 @@ SPDX-License-Identifier: MIT --> + diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index e2e4dc462a3..1d0caf3850c 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -2181,7 +2181,6 @@ "reflectToAttr": false, "docs": "The icon next to the actual text input\nDefaults to 'search'", "docsTags": [], - "default": "'search'", "values": [ { "type": "string" @@ -6436,7 +6435,6 @@ "reflectToAttr": false, "docs": "Search icon", "docsTags": [], - "default": "'search'", "values": [ { "type": "string" @@ -12397,7 +12395,7 @@ "name": "icon", "type": "string", "complexType": { - "original": "string | undefined", + "original": "string", "resolved": "string", "references": {} }, @@ -12411,7 +12409,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -12603,7 +12601,7 @@ "name": "icon", "type": "string", "complexType": { - "original": "string | undefined", + "original": "string", "resolved": "string", "references": {} }, @@ -12612,13 +12610,12 @@ "reflectToAttr": false, "docs": "Card icon", "docsTags": [], - "default": "undefined", "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -13833,7 +13830,6 @@ "reflectToAttr": false, "docs": "Button icon", "docsTags": [], - "default": "''", "values": [ { "type": "string" @@ -13955,7 +13951,6 @@ "reflectToAttr": false, "docs": "Icon of the button on the right", "docsTags": [], - "default": "'context-menu'", "values": [ { "type": "string" diff --git a/packages/core/package.json b/packages/core/package.json index 367557f1c39..f943b5351d4 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -37,7 +37,7 @@ "test:spec": "stencil test --spec", "test:ct": "playwright test --config playwright-ct.config.ts --reporter list", "visual-regression": "playwright test", - "host-root": "http-server ./ -a 127.0.0.1 -p 8080 -c-1", + "host-root": "http-server -a 127.0.0.1 -p 8080 -c-1", "generate": "stencil generate", "pkg": "pnpm pack" }, diff --git a/packages/core/playwright-ct.config.ts b/packages/core/playwright-ct.config.ts index 755d907210e..353c195b51f 100644 --- a/packages/core/playwright-ct.config.ts +++ b/packages/core/playwright-ct.config.ts @@ -28,6 +28,10 @@ const config: PlaywrightTestConfig = { }, }, ], + webServer: { + command: 'pnpm run host-root -- ./www', + port: 8080, + }, }; export default config; diff --git a/packages/core/scripts/e2e/load-e2e-runtime.js b/packages/core/scripts/e2e/load-e2e-runtime.js index e60ca8e4404..7e13e2fbc55 100644 --- a/packages/core/scripts/e2e/load-e2e-runtime.js +++ b/packages/core/scripts/e2e/load-e2e-runtime.js @@ -54,12 +54,18 @@ function loadResources() { 'http://127.0.0.1:8080/www/build/ix-brand-theme/ix-brand-theme.js' ); - var ixIcons = document.createElement('link'); - ixIcons.setAttribute('rel', 'stylesheet'); - ixIcons.setAttribute( - 'href', - 'http://127.0.0.1:8080/www/build/ix-icons/css/ix-icons.css' - ); + var ixIcons = document.createElement('script'); + ixIcons.setAttribute('type', 'module'); + ixIcons.innerHTML = + 'import { defineCustomElements } from "/www/build/ix-icons/loader/index.es2017.js"; defineCustomElements();'; + + // + + var asset = document.createElement('meta'); + asset.setAttribute('name', 'ix-icons:path'); + asset.setAttribute('content', '/www/svg'); + + document.getElementsByTagName('head')[0].appendChild(asset); document.getElementsByTagName('head')[0].appendChild(bootstrapStyling); document.getElementsByTagName('head')[0].appendChild(ixEsm); @@ -72,7 +78,6 @@ function loadResources() { } function detectThemeSwitching() { - console.log(location.search); var searchParams = new URLSearchParams(location.search); if (searchParams.has('theme')) { var theme = searchParams.get('theme'); diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 1e94b0d5dc0..e896bf305d4 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -1775,7 +1775,7 @@ export namespace Components { /** * Show icon */ - "icon": string | undefined; + "icon"?: string; /** * Show pill as outline */ @@ -1814,7 +1814,7 @@ export namespace Components { /** * Card icon */ - "icon": string | undefined; + "icon"?: string; /** * Card KPI value */ @@ -5937,7 +5937,7 @@ declare namespace LocalJSX { /** * Show icon */ - "icon"?: string | undefined; + "icon"?: string; /** * Show pill as outline */ @@ -5976,7 +5976,7 @@ declare namespace LocalJSX { /** * Card icon */ - "icon"?: string | undefined; + "icon"?: string; /** * Card KPI value */ diff --git a/packages/core/src/components/application-header/application-header.tsx b/packages/core/src/components/application-header/application-header.tsx index b4f55454142..c2563ec5f0c 100644 --- a/packages/core/src/components/application-header/application-header.tsx +++ b/packages/core/src/components/application-header/application-header.tsx @@ -6,7 +6,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ - +import { iconApps, iconMoreMenu } from '@siemens/ix-icons/icons'; import { Component, Element, @@ -182,7 +182,7 @@ export class ApplicationHeader { this.suppressResponsive === false && ( this.showAppSwitch()} - icon="apps" + icon={iconApps} ghost class="app-switch" > @@ -200,7 +200,8 @@ export class ApplicationHeader { ['context-menu-visible']: this.hasSlottedElements, }} data-context-menu - icon="more-menu" + data-testid="show-more" + icon={iconMoreMenu} ghost > )} diff --git a/packages/core/src/components/blind/blind.tsx b/packages/core/src/components/blind/blind.tsx index eaf6de4790c..77e594a66f2 100644 --- a/packages/core/src/components/blind/blind.tsx +++ b/packages/core/src/components/blind/blind.tsx @@ -21,6 +21,7 @@ import { import anime from 'animejs'; import { CardVariant } from '../card/card'; import { a11yBoolean } from '../utils/a11y'; +import { iconChevronRightSmall } from '@siemens/ix-icons/icons'; export type BlindVariant = CardVariant | 'outline'; @@ -154,7 +155,7 @@ export class Blind {
{this.showChevron ? ( diff --git a/packages/core/src/components/card-accordion/card-accordion.tsx b/packages/core/src/components/card-accordion/card-accordion.tsx index bb356ee34c3..10af41be544 100644 --- a/packages/core/src/components/card-accordion/card-accordion.tsx +++ b/packages/core/src/components/card-accordion/card-accordion.tsx @@ -1,3 +1,4 @@ +import { iconChevronRightSmall } from '@siemens/ix-icons/icons'; import { Component, Element, @@ -95,7 +96,7 @@ export class CardAccordion { aria-controls={getAriaControlsId()} > diff --git a/packages/core/src/components/category-filter/category-filter.tsx b/packages/core/src/components/category-filter/category-filter.tsx index 4d4577dc260..e48edc3e773 100644 --- a/packages/core/src/components/category-filter/category-filter.tsx +++ b/packages/core/src/components/category-filter/category-filter.tsx @@ -22,6 +22,7 @@ import { BaseButton, BaseButtonProps } from '../button/base-button'; import { FilterState } from './filter-state'; import { InputState } from './input-state'; import { LogicalFilterOperator } from './logical-filter-operator'; +import { iconClear, iconSearch } from '@siemens/ix-icons/icons'; @Component({ tag: 'ix-category-filter', @@ -99,7 +100,7 @@ export class CategoryFilter { * The icon next to the actual text input * Defaults to 'search' */ - @Prop() icon = 'search'; + @Prop() icon: string; /** * Allows to hide the icon inside the text input. @@ -632,7 +633,7 @@ export class CategoryFilter { }} ghost oval - icon={'clear'} + icon={iconClear} size="16" > ); @@ -667,7 +668,7 @@ export class CategoryFilter {
diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx index 7f980542bec..09267b3f3a0 100644 --- a/packages/core/src/components/chip/chip.tsx +++ b/packages/core/src/components/chip/chip.tsx @@ -7,6 +7,7 @@ * LICENSE file in the root directory of this source tree. */ +import { iconCloseSmall } from '@siemens/ix-icons/icons'; import { Component, Element, @@ -93,7 +94,7 @@ export class Chip { this.backButtonClick.emit()} > diff --git a/packages/core/src/components/date-picker/date-picker.tsx b/packages/core/src/components/date-picker/date-picker.tsx index ce75264603d..c84b6caf69a 100644 --- a/packages/core/src/components/date-picker/date-picker.tsx +++ b/packages/core/src/components/date-picker/date-picker.tsx @@ -24,6 +24,11 @@ import { DateTimeCardCorners } from '../date-time-card/date-time-card'; import { DateTime, Info } from 'luxon'; import { OnListener } from '../utils/listener'; +import { + iconChevronLeft, + iconChevronRight, + iconSingleCheck, +} from '@siemens/ix-icons/icons'; export type DateChangeEvent = { from: string; @@ -662,7 +667,7 @@ export class DatePicker { hidden: this.tempYear !== year, arrowPosition: true, }} - name="chevron-right" + name={iconChevronRight} size="12" >
{`${year}`}
@@ -684,7 +689,7 @@ export class DatePicker { this.changeToAdjacentMonth(-1)} ghost - icon="chevron-left" + icon={iconChevronLeft} variant="primary" class="arrows" > @@ -737,7 +742,7 @@ export class DatePicker { this.tempMonth !== index, checkPosition: true, }} - name="single-check" + name={iconSingleCheck} size="16" >
@@ -752,7 +757,7 @@ export class DatePicker { this.changeToAdjacentMonth(1)} ghost - icon="chevron-right" + icon={iconChevronRight} variant="primary" class="arrows" > diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx index d5941bd4a6a..d6383ac6f0d 100644 --- a/packages/core/src/components/drawer/drawer.tsx +++ b/packages/core/src/components/drawer/drawer.tsx @@ -7,6 +7,7 @@ * LICENSE file in the root directory of this source tree. */ +import { iconClose } from '@siemens/ix-icons/icons'; import { Component, Event, @@ -174,7 +175,7 @@ export class Drawer {
this.onCloseClicked()} diff --git a/packages/core/src/components/dropdown-button/dropdown-button.tsx b/packages/core/src/components/dropdown-button/dropdown-button.tsx index 7d3971bd4e3..1669a8439e0 100644 --- a/packages/core/src/components/dropdown-button/dropdown-button.tsx +++ b/packages/core/src/components/dropdown-button/dropdown-button.tsx @@ -10,6 +10,7 @@ import { Component, Element, h, Host, Prop, State } from '@stencil/core'; import { ButtonVariant } from '../button/button'; import { AlignedPlacement } from '../dropdown/placement'; +import { iconChevronDownSmall } from '@siemens/ix-icons/icons'; export type DropdownButtonVariant = ButtonVariant; @@ -113,7 +114,7 @@ export class DropdownButton { > ) : null}
{this.label}
- +
) : ( diff --git a/packages/core/src/components/dropdown-item/dropdown-item.tsx b/packages/core/src/components/dropdown-item/dropdown-item.tsx index 052d2e0b213..41b831fe89f 100644 --- a/packages/core/src/components/dropdown-item/dropdown-item.tsx +++ b/packages/core/src/components/dropdown-item/dropdown-item.tsx @@ -18,6 +18,10 @@ import { Prop, } from '@stencil/core'; import { DropdownItemWrapper } from '../dropdown/dropdown-controller'; +import { + iconChevronRightSmall, + iconSingleCheck, +} from '@siemens/ix-icons/icons'; @Component({ tag: 'ix-dropdown-item', @@ -108,7 +112,7 @@ export class DropdownItem implements DropdownItemWrapper { {this.checked ? ( ) : null} @@ -123,7 +127,7 @@ export class DropdownItem implements DropdownItemWrapper {
{this.isSubMenu ? ( ) : null} diff --git a/packages/core/src/components/dropdown/test/dropdown.ct.ts b/packages/core/src/components/dropdown/test/dropdown.ct.ts index 10f83d8a165..26df684dc42 100644 --- a/packages/core/src/components/dropdown/test/dropdown.ct.ts +++ b/packages/core/src/components/dropdown/test/dropdown.ct.ts @@ -543,7 +543,7 @@ test('Nested dropdowns within application-header', async ({ mount, page }) => { const header = page.locator('ix-application-header'); await expect(header).toBeVisible(); - const overflowTrigger = header.getByRole('button', { name: 'More Menu' }); + const overflowTrigger = header.locator('ix-icon-button'); await overflowTrigger.click(); const dropdownButton = header.locator('ix-dropdown-button'); diff --git a/packages/core/src/components/event-list-item/event-list-item.tsx b/packages/core/src/components/event-list-item/event-list-item.tsx index 505e4933b31..63712fe975c 100644 --- a/packages/core/src/components/event-list-item/event-list-item.tsx +++ b/packages/core/src/components/event-list-item/event-list-item.tsx @@ -7,6 +7,7 @@ * LICENSE file in the root directory of this source tree. */ +import { iconChevronRight } from '@siemens/ix-icons/icons'; import { Component, Event, @@ -110,7 +111,7 @@ export class EventListItem { {this.chevron && ( diff --git a/packages/core/src/components/expanding-search/expanding-search.tsx b/packages/core/src/components/expanding-search/expanding-search.tsx index f0cdede97a4..2812dc03862 100644 --- a/packages/core/src/components/expanding-search/expanding-search.tsx +++ b/packages/core/src/components/expanding-search/expanding-search.tsx @@ -7,6 +7,7 @@ * LICENSE file in the root directory of this source tree. */ +import { iconClear, iconSearch } from '@siemens/ix-icons/icons'; import { Component, Event, @@ -26,7 +27,7 @@ export class ExpandingSearch { /** * Search icon */ - @Prop() icon = 'search'; + @Prop() icon: string; /** * Placeholder text @@ -107,7 +108,7 @@ export class ExpandingSearch { > this.toggleIndex()} diff --git a/packages/core/src/components/group/group-context-menu.tsx b/packages/core/src/components/group/group-context-menu.tsx index 9ff71a9ea97..7ed15285248 100644 --- a/packages/core/src/components/group/group-context-menu.tsx +++ b/packages/core/src/components/group/group-context-menu.tsx @@ -9,6 +9,7 @@ import { Component, Element, h, Host, State } from '@stencil/core'; import { getSlottedElements } from '../utils/shadow-dom'; +import { iconContextMenu } from '@siemens/ix-icons/icons'; @Component({ tag: 'ix-group-context-menu', @@ -64,7 +65,7 @@ export class GroupContextMenu { class={{ hide: !this.showContextMenu }} size="24" ghost={true} - icon={'context-menu'} + icon={iconContextMenu} > this.onSlotChange()}> diff --git a/packages/core/src/components/group/group.tsx b/packages/core/src/components/group/group.tsx index 4f3a3122ace..e32ecbab57d 100644 --- a/packages/core/src/components/group/group.tsx +++ b/packages/core/src/components/group/group.tsx @@ -20,6 +20,10 @@ import { } from '@stencil/core'; import { createMutationObserver } from '../utils/mutation-observer'; import { hasSlottedElements } from '../utils/shadow-dom'; +import { + iconChevronDownSmall, + iconChevronRightSmall, +} from '@siemens/ix-icons/icons'; @Component({ tag: 'ix-group', @@ -215,7 +219,7 @@ export class Group { hidden: this.slotSize === 0, }} name={ - this.collapsed ? 'chevron-right-small' : 'chevron-down-small' + this.collapsed ? iconChevronRightSmall : iconChevronDownSmall } onClick={(e) => this.onExpandClick(e)} > diff --git a/packages/core/src/components/kpi/kpi.tsx b/packages/core/src/components/kpi/kpi.tsx index 2f24e18ca01..4bdcc82db6a 100644 --- a/packages/core/src/components/kpi/kpi.tsx +++ b/packages/core/src/components/kpi/kpi.tsx @@ -7,6 +7,7 @@ * LICENSE file in the root directory of this source tree. */ +import { iconAlarm, iconWarning } from '@siemens/ix-icons/icons'; import { Component, h, Host, Prop } from '@stencil/core'; @Component({ @@ -46,7 +47,7 @@ export class Kpi { return ( ); @@ -55,7 +56,7 @@ export class Kpi { return ( ); diff --git a/packages/core/src/components/link-button/link-button.tsx b/packages/core/src/components/link-button/link-button.tsx index 7db5b9a7776..703a202399a 100644 --- a/packages/core/src/components/link-button/link-button.tsx +++ b/packages/core/src/components/link-button/link-button.tsx @@ -7,6 +7,7 @@ * LICENSE file in the root directory of this source tree. */ +import { iconChevronRightSmall } from '@siemens/ix-icons/icons'; import { Component, h, Host, Prop } from '@stencil/core'; /** @@ -50,7 +51,7 @@ export class LinkButton { >
this.closeOverlay()} > diff --git a/packages/core/src/components/map-navigation/map-navigation.tsx b/packages/core/src/components/map-navigation/map-navigation.tsx index 85a73185059..1cd789a6ce4 100644 --- a/packages/core/src/components/map-navigation/map-navigation.tsx +++ b/packages/core/src/components/map-navigation/map-navigation.tsx @@ -21,6 +21,7 @@ import { import anime from 'animejs'; import { ApplicationLayoutContext } from '../utils/application-layout/context'; import { useContextProvider } from '../utils/context'; +import { iconContextMenu } from '@siemens/ix-icons/icons'; @Component({ tag: 'ix-map-navigation', @@ -244,7 +245,7 @@ export class MapNavigation { '' ) : ( @@ -82,7 +83,7 @@ export class MenuAboutNews { { this.show = false; diff --git a/packages/core/src/components/menu-category/menu-category.tsx b/packages/core/src/components/menu-category/menu-category.tsx index af0fc75130a..b3aeaefa3ff 100644 --- a/packages/core/src/components/menu-category/menu-category.tsx +++ b/packages/core/src/components/menu-category/menu-category.tsx @@ -21,6 +21,7 @@ import anime from 'animejs'; import { closestIxMenu } from '../utils/application-layout/context'; import { createMutationObserver } from '../utils/mutation-observer'; import { createEnterLeaveDebounce } from './enter-leave'; +import { iconChevronDownSmall } from '@siemens/ix-icons/icons'; const DefaultIxMenuItemHeight = 40; const DefaultAnimationTimeout = 150; @@ -233,7 +234,7 @@ export class MenuCategory {
{this.label}
); @@ -105,6 +106,9 @@ export class MenuExpandIcon { class={{ expanded: this.expanded, }} + type="button" + aria-label={this.ixAriaLabel} + aria-pressed={a11yBoolean(this.expanded)} > {this.getMenuIcon()} diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index d6f93207a55..126ba0ffd93 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -30,6 +30,7 @@ import { ContextType, useContextConsumer } from '../utils/context'; import { menuController } from '../utils/menu-service/menu-service'; import { convertToRemString } from '../utils/rwd.util'; import { themeSwitcher } from '../utils/theme-switcher'; +import { iconApps } from '@siemens/ix-icons/icons'; @Component({ tag: 'ix-menu', @@ -624,7 +625,7 @@ export class Menu { onClick={() => showAppSwitch(this.applicationLayoutContext.appSwitchConfig) } - icon="apps" + icon={iconApps} ghost > )} diff --git a/packages/core/src/components/menu/test/menu.ct.ts b/packages/core/src/components/menu/test/menu.ct.ts index 1d532954e6d..d7c4d90274a 100644 --- a/packages/core/src/components/menu/test/menu.ct.ts +++ b/packages/core/src/components/menu/test/menu.ct.ts @@ -254,23 +254,17 @@ test('should close menu by bottom icon click', async ({ mount, page }) => { test('should have correct aria label', async ({ mount, page }) => { await mount(` + Random - `); + `); - await page.locator('ix-menu'); - const chevronButton = page.locator('ix-icon-button button'); + const expandButton = page.locator('ix-menu').locator('ix-menu-expand-icon'); - await expect(chevronButton).toHaveAttribute( - 'aria-label', - 'Double Chevron Right' - ); + await expect(expandButton).toHaveAttribute('aria-label', 'Expand sidebar'); - chevronButton.click(); + await expandButton.click(); - await expect(chevronButton).toHaveAttribute( - 'aria-label', - 'Double Chevron Left' - ); + await expect(expandButton).toHaveAttribute('aria-label', 'Expand sidebar'); }); async function clickAboutButton(element: Locator, page: Page) { diff --git a/packages/core/src/components/message-bar/message-bar.tsx b/packages/core/src/components/message-bar/message-bar.tsx index 4c70d38658f..d8085209265 100644 --- a/packages/core/src/components/message-bar/message-bar.tsx +++ b/packages/core/src/components/message-bar/message-bar.tsx @@ -18,6 +18,12 @@ import { } from '@stencil/core'; import anime from 'animejs'; import { NotificationColor } from '../utils/notification-color'; +import { + iconClose, + iconError, + iconInfo, + iconWarning, +} from '@siemens/ix-icons/icons'; @Component({ tag: 'ix-message-bar', @@ -40,7 +46,7 @@ export class MessageBar { */ @Event() closedChange: EventEmitter; - @State() icon: 'error' | 'warning' | 'info'; + @State() icon: string; @State() color: NotificationColor; @@ -50,17 +56,17 @@ export class MessageBar { componentWillRender() { if (this.type === 'danger') { - this.icon = 'error'; + this.icon = iconError; this.color = 'color-alarm'; } if (this.type === 'info') { - this.icon = 'info'; + this.icon = iconInfo; this.color = 'color-info'; } if (this.type === 'warning') { - this.icon = 'warning'; + this.icon = iconWarning; this.color = 'color-warning'; } } @@ -92,7 +98,7 @@ export class MessageBar {
{this.dismissible ? ( { diff --git a/packages/core/src/components/modal-header/modal-header.tsx b/packages/core/src/components/modal-header/modal-header.tsx index ba11749b0f1..6f8b80ffbfa 100644 --- a/packages/core/src/components/modal-header/modal-header.tsx +++ b/packages/core/src/components/modal-header/modal-header.tsx @@ -18,6 +18,7 @@ import { Watch, } from '@stencil/core'; import { closestPassShadow } from '../utils/shadow-dom'; +import { iconClose } from '@siemens/ix-icons/icons'; /** * @since 2.0.0 @@ -98,7 +99,7 @@ export class ModalHeader { this.onCloseClick(event)} ghost - icon="close" + icon={iconClose} class={'modal-close'} > ) : null} diff --git a/packages/core/src/components/modal/test/modal.ct.ts b/packages/core/src/components/modal/test/modal.ct.ts index 2d27b745f0b..9ccc4579cb5 100644 --- a/packages/core/src/components/modal/test/modal.ct.ts +++ b/packages/core/src/components/modal/test/modal.ct.ts @@ -23,7 +23,7 @@ test('closes on Escape key down', async ({ mount, page }) => { const script = document.createElement('script'); script.type = 'module'; script.innerHTML = ` - import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js'; + import * as ix from 'http://127.0.0.1:8080/build/index.esm.js'; window.showModal = ix.showModal; `; document.body.appendChild(script); @@ -62,7 +62,7 @@ test.describe('closeOnBackdropClick = true', () => { const script = document.createElement('script'); script.type = 'module'; script.innerHTML = ` - import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js'; + import * as ix from 'http://127.0.0.1:8080/build/index.esm.js'; window.showModal = ix.showModal; `; @@ -112,7 +112,7 @@ test.describe('closeOnBackdropClick = true', () => { const script = document.createElement('script'); script.type = 'module'; script.innerHTML = ` - import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js'; + import * as ix from 'http://127.0.0.1:8080/build/index.esm.js'; window.showModal = ix.showModal; `; diff --git a/packages/core/src/components/pagination/pagination.tsx b/packages/core/src/components/pagination/pagination.tsx index ded878320b8..9e22fee357f 100644 --- a/packages/core/src/components/pagination/pagination.tsx +++ b/packages/core/src/components/pagination/pagination.tsx @@ -18,6 +18,10 @@ import { } from '@stencil/core'; import { BaseButton, BaseButtonProps } from '../button/base-button'; import { a11yBoolean } from '../utils/a11y'; +import { + iconChevronLeftSmall, + iconChevronRightSmall, +} from '@siemens/ix-icons/icons'; /** * @since 1.5.0 @@ -213,7 +217,7 @@ export class Pagination { this.decrease()} > @@ -244,7 +248,7 @@ export class Pagination { this.increase()} > diff --git a/packages/core/src/components/pane/pane.tsx b/packages/core/src/components/pane/pane.tsx index 18ac2664280..a0146a8379a 100644 --- a/packages/core/src/components/pane/pane.tsx +++ b/packages/core/src/components/pane/pane.tsx @@ -22,6 +22,13 @@ import anime from 'animejs'; import Animation from '../utils/animation'; import { applicationLayoutService } from '../utils/application-layout'; import { matchBreakpoint } from '../utils/breakpoints'; +import { + iconClose, + iconDoubleChevronDown, + iconDoubleChevronLeft, + iconDoubleChevronRight, + iconDoubleChevronUp, +} from '@siemens/ix-icons/icons'; export type Composition = 'top' | 'left' | 'bottom' | 'right'; export type ExpandedChangedEvent = { @@ -288,27 +295,27 @@ export class Pane { switch (this.composition) { case 'left': expandIcon = this.isMobile - ? 'double-chevron-up' - : 'double-chevron-left'; + ? iconDoubleChevronUp + : iconDoubleChevronLeft; minimizeIcon = this.isMobile - ? 'double-chevron-down' - : 'double-chevron-right'; + ? iconDoubleChevronDown + : iconDoubleChevronRight; break; case 'right': expandIcon = this.isMobile - ? 'double-chevron-down' - : 'double-chevron-right'; + ? iconDoubleChevronDown + : iconDoubleChevronRight; minimizeIcon = this.isMobile - ? 'double-chevron-up' - : 'double-chevron-left'; + ? iconDoubleChevronUp + : iconDoubleChevronLeft; break; case 'bottom': - expandIcon = 'double-chevron-down'; - minimizeIcon = 'double-chevron-up'; + expandIcon = iconDoubleChevronDown; + minimizeIcon = iconDoubleChevronUp; break; case 'top': - expandIcon = 'double-chevron-up'; - minimizeIcon = 'double-chevron-down'; + expandIcon = iconDoubleChevronUp; + minimizeIcon = iconDoubleChevronDown; break; } @@ -632,7 +639,7 @@ export class Pane { icon={ this.expanded ? this.isMobile || this.hideOnCollapse - ? 'close' + ? iconClose : this.expandIcon : this.minimizeIcon } diff --git a/packages/core/src/components/pill/pill.tsx b/packages/core/src/components/pill/pill.tsx index a7c258cfb9a..b052b0c9a51 100644 --- a/packages/core/src/components/pill/pill.tsx +++ b/packages/core/src/components/pill/pill.tsx @@ -38,7 +38,7 @@ export class Pill { /** * Show icon */ - @Prop() icon: string | undefined; + @Prop() icon?: string; /** * Custom color for pill. Only working for `variant='custom'` diff --git a/packages/core/src/components/playground/example-modal.tsx b/packages/core/src/components/playground/example-modal.tsx index b614d462854..f138bcd9882 100644 --- a/packages/core/src/components/playground/example-modal.tsx +++ b/packages/core/src/components/playground/example-modal.tsx @@ -9,6 +9,7 @@ import { Component, Element, h, Host } from '@stencil/core'; import { closeModal, dismissModal } from '../utils/modal'; +import { iconClose } from '@siemens/ix-icons/icons'; @Component({ tag: 'ix-modal-example', @@ -33,7 +34,7 @@ export class ModalExample { this.dismiss()} >
diff --git a/packages/core/src/components/playground/playground.tsx b/packages/core/src/components/playground/playground.tsx index 1e029416247..6443a9fa21c 100644 --- a/packages/core/src/components/playground/playground.tsx +++ b/packages/core/src/components/playground/playground.tsx @@ -6,7 +6,6 @@ * This source code is licensed under the MIT license found in the * LICENxSE file in the root directory of this source tree. */ - import { Component, h, Host } from '@stencil/core'; /** @internal */ diff --git a/packages/core/src/components/push-card/push-card.tsx b/packages/core/src/components/push-card/push-card.tsx index a0ca496df24..3416c1e0f56 100644 --- a/packages/core/src/components/push-card/push-card.tsx +++ b/packages/core/src/components/push-card/push-card.tsx @@ -25,7 +25,7 @@ export class PushCard { /** * Card icon */ - @Prop() icon: string | undefined = undefined; + @Prop() icon?: string; /** * Card KPI value diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx index 6a48271b248..fc4db0cb9ce 100644 --- a/packages/core/src/components/select/select.tsx +++ b/packages/core/src/components/select/select.tsx @@ -21,6 +21,7 @@ import { } from '@stencil/core'; import { IxSelectItemLabelChangeEvent } from '../select-item/events'; import { OnListener } from '../utils/listener'; +import { iconChevronDownSmall, iconClear } from '@siemens/ix-icons/icons'; @Component({ tag: 'ix-select', @@ -530,7 +531,7 @@ export class Select { (this.selectedLabels?.length || this.inputFilterText) ? ( { if (this.editable) this.dropdownWrapperRef = ref; diff --git a/packages/core/src/components/split-button/split-button.tsx b/packages/core/src/components/split-button/split-button.tsx index 5abc77c6da7..cb321d40925 100644 --- a/packages/core/src/components/split-button/split-button.tsx +++ b/packages/core/src/components/split-button/split-button.tsx @@ -19,6 +19,7 @@ import { } from '@stencil/core'; import { ButtonVariant } from '../button/button'; import { AlignedPlacement } from '../dropdown/placement'; +import { iconContextMenu } from '@siemens/ix-icons/icons'; export type SplitButtonVariant = ButtonVariant; @@ -53,12 +54,12 @@ export class SplitButton { /** * Button icon */ - @Prop() icon = ''; + @Prop() icon: string; /** * Icon of the button on the right */ - @Prop() splitIcon = 'context-menu'; + @Prop() splitIcon: string; /** * Disabled @@ -122,7 +123,7 @@ export class SplitButton { {...buttonAttributes} ref={(r) => (this.triggerElement = r)} class={'anchor'} - icon={this.splitIcon} + icon={this.splitIcon ?? iconContextMenu} > diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx index eacf613dbb0..d087d17c012 100644 --- a/packages/core/src/components/tabs/tabs.tsx +++ b/packages/core/src/components/tabs/tabs.tsx @@ -19,6 +19,10 @@ import { State, } from '@stencil/core'; import { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame'; +import { + iconChevronLeftSmall, + iconChevronRightSmall, +} from '@siemens/ix-icons/icons'; @Component({ tag: 'ix-tabs', @@ -315,7 +319,7 @@ export class Tabs { data-arrow-left onClick={() => this.move(this.scrollAmount, true)} > - +
this.move(-this.scrollAmount, true)} > - +
); diff --git a/packages/core/src/components/time-picker/time-picker.tsx b/packages/core/src/components/time-picker/time-picker.tsx index 78c1d24633d..92496f60f9f 100644 --- a/packages/core/src/components/time-picker/time-picker.tsx +++ b/packages/core/src/components/time-picker/time-picker.tsx @@ -20,6 +20,7 @@ import { } from '@stencil/core'; import { DateTime } from 'luxon'; import { DateTimeCardCorners } from '../date-time-card/date-time-card'; +import { iconChevronDown, iconChevronUp } from '@siemens/ix-icons/icons'; export type TimePickerCorners = DateTimeCardCorners; @@ -263,7 +264,7 @@ export class TimePicker { })) } ghost - icon="chevron-up" + icon={iconChevronUp} variant="primary" class="arrows" > @@ -304,7 +305,7 @@ export class TimePicker { })) } ghost - icon="chevron-down" + icon={iconChevronDown} variant="primary" class="arrows" > @@ -334,7 +335,7 @@ export class TimePicker { size="16" onClick={() => this.changeTimeReference()} ghost - icon="chevron-up" + icon={iconChevronUp} variant="primary" class="arrows" > @@ -343,7 +344,7 @@ export class TimePicker { size="16" onClick={() => this.changeTimeReference()} ghost - icon="chevron-down" + icon={iconChevronDown} variant="primary" class="arrows" > diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx index b896b10d1cb..c78ba4d1cef 100644 --- a/packages/core/src/components/toast/toast.tsx +++ b/packages/core/src/components/toast/toast.tsx @@ -18,6 +18,13 @@ import { State, } from '@stencil/core'; import { ToastType } from './toast-utils'; +import { + iconClose, + iconError, + iconInfo, + iconSuccess, + iconWarning, +} from '@siemens/ix-icons/icons'; @Component({ tag: 'ix-toast', @@ -82,7 +89,7 @@ export class Toast { return ( @@ -92,7 +99,7 @@ export class Toast { return ( @@ -102,7 +109,7 @@ export class Toast { return ( @@ -112,7 +119,7 @@ export class Toast { return ( @@ -168,7 +175,7 @@ export class Toast {
this.closeToast.emit()} diff --git a/packages/core/src/components/tree-item/tree-item.tsx b/packages/core/src/components/tree-item/tree-item.tsx index d52838884e1..3782dd929a6 100644 --- a/packages/core/src/components/tree-item/tree-item.tsx +++ b/packages/core/src/components/tree-item/tree-item.tsx @@ -9,6 +9,7 @@ import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core'; import { TreeItemContext } from '../tree/tree-model'; +import { iconChevronRight } from '@siemens/ix-icons/icons'; @Component({ tag: 'ix-tree-item', @@ -57,7 +58,7 @@ export class TreeItem { > {this.hasChildren ? ( - + {this.uploadFailedText} ); case UploadFileState.UPLOAD_SUCCESSED: return ( - + {this.uploadSuccessText} ); diff --git a/packages/core/src/components/utils/menu-tabs/menu-tabs-fc.tsx b/packages/core/src/components/utils/menu-tabs/menu-tabs-fc.tsx index 81e337157b7..5668f2b8404 100644 --- a/packages/core/src/components/utils/menu-tabs/menu-tabs-fc.tsx +++ b/packages/core/src/components/utils/menu-tabs/menu-tabs-fc.tsx @@ -11,6 +11,7 @@ import { FunctionalComponent, h, Host } from '@stencil/core'; import { setTab } from './menu-tabs-utils'; import { MenuAbout } from '../../menu-about/menu-about'; import { MenuSettings } from '../../menu-settings/menu-settings'; +import { iconClose } from '@siemens/ix-icons/icons'; interface MenuTabsProps { context: MenuSettings | MenuAbout; @@ -47,7 +48,7 @@ export const MenuTabs: FunctionalComponent = ({ context }) => ( context.close.emit({ name: diff --git a/packages/core/src/components/workflow-step/workflow-step.tsx b/packages/core/src/components/workflow-step/workflow-step.tsx index 8c25ba0633e..0396fdd854f 100644 --- a/packages/core/src/components/workflow-step/workflow-step.tsx +++ b/packages/core/src/components/workflow-step/workflow-step.tsx @@ -7,6 +7,15 @@ * LICENSE file in the root directory of this source tree. */ +import { + iconCircle, + iconCircleDot, + iconCircleFilled, + iconError, + iconSuccess, + iconTriangleFilled, + iconWarning, +} from '@siemens/ix-icons/icons'; import { Component, Element, @@ -60,8 +69,7 @@ export class WorkflowStep { */ @Prop() position: 'first' | 'last' | 'single' | 'undefined' = 'undefined'; - @State() iconName: 'circle' | 'circle-dot' | 'success' | 'warning' | 'error' = - 'circle'; + @State() iconName: string; @State() iconColor: string = 'workflow-step-icon-default--color'; @@ -77,7 +85,7 @@ export class WorkflowStep { const selectedStyle = this.selected ? '--selected' : ''; if (this.status === 'open') { - this.iconName = this.selected ? 'circle-dot' : 'circle'; + this.iconName = this.selected ? iconCircleDot : iconCircle; this.iconColor = `workflow-step-icon-default--color${selectedStyle}`; } @@ -91,28 +99,28 @@ export class WorkflowStep { watchPropHandler() { switch (this.status) { case 'open': - this.iconName = 'circle'; + this.iconName = iconCircle; this.iconColor = 'workflow-step-icon-default--color'; break; case 'success': - this.iconName = 'success'; + this.iconName = iconSuccess; this.iconColor = 'color-success'; break; case 'done': - this.iconName = 'success'; + this.iconName = iconSuccess; this.iconColor = 'workflow-step-icon-done--color'; break; case 'warning': - this.iconName = 'warning'; + this.iconName = iconWarning; this.iconColor = 'color-warning'; break; case 'error': - this.iconName = 'error'; + this.iconName = iconError; this.iconColor = 'color-alarm'; break; default: - this.iconName = 'circle'; + this.iconName = iconCircle; break; } @@ -142,7 +150,7 @@ export class WorkflowStep { - - - - Stencil Component Starter - - - - - - - - - - - - + + + + Stencil Component Starter + + + + + + + + + + + + + + diff --git a/packages/core/src/setup.ts b/packages/core/src/setup.ts index 31488901cc9..94f0b100553 100644 --- a/packages/core/src/setup.ts +++ b/packages/core/src/setup.ts @@ -7,24 +7,14 @@ * LICENSE file in the root directory of this source tree. */ -async function setupIcons() { +function setupIcons() { if (typeof window === 'undefined') { return; } - const iconComponent = window.customElements.get('ix-icon'); - if (iconComponent) { - return; - } - - console.warn( - 'ix-icon web component not loaded. Using local fallback version' - ); - - const ixIcons = await import('@siemens/ix-icons/loader'); - await ixIcons.defineCustomElements(); + //TODO Remove setup } export default async function () { - await setupIcons(); + setupIcons(); } diff --git a/packages/core/src/tests/utils/test/page.ts b/packages/core/src/tests/utils/test/page.ts index 6bbb408c0f8..da9f10a6109 100644 --- a/packages/core/src/tests/utils/test/page.ts +++ b/packages/core/src/tests/utils/test/page.ts @@ -77,15 +77,26 @@ export const test = testBase.extend<{ testInfo.annotations.push({ type: theme, }); - await page.goto( - `http://127.0.0.1:8080/src/tests/utils/ct/index.html?theme=${theme}` - ); + await page.goto(`http://127.0.0.1:8080/index.html?theme=${theme}`); use((selector) => { return page.evaluateHandle( async ({ componentSelector }) => { await window.customElements.whenDefined('ix-button'); - const mount = document.querySelector('#mount'); + const playground = document.body.querySelector( + 'ix-playground-internal' + ); + playground.remove(); + + const mount = document.createElement('div'); + mount.id = 'mount'; + mount.style.display = 'block'; + mount.style.position = 'relative'; + mount.style.width = '100%'; + mount.style.height = '100%'; mount.innerHTML = componentSelector; + + document.body.appendChild(mount); + return mount.children.item(0) as HTMLElement; }, { componentSelector: selector } diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts index 1a0fc10fe5f..b5f2c72a411 100644 --- a/packages/core/stencil.config.ts +++ b/packages/core/stencil.config.ts @@ -18,11 +18,30 @@ import autoprefixer from 'autoprefixer'; import fs from 'fs'; import path from 'path'; -const copyAssets = [ +const icons = [ + { + src: path.join(__dirname, 'node_modules', '@siemens', 'ix-icons', 'dist'), + dest: path.join(__dirname, 'www', 'build', 'ix-icons', 'dist'), + }, + { + src: path.join(__dirname, 'node_modules', '@siemens', 'ix-icons', 'loader'), + dest: path.join(__dirname, 'www', 'build', 'ix-icons', 'loader'), + }, { - src: './../../../node_modules/@siemens/ix-icons/dist', - dest: 'build/ix-icons', + src: path.join( + __dirname, + 'node_modules', + '@siemens', + 'ix-icons', + 'dist', + 'svg' + ), + dest: path.join(__dirname, 'www', 'svg'), }, +]; + +const copyAssets = [ + ...icons, { src: './../../../node_modules/bootstrap', dest: 'build/bootstrap', @@ -46,10 +65,7 @@ try { export const config: Config = { globalScript: './src/setup.ts', extras: { - appendChildSlotFix: true, - slotChildNodesFix: true, enableImportInjection: true, - scopedSlotTextContentFix: true, }, testing: { testPathIgnorePatterns: ['/node_modules/', '/tests/', '/dist/'], diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json index 276cbc4fb0c..15e720471b3 100644 --- a/packages/core/tsconfig.json +++ b/packages/core/tsconfig.json @@ -19,6 +19,6 @@ "@utils/test": ["src/tests/utils/test"] } }, - "include": ["src", "playwright-ct.config.ts", "playwright.config.ts"], + "include": ["src"], "exclude": ["node_modules"] } diff --git a/packages/documentation/src/components/Guideline.tsx b/packages/documentation/src/components/Guideline.tsx index f298d0dd35c..6190323d310 100644 --- a/packages/documentation/src/components/Guideline.tsx +++ b/packages/documentation/src/components/Guideline.tsx @@ -10,15 +10,20 @@ import clsx from 'clsx'; import React from 'react'; import styles from './Guideline.module.css'; +import { iconSingleCheck, iconClose } from '@siemens/ix-icons/icons'; export function Guideline(props: { label: string; do?: boolean }) { function getIcon() { if (props.do) { return ( - + ); } else { - return ; + return ; } } From 904f5d12638e4c9f2a13d24abea6e239e6f9807e Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Mon, 22 Apr 2024 08:22:55 +0200 Subject: [PATCH 02/13] fix: use esm loader --- packages/core/playwright-ct.config.ts | 2 +- .../application-header/application-header.tsx | 1 + packages/core/src/components/menu/menu.tsx | 1 + .../src/components/modal/test/modal.ct.ts | 6 +++--- packages/core/src/setup.ts | 20 +++++++++++++------ .../src/tests/application/application.e2e.ts | 4 +++- packages/core/src/tests/menu/menu.e2e.ts | 19 +++++++++--------- packages/core/src/tests/utils/test/page.ts | 19 ++++-------------- 8 files changed, 36 insertions(+), 36 deletions(-) diff --git a/packages/core/playwright-ct.config.ts b/packages/core/playwright-ct.config.ts index 353c195b51f..34320a43834 100644 --- a/packages/core/playwright-ct.config.ts +++ b/packages/core/playwright-ct.config.ts @@ -29,7 +29,7 @@ const config: PlaywrightTestConfig = { }, ], webServer: { - command: 'pnpm run host-root -- ./www', + command: 'pnpm run host-root', port: 8080, }, }; diff --git a/packages/core/src/components/application-header/application-header.tsx b/packages/core/src/components/application-header/application-header.tsx index c2563ec5f0c..c94c5c9790e 100644 --- a/packages/core/src/components/application-header/application-header.tsx +++ b/packages/core/src/components/application-header/application-header.tsx @@ -185,6 +185,7 @@ export class ApplicationHeader { icon={iconApps} ghost class="app-switch" + data-testid="app-switch" > )}