Ideas for Arc XP

Pop up / modal message window that comes out of the box with themes

As I was trying to display some important information to the user with the alert() built in tool for web browsers when I realize that themes has no out of the box component for this :(

It would be amazing if there was an out of the box component with themes that allow us to display information thorugh a simple component. The ideal solution, would be a simple component we can implement through code with the props, title, message, severity and icon. This would be easy to use and implement and will save us time for developing a custom feature for this purpose.

Appreciate your consideration 🤗!

  • Ivan Pacheco
  • Feb 24 2022
  • Needs more information
  • Attach files
  • Ivan Pacheco commented
    4 Mar 08:32pm

    The ideal implementation would be to import the component from anywhere in the code

    Let's say you name it as "popUpModal"

    import { PopUpModal } from "@wpmedia/popup-modal";

    const [isModalDisplayed, setIsModalDisplayed] = React.useState(false);

    // Some logic to show/hide the modal goes here along with other ui components

    show={isModalDisplayed} // this should trigger when is visible or not
    title="Copy to clipboard succesfully!"
    message="You can share the link by paste it anywhere you want."

    I am attaching an image of a project where I build a similar feature :D hope that helps

  • Ivan Pacheco commented
    4 Mar 08:09pm

    Thank you for your quick response @Jenae Cerovac

    The main use case would be for user feedback.

    Let's say we have a copy to clipboard button, and the user clicks the button but has no way to know if the action was done correctly. Of course we as developers could create a pop up window or alert that shows the user some response. But this would be replicated in every project.

    We are currenlty running out of time and since our client would like to use themes as much as possible that would be a useful tool so we can display messages to the user with a couple of code lines withouth having to worry about styles, logic, etc.

    As an ex contractor for the washington I think that by having this feedback tool developers using themes would be able to implement quick user feedback messages withouth spending hours in development and keeping the UI consistency that themes already has.

    Not sure if I am sharing enough context and if the example is clear enough?

  • Admin
    Jenae Cerovac commented
    1 Mar 09:25pm

    Hi Ivan, thank you for the idea. I understand concept, but can you provide me a few more details on your use case? What do you want it to look like? Is this a native browser alert or a custom modal that matches the site? What is an example of an alert that you are showing? Thanks, Jenae