Modal - add render prop to allow for custom title content

[keithjgrant]

We would like to more complex content to the title of a Modal. This isn't possible now with the existing title string prop. Please add support for a render prop to support custom title rendering with more complex content.

[rachael-phillips]

Hi @keithjgrant a few questions for you:

• What product/project does this impact?
• List any product/project release(s) and timelines your trying to align with
• Is this currently blocking implementation?

[keithjgrant]

This is for Ansible AWX. There is no set timeline at the moment, as we're rewriting the app in React, but this might be blocking some of that development—we've yet to determine whether we can temporarily hack around it.

[rachael-phillips]

@srambach and @mcarrano would you mind reviewing this?

[mcarrano]

@keithjgrant can you give me an example of the type of content you want to render? Do you have any mockups of what this might look like?

[keithjgrant]

This is the sort of thing we’re trying to do:

[keithjgrant]

pinging @mabashian, since he's the one who was working on this

[mcarrano]

@keithjgrant Thanks for posting the screen shot. It definitely helps to see this. I would also be interested to hear from @kybaker and @mcoker regarding whether there a way we should do this with existing PF4 components.

It looks like this is part of some time of step by step workflow, is that right? We do have an ongoing discussion about adding something like this that is a cross between a form and a wizard. If you have a need for this sort of thing, we have an open feature request here: https://github.com/patternfly/patternfly-next/issues/1242 I'd like to see us have a consistent approach to this sort of thing.

[mcoker]

I don't think you can achieve that header layout using just the tools in core, you would need to write custom CSS.

One way around it would be to set hideTitle not include the modal title and just put your custom header in the modal body, but that will create extra padding on the right and keep the content below the title from extending to the right edge of the modal body area, and from looking at it, doesn't look like the component supports removing the title entirely.

[mabashian]

@mcarrano That's correct it's a two step workflow with the first step having two different tabs to toggle between. In the meantime, how would you recommend approaching this? My initial thought was to hide the header and add a faux header to the top of the modal body.

[mcoker]

@jgiardino is there any reason we wouldn't want to support removing the modal title entirely in the react component as shown in the ModalBox No Header Example in core?

[jgiardino]

From an accessibility perspective that should work. When using the No Header Modal example, I would suggest defining these props on the react component:

• title="Add Roles" so that it matches the text string used in the custom header
• ariaDescribedById="[id]" - It might make sense to use the text "Step 1 of 2 Select users or teams below" as the description for this modal. If so, you would include an id on the element that wraps this text and use that as the value for this prop.

[rvsia]

Hi all,

it would be great to change title prop from string to node.

In our product (Cloud Services) we are using react-intl which allows us to localize texts. However, to localize a text we need to use a component:

<FormattedMessage
    id="sources.deleteTextBody"
    defaultMessage="Any and all historical data"
/>

Which returns localized string wrapped in <span>. So, because of props warning, we cannot use this approach with modals (and with every other component, which uses string props.)

(There is also an option to use a function to localize text. However, you need to inject a new prop to the component and that's unnecessarily complication of the code.)

@Hyperkid123 @martinpovolny @karelhala