fix(image-with-caption): adjust image button background color

[m4olivei]

Related Ticket(s)

#10250
https://jsw.ibm.com/browse/ADCMS-3105

Description

Sets the background style to transparent for the <button> element used in the shadow DOM of the <dds-image> and <dds-image-with-caption> components, such that when used with a transparent image (SVG, transparent gif/png), the browser's default button grey does not show through.

Note that the original issue was reported for <dds-image-with-caption>, but the issue equally effects <dds-image> component as well. Note also that the <dds-image-with-caption> button was recently deprecated, it's features merged with <dds-image>. Use of <dds-image-with-caption> should be replaced by <dds-image> (see #8839). The deprecation is documented in the Storybook README for the Image component.

Testing Instructions

• Open Storybook to the Image > Default component.
• For the "Default image" Storybook knob, choose "SVG". A transparent SVG is used as the image for the component.
• Select Lightbox as well from the Storybook knobs
• Note the browser default button color does not show through.

Changelog

Changed

• Added background-color: transparent to the button styles for the <dds-image> component when in lightbox mode.

[ibmdotcom-bot]

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/10279/index.html

Built with commit: b8daaadd2146fc8a0b7ed25cd6d4c4f8d382b20b

[ibmdotcom-bot]

Deploy preview created for package Carbon Web Components:
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10279/index.html

Built with commit: b8daaadd2146fc8a0b7ed25cd6d4c4f8d382b20b

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10279/index.html

Built with commit: b8daaadd2146fc8a0b7ed25cd6d4c4f8d382b20b

[ibmdotcom-bot]

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10279/index.html

Built with commit: b8daaadd2146fc8a0b7ed25cd6d4c4f8d382b20b

[ibmdotcom-bot]

Deploy preview created for package Web Components HTML Test Application:
https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10279/index.html

Built with commit: b8daaadd2146fc8a0b7ed25cd6d4c4f8d382b20b

[jwitkowski79]

Approved from my end! Thanks for working on this

[proeung]

LGTM!

@carbon-design-system/carbon-for-ibm-com and or @oliviaflory Can we get a review? Thanks!

[oliviaflory]

@m4olivei The change looks good from a design perspective

If we are going to keep the SVG as an example demo I'd like to change the knob label to SVG (transparent background) or something like that so it's a bit more clear.

I'll also just ping the over devs to get any ideas for a better placement (if we're keeping it)

[m4olivei]

@oliviaflory I've made the adjustment to the knob label: https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/10279/index.html?path=/story/components-image--default

Thanks for taking a look!

[kennylam]

@m4olivei There actually is a custom loader being used, but it's never played nice with assets loaded in Storybook (gotta fix that). In the meantime, I think the best way would be to take the data and put it into its own file, e.g. image/__stories__/chartSVG.js?

const foo = 'monster-encoded-chunk-of-text';

export default foo;

Then you can just import as usual and use that in images object. There are a few stories with external data files for the sake of keeping the stories less cluttered. What do you think?

[m4olivei]

In the meantime, I think the best way would be to take the data and put it into its own file, e.g. image/stories/chartSVG.js?

Yep, great suggestion. I've done exactly that. Thanks @kennylam !

[kennylam]

Thanks @m4olivei!

[oliviaflory]

Thanks @m4olivei !