Implemented a new size for Cell that fits to content better

Enact-DCO-1.0-Signed-off-by: Blake Stephens <[email protected]>

packages/ui/Layout/Cell.js

@@ -58,7 +58,7 @@ const CellBase = kind({
 		 * @default 'div'
 		 * @public
 		 */
-		component:  EnactPropTypes.renderable,
+		component: EnactPropTypes.renderable,
 
 		/**
 		 * Called with a reference to [component]{@link ui/Cell.Cell#component}
@@ -116,25 +116,27 @@ const CellBase = kind({
 	},
 
 	computed: {
-		className: ({shrink, size, styler}) => styler.append({shrink, grow: (!shrink && !size)}),
+		className: ({shrink, size, styler}) => styler.append({shrink, grow: (!shrink && !size), content: (size === 'content')}),
 		style: ({align, shrink, size, style}) => {
-			if (typeof size === 'number') size = ri.unit(ri.scale(size), 'rem');
+			if (typeof size === 'number') size = ri.scaleToRem(size);
 
-			let cellSize = size;
-			if (!size) {
-				if (shrink) {
-					cellSize = '100%';
+			let cellSize;
+			if (size) {
+				if (size === 'content') {
+					size = 'auto';
 				} else {
-					cellSize = 'none';
+					cellSize = size;
 				}
+			} else if (shrink) {
+				cellSize = '100%';
 			}
 
 			return {
 				...style,
 				alignSelf: toFlexAlign(align),
 				flexBasis: (shrink ? null : size),
 				// Setting 100% below in the presence of `shrink`` and absense of `size` prevents overflow
-				'--cell-size': cellSize
+				'--cell-size': (cellSize || 'initial')
 			};
 		}
 	},

packages/ui/Layout/Layout.js

@@ -203,7 +203,7 @@ const LayoutBase = kind({
 		 * @default 'div'
 		 * @public
 		 */
-		component:  EnactPropTypes.renderable,
+		component: EnactPropTypes.renderable,
 
 		/**
 		 * Called with a reference to [component]{@link ui/Layout.Layout#component}

packages/ui/Layout/Layout.module.less

@@ -18,6 +18,10 @@
 		&.shrink {
 			flex: 0 0 auto;
 		}
+
+		&.content {
+			flex: 0 1 auto;
+		}
 	}
 
 	// Modes