PF3: About modal background image customization through props

[skateman]

When the about modal is being displayed, it is appended to the end of the document's body and there's no way to wrap it around something that would allow us custom styling in some cases.

It would be nice to have a way to set the background image through props, or dynamically set a custom CSS class on at least the top-level element.

For now the only way to go around this is to set a CSS class on the document's body and it seems like a very ugly hack for me.

[rachael-phillips]

@jeff-phillips-18 making you aware

[dgutride]

@skateman - I just tried to change the class of the container and was able to successfully change the background color, can you provide a little more details as to why this example wouldn't work for you? All of the props supported by the bootstrap modal used are passed through to the modal. https://codesandbox.io/s/pf-react-about-modal-demo-bq1qp?fontsize=14

[skateman]

@dgutride yes, adding a class to the document's body (the container) is a workaround we're doing in the PR linked above, however, I see this as an ugly hack.

[dgutride]

@skateman - I agree that putting a class on the body is a hack. That isn't what my example demonstrated, though.

 <AboutModal
          className="test-background"
          dialogClassName="test-dialog-class"

The above shows two attributes that would directly impact the dialog and internal content. This shows the bootstrap component allows for not hacking the body tag with an extra class. Please feel free to set up a meeting with me directly if you'd like an in-person demonstration.

[skateman]

Thanks @dgutride this seems working 👍