From eebf73a32c9c1939aac9f10fbae001208d717c97 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Wed, 6 Nov 2024 08:32:23 +0100 Subject: [PATCH] Revert "Merge branch 'main' into feat/select-validation" This reverts commit 48fadb7e9b503f9a75aec9ebf829cefd6ec266bf. --- .changeset/afraid-mugs-argue.md | 5 - .changeset/clever-rings-sneeze.md | 5 - .changeset/eight-windows-shout.md | 7 - .changeset/eighty-clocks-bake.md | 5 - .changeset/few-eels-smell.md | 5 - .changeset/nasty-mangos-love.md | 5 - .changeset/nice-pianos-serve.md | 5 - .changeset/nine-pugs-pump.md | 5 - .changeset/quiet-tools-study.md | 5 - .changeset/short-dolls-perform.md | 5 - .changeset/small-meals-think.md | 5 - packages/core/.eslintrc.json | 11 +- packages/core/component-doc.json | 40 ++-- packages/core/package.json | 2 +- .../core/scss/components/_checkboxes.scss | 15 +- packages/core/src/components.d.ts | 28 +-- .../core/src/components/avatar/avatar.scss | 2 +- .../core/src/components/avatar/avatar.tsx | 39 ++-- .../core/src/components/button/button.tsx | 17 +- .../src/components/card-list/card-list.scss | 2 +- .../src/components/card-list/card-list.tsx | 27 ++- packages/core/src/components/card/card.scss | 38 +--- .../category-filter/category-filter.scss | 6 +- .../category-filter/category-filter.tsx | 19 +- .../content-header/content-header.scss | 10 +- .../content-header/content-header.tsx | 15 +- .../core/src/components/content/content.scss | 1 - .../core/src/components/content/content.tsx | 2 +- .../components/date-picker/date-picker.tsx | 19 +- .../date-picker/test/date-picker.ct.ts | 31 ---- .../event-list-item/event-list-item.tsx | 17 +- .../src/components/event-list/event-list.scss | 7 + .../src/components/event-list/event-list.tsx | 8 +- .../event-list/test/event-list.spec.tsx | 75 ++++++++ .../icon-button/icon-button-mixin.scss | 21 +++ .../icon-toggle-button/icon-toggle-button.tsx | 1 + .../src/components/menu-item/menu-item.tsx | 11 +- packages/core/src/components/menu/menu.tsx | 58 +++--- .../modal-content/modal-content.scss | 2 +- .../components/modal-footer/modal-footer.scss | 1 + .../components/modal-header/modal-header.scss | 14 +- .../components/modal-header/modal-header.tsx | 26 +-- packages/core/src/components/modal/modal.scss | 2 +- packages/core/src/components/pane/pane.tsx | 78 ++++---- .../core/src/components/select/select.scss | 7 - .../core/src/components/select/select.tsx | 6 +- .../src/components/select/test/select.ct.ts | 33 +--- .../core/src/components/spinner/spinner.scss | 24 ++- .../core/src/components/spinner/spinner.tsx | 20 +- .../core/src/components/upload/upload.scss | 2 + .../core/src/components/utils/make-ref.ts | 1 + .../core/src/components/utils/modal/index.ts | 2 +- .../src/components/utils/modal/message.ts | 36 ++-- ...-1-chromium---theme-classic-dark-linux.png | Bin 94938 -> 77977 bytes ...1-chromium---theme-classic-light-linux.png | Bin 94521 -> 77743 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 92107 -> 75330 bytes ...1-chromium---theme-classic-light-linux.png | Bin 91953 -> 75523 bytes .../src/tests/action-card/basic/index.html | 12 -- .../src/tests/action-card/selected/index.html | 14 -- ...-1-chromium---theme-classic-dark-linux.png | Bin 37532 -> 37677 bytes ...1-chromium---theme-classic-light-linux.png | Bin 38586 -> 38441 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 34498 -> 34950 bytes ...1-chromium---theme-classic-light-linux.png | Bin 34018 -> 34197 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 27637 -> 27654 bytes ...1-chromium---theme-classic-light-linux.png | Bin 27636 -> 27599 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 16598 -> 16657 bytes ...1-chromium---theme-classic-light-linux.png | Bin 16466 -> 16479 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 79566 -> 79602 bytes ...1-chromium---theme-classic-light-linux.png | Bin 81897 -> 81874 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 16815 -> 16865 bytes ...1-chromium---theme-classic-light-linux.png | Bin 16660 -> 16676 bytes packages/core/src/tests/card/basic/index.html | 10 - ...-1-chromium---theme-classic-dark-linux.png | Bin 18821 -> 16460 bytes ...1-chromium---theme-classic-light-linux.png | Bin 19079 -> 16800 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 17245 -> 15143 bytes ...1-chromium---theme-classic-light-linux.png | Bin 17526 -> 15445 bytes .../core/src/tests/card/selected/index.html | 10 - ...-1-chromium---theme-classic-dark-linux.png | Bin 31342 -> 31501 bytes ...1-chromium---theme-classic-light-linux.png | Bin 30892 -> 31148 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 29351 -> 29512 bytes ...1-chromium---theme-classic-light-linux.png | Bin 29076 -> 29288 bytes .../core/src/tests/content/basic/index.html | 33 ---- .../core/src/tests/content/content.e2e.ts | 27 --- ...-1-chromium---theme-classic-dark-linux.png | Bin 40372 -> 0 bytes ...1-chromium---theme-classic-light-linux.png | Bin 40575 -> 0 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 11689 -> 0 bytes ...1-chromium---theme-classic-light-linux.png | Bin 11243 -> 0 bytes .../src/tests/content/scrollable/index.html | 53 ------ ...-1-chromium---theme-classic-dark-linux.png | Bin 67143 -> 67848 bytes ...1-chromium---theme-classic-light-linux.png | Bin 66475 -> 67206 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 69340 -> 70828 bytes ...1-chromium---theme-classic-light-linux.png | Bin 69357 -> 70639 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 73358 -> 74610 bytes ...1-chromium---theme-classic-light-linux.png | Bin 73604 -> 74835 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 73110 -> 74302 bytes ...1-chromium---theme-classic-light-linux.png | Bin 73098 -> 74445 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 77602 -> 78414 bytes ...1-chromium---theme-classic-light-linux.png | Bin 77554 -> 78293 bytes .../core/src/tests/message/message.e2e.ts | 69 ------- ...-1-chromium---theme-classic-dark-linux.png | Bin 12944 -> 0 bytes ...1-chromium---theme-classic-light-linux.png | Bin 12279 -> 0 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 13024 -> 0 bytes ...1-chromium---theme-classic-light-linux.png | Bin 12353 -> 0 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 12962 -> 0 bytes ...1-chromium---theme-classic-light-linux.png | Bin 12318 -> 0 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 12979 -> 0 bytes ...1-chromium---theme-classic-light-linux.png | Bin 12322 -> 0 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 12974 -> 0 bytes ...1-chromium---theme-classic-light-linux.png | Bin 12321 -> 0 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 10583 -> 0 bytes ...1-chromium---theme-classic-light-linux.png | Bin 10446 -> 0 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 12896 -> 0 bytes ...1-chromium---theme-classic-light-linux.png | Bin 12247 -> 0 bytes packages/core/src/tests/modal/icon/index.html | 4 +- packages/core/src/tests/modal/modal.e2e.ts | 38 ++-- ...-1-chromium---theme-classic-dark-linux.png | Bin 27300 -> 27305 bytes ...1-chromium---theme-classic-light-linux.png | Bin 27035 -> 26873 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 28124 -> 28380 bytes ...1-chromium---theme-classic-light-linux.png | Bin 27925 -> 27911 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 19567 -> 19505 bytes ...1-chromium---theme-classic-light-linux.png | Bin 19206 -> 19054 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 19213 -> 19210 bytes ...1-chromium---theme-classic-light-linux.png | Bin 18868 -> 18766 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 19147 -> 19120 bytes ...1-chromium---theme-classic-light-linux.png | Bin 18794 -> 18702 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 19154 -> 19123 bytes ...1-chromium---theme-classic-light-linux.png | Bin 18786 -> 18695 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 19142 -> 19117 bytes ...1-chromium---theme-classic-light-linux.png | Bin 18775 -> 18693 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 16875 -> 17061 bytes ...1-chromium---theme-classic-light-linux.png | Bin 16988 -> 17163 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 19140 -> 19114 bytes ...1-chromium---theme-classic-light-linux.png | Bin 18799 -> 18695 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 26717 -> 26501 bytes ...1-chromium---theme-classic-light-linux.png | Bin 25045 -> 24775 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 12562 -> 12591 bytes ...1-chromium---theme-classic-light-linux.png | Bin 12447 -> 12532 bytes .../core/src/tests/push-card/basic/index.html | 18 -- ...-1-chromium---theme-classic-dark-linux.png | Bin 107521 -> 90531 bytes ...1-chromium---theme-classic-light-linux.png | Bin 109437 -> 91512 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 90632 -> 72701 bytes ...1-chromium---theme-classic-light-linux.png | Bin 92097 -> 75110 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 14106 -> 13852 bytes ...1-chromium---theme-classic-light-linux.png | Bin 13952 -> 13677 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 7526 -> 7522 bytes ...1-chromium---theme-classic-light-linux.png | Bin 7504 -> 7520 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 14410 -> 14440 bytes ...1-chromium---theme-classic-light-linux.png | Bin 13682 -> 13684 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 13943 -> 13955 bytes ...1-chromium---theme-classic-light-linux.png | Bin 13410 -> 13422 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 13943 -> 13955 bytes ...1-chromium---theme-classic-light-linux.png | Bin 13410 -> 13422 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 12671 -> 12685 bytes ...1-chromium---theme-classic-light-linux.png | Bin 11942 -> 11944 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 16388 -> 16392 bytes ...1-chromium---theme-classic-light-linux.png | Bin 16383 -> 16392 bytes ...1-chromium---theme-classic-light-linux.png | Bin 11488 -> 11115 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 14825 -> 14563 bytes ...1-chromium---theme-classic-light-linux.png | Bin 14729 -> 14501 bytes ...-1-chromium---theme-classic-dark-linux.png | Bin 14669 -> 14660 bytes ...1-chromium---theme-classic-light-linux.png | Bin 13999 -> 14011 bytes packages/core/stencil.config.ts | 1 - packages/core/tsconfig.json | 2 +- packages/core/tsconfig.lib.json | 30 --- ...{strict-check.json => tsconfig.sonar.json} | 5 +- packages/documentation/docs/contact-us.md | 2 +- packages/documentation/docs/faq.md | 4 +- packages/documentation/docs/starter-app.mdx | 42 ----- packages/documentation/sidebars.ts | 6 +- .../static/img/starter-app/image.png | Bin 71481 -> 0 bytes .../documentation/static/uxt/uxt-ix-css.css | 2 +- packages/eslint-config-ix/package.json | 4 - packages/react/.eslintrc.json | 2 +- pnpm-lock.yaml | 172 +----------------- tools/strict-check/check.mjs | 2 +- 175 files changed, 403 insertions(+), 992 deletions(-) delete mode 100644 .changeset/afraid-mugs-argue.md delete mode 100644 .changeset/clever-rings-sneeze.md delete mode 100644 .changeset/eight-windows-shout.md delete mode 100644 .changeset/eighty-clocks-bake.md delete mode 100644 .changeset/few-eels-smell.md delete mode 100644 .changeset/nasty-mangos-love.md delete mode 100644 .changeset/nice-pianos-serve.md delete mode 100644 .changeset/nine-pugs-pump.md delete mode 100644 .changeset/quiet-tools-study.md delete mode 100644 .changeset/short-dolls-perform.md delete mode 100644 .changeset/small-meals-think.md create mode 100644 packages/core/src/components/event-list/test/event-list.spec.tsx delete mode 100644 packages/core/src/tests/content/basic/index.html delete mode 100644 packages/core/src/tests/content/content.e2e.ts delete mode 100644 packages/core/src/tests/content/content.e2e.ts-snapshots/content-basic-1-chromium---theme-classic-dark-linux.png delete mode 100644 packages/core/src/tests/content/content.e2e.ts-snapshots/content-basic-1-chromium---theme-classic-light-linux.png delete mode 100644 packages/core/src/tests/content/content.e2e.ts-snapshots/content-scroll-and-check-1-chromium---theme-classic-dark-linux.png delete mode 100644 packages/core/src/tests/content/content.e2e.ts-snapshots/content-scroll-and-check-1-chromium---theme-classic-light-linux.png delete mode 100644 packages/core/src/tests/content/scrollable/index.html delete mode 100644 packages/core/src/tests/message/message.e2e.ts delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-360-1-chromium---theme-classic-dark-linux.png delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-360-1-chromium---theme-classic-light-linux.png delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-480-1-chromium---theme-classic-dark-linux.png delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-480-1-chromium---theme-classic-light-linux.png delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-600-1-chromium---theme-classic-dark-linux.png delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-600-1-chromium---theme-classic-light-linux.png delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-720-1-chromium---theme-classic-dark-linux.png delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-720-1-chromium---theme-classic-light-linux.png delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-840-1-chromium---theme-classic-dark-linux.png delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-840-1-chromium---theme-classic-light-linux.png delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-screen-1-chromium---theme-classic-dark-linux.png delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-screen-1-chromium---theme-classic-light-linux.png delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-width-1-chromium---theme-classic-dark-linux.png delete mode 100644 packages/core/src/tests/message/message.e2e.ts-snapshots/message-size-full-width-1-chromium---theme-classic-light-linux.png delete mode 100644 packages/core/tsconfig.lib.json rename packages/core/{strict-check.json => tsconfig.sonar.json} (58%) delete mode 100644 packages/documentation/docs/starter-app.mdx delete mode 100644 packages/documentation/static/img/starter-app/image.png diff --git a/.changeset/afraid-mugs-argue.md b/.changeset/afraid-mugs-argue.md deleted file mode 100644 index 95aa9a59045..00000000000 --- a/.changeset/afraid-mugs-argue.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@siemens/ix": minor ---- - -feat(core/message): add options to set size and position diff --git a/.changeset/clever-rings-sneeze.md b/.changeset/clever-rings-sneeze.md deleted file mode 100644 index 2da4c88a555..00000000000 --- a/.changeset/clever-rings-sneeze.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@siemens/ix': patch ---- - -fix(core/modal): figma - code mismatch diff --git a/.changeset/eight-windows-shout.md b/.changeset/eight-windows-shout.md deleted file mode 100644 index 5849541ebac..00000000000 --- a/.changeset/eight-windows-shout.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@siemens/ix-angular": minor -"@siemens/ix": minor -"@siemens/ix-vue": minor ---- - -feat(core): improve component a11y diff --git a/.changeset/eighty-clocks-bake.md b/.changeset/eighty-clocks-bake.md deleted file mode 100644 index 3a82b265133..00000000000 --- a/.changeset/eighty-clocks-bake.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@siemens/ix': patch ---- - -fix(core/content-header): adapt spacing diff --git a/.changeset/few-eels-smell.md b/.changeset/few-eels-smell.md deleted file mode 100644 index a7da8bf7746..00000000000 --- a/.changeset/few-eels-smell.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@siemens/ix': patch ---- - -fix(core/checkbox): page jumps on checkbox click in scrollable ix-content diff --git a/.changeset/nasty-mangos-love.md b/.changeset/nasty-mangos-love.md deleted file mode 100644 index f8632ceafac..00000000000 --- a/.changeset/nasty-mangos-love.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@siemens/ix': patch ---- - -fix(core/button): fix keyboard navigation & accessibility diff --git a/.changeset/nice-pianos-serve.md b/.changeset/nice-pianos-serve.md deleted file mode 100644 index e61228beba0..00000000000 --- a/.changeset/nice-pianos-serve.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@siemens/ix": patch ---- - -fix(core/spinner): move styling into shadow dom diff --git a/.changeset/nine-pugs-pump.md b/.changeset/nine-pugs-pump.md deleted file mode 100644 index e400eb70ca0..00000000000 --- a/.changeset/nine-pugs-pump.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@siemens/ix': patch ---- - -fix(core/select): update input value on slot change diff --git a/.changeset/quiet-tools-study.md b/.changeset/quiet-tools-study.md deleted file mode 100644 index dd7953c76d4..00000000000 --- a/.changeset/quiet-tools-study.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@siemens/ix": patch ---- - -fix(core/icon-toggle-button): remove console.log diff --git a/.changeset/short-dolls-perform.md b/.changeset/short-dolls-perform.md deleted file mode 100644 index 41f7a674896..00000000000 --- a/.changeset/short-dolls-perform.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@siemens/ix": patch ---- - -fix(card): card-filled colors for hover/active states diff --git a/.changeset/small-meals-think.md b/.changeset/small-meals-think.md deleted file mode 100644 index f4378c8426a..00000000000 --- a/.changeset/small-meals-think.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@siemens/ix': patch ---- - -fix(core/card-list): adapt title margin to figma diff --git a/packages/core/.eslintrc.json b/packages/core/.eslintrc.json index 8f1928bca18..85573490719 100644 --- a/packages/core/.eslintrc.json +++ b/packages/core/.eslintrc.json @@ -1,22 +1,15 @@ { "root": true, "parserOptions": { - "project": "./tsconfig.lib.json" + "project": "./tsconfig.json" }, - "extends": [ - /* "plugin:@typescript-eslint/recommended", */ "plugin:@stencil-community/recommended", - "eslint-config-ix/index.js" - ], + "extends": [/* "plugin:@typescript-eslint/recommended", */ "plugin:@stencil-community/recommended", "ix"], "rules": { "@stencil-community/async-methods": 0, "@stencil-community/own-props-must-be-private": 0, "@stencil-community/own-methods-must-be-private": 0, "@stencil-community/strict-boolean-conditions": 0, "@stencil-community/ban-default-true": ["warn"], - "@stencil-community/decorators-style": [ - "error", - { "prop": "inline", "method": "multiline" } - ], "react/jsx-no-bind": 0, "react/jsx-uses-react": 0, "react/react-in-jsx-scope": 0, diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index b1c504552ed..0e62df3e92c 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -583,7 +583,7 @@ "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { @@ -604,7 +604,7 @@ "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { @@ -625,7 +625,7 @@ "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { @@ -651,7 +651,7 @@ "type": "string" } ], - "optional": true, + "optional": false, "required": false } ], @@ -1533,13 +1533,7 @@ "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "click", - "capture": true, - "passive": false - } - ] + "listeners": [] }, { "dirPath": "src/components/card", @@ -1942,7 +1936,7 @@ "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { @@ -1976,7 +1970,7 @@ "name": "showAllCount", "type": "number", "complexType": { - "original": "number", + "original": "number | undefined", "resolved": "number", "references": {} }, @@ -1990,7 +1984,7 @@ "type": "number" } ], - "optional": true, + "optional": false, "required": false }, { @@ -7452,7 +7446,6 @@ "reflectToAttr": false, "docs": "Display a chevron icon in list items. Defaults to 'false'", "docsTags": [], - "default": "false", "values": [ { "type": "boolean" @@ -7550,7 +7543,6 @@ "reflectToAttr": false, "docs": "Show chevron on right side of the event list item", "docsTags": [], - "default": "false", "values": [ { "type": "boolean" @@ -7587,7 +7579,7 @@ "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { @@ -7603,7 +7595,6 @@ "reflectToAttr": false, "docs": "Disable event list item", "docsTags": [], - "default": "false", "values": [ { "type": "boolean" @@ -7635,7 +7626,7 @@ "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { @@ -7651,7 +7642,6 @@ "reflectToAttr": false, "docs": "Show event list item as selected", "docsTags": [], - "default": "false", "values": [ { "type": "boolean" @@ -11239,7 +11229,7 @@ "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { @@ -13694,7 +13684,7 @@ "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { @@ -13715,7 +13705,7 @@ "type": "string" } ], - "optional": true, + "optional": false, "required": false } ], @@ -14696,7 +14686,7 @@ "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { @@ -14739,7 +14729,7 @@ "type": "string" } ], - "optional": true, + "optional": false, "required": false }, { diff --git a/packages/core/package.json b/packages/core/package.json index ad7bdfb67af..45cccb723b9 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -54,7 +54,7 @@ "devDependencies": { "@playwright/test": "^1.32.1", "@siemens/ix-icons": "^2.0.0", - "@stencil-community/eslint-plugin": "^0.7.2", + "@stencil-community/eslint-plugin": "^0.7.1", "@stencil-community/postcss": "^2.2.0", "@stencil/angular-output-target": "^0.8.3", "@stencil/react-output-target": "0.5.3", diff --git a/packages/core/scss/components/_checkboxes.scss b/packages/core/scss/components/_checkboxes.scss index c477e8d7d68..d984f2f7176 100755 --- a/packages/core/scss/components/_checkboxes.scss +++ b/packages/core/scss/components/_checkboxes.scss @@ -13,11 +13,18 @@ /* Base for label styling */ [type='checkbox']:not(:checked), [type='checkbox']:checked { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + width: 1px; + max-height: 1px; + max-width: 1px; + min-height: 0px; + min-width: 0px; + overflow: hidden; position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; + white-space: nowrap; + appearance: none; } [type='checkbox']:not(:checked) + label, diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 1147c0821cd..4f15a85d378 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -169,20 +169,20 @@ export namespace Components { * Optional description text that will be displayed underneath the username. Note: Only working if avatar is part of the ix-application-header * @since 2.1.0 */ - "extra"?: string; + "extra": string; /** * Display an avatar image */ - "image"?: string; + "image": string; /** * Display the initials of the user. Will be overwritten by image */ - "initials"?: string; + "initials": string; /** * If set an info card displaying the username will be placed inside the dropdown. Note: Only working if avatar is part of the ix-application-header * @since 2.1.0 */ - "username"?: string; + "username": string; } interface IxBasicNavigation { /** @@ -348,7 +348,7 @@ export namespace Components { /** * Name the card list */ - "label"?: string; + "label": string; /** * List style */ @@ -360,7 +360,7 @@ export namespace Components { /** * Overwrite the default show all count. */ - "showAllCount"?: number; + "showAllCount": number | undefined; /** * Suppress the overflow handling of child elements */ @@ -1183,7 +1183,7 @@ export namespace Components { * @link https://ix.siemens.io/docs/theming/colors/ * @deprecated since 2.1.0 use `item-color` */ - "color"?: string; + "color": string; /** * Disable event list item */ @@ -1192,7 +1192,7 @@ export namespace Components { * Color of the status indicator. You can find a list of all available colors in our documentation. Example values are `--theme-color-alarm` or `color-alarm` * @link https://ix.siemens.io/docs/theming/colors/ */ - "itemColor"?: string; + "itemColor": string; /** * Show event list item as selected */ @@ -1734,7 +1734,7 @@ export namespace Components { /** * Should only be set if you use ix-menu standalone */ - "applicationName"?: string; + "applicationName": string; /** * Internal */ @@ -2062,11 +2062,11 @@ export namespace Components { /** * Icon of the Header */ - "icon"?: string; + "icon": string; /** * Icon color */ - "iconColor"?: string; + "iconColor": string; } interface IxModalLoading { } @@ -2214,7 +2214,7 @@ export namespace Components { /** * Title of the side panel */ - "heading"?: string; + "heading": string; /** * Define if the pane should have a collapsed state */ @@ -2222,7 +2222,7 @@ export namespace Components { /** * Name of the icon */ - "icon"?: string; + "icon": string; "ignoreLayoutSettings": boolean; "isMobile": boolean; /** @@ -5391,7 +5391,7 @@ declare namespace LocalJSX { /** * Overwrite the default show all count. */ - "showAllCount"?: number; + "showAllCount"?: number | undefined; /** * Suppress the overflow handling of child elements */ diff --git a/packages/core/src/components/avatar/avatar.scss b/packages/core/src/components/avatar/avatar.scss index d1f668bea67..5a69d88c526 100644 --- a/packages/core/src/components/avatar/avatar.scss +++ b/packages/core/src/components/avatar/avatar.scss @@ -106,7 +106,7 @@ @include btn-base-variant('invisible-primary', false); - .avatar { + li { transform: scale(0.8); } } diff --git a/packages/core/src/components/avatar/avatar.tsx b/packages/core/src/components/avatar/avatar.tsx index 1e6cbfc55c6..04b1f4f2b5e 100644 --- a/packages/core/src/components/avatar/avatar.tsx +++ b/packages/core/src/components/avatar/avatar.tsx @@ -53,23 +53,23 @@ function DefaultAvatar(props: { initials?: string }) { ); } -function AvatarImage(props: { image?: string; initials?: string }) { +function AvatarImage(props: { image: string; initials: string }) { return ( -
+
  • {props.image ? ( ) : ( )} -
    • + ); } function UserInfo(props: { - image?: string; - initials?: string; + image: string; + initials: string; userName: string; - extra?: string; + extra: string; }) { return ( @@ -97,19 +97,19 @@ function UserInfo(props: { shadow: true, }) export class Avatar { - @Element() hostElement!: HTMLIxAvatarElement; + @Element() hostElement: HTMLIxAvatarElement; /** * Display an avatar image * */ - @Prop() image?: string; + @Prop() image: string; /** * Display the initials of the user. Will be overwritten by image * */ - @Prop() initials?: string; + @Prop() initials: string; /** * If set an info card displaying the username will be placed inside the dropdown. @@ -117,7 +117,7 @@ export class Avatar { * * @since 2.1.0 */ - @Prop() username?: string; + @Prop() username: string; /** * Optional description text that will be displayed underneath the username. @@ -125,13 +125,13 @@ export class Avatar { * * @since 2.1.0 */ - @Prop() extra?: string; + @Prop() extra: string; @State() isClosestApplicationHeader = false; @State() hasSlottedElements = false; - private slotElement?: HTMLSlotElement; - private dropdownElement?: HTMLIxDropdownElement; + private slotElement: HTMLSlotElement; + private dropdownElement: HTMLIxDropdownElement; componentWillLoad() { const closest = closestElement('ix-application-header', this.hostElement); @@ -143,15 +143,10 @@ export class Avatar { } private resolveAvatarTrigger() { - return new Promise((resolve, reject) => { - readTask(() => { - const button = this.hostElement.shadowRoot!.querySelector('button'); - if (button) { - resolve(button); - } else { - reject(new Error('ix-avatar - trigger element not found')); - } - }); + return new Promise((resolve) => { + readTask(() => + resolve(this.hostElement.shadowRoot.querySelector('button')) + ); }); } diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx index 005c91e53e4..3e78601326f 100644 --- a/packages/core/src/components/button/button.tsx +++ b/packages/core/src/components/button/button.tsx @@ -7,7 +7,7 @@ * LICENSE file in the root directory of this source tree. */ -import { Component, Element, h, Host, Listen, Prop } from '@stencil/core'; +import { Component, Element, h, Host, Prop } from '@stencil/core'; import { BaseButton, BaseButtonProps } from './base-button'; export type ButtonVariant = 'danger' | 'primary' | 'secondary'; @@ -69,14 +69,6 @@ export class Button { */ submitButtonElement?: HTMLButtonElement; - @Listen('click', { capture: true }) - handleClick(event: Event) { - if (this.disabled || this.loading) { - event.stopPropagation(); - event.preventDefault(); - } - } - componentDidLoad() { if (this.type === 'submit') { const submitButton = document.createElement('button'); @@ -90,12 +82,7 @@ export class Button { } dispatchFormEvents() { - if ( - this.type === 'submit' && - this.submitButtonElement && - !this.disabled && - !this.loading - ) { + if (this.type === 'submit' && this.submitButtonElement) { this.submitButtonElement.click(); } } diff --git a/packages/core/src/components/card-list/card-list.scss b/packages/core/src/components/card-list/card-list.scss index 75177d35976..dfa50b70c00 100644 --- a/packages/core/src/components/card-list/card-list.scss +++ b/packages/core/src/components/card-list/card-list.scss @@ -25,7 +25,7 @@ $CardList__Title__Height: 1.5rem; height: $CardList__Title__Height; align-items: center; width: 100%; - margin-bottom: 1rem; + margin-bottom: 0.5rem; &__Label { overflow: hidden; diff --git a/packages/core/src/components/card-list/card-list.tsx b/packages/core/src/components/card-list/card-list.tsx index b2130de913f..0d07809e3fb 100644 --- a/packages/core/src/components/card-list/card-list.tsx +++ b/packages/core/src/components/card-list/card-list.tsx @@ -12,7 +12,7 @@ import { import { createMutationObserver } from '../utils/mutation-observer'; function CardListTitle(props: { - label?: string; + label: string; isCollapsed: boolean; onClick: (e: MouseEvent) => void; onShowAllClick: (e: MouseEvent) => void; @@ -20,7 +20,7 @@ function CardListTitle(props: { showAllCounter: number; hideShowAll: boolean; }) { - if (!props.label) { + if (props.label === '') { return null; } @@ -67,7 +67,7 @@ export class CardList { /** * Name the card list */ - @Prop() label?: string; + @Prop() label: string; /** * Collapse the list @@ -89,7 +89,7 @@ export class CardList { /** * Overwrite the default show all count. * */ - @Prop() showAllCount?: number; + @Prop() showAllCount: number | undefined; /** * Suppress the overflow handling of child elements @@ -116,23 +116,23 @@ export class CardList { /** * Fire event when the collapse state is changed by the user */ - @Event() collapseChanged!: EventEmitter; + @Event() collapseChanged: EventEmitter; /** * Fire event when the collapse state is changed by the user */ - @Event() showAllClick!: EventEmitter<{ + @Event() showAllClick: EventEmitter<{ nativeEvent: MouseEvent; }>; /** * Fire event when the show more card is clicked. */ - @Event() showMoreCardClick!: EventEmitter<{ + @Event() showMoreCardClick: EventEmitter<{ nativeEvent: MouseEvent; }>; - @Element() hostElement!: HTMLIxCardListElement; + @Element() hostElement: HTMLIxCardListElement; @State() private hasOverflowingElements = false; @State() private numberOfOverflowingElements = 0; @@ -140,7 +140,7 @@ export class CardList { @State() private leftScrollDistance = 0; @State() private rightScrollDistance = 0; - private observer?: MutationObserver; + private observer: MutationObserver; private onCardListVisibilityToggle() { this.collapse = !this.collapse; @@ -154,7 +154,7 @@ export class CardList { } private getListChildren() { - const slot = this.hostElement.shadowRoot!.querySelector( + const slot = this.hostElement.shadowRoot.querySelector( '.CardList__Content > slot' ) as HTMLSlotElement; return slot.assignedElements({ flatten: true }); @@ -185,7 +185,7 @@ export class CardList { }); this.observer.observe( - this.hostElement.shadowRoot!.querySelector('.CardList__Content')!, + this.hostElement.shadowRoot.querySelector('.CardList__Content'), { childList: true, subtree: true, @@ -207,7 +207,7 @@ export class CardList { } private get listElement() { - return this.hostElement.shadowRoot!.querySelector('.CardList__Content'); + return this.hostElement.shadowRoot.querySelector('.CardList__Content'); } private onCardListScroll() { @@ -260,9 +260,6 @@ export class CardList { @Listen('resize', { target: 'window' }) private detectOverflow() { - if (!this.listElement) { - return; - } const { clientWidth, scrollWidth, scrollLeft } = this.listElement; this.leftScrollDistance = scrollLeft; diff --git a/packages/core/src/components/card/card.scss b/packages/core/src/components/card/card.scss index 8b6daa9623e..4404a886636 100644 --- a/packages/core/src/components/card/card.scss +++ b/packages/core/src/components/card/card.scss @@ -41,24 +41,12 @@ } } -@mixin accordionChevronColorPrimary { - ::slotted(ix-card-accordion) { - color: var(--theme-color-primary); - } -} - -:host(.card-insight), -:host(.card-outline) { - @include accordionChevronColorPrimary; - - --ix-card-background: var(--theme-color-ghost); +:host(.card-insight), :host(.card-outline) { + --ix-card-background: transparent; --ix-card-border-color: var(--theme-color-soft-bdr); } -:host(.card-notification), -:host(.card-filled) { - @include accordionChevronColorPrimary; - +:host(.card-notification), :host(.card-filled) { --ix-card-background: var(--theme-color-component-1); } @@ -97,19 +85,17 @@ color: var(--theme-color-neutral--contrast); } -:host(:not(.card-insight, .card-outline)) { +:host(:not(.card-insight)) { --ix-card-border-color: transparent; } // ### Hover ### -:host(.card-insight:hover), -:host(.card-outline:hover) { +:host(.card-insight:hover) { --ix-card-background: var(--theme-color-ghost--hover); } -:host(.card-notification:hover), -:host(.card-filled:hover) { +:host(.card-notification:hover) { --ix-card-background: var(--theme-color-component-1--hover); } @@ -143,13 +129,11 @@ // ### Active ### -:host(.card-insight:active), -:host(.card-outline:active) { +:host(.card-insight:active) { --ix-card-background: var(--theme-color-ghost--active); } -:host(.card-notification:active), -:host(.card-filled:active) { +:host(.card-notification:active) { --ix-card-background: var(--theme-color-component-1--active); } @@ -187,13 +171,11 @@ --ix-card-border-color: var(--theme-color-dynamic); } -:host(.selected.card-insight), -:host(.selected.card-outline) { +:host(.selected.card-insight) { --ix-card-background: var(--theme-color-ghost--selected); } -:host(.selected.card-notification), -:host(.selected.card-filled) { +:host(.selected.card-notification) { --ix-card-background: var(--theme-color-ghost--selected); } diff --git a/packages/core/src/components/category-filter/category-filter.scss b/packages/core/src/components/category-filter/category-filter.scss index db5a8f5b8d3..bcfb8660c6d 100644 --- a/packages/core/src/components/category-filter/category-filter.scss +++ b/packages/core/src/components/category-filter/category-filter.scss @@ -102,7 +102,9 @@ .list-unstyled { display: flex; flex-wrap: wrap; - height: 100%; + list-style: none; + padding: 0; + margin: 0; overflow-y: auto; } @@ -131,7 +133,7 @@ height: 100%; } - .list-unstyled > span:not(.category-preview), + ul > li, input { padding-inline-start: 0; padding-top: 2px; diff --git a/packages/core/src/components/category-filter/category-filter.tsx b/packages/core/src/components/category-filter/category-filter.tsx index af086b6b45d..6a572a05459 100644 --- a/packages/core/src/components/category-filter/category-filter.tsx +++ b/packages/core/src/components/category-filter/category-filter.tsx @@ -22,7 +22,6 @@ import { BaseButton, BaseButtonProps } from '../button/base-button'; import { FilterState } from './filter-state'; import { InputState } from './input-state'; import { LogicalFilterOperator } from './logical-filter-operator'; -import { A11yAttributes, a11yHostAttributes } from '../utils/a11y'; @Component({ tag: 'ix-category-filter', @@ -36,7 +35,6 @@ export class CategoryFilter { @State() private textInput?: HTMLInputElement; private formElement?: HTMLFormElement; private isScrollStateDirty?: boolean; - private a11yAttributes?: A11yAttributes; @Element() hostElement!: HTMLIxCategoryFilterElement; @@ -164,10 +162,6 @@ export class CategoryFilter { this.setFilterState(newValue); } - componentWillLoad() { - this.a11yAttributes = a11yHostAttributes(this.hostElement); - } - componentDidLoad() { if (this.filterState !== undefined) { setTimeout(() => this.setFilterState(this.filterState)); @@ -716,9 +710,9 @@ export class CategoryFilter { size="16" >
    -
    +
      {this.filterTokens.map((value, index) => ( - {this.getFilterChipLabel(value)} - + ))} {this.categories === undefined ? ( '' ) : ( - {this.categories[this.category]?.label} - + )} (this.textInput = el)} type="text" placeholder={this.placeholder} - {...this.a11yAttributes} > -
    +
    {!this.readonly && !this.disabled && this.getResetButton()} diff --git a/packages/core/src/components/content-header/content-header.scss b/packages/core/src/components/content-header/content-header.scss index c9cce370699..84ac84b54dd 100644 --- a/packages/core/src/components/content-header/content-header.scss +++ b/packages/core/src/components/content-header/content-header.scss @@ -11,20 +11,16 @@ display: flex; flex-direction: row; align-items: flex-start; - padding: 0; + padding: 0px; .titleGroup { display: flex; flex-direction: column; - flex: 1 1 0; - - .secondary { - padding: 0.25rem 0; - } + flex: 1 1 0%; } .subtitle { - margin-top: -0.125rem; + margin-top: 0.5rem; } .backButton { diff --git a/packages/core/src/components/content-header/content-header.tsx b/packages/core/src/components/content-header/content-header.tsx index 6ad134af1e3..927b1ae5b94 100644 --- a/packages/core/src/components/content-header/content-header.tsx +++ b/packages/core/src/components/content-header/content-header.tsx @@ -56,21 +56,14 @@ export class ContentHeader { ) : null}
    - + {this.headerTitle} - {!!this.headerSubtitle && ( - + {this.headerSubtitle !== undefined ? ( + {this.headerSubtitle} - )} + ) : null}
    diff --git a/packages/core/src/components/content/content.scss b/packages/core/src/components/content/content.scss index da0330faee0..7008702ae71 100644 --- a/packages/core/src/components/content/content.scss +++ b/packages/core/src/components/content/content.scss @@ -24,7 +24,6 @@ flex-grow: 1; overflow: auto; padding-right: 1.5rem; - position: relative; } .content-header.slotted { diff --git a/packages/core/src/components/content/content.tsx b/packages/core/src/components/content/content.tsx index 11d42a15c36..15a4f46fa7e 100644 --- a/packages/core/src/components/content/content.tsx +++ b/packages/core/src/components/content/content.tsx @@ -25,7 +25,7 @@ export class Content { @State() isContentHeaderSlotted = false; get contentHeaderSlot() { - return this.hostElement.shadowRoot!.querySelector( + return this.hostElement.shadowRoot.querySelector( '.content-header slot' ) as HTMLSlotElement; } diff --git a/packages/core/src/components/date-picker/date-picker.tsx b/packages/core/src/components/date-picker/date-picker.tsx index 24c145d8144..74933790d14 100644 --- a/packages/core/src/components/date-picker/date-picker.tsx +++ b/packages/core/src/components/date-picker/date-picker.tsx @@ -147,7 +147,6 @@ export class DatePicker { * @since 2.1.0 */ @Prop() locale: string = undefined; - @Watch('locale') onLocaleChange() { this.setTranslations(); @@ -519,11 +518,7 @@ export class DatePicker { } } - private selectDay(selectedDay: number, target: Element) { - if (target.classList.contains('disabled')) { - return; - } - + private selectDay(selectedDay: number) { const date = DateTime.fromJSDate( new Date(this.selectedYear, this.selectedMonth, selectedDay) ); @@ -786,16 +781,8 @@ export class DatePicker { id={`day-cell-${day}`} date-calender-day class={this.getDayClasses(day)} - onClick={(e) => { - const target = e.currentTarget as HTMLElement; - this.selectDay(day, target); - }} - onKeyUp={(e) => { - const target = e.currentTarget as HTMLElement; - if (e.key === 'Enter') { - this.selectDay(day, target); - } - }} + onClick={() => this.selectDay(day)} + onKeyUp={(e) => e.key === 'Enter' && this.selectDay(day)} tabIndex={day === this.focusedDay ? 0 : -1} onFocus={() => this.onDayFocus()} onBlur={() => this.onDayBlur()} diff --git a/packages/core/src/components/date-picker/test/date-picker.ct.ts b/packages/core/src/components/date-picker/test/date-picker.ct.ts index 31e6315d83b..95f359bef7e 100644 --- a/packages/core/src/components/date-picker/test/date-picker.ct.ts +++ b/packages/core/src/components/date-picker/test/date-picker.ct.ts @@ -36,37 +36,6 @@ test('translation', async ({ mount, page }) => { await expect(header).toHaveCount(1); }); -test.describe('date picker tests single', () => { - test.beforeEach(async ({ mount }) => { - await mount( - `` - ); - }); - - test('select disabled date with enter', async ({ page }) => { - await page.waitForSelector('ix-date-time-card'); - - await page.getByText(/^9$/).focus(); - await page.keyboard.press('Enter'); - - expect((await getDateObj(page))[0]).toEqual({ - from: '2024/10/10', - to: undefined, - }); - }); - - test('select disabled date with click', async ({ page }) => { - await page.waitForSelector('ix-date-time-card'); - - await page.getByText(/^9$/).click({ force: true }); - - expect((await getDateObj(page))[0]).toEqual({ - from: '2024/10/10', - to: undefined, - }); - }); -}); - test.describe('date picker tests single', () => { test.beforeEach(async ({ mount }) => { await mount( 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 d86eddd65f5..4519e60db6b 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 @@ -34,7 +34,7 @@ export class EventListItem { * @deprecated since 2.1.0 use `item-color` */ // eslint-disable-next-line @stencil-community/reserved-member-names - @Prop() color?: string; + @Prop() color: string; /** * Color of the status indicator. @@ -43,27 +43,27 @@ export class EventListItem { * * @link https://ix.siemens.io/docs/theming/colors/ */ - @Prop() itemColor?: string; + @Prop() itemColor: string; /** * Show event list item as selected */ - @Prop() selected = false; + @Prop() selected: boolean; /** * Disable event list item */ - @Prop() disabled = false; + @Prop() disabled: boolean; /** * Show chevron on right side of the event list item */ - @Prop() chevron = false; + @Prop() chevron: boolean; /** * Event list item click */ - @Event() itemClick!: EventEmitter; + @Event() itemClick: EventEmitter; @Listen('click', { passive: true }) handleItemClick() { @@ -87,8 +87,7 @@ export class EventListItem { disabled: this.disabled, }} > -
    )}
    -
    + ); } diff --git a/packages/core/src/components/event-list/event-list.scss b/packages/core/src/components/event-list/event-list.scss index 3210978083a..f88c0acd2a6 100644 --- a/packages/core/src/components/event-list/event-list.scss +++ b/packages/core/src/components/event-list/event-list.scss @@ -14,6 +14,13 @@ display: block; position: relative; + + ul { + list-style: none; + padding: 0; + margin-top: 0; + margin-bottom: 0; + } } :host(.item-size-l) { diff --git a/packages/core/src/components/event-list/event-list.tsx b/packages/core/src/components/event-list/event-list.tsx index 115e9923faf..e4a87d43c29 100644 --- a/packages/core/src/components/event-list/event-list.tsx +++ b/packages/core/src/components/event-list/event-list.tsx @@ -48,7 +48,7 @@ export class EventList { /** * Display a chevron icon in list items. Defaults to 'false' */ - @Prop() chevron = false; + @Prop() chevron: boolean; @Watch('chevron') watchChevron(chevron: boolean | undefined) { @@ -111,7 +111,7 @@ export class EventList { const keyframes = [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }]; - const listElement = this.hostElement.shadowRoot!.querySelector('ul'); + const listElement = this.hostElement.shadowRoot.querySelector('ul'); anime({ targets: listElement, @@ -166,9 +166,9 @@ export class EventList { compact: this.compact, }} > -
    +
      -
    + ); } diff --git a/packages/core/src/components/event-list/test/event-list.spec.tsx b/packages/core/src/components/event-list/test/event-list.spec.tsx new file mode 100644 index 00000000000..513c9cdc0ad --- /dev/null +++ b/packages/core/src/components/event-list/test/event-list.spec.tsx @@ -0,0 +1,75 @@ +/* + * SPDX-FileCopyrightText: 2023 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { newSpecPage } from '@stencil/core/testing'; +//@ts-ignore +import { createMutationObserver } from '../../utils/mutation-observer'; +import { EventList } from '../event-list'; + +jest.mock('../../utils/mutation-observer'); + +describe('event-list', () => { + beforeEach(() => { + //@ts-ignore + createMutationObserver = jest.fn(() => ({ + observe: jest.fn(), + })); + }); + + it('renders', async () => { + const page = await newSpecPage({ + components: [EventList], + html: ` + + + + `, + }); + expect(page.root).toEqualHtml(` + + +
      + +
    +     + +     + `); + }); + + it('compact', async () => { + const page = await newSpecPage({ + components: [EventList], + html: ` + + + + `, + }); + + const eventList = page.doc.querySelector( + 'ix-event-list' + ) as HTMLIxEventListElement; + + eventList.compact = true; + + await page.waitForChanges(); + + expect(page.root).toEqualHtml(` + + +
      + +
    +     + +     + `); + }); +}); diff --git a/packages/core/src/components/icon-button/icon-button-mixin.scss b/packages/core/src/components/icon-button/icon-button-mixin.scss index 12488fb1014..5e87c89f686 100644 --- a/packages/core/src/components/icon-button/icon-button-mixin.scss +++ b/packages/core/src/components/icon-button/icon-button-mixin.scss @@ -63,4 +63,25 @@ @include icon-button-size('12', 1rem); @include icon-button-size('16', 1.5rem); @include icon-button-size('32', 2rem); + + :host(.btn-icon-12) { + ix-spinner { + height: 12px; + width: 12px; + } + } + + :host(.btn-icon-16) { + ix-spinner { + height: 16px; + width: 16px; + } + } + + :host(.btn-icon-32) { + ix-spinner { + height: 24px; + width: 24px; + } + } } diff --git a/packages/core/src/components/icon-toggle-button/icon-toggle-button.tsx b/packages/core/src/components/icon-toggle-button/icon-toggle-button.tsx index 1d5afa0cc58..8143b9eeea3 100644 --- a/packages/core/src/components/icon-toggle-button/icon-toggle-button.tsx +++ b/packages/core/src/components/icon-toggle-button/icon-toggle-button.tsx @@ -144,6 +144,7 @@ export class IconToggleButton { ...this.getIconSizeClass(), }, }; + console.log(baseButtonProps, this.disabled, this.loading); return ( (); + private buttonRef = makeRef(); private isHostedInsideCategory = false; - private menuExpandedDisposer?: Disposable; + private menuExpandedDisposer: Disposable; - private readonly observer: MutationObserver = createMutationObserver(() => { + private observer: MutationObserver = createMutationObserver(() => { this.setTooltip(); }); @@ -91,7 +91,7 @@ export class MenuItem { this.onIconChange(); this.onTabIconChange(); - this.menuExpanded = menuController.nativeElement?.expand || false; + this.menuExpanded = menuController.nativeElement.expand; this.menuExpandedDisposer = menuController.expandChange.on( (expand) => (this.menuExpanded = expand) ); @@ -102,7 +102,7 @@ export class MenuItem { } setTooltip() { - this.tooltip = this.label ?? this.hostElement.textContent ?? undefined; + this.tooltip = this.label ?? this.hostElement.textContent; } connectedCallback() { @@ -172,6 +172,7 @@ export class MenuItem {