No way to set background image for About Modal via JS

[seanforyou23]

AboutModal accepts a logoImageSrc prop and passes this to AboutModalBoxContainer, but then doesn't do anything with it. I believe it was intended to set the background image on the right side of the modal box. Currently there's no way to override the bg image unless you're using CSS, which isn't always possible on the consuming side.

Since we're not currently using the logoImage{Src,Alt} property for anything, I think we could just rename this to something more appropriate like bgImgSrc and use this value to apply the background image when it's provided. Regardless of how it's implemented, we just need a way to override the background image using pure JS, however that's accomplished.

https://github.com/patternfly/patternfly-react/blob/master/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.js#L57

@dlabaj

[dgutride]

@seanforyou23 - why would a consumer not be able to use CSS? There are some properties that will always only be available via css customization and this is one of our guiding principles. I could see a src image possibly being an exception, but I'd like to understand the foundation of the argument before we move forward.

[seanforyou23]

@dgutride sorry wrote that description in a hurry, let me clarify. Not that we can't use CSS at all, just that we can't use CSS to target certain image assets because some assets are generated during the build process with a hash in the name for cache busting purposes, so the exact name isn't really known (for example /static/media/pf4-downstream-bg.5a6958f1.svg.

I was hoping we could use a technique kinda like below to allow users to pass a dynamically generated file path or data url, and then plant that on the hero DOM element. Thoughts?

render(){
  const style = {
    "--pf-c-about-modal-box__hero--sm--BackgroundImage": `url(${bgImg})`
  } as React.CSSProperties;
  return <div style={style}>...</div>
}

[rachael-phillips]

Closing as this was completed