Feature request: Add the option borderBackgroundColor
HI.
In some applications you feel the lack of the borderBackgroundColor option, which changes the background color of the box perimeter.
Here I report the diff of the index.js file that adds that option. I did some testing and it seems to work.
diff --git a/index.js b/index.js
index ca00b36..9e6bae8 100644
--- a/index.js
+++ b/index.js
@@ -210,8 +210,11 @@ const makeContentText = (text, { padding, width, textAlignment, height }) => {
const boxContent = (content, contentWidth, options) => {
const colorizeBorder = (border) => {
- const newBorder = options.borderColor ? getColorFn(options.borderColor)(border) : border;
- return options.dimBorder ? chalk.dim(newBorder) : newBorder;
+ const coloredBorder = options.borderColor ? getColorFn(options.borderColor)(border) : border;
+ const bgColoredBorder = options.borderBackgroundColor
+ ? getBGColorFn(options.borderBackgroundColor)(coloredBorder)
+ : coloredBorder;
+ return options.dimBorder ? chalk.dim(bgColoredBorder) : bgColoredBorder;
};
const colorizeContent = (content) =>
@@ -243,14 +246,15 @@ const boxContent = (content, contentWidth, options) => {
if (options.borderStyle !== NONE || options.title) {
result +=
+ marginLeft +
colorizeBorder(
- marginLeft +
- chars.topLeft +
+ chars.topLeft +
(options.title
? makeTitle(options.title, chars.top.repeat(contentWidth), options.titleAlignment)
: chars.top.repeat(contentWidth)) +
chars.topRight
- ) + NEWLINE;
+ ) +
+ NEWLINE;
}
const lines = content.split(NEWLINE);
@@ -268,9 +272,8 @@ const boxContent = (content, contentWidth, options) => {
if (options.borderStyle !== NONE) {
result +=
NEWLINE +
- colorizeBorder(
- marginLeft + chars.bottomLeft + chars.bottom.repeat(contentWidth) + chars.bottomRight
- );
+ marginLeft +
+ colorizeBorder(chars.bottomLeft + chars.bottom.repeat(contentWidth) + chars.bottomRight);
}
if (options.margin.bottom) {A small test to make clearer the usefulness of the new option.
console.log(
boxen("griffin", {
backgroundColor: "black",
borderStyle: "single",
padding: 1,
margin: 1,
})
);
console.log(
boxen("griffin", {
backgroundColor: "black",
borderBackgroundColor: "black", // <--- the new option
borderStyle: "single",
padding: 1,
margin: 1,
})
);
console.log(
boxen(`great ${chalk.yellow("griffins")}
flying all around
the ${chalk.red("whole world")}`,
{
title: "GRIFFINS",
titleAlignment: "center",
backgroundColor: "black",
borderBackgroundColor: "black", // <---
borderStyle: "single",
padding: 1,
margin: 1,
}
)
);
Consider making these changes in your code.
sindresorhus / boxen
Create boxes in the terminal
1.5k
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too