Modal: Support icons in title for Modal component

[edinfor]

Is your feature request related to a problem? Please describe.
Modal dialog currently only supports text in modal header,
https://design.infor.com/code/ids-enterprise/latest/modal

Can we do the same as the message component and allow icon in the header for consistency?
https://design.infor.com/code/ids-enterprise/latest/message

Message component only takes text in the body.

Describe the solution you'd like
Enable the same configuration option to display icon in the modal title like message component.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
We have removed icon in modal component for now until the option becomes available.

Additional context
Add any other context or screenshots about the feature request here.

[tmcconechy]

The design of modals does not encourage icons as this would mean we would have to create icons for every use case. The icons will generally become less meaningfull.

Any particular use case or reason you think we shiould do this @edinfor.

cc @kevinwhitedesign in design for his thoughts

[edinfor]

@tmcconechy we are already using icons in message modal, we are just reusing the same icons for the same purpose

[tmcconechy]

We only allow alert icons there https://main-enterprise.demo.design.infor.com/components/message/example-index.html as it is a different use case. I.E. error/info..

So still not sure if we want icons on every type of modal. Probably not

[edinfor]

in that case, we need to support message component to allow passing component as body instead of text only then...we need to show more details to customers in addition to just text messages, e.g.

1. multiple shift details that need to be on different lines and styled differently based on error severity
2. combine error and warnings messages so we don't have to display multiple messages popups

[tmcconechy]

1. You can pass HTML to the message but some tags are stripped so you need to set allowedTags to ones you might need (see allow tags on https://main-enterprise.demo.design.infor.com/components/message/example-index.html). I think a simple styling for the shifts should be fine but should just be text/table ect not interactive components).
2. How can it be both an error and a warning?

[edgarinfor]

@tmcconechy, perhaps, this ticket should have been opened in the NG project as the content of the dialog is an Angular Component and NOT plain TEXT or HTML.

The problem is that, there is a gap between the Message Component and the Modal Component. The message one, allows you to show a status icon with the title BUT, it doesn't let you use a component as content. The opposite is true for the modal one, you can use a component as content BUT, it doesn't let you display a status icon with the title.

So, basically, we need a setting like this in the Modal Component api:

settings.status	string=''	Pass a status to style icon and title color ('error', 'alert', 'success', 'info')

Additionally, we would like to be able to pass a custom icon name other than 'error', 'alert', 'success', 'info'; similar to what other IDS components do.

[tmcconechy]

I still think this is clouding up the API for one use case then people may get confused and use modals for message status. I dont think we want to support status on modal when its really the function of the message component.

We can see if we want modals to have icons in general but i think using them for status mixes concerns. So i have labeled this as something to review with design.

The message component was intended to be string based and simple messages since its a directive i dont think we can make it take content like that either. But maybe in the future web component version...

So given all that maybe just manually put the icons on the modal for now.

[edgarinfor]

Yes, I can see your point about having separate concerns; but, maybe we could ignore calling it "status" for the Modal Component and just provide a "settings.icon" which would place the icon with the title.

I think that we could add the icon "manually" by passing the title as HTML to the Modal Component but, it doesn't render/look consistent with the Message Component.

[tmcconechy]

You may need to add a bit of css to do it manually. But I agree if we go ahead with this it would maybe an an icon setting and maybe an iconClass.

Do you have any mockups/designs of what you a re trying to achieve? I'll review with the team

[edgarinfor]

That's right, the iconClass as well might be needed in case we want to change colors, for example.

Here's a mockup provided by our designer:

[tmcconechy]

@kevinwhitedesign what do you think about this request?

[kevinwhitedesign]

@tmcconechy I don't see a problem with the team adding more context into the message for the user into why there's an error.

This design is a bit narrow and some of the inconsistent vertical spacing should be addressed.

[tmcconechy]

ok sounds good - we can add an icon option to the modal.

[jbrcna]

QA PAssed. v4.64.0-dev
https://main-enterprise.demo.design.infor.com/components/modal/example-title-with-icon

[CindyMercadoReyes]

BDD attached.
BDDStory_github5905.docx