Add reusable modal #362

2024-02-08T01:56:33+08:00

robzolkos commented

2024-02-08 01:56:33 +08:00

(Migrated from github.com)

Closes https://github.com/maybe-finance/maybe/issues/360

This adds a modal helper method. This wraps the complexity of rendering a modal such that you just need to wrap your view with this helper:

<%= modal do %>
  .. view you want displayed in modal ...
<% end %

To trigger the display of the modal - any link or button that should open a modal needs to specify to use the modal turbo frame

<%= link_to "Open Modal", some_path, data: { turbo_frame: "modal" }

The modal will close on ESC and clicking away from it. It includes a backdrop that is currently the browser default but can be styled further.

This PR doesn't add any styling/headers/footers to the actual modal. It simply provides the mechanism to open/close a modal using standard rails/hotwire.

It looks like this:

Escape closes
Dark background when open
Clicking outside closes
Modal shell styling to match Figma
Document use

Closes https://github.com/maybe-finance/maybe/issues/360 This adds a `modal` helper method. This wraps the complexity of rendering a modal such that you just need to wrap your view with this helper: ``` <%= modal do %> .. view you want displayed in modal ... <% end % ``` To trigger the display of the modal - any link or button that should open a modal needs to specify to use the modal turbo frame `<%= link_to "Open Modal", some_path, data: { turbo_frame: "modal" }` The modal will close on ESC and clicking away from it. It includes a backdrop that is currently the browser default but can be styled further. This PR doesn't add any styling/headers/footers to the actual modal. It simply provides the mechanism to open/close a modal using standard rails/hotwire. It looks like this: ![CleanShot 2024-02-07 at 14 04 29](https://github.com/maybe-finance/maybe/assets/290616/98913201-7b45-45e7-9ed0-5a8e1b6fda75) - [x] Escape closes - [x] Dark background when open - [x] Clicking outside closes - [x] Modal shell styling to match Figma - [x] Document use

❤️ 1

robzolkos commented

2024-02-08 02:20:46 +08:00

(Migrated from github.com)

@Shpigford question on styling (re figma). Do we want it as close as possible to the Figma using Tailwind defaults, or do we want to style is exactly as per the Figma file (I don't mind either way but there are some colors, shadows that are not default TW, so will need to slap the config around a bit.

@Shpigford question on styling (re figma). Do we want it as _close_ as possible to the Figma using Tailwind defaults, or do we want to style is _exactly_ as per the Figma file (I don't mind either way but there are some colors, shadows that are not default TW, so will need to slap the config around a bit.

Shpigford commented

2024-02-08 02:22:26 +08:00

(Migrated from github.com)

@Shpigford question on styling (re figma). Do we want it as close as possible to the Figma using Tailwind defaults, or do we want to style is exactly as per the Figma file (I don't mind either way but there are some colors, shadows that are not default TW, so will need to slap the config around a bit.

Ideally exactly, including creating new colors and shadows in Tailwind config.

> @Shpigford question on styling (re figma). Do we want it as _close_ as possible to the Figma using Tailwind defaults, or do we want to style is _exactly_ as per the Figma file (I don't mind either way but there are some colors, shadows that are not default TW, so will need to slap the config around a bit. Ideally _exactly_, including creating new colors and shadows in Tailwind config.

👍 1

Shpigford commented

2024-02-08 04:18:53 +08:00

(Migrated from github.com)

Great job on this!

❤️ 1

zackgilbert commented

2024-02-08 11:18:01 +08:00

(Migrated from github.com)

@robzolkos Learned a couple of things from this PR, so thank you!

❤️ 1

Sign in to join this conversation.