feat(core): popover modal styling

[alexhristov14]

closes #12210 Styling for closeOnOutsideClick PR: https://github.com/SAP/fundamental-styles/pull/5595

[netlify[bot]]

✅ Deploy Preview for fundamental-ngx ready!

Name	Link
🔨 Latest commit	d0820cea6a30d32ce31bf84d2ed6e0ecfa859dda
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-ngx/deploys/66d7638f54ed120008b946ff
😎 Deploy Preview	https://deploy-preview-12324--fundamental-ngx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit cf35e92):

https://fundamental-ngx-gh--pr12324-feat-popover-modal-sxdepaa9.web.app

_{(expires Sat, 31 Aug 2024 15:12:15 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 41b993ee8e451bd7c6770b342ce142dc886eacff}

[InnaAtanasova]

You only show the HTML file, need to show the TS file, too

[khotcholava]

@alexhristov14 It seems that the popover close functionality is not working as expected. I tested it and found that pressing the ESC key or clicking outside the popover does not close it. Could you please look into this issue?

https://github.com/user-attachments/assets/2c4bdd0d-685d-4d0b-b1fe-f8bba2d05d2c

[alexhristov14]

@alexhristov14 It seems that the popover close functionality is not working as expected. I tested it and found that pressing the ESC key or clicking outside the popover does not close it. Could you please look into this issue?

Screen.Recording.2024-09-03.at.15.26.36.mov

I've tested it again now and it still works as intended. The closeOnOutsideClick property prevents users to close the popover when clicking outside of the body (when set to false) but it's still closable with ESC. As for the closeOnEscapeKey, it prevents users to close the popover body with ESC (when set to false). And the third example is a combination of both where neither clicking on the outside nor the ESC button closes the body. The only way to close it back it to click the popover yet again.

The default behaviour is that it closes in both cases: whenever clicked outside or the ESC button is pressed.

[InnaAtanasova]

@alexhristov14 It seems that the popover close functionality is not working as expected. I tested it and found that pressing the ESC key or clicking outside the popover does not close it. Could you please look into this issue?

Screen.Recording.2024-09-03.at.15.26.36.mov

@khotcholava it's the naming of the button that makes the confusion. closeOnOutsideClick button opens a popover that is not supposed to close on outside click.

As you can see the property is set to false. But I agree with you. The way we have it now is confusing . It makes more sense if the button was named something like "preventCloseOnOutsideClick" and same for the other examples. @alexhristov14