NXT-570: Added background option for transparent Image

CHANGELOG.md

@@ -4,6 +4,10 @@ The following is a curated list of changes in the Enact limestone module, newest
 
 ## [unreleased]
 
+### Added
+- `limestone/Image` props `backgroundColor` and `backgroundSrc` to be able to change the background of a transparent image
+- `limestone/ImageItem` props `backgroundColor` and `backgroundSrc` to be able to change the background of a transparent image
+
 ### Changed
 
 - `limestone/Alert` text container to fit the width of its text and center-align

ImageItem/ImageItem.js

@@ -52,6 +52,34 @@ const ImageItemBase = kind({
 	name: 'ImageItem',
 
 	propTypes: /** @lends limestone/ImageItem.ImageItemBase.prototype */ {
+		/**
+		 * A color to render behind the image.
+		 * Accepts any valid CSS `background-color` value (named color, hex, `rgb()`, etc.).
+		 * Gradients are not supported here. They are CSS images, not colors; use
+		 * `backgroundSrc` for an image background instead.
+		 *
+		 * This is useful when `src` (or `backgroundSrc`) points to an image with transparent
+		 * areas — set this to change what shows through those transparent regions. Changing
+		 * this value dynamically (e.g. via state) will update what's visible behind the image
+		 * without affecting the image itself.
+		 *
+		 * @type {String}
+		 * @public
+		 */
+		backgroundColor: PropTypes.string,
+
+		/**
+		 * A second image to render behind the main `src` image.
+		 *
+		 * This is useful when `src` points to an image with transparent areas — this image
+		 * will show through those transparent regions, layered above `backgroundColor` and
+		 * `placeholder` but below `src`. Accepts the same string or screen-size-keyed object format as `src`.
+		 *
+		 * @type {String|Object}
+		 * @public
+		 */
+		backgroundSrc: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
 		/**
 		 * Centers the primary caption and label in vertical orientation.
 		 *
@@ -290,7 +318,7 @@ const ImageItemBase = kind({
 		}
 	},
 
-	render: ({css, disabled, orientation, selectionComponent: SelectionComponent, showSelection, ...rest}) => {
+	render: ({backgroundColor, backgroundSrc, css, disabled, orientation, selectionComponent: SelectionComponent, showSelection, ...rest}) => {
 		delete rest.centered;
 		delete rest.imageIconComponent;
 		delete rest.imageIconSrc;
@@ -305,7 +333,7 @@ const ImageItemBase = kind({
 				disabled={disabled}
 				orientation={orientation}
 				imageComponent={
-					<Image>
+					<Image backgroundColor={backgroundColor} backgroundSrc={backgroundSrc}>
 						{showSelection ? (
 							<div className={css.selectionContainer}>
 								{SelectionComponent}

samples/sampler/stories/default/Image.js

@@ -1,11 +1,12 @@
 import Image, {ImageBase, ImageDecorator} from '@enact/limestone/Image';
 import {mergeComponentMetadata} from '@enact/storybook-utils';
 import {action} from '@enact/storybook-utils/addons/actions';
-import {object, select} from '@enact/storybook-utils/addons/controls';
+import {boolean, object, select, text} from '@enact/storybook-utils/addons/controls';
 import {ImageBase as UiImageBase} from '@enact/ui/Image';
 import ri from '@enact/ui/resolution';
 
 import {svgGenerator} from '../helper/svg';
+import transparentImage from '../../images/sprite-gear-4k.png';
 
 const src = {
 	hd: svgGenerator(200, 200, '7ed31d', 'ffffff', '200 X 200'),
@@ -22,13 +23,18 @@ export default {
 };
 
 export const _Image = (args) => {
+	const backgroundSrc = args['hasBackgroundSrc'] ? args['backgroundSrc'] : null;
+	const componentSrc = args['transparentImage'] ? transparentImage : args['src'];
+
 	const actions = {
 		onError: action('error'),
 		onLoad: action('loaded')
 	};
 
 	const controls = {
-		src: args['src'],
+		backgroundColor: args['backgroundColor'],
+		backgroundSrc: backgroundSrc,
+		src: componentSrc,
 		sizing: args['sizing']
 	};
 
@@ -64,6 +70,10 @@ export const _Image = (args) => {
 };
 
 object('src', _Image, Config, src);
+object('backgroundSrc', _Image, Config, src);
+boolean('hasBackgroundSrc', _Image, Config);
+boolean('transparentImage', _Image, Config);
+text('backgroundColor', _Image, Config, '#4c5059');
 select('sizing', _Image, ['fill', 'fit', 'none'], Config);
 
 _Image.storyName = 'Image';

samples/sampler/stories/default/ImageItem.js

@@ -5,6 +5,7 @@ import {ImageItem as UiImageItem} from '@enact/ui/ImageItem';
 import ri from '@enact/ui/resolution';
 
 import {svgGenerator} from '../helper/svg';
+import transparentImage from '../../images/sprite-gear-4k.png';
 
 const Config = mergeComponentMetadata('ImageItem', UiImageItem, ImageItemBase, ImageItem);
 ImageItem.displayName = 'ImageItem';
@@ -26,6 +27,8 @@ export default {
 
 export const _ImageItem = (args) => {
 	let style;
+	const backgroundSrc = args['hasBackgroundSrc'] ? args['backgroundSrc'] : null;
+	const componentSrc = args['transparentImage'] ? transparentImage : args['src'];
 	const isVertical = args['orientation'] === 'vertical';
 	const wideHeight = args['wideImage'] ? ri.scaleToRem(336) : ri.scaleToRem(240);
 
@@ -36,13 +39,15 @@ export const _ImageItem = (args) => {
 	}
 
 	const controls = {
+		backgroundColor: args['backgroundColor'],
+		backgroundSrc: backgroundSrc,
 		centered: args['centered'],
 		disabled: args['disabled'],
 		label: args['label'],
 		orientation: args['orientation'],
 		selected: args['selected'],
 		showSelection: args['showSelection'],
-		src: args['src'],
+		src: componentSrc,
 		wideImage: args['wideImage']
 	};
 
@@ -65,6 +70,10 @@ boolean('showSelection', _ImageItem, Config);
 boolean('wideImage', _ImageItem, Config);
 object('src', _ImageItem, Config, src);
 text('children', _ImageItem, Config, 'ImageItem Caption');
+text('backgroundColor', _ImageItem, Config, '#4c5059');
+object('backgroundSrc', _ImageItem, Config, src);
+boolean('hasBackgroundSrc', _ImageItem, Config);
+boolean('transparentImage', _ImageItem, Config);
 
 _ImageItem.storyName = 'ImageItem';
 _ImageItem.parameters = {