New features

Custom border style

fb66872

With the addition of borderStyle prop to Box, you can define custom border style for rendering borders.

<Box
	borderStyle={{
		topLeft: '↘',
		top: '↓',
		topRight: '↙',
		left: '→',
		bottomLeft: '↗',
		bottom: '↑',
		bottomRight: '↖',
		right: '←'
	}}
>
	<Text>Content</Text>
</Box>

Individual colors for each border side

015202c

Box has supported borderColor prop for a while now to change the color of the border. In this release, there are new borderTopColor, borderBottomColor, borderLeftColor and borderRightColor props to change the color for each border side individually.

<Box
	borderStyle="single"
	borderTopColor="magenta"
	borderBottomColor="green"
	borderLeftColor="yellow"
	borderRightColor="cyan"
>
	<Text>So colorful</Text>
</Box>

Toggle visibility of individual border sides

3e0aeab

As you can see, this is a pretty border-themed release. Continuing with the trend, now you toggle visibility of any border side individually via borderTop, borderBottom, borderLeft and borderRight props.

For example, if you wanted to hide top and bottom borders, you'd pass false to borderTop and borderBottom props respectively.

<Box
	borderStyle="single"
	borderTop={false}
	borderBottom={false}
>
	<Text>Content</Text>
</Box>

Other changes

• Rework parsing keyboard input in useInput (#576) 6f99ca3
• Detect arrow keys when pressed together with meta key 8180c1c
• Fix tab key incorrectly having ctrl equal to true 26b8364
• Fix arrow and page up/down keys detected as meta keys (#573) 09261d5
• Improve diffing of styles (#566) 690d48c

v4.1.0...v4.2.0