[Share Data] Fill in the metadata - Dropdown / Tag input about dataverse-portal HOT 9 OPEN

@AnjaMis
Please, could you add the technical spec related to a new Modal component, designed from scratch?

from dataverse-portal.

Thank you all for your valuable comments, I have updated my tech spec, I hope it's better now :) Please let me know again if I missed something or you have some other suggestions

from dataverse-portal.

Nice improvements! I think you forgot the children prop, and also you can replace both classnames by a classes object, as we made in some of our components, it's more flexible to apply style where we want :)

from dataverse-portal.

Technical Specification: Modal Component

Description

The Modal Component is a React-based, highly customizable, and reusable solution designed for displaying focused content in a modal overlay.

The component features a controlled modal behavior, meaning its visibility is determined by the parent component's state through the isOpen prop. When the modal is open, users can view a clear representation of the content, enabling focused interactions.

Modal Component

Props

• isOpen (boolean, required): Controls the visibility of the modal. When set to true, the modal is open, and when set to false, it's closed.
• onClose (function, required): A callback function that closes the modal when the close button is clicked or when clicking outside the modal.
• closeOnEsc (boolean, optional): If set to true, pressing the 'Esc' key will trigger the modal to close. Defaults to true.
• isCentered (boolean, optional): If set to true, the modal will be vertically and horizontally centered on the screen. Defaults to false.
• motionPreset (string, optional): to choose a suitable animation preset for the modal transition. Defaults to a suitable animation preset.
• classes (object, optional): An object containing CSS class names to apply custom styles to the modal and overlay elements.
  • main (string, optional): Apply custom styles to the modal content using this CSS class name.
  • overlay (string, optional): Apply custom styles to the background overlay behind the modal using this CSS class name.
• children (React Node, optional): The content to be displayed inside the modal.

Usage

1. Integrate the <Modal> component into the application where needed to display content in a modal format.
2. Maintain a state variable, e.g., isModalOpen, to track the open/closed state of the modal.
3. When the modal needs to be displayed, set the isModalOpen state to true.
4. Render the <Modal> component conditionally based on the isModalOpen state. Pass the props (listed above)
5. Use JSX to define the content inside the <Modal> component.
6. When the modal is open, users can view the content inside the <Modal> . When they click the close button or outside the modal, the modal will be closed by calling the onClose prop function, updating the isModalOpen state to false.

Note

This is just a preliminary suggestion. Most of the modal stylings can be done with CSS, however, if needed, some could be added as props.

from dataverse-portal.

@AnjaMis thank you for this detailed specification!
The problem you'll find here is that the design of this component leads to an overly specific result.
You've defined a mandatory hiddenItems prop as being a list of "hidden" items: this is true for this feature, as we're trying to display hidden items through the modal.
But it's not always a question of hidden items as described here, but rather of "content" to be displayed to the user (which won't necessarily be an array of items).
Similarly, if we want to use this modal elsewhere, it's not certain that we need a title to display.
You can take a look at other libraries such as MUI or ChakraUi to see how to build this modal to make it generic 🚀

from dataverse-portal.

@lolottetheclash good point! I have updated my previous comment now! :)

from dataverse-portal.

@AnjaMis thanks, that's a very detailed specification! 👍

In order to make it easier to write the specification, we can take a step back and discuss about the definition of the Modal, that influences how we orient the specification description.
Indeed, the modal might also be used to alert the user or invite him to perform a specific action. That additional definition helps to define it's functionalities by detaching it's usage from the context we primarily need (revealing hidden items).

The modal component would probably need a third parameter for it's JSX content. I think we need to define it even though we use the default React children property.

Also, modal use to be displayed at the top of the App (e. g. our Notification component), mainly because of styling considerations.
You can achieve that using createPortal API.

from dataverse-portal.

Thx @AnjaMis :)
I think you must consider going a little bit further in the specification, especially regarding the way the modal behaves.

E.G. Should we close the modal on click outside?, on pressing escape button?, should we add a way to disable these options? How the user could customize the viewport's background behind the modal? ...
Don't hesitate to have a look at other UI libraries ;)

from dataverse-portal.

Hey team! Please add your planning poker estimate with Zenhub @fredericvilcot @0xLodz @AnjaMis @lolottetheclash

from dataverse-portal.