WRP-21128: Fixed components used in enact/ui/Layout/Cell which cannot have their css customized in consumer apps.

packages/ui/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 The following is a curated list of changes in the Enact ui module, newest changes on the top.
 
+## [unreleased]
+
+### Added
+
+- `ui/Layout.Cell` prop `componentCss` to support customizing the component used in `Cell`
+
 ## [4.8.0] - 2024-02-08
 
 No significant changes.

packages/ui/Layout/Cell.js

@@ -59,10 +59,21 @@ const CellBase = kind({
 		 */
 		component:  EnactPropTypes.renderable,
 
+		/**
+		 * Customizes `Cell` together with `component` prop.
+		 *
+		 * When using {@link ui/Layout.Cell}, the `componentCss` prop is passed to the rendered component
+		 * as `css`.
+		 *
+		 * @type {Object}
+		 * @public
+		 */
+		componentCss: PropTypes.object,
+
 		/**
 		 * Called with a reference to the root component.
 		 *
-		 * When using {@link ui/Layout.Cell}, the `ref` prop is forwarded to this component
+		 * When using {@link ui/Layout.Cell}, the `ref` prop is forwarded to the rendered component
 		 * as `componentRef`.
 		 *
 		 * @type {Object|Function}
@@ -162,13 +173,13 @@ const CellBase = kind({
 		}
 	},
 
-	render: ({component: Component, componentRef, ...rest}) => {
+	render: ({component: Component, componentCss, componentRef, ...rest}) => {
 		delete rest.align;
 		delete rest.grow;
 		delete rest.shrink;
 		delete rest.size;
 
-		return <Component ref={componentRef} {...rest} />;
+		return <Component css={componentCss} ref={componentRef} {...rest} />;
 	}
 });