Support maxWidth and maxHeight

Author: jacob314

src/styles.ts

@@ -175,6 +175,16 @@ export type Styles = {
 	*/
 	readonly minHeight?: number | string;
 
+	/**
+	Maximum width of the element.
+	*/
+	readonly maxWidth?: number | string;
+
+	/**
+	Maximum height of the element.
+	*/
+	readonly maxHeight?: number | string;
+
 	/**
 	Set this property to `none` to hide the element.
 	*/
@@ -540,6 +550,22 @@ const applyDimensionStyles = (node: YogaNode, style: Styles): void => {
 			node.setMinHeight(style.minHeight ?? 0);
 		}
 	}
+
+	if ('maxWidth' in style) {
+		if (typeof style.maxWidth === 'string') {
+			node.setMaxWidthPercent(Number.parseInt(style.maxWidth, 10));
+		} else {
+			node.setMaxWidth(style.maxWidth);
+		}
+	}
+
+	if ('maxHeight' in style) {
+		if (typeof style.maxHeight === 'string') {
+			node.setMaxHeightPercent(Number.parseInt(style.maxHeight, 10));
+		} else {
+			node.setMaxHeight(style.maxHeight);
+		}
+	}
 };
 
 const applyDisplayStyles = (node: YogaNode, style: Styles): void => {

test/scroll.tsx

@@ -529,3 +529,62 @@ test('interactive scroll', async t => {
 	const afterScrollRight = (stdout.write as any).lastCall.args[0] as string;
 	t.snapshot(afterScrollRight, 'after scrolling right');
 });
+
+const maxDimensionsScrollTests = [
+	{
+		name: 'max-width',
+		props: {
+			maxWidth: 10
+		}
+	},
+	{
+		name: 'max-height',
+		props: {
+			maxHeight: 5
+		}
+	},
+	{
+		name: 'max-width-percent',
+		props: {
+			maxWidth: '50%'
+		}
+	},
+	{
+		name: 'max-height-percent',
+		props: {
+			maxHeight: '50%'
+		}
+	},
+	{
+		name: 'max-width-and-max-height',
+		props: {
+			maxWidth: 10,
+			maxHeight: 5
+		}
+	},
+	{
+		name: 'max-width-and-max-height-percents',
+		props: {
+			maxWidth: '20%',
+			maxHeight: '20%'
+		}
+	}
+];
+
+for (const {name, props} of maxDimensionsScrollTests) {
+	test(name, t => {
+		const output = renderToString(
+			<Box
+				overflow="scroll"
+				borderStyle="round"
+				{...props}
+			>
+				<Box width={100} height={100} flexShrink={0}>
+					<Text>Scroll me</Text>
+				</Box>
+			</Box>
+		);
+
+		t.snapshot(output);
+	});
+}