Modal for links

[SharonStrats]

This is a modal.
if you have an array of links [{ label: 'string', link: 'string'}, ... ]
You call createWindow(Dom, listofLinks) and it will return the modal. To display the modal by clicking a button add modal.display = 'block' to the onClickFunction. This has not been tested yet, due to some other technical issues.

I have also created a modalStyle file next to the modal. I think this is how we should do it as we go forward so that the styles are next to the file we are styling when possible.

TODO: change the styling so that when the user hovers on li the li has a background color.

[jeff-zucker]

[EDIT : ignore this, it was my setup]

Haven't finished testing yet, but these changes allow it to compile without errors

Line 8 of modals.ts

• change ../jss to ../lib/jss

Line 1 modalsStyles.ts

• change ** to /*

[angelo-v]

Cool. Could you please add unit tests and also stories to storybook?

[timbl]

Is this a modal in the sense that it block all interaction for the user until the choice has been made? If so then I would prefer that it is not. It should allow the user to work on other things while the choice has not been made yet. Maybe it already does.

See https://www.w3.org/DesignIssues/UserInterface.html#modals
Also good to pass the function a DOM element near or under ot on top of which to make the pop-up so the choice doesn't get lost in the wrong part of the UI.

[TallTed]

clarity changes to comments, and adding some // comment markers to lines without them in larger current /* ... */ comment blocks (so if the /* ... */ wrappers around the code are removed, these comment lines don't break the build)

[Copilot]

Pull request overview

Adds a new “links modal” widget under src/widgets/, along with a dedicated style helper module, and re-exports the widget from the widgets index so it can be consumed by the rest of the codebase.

Changes:

• Introduces createWindow(...) modal builder for rendering a list of link items in a modal.
• Adds modalsStyle.ts containing modal style helpers/constants.
• Re-exports the new modal module from src/widgets/index.js.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 9 comments.

File	Description
src/widgets/modalsStyle.ts	Adds modal style options and style helper functions/constants.
src/widgets/modals.ts	Implements modal DOM creation (modal container, content, close control, link list).
src/widgets/index.js	Re-exports the new modals widget module.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[timea-solid]

What would help here is a screenshot of how the modal looks.