Clay: Modal size default missing in Clay Modal

[victorg1991]

In lexicon definition of modals http://pat270.github.io/lexicon/v2.16.2/content/modals/ there is a "default" size that is not supported by react clay component

The current supported sizes are: https://github.com/liferay/clay/blob/8e0dd3a598bf162a1877731b8d4a67d07acbdea7/packages/clay-modal/src/types.ts#L9

Is there a reason to not include this default size? Is it planned to add it?

Thanks a lot :)

[matuzalemsteles]

hey @victorg1991 by default without set size modal will behave with default size. Let me know if this is what you were wondering, maybe we should improve our description of it.

[victorg1991]

@matuzalemsteles in my case removing the size attribute behaves as if it was 'full-screen' 🤔

[victorg1991]

Maybe there are some css problem in the portal?

[matuzalemsteles]

Oh that's weird, can you see this happening on the demo? https://storybook.clayui.com/?path=/story/claymodal--default

Maybe there are some css problem in the portal?

I'll check it out.

[victorg1991]

That demo and the one in https://next.clayui.com/docs/components/modal.html works fine 🤔

[julien]

I'm just commenting here to tell you that in my case, ClayModal with no size attribute renders correctly in portal.

[matuzalemsteles]

Hmm, I think we have some conflict within the Portal.

It seems that in some parts of Portal the modal is being rewritten in the CSS of some products. @victorg1991 can you check this out where are you testing?

cc @pat270

[julien]

@matuzalemsteles actually it renders correctly but isn't positioned correctly

[matuzalemsteles]

hey @julien, you can try looking at the modal-dialog modifier class if there's something being rewritten over it. Can I test this or is it something that didn't go to the master?

[victorg1991]

Hey @matuzalemsteles, after investigating with @julien and @marcoscv-work passing 'md' as the size prop of the modal does the trick, I think it should be added as a part of the size options though, otherwise is a bit magic, what do you think? :)

[matuzalemsteles]

Hmm, this is weird. I think we have to check first to know why this was necessary, we don't have a modal-md, so 🤷‍♂️. @pat270 can say better about this.

[marcoscv-work]

modal-md size exist and it should be our default size, but in Portal we have a mix of different libraries with same CSS classes naming working together, so right now we need a breakpoint class by default, I suggest to add modal-md by default if we do not add a size class

[jbalsas]

See https://issues.liferay.com/browse/LPS-97981 and https://github.com/brianchandotcom/liferay-portal/pull/76388/files for more details on how we had to fix positioning for our new modals while keeping intact legacy bootstrap ones.

[matuzalemsteles]

modal-md size exist and it should be our default size, but in Portal we have a mix of different libraries with same CSS classes naming working together, so right now we need a breakpoint class by default, I suggest to add modal-md by default if we do not add a size class

Yeah, I see. I wanted to say that we don't have the modal-md modifier class it was added by default tomodal-dialog. So it seems a bit magical to me to add modal-md and it all works out, maybe because it is implemented inside the Portal as class but we have modal-dialog as default here.

We can add class modal-md to both components and CSS as a new class to maintain consistency.

[pat270]

I'm just confirming there is no .modal-md in Clay CSS. There is a $modal-md variable.

[pat270]

We figured this out? Seems like Portal inconsistency, closing this. Feel free to reopen if we still need to fix here.