forumone / gesso

Gesso Drupal theme
67 stars 13 forks source link

[683] Adds modal component to gesso #855

Closed tomealter closed 3 months ago

tomealter commented 5 months ago

@coreylafferty @dcmouyard @kmonahan First stab at the modal component.

It uses <dialog> as the base element and the corresponding showModal() and close() methods for operation.

There is currently an optional variable for "Open by default" which automatically opens the modal on page load.

Let me know if there are other options we should consider.

I was assuming that the modal size and overlay color/effect/animation would be custom on a project by project basis. So I just included some simple styling with comments to point out where these can be updated.

kmonahan commented 4 months ago

Nah, I don't think this needs to be converted to TypeScript. Currently TypeScript is supported in Gesso for Drupal but not required. If we want to convert to TypeScript across the board, that's probably a separate issue/discussion.

tomealter commented 4 months ago

@dcmouyard @kmonahan @coreylafferty called out items have been fixed.

kmonahan commented 3 months ago

@dcmouyard Definitely a different PR. I'm also not sure extending HTMLDialogElement is the best way to do it (but open to being convinced otherwise!) I know you just did it somewhere and assume there was good reason that warranted it, but in terms of what we want to put as standard in Gesso, I'd want to first explore whether we can find something that doesn't require overriding HTML elements. A couple initial thoughts: a custom event the modal listens for that can be fired to open the modal or wrapping the modal code in a class so the actual modal element is a property of the modal. For now, I think it's worth opening an issue for but I think it can be future work.