Atomic Design, is a modal an organism?

Question

There is a tile (molecule) with an image, some text and a play button. When the button is triggered a video should be shown via a modal. I think a modal should be an organism, but i want the modal to be part of the tile, which is an molecule.

The modal should be part of the tile, because its easier to use it that way. I dont want always wire them up from inside an other organism, template or view.

Should i make the modal to a moclecule or should i make the tile to an organism?

Any advice?

Answer 1

I know this is an old question, but I recently stumbled on this while trying to figure out basically the same thing and wanted to add my two cents.

Note: I just started learning about atomic design, so this could be completely wrong - Take it for what it is, an opinion.

Brief background

In my case, I have a component (lets call it Form A) which is going to live inside of Modal A. Modal A is a very simple modal which is more of just a dialog modal (basically just contains open/close functionality) but it happens to have a form inside of it in this case.

Since the Modal technically contains a form (molecule) visually, I initially figured this must be considered an organism, or at the very least, another molecule.

My Solution

After thinking on this for a while, and referring to https://atomicdesign.bradfrost.com/chapter-2/ for guidance, in my instance the following sentence made it clear for me. (in my opinion)

These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional."

In my mind, going by this logic, I can break my modal down all the way to the atomic level...

If I remove the Form A component from the modal content, the modal is still functional (just has no content). To me, this tells me that I should in fact make a general Modal component and label it as an atom.

After I have a Modal atom component, I can simply pass it children to change the content of the modal. This allows me to easily have a Modal A, Modal B, Modal C component which in my opinion would then be an organism since at that point it is implementing the molecules to create a larger component.

Possible Answer?

So, if I were going to try to answer your question while using my own logic:

I would personally create a simple general re-usable modal component as an atom, then I would create an organism, say <PlayVideo /> which has inside of it the

<Modal props={modalSpecificProps}>
  <Video />
  {any other content to display in the modal}
</Modal>

With <Video /> being a child along with whatever else should be displayed inside the modal.

The only thing I would say I'm still unsure about myself is, can something be an atom, but still technically allow children to be placed in the atom as well?

Anyways, food for thought for anyone else that stumbles across this.