Skip to content

Commit 9369456

Browse files
tishoyanchevtishoyanchev
authored
Merge pull request #1966 from Infineon/1965-modal-component-overview-handling-not-working
Modal: fixes overview handling on Edge browser
2 parents 4c796aa + fcfe399 commit 9369456

File tree

10 files changed

+65
-43
lines changed

10 files changed

+65
-43
lines changed

‎examples/wrapper-components/react-vite-js/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"test:local": "run-p preview:link watch:library"
1919
},
2020
"dependencies": {
21-
"@infineon/infineon-design-system-react": "37.6.0--canary.1954.e2971eb8a6a73eaf04c3685b5c5ffe96e5219e74.0",
21+
"@infineon/infineon-design-system-react": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0",
2222
"path": "^0.12.7",
2323
"react": "^18.3.1",
2424
"react-dom": "^18.3.1"

‎examples/wrapper-components/vue-javascript/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"test:local": "run-p preview:link watch:library"
1616
},
1717
"dependencies": {
18-
"@infineon/infineon-design-system-vue": "37.6.0--canary.1954.e2971eb8a6a73eaf04c3685b5c5ffe96e5219e74.0",
18+
"@infineon/infineon-design-system-vue": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0",
1919
"@vitejs/plugin-vue": "^4.0.0",
2020
"@vitejs/plugin-vue-jsx": "^4.0.0",
2121
"vite": "^5.0.12",

‎lerna.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"$schema": "node_modules/lerna/schemas/lerna-schema.json",
3-
"version": "37.6.0--canary.1954.e2971eb8a6a73eaf04c3685b5c5ffe96e5219e74.0",
3+
"version": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0",
44
"command": {
55
"publish": {
66
"verifyAccess": false

‎package-lock.json‎

Lines changed: 34 additions & 28 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/components-angular/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "components-angular",
3-
"version": "37.6.0--canary.1954.e2971eb8a6a73eaf04c3685b5c5ffe96e5219e74.0",
3+
"version": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",
@@ -25,7 +25,7 @@
2525
"@angular/forms": "^20.0.0",
2626
"@angular/platform-browser": "^20.0.0",
2727
"@angular/router": "^20.0.0",
28-
"@infineon/infineon-design-system-angular": "37.6.0--canary.1954.e2971eb8a6a73eaf04c3685b5c5ffe96e5219e74.0",
28+
"@infineon/infineon-design-system-angular": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0",
2929
"rxjs": "~7.8.0",
3030
"tslib": "^2.3.0",
3131
"typescript": "~5.8.2",

‎packages/components-angular/projects/component-library/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@infineon/infineon-design-system-angular",
3-
"version": "37.6.0--canary.1954.e2971eb8a6a73eaf04c3685b5c5ffe96e5219e74.0",
3+
"version": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0",
44
"description": "Infineon design system Stencil web components for Angular",
55
"author": "Verena Lechner",
66
"license": "MIT",
@@ -11,7 +11,7 @@
1111
"@angular/common": "^20.0.0",
1212
"@angular/core": "^20.0.0",
1313
"@infineon/design-system-tokens": "5.0.0",
14-
"@infineon/infineon-design-system-stencil": "37.6.0--canary.1954.e2971eb8a6a73eaf04c3685b5c5ffe96e5219e74.0"
14+
"@infineon/infineon-design-system-stencil": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0"
1515
},
1616
"dependencies": {
1717
"tslib": "^2.3.0"

‎packages/components-react/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@infineon/infineon-design-system-react",
3-
"version": "37.6.0--canary.1954.e2971eb8a6a73eaf04c3685b5c5ffe96e5219e74.0",
3+
"version": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0",
44
"description": "Infineon design system Stencil web components for React",
55
"main": "./dist/index.js",
66
"types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
2828
},
2929
"dependencies": {
3030
"@infineon/design-system-tokens": "5.0.0",
31-
"@infineon/infineon-design-system-stencil": "37.6.0--canary.1954.e2971eb8a6a73eaf04c3685b5c5ffe96e5219e74.0",
31+
"@infineon/infineon-design-system-stencil": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0",
3232
"@stencil/react-output-target": "^0.7.1"
3333
},
3434
"auto": {

‎packages/components-vue/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@infineon/infineon-design-system-vue",
3-
"version": "37.6.0--canary.1954.e2971eb8a6a73eaf04c3685b5c5ffe96e5219e74.0",
3+
"version": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0",
44
"description": "Infineon design system Stencil web components for Vue",
55
"main": "./dist/index.js",
66
"types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
3030
},
3131
"dependencies": {
3232
"@infineon/design-system-tokens": "5.0.0",
33-
"@infineon/infineon-design-system-stencil": "37.6.0--canary.1954.e2971eb8a6a73eaf04c3685b5c5ffe96e5219e74.0"
33+
"@infineon/infineon-design-system-stencil": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0"
3434
},
3535
"auto": {
3636
"plugins": [

‎packages/components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@infineon/infineon-design-system-stencil",
3-
"version": "37.6.0--canary.1954.e2971eb8a6a73eaf04c3685b5c5ffe96e5219e74.0",
3+
"version": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0",
44
"private": false,
55
"description": "Infineon design system Stencil web components",
66
"homepage": "https://infineon.github.io/infineon-design-system-stencil",

‎packages/components/src/components/modal/modal.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,16 @@ export class IfxModal {
4141
private modalContainer: HTMLElement;
4242
private focusableElements: HTMLElement[] = [];
4343
private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;
44+
private resizeTimeout: ReturnType<typeof setTimeout>;
45+
46+
handleResize = () => {
47+
clearTimeout(this.resizeTimeout);
48+
this.resizeTimeout = setTimeout(() => {
49+
if (this.showModal) {
50+
this.handleComponentOverflow();
51+
}
52+
}, 100);
53+
};
4454

4555
async componentDidLoad() {
4656
if(!isNestedInIfxComponent(this.hostElement)) {
@@ -54,17 +64,22 @@ export class IfxModal {
5464
(el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),
5565
isFocusable
5666
);
67+
window.addEventListener('resize', this.handleResize);
5768
}
5869

70+
disconnectedCallback() {
71+
window.removeEventListener('resize', this.handleResize);
72+
}
73+
5974
componentWillRender() {
6075
if(this.showModal) {
6176
this.handleComponentOverflow();
6277
}
6378
}
6479

65-
handleComponentOverflow() {
80+
async handleComponentOverflow() {
6681
const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');
67-
if (this.showModal && this.isModalContentContainerHeightReachedViewport()) {
82+
if (this.showModal && await this.isModalContentContainerHeightReachedViewport()) {
6883
modalContentContainer.classList.add('no-overflow')
6984
} else if(modalContentContainer?.classList.contains('no-overflow')) {
7085
modalContentContainer?.classList.remove('no-overflow')
@@ -211,7 +226,8 @@ export class IfxModal {
211226
const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;
212227
const modalContentHeight = modalContent.offsetHeight;
213228
const viewportHeight = window.innerHeight;
214-
resolve(modalContentHeight >= viewportHeight * 0.9);
229+
const extraMarginForEdgeBrowser = 3;
230+
resolve(modalContentHeight + extraMarginForEdgeBrowser >= viewportHeight * 0.9);
215231
}, 100);
216232
});
217233
}

0 commit comments

Comments
 (0)