Clay: Portal CSS modal inline-scroller class to Clay

[marcoscv-work]

This pattern looks like a general need in Liferay portal, can we add it to Clay in some way?

@media (min-height: 400px) {
    .modal-body.inline-scroller {
        max-height: 320px;
    }
}

Right now it is a CSS file included in the module frontend-css-web, wich we want to remove

Should be this pattern of max-height validated by Lexicon? @drakonux

[marcoscv-work]

From:
liferay-portal/modules/apps/frontend-css/frontend-css-web/src/main/resources/META-INF/resources/portal/_modals.scss

To:
clay/packages/clay-css/src/scss/components/_modals.scss (Line 212)

[matuzalemsteles]

Hey @marcoscv-work if I'm not mistaken we already have the possibility to make Modal scrollable but I see that it is set to max height 125px.

[pat270]

What do you guys think about setting it to 320px by default without the media query? Long content in modal might be hard to scroll in a 125px container.

[matuzalemsteles]

Well I agree to set it to 320px, 125px, it's not user comfortable I think, but it would be nice to wait @drakonux to see if we can with media query or not or just change the maximum height to up or down.

[marcoscv-work]

Sounds good to me, and I don't see a specific lexicon setting for this, maybe we can double check with @ambrinchaudhary who is the style owner

[drakonux]

About modals height we wrote:

_Modal height needs to reflect 2 different behaviors depending on the context of use that must be defined by a Product Designer._

_- The modal height must be adapted by default to the content height. The content is bigger than the available space in the screen, a scroll bar must appear in the modal body to scroll the content._

_- A specific height can be passed through a parameter. In case the content is bigger than the height the modal won’t grow in height but allow to scroll the content in the body._

So we are talking about the second behavior. Do we have some kind of convention with 320px? Are many teams using it? I agree with Patrick 125px is too short.

ps. I thought we worked on modals height giving recommendations but it seems we didn't. @matuzalemsteles could you track why we chose that 125 value?

[matuzalemsteles]

I think for the first behavior we added some fixed height at scale (small, medium, large and extra large) https://clayui.com/docs/components/modal/markup.html#css-height. For the second behavior, I think we didn't implement that behavior I'm not sure why, add 125px I think it already existed before the definition, @pat270 do you remember anything?

[pat270]

The only reason for 125px is so that it can fit inside smaller components. I never got any specs for modal so I left as is to leave up to user to decide what it should be.

[marcoscv-work]

So guys look like we will get an agreement and will be assumed in Clay, so I'm going to start the process to remove it from portal ;-) !

[ambrinchaudhary]

Sounds good to me, and I don't see a specific lexicon setting for this, maybe we can double check with @ambrinchaudhary who is the style owner.

I agree with all of you that 125px is too short... I can't remember where it came from but when we saw it working in portal we were not happy with the result and experience and that is why we decided (I guess with @marcoscv-work) to increase it to 320px, because at least in portal we won't have smaller modals...

So... ok to remove it from portal and add it to Clay ;-)

[liferay-lexicon]

For now, we agree to go with 320px. We should review it better for sure and document it on the Lexicon site, but we are focused on other tasks so go on ;)

Thanks, everyone.

[github-actions[bot]]

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-130566