Skip to content

Dim border colors #582

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 2, 2023
Merged

Dim border colors #582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1065,6 +1065,72 @@ Accepts the same values as [`color`](#color) in `<Text>` component.
</Box>
```

##### borderDimColor

Type: `boolean`\
Default: `false`

Dim the border color.
Shorthand for setting `borderTopDimColor`, `borderBottomDimColor`, `borderLeftDimColor` and `borderRightDimColor`.

```jsx
<Box borderStyle="round" borderDimColor>
<Text>Hello world</Text>
</Box>
```

##### borderTopDimColor

Type: `boolean`\
Default: `false`

Dim the top border color.

```jsx
<Box borderStyle="round" borderTopDimColor>
<Text>Hello world</Text>
</Box>
```

##### borderBottomDimColor

Type: `boolean`\
Default: `false`

Dim the bottom border color.

```jsx
<Box borderStyle="round" borderBottomDimColor>
<Text>Hello world</Text>
</Box>
```

##### borderLeftDimColor

Type: `boolean`\
Default: `false`

Dim the left border color.

```jsx
<Box borderStyle="round" borderLeftDimColor>
<Text>Hello world</Text>
</Box>
```

##### borderRightDimColor

Type: `boolean`\
Default: `false`

Dim the right border color.

```jsx
<Box borderStyle="round" borderRightDimColor>
<Text>Hello world</Text>
</Box>
```

##### borderTop

Type: `boolean`\
Expand Down
37 changes: 33 additions & 4 deletions src/render-border.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import cliBoxes from 'cli-boxes';
import chalk from 'chalk';
import colorize from './colorize.js';
import {type DOMNode} from './dom.js';
import type Output from './output.js';
Expand All @@ -25,6 +26,18 @@ const renderBorder = (
const rightBorderColor =
node.style.borderRightColor ?? node.style.borderColor;

const dimTopBorderColor =
node.style.borderTopDimColor ?? node.style.borderDimColor;

const dimBottomBorderColor =
node.style.borderBottomDimColor ?? node.style.borderDimColor;

const dimLeftBorderColor =
node.style.borderLeftDimColor ?? node.style.borderDimColor;

const dimRightBorderColor =
node.style.borderRightDimColor ?? node.style.borderDimColor;

const showTopBorder = node.style.borderTop !== false;
const showBottomBorder = node.style.borderBottom !== false;
const showLeftBorder = node.style.borderLeft !== false;
Expand All @@ -33,7 +46,7 @@ const renderBorder = (
const contentWidth =
width - (showLeftBorder ? 1 : 0) - (showRightBorder ? 1 : 0);

const topBorder = showTopBorder
let topBorder = showTopBorder
? colorize(
(showLeftBorder ? box.topLeft : '') +
box.top.repeat(contentWidth) +
Expand All @@ -43,6 +56,10 @@ const renderBorder = (
)
: undefined;

if (showTopBorder && dimTopBorderColor) {
topBorder = chalk.dim(topBorder);
}

let verticalBorderHeight = height;

if (showTopBorder) {
Expand All @@ -53,15 +70,23 @@ const renderBorder = (
verticalBorderHeight -= 1;
}

const leftBorder = (
let leftBorder = (
colorize(box.left, leftBorderColor, 'foreground') + '\n'
).repeat(verticalBorderHeight);

const rightBorder = (
if (dimLeftBorderColor) {
leftBorder = chalk.dim(leftBorder);
}

let rightBorder = (
colorize(box.right, rightBorderColor, 'foreground') + '\n'
).repeat(verticalBorderHeight);

const bottomBorder = showBottomBorder
if (dimRightBorderColor) {
rightBorder = chalk.dim(rightBorder);
}

let bottomBorder = showBottomBorder
? colorize(
(showLeftBorder ? box.bottomLeft : '') +
box.bottom.repeat(contentWidth) +
Expand All @@ -71,6 +96,10 @@ const renderBorder = (
)
: undefined;

if (showBottomBorder && dimBottomBorderColor) {
bottomBorder = chalk.dim(bottomBorder);
}

const offsetY = showTopBorder ? 1 : 0;

if (topBorder) {
Expand Down
36 changes: 36 additions & 0 deletions src/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,42 @@ export type Styles = {
*/
readonly borderRightColor?: LiteralUnion<ForegroundColorName, string>;

/**
* Dim the border color.
* Shorthand for setting `borderTopDimColor`, `borderBottomDimColor`, `borderLeftDimColor` and `borderRightDimColor`.
*
* @default false
*/
readonly borderDimColor?: boolean;

/**
* Dim the top border color.
*
* @default false
*/
readonly borderTopDimColor?: boolean;

/**
* Dim the bottom border color.
*
* @default false
*/
readonly borderBottomDimColor?: boolean;

/**
* Dim the left border color.
*
* @default false
*/
readonly borderLeftDimColor?: boolean;

/**
* Dim the right border color.
*
* @default false
*/
readonly borderRightDimColor?: boolean;

/**
* Behavior for an element's overflow in both directions.
*
Expand Down
129 changes: 129 additions & 0 deletions test/borders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -745,3 +745,132 @@ test('custom border style', t => {

t.is(output, boxen('Content', {width: 100, borderStyle: 'arrow'}));
});

test('dim border color', t => {
const output = renderToString(
<Box borderDimColor borderStyle="round">
<Text>Content</Text>
</Box>
);

t.is(
output,
boxen('Content', {
width: 100,
borderStyle: 'round',
dimBorder: true
})
);
});

test('dim top border color', t => {
const output = renderToString(
<Box flexDirection="column" alignItems="flex-start">
<Text>Above</Text>
<Box borderTopDimColor borderStyle="round">
<Text>Content</Text>
</Box>
<Text>Below</Text>
</Box>
);

t.is(
output,
[
'Above',
chalk.dim(
`${cliBoxes.round.topLeft}${cliBoxes.round.top.repeat(7)}${
cliBoxes.round.topRight
}`
),
`${cliBoxes.round.left}Content${cliBoxes.round.right}`,
`${cliBoxes.round.bottomLeft}${cliBoxes.round.bottom.repeat(7)}${
cliBoxes.round.bottomRight
}`,
'Below'
].join('\n')
);
});

test('dim bottom border color', t => {
const output = renderToString(
<Box flexDirection="column" alignItems="flex-start">
<Text>Above</Text>
<Box borderBottomDimColor borderStyle="round">
<Text>Content</Text>
</Box>
<Text>Below</Text>
</Box>
);

t.is(
output,
[
'Above',
`${cliBoxes.round.topLeft}${cliBoxes.round.top.repeat(7)}${
cliBoxes.round.topRight
}`,
`${cliBoxes.round.left}Content${cliBoxes.round.right}`,
chalk.dim(
`${cliBoxes.round.bottomLeft}${cliBoxes.round.bottom.repeat(7)}${
cliBoxes.round.bottomRight
}`
),
'Below'
].join('\n')
);
});

test('dim left border color', t => {
const output = renderToString(
<Box flexDirection="column" alignItems="flex-start">
<Text>Above</Text>
<Box borderLeftDimColor borderStyle="round">
<Text>Content</Text>
</Box>
<Text>Below</Text>
</Box>
);

t.is(
output,
[
'Above',
`${cliBoxes.round.topLeft}${cliBoxes.round.top.repeat(7)}${
cliBoxes.round.topRight
}`,
`${chalk.dim(cliBoxes.round.left)}Content${cliBoxes.round.right}`,
`${cliBoxes.round.bottomLeft}${cliBoxes.round.bottom.repeat(7)}${
cliBoxes.round.bottomRight
}`,
'Below'
].join('\n')
);
});

test('dim right border color', t => {
const output = renderToString(
<Box flexDirection="column" alignItems="flex-start">
<Text>Above</Text>
<Box borderRightDimColor borderStyle="round">
<Text>Content</Text>
</Box>
<Text>Below</Text>
</Box>
);

t.is(
output,
[
'Above',
`${cliBoxes.round.topLeft}${cliBoxes.round.top.repeat(7)}${
cliBoxes.round.topRight
}`,
`${cliBoxes.round.left}Content${chalk.dim(cliBoxes.round.right)}`,
`${cliBoxes.round.bottomLeft}${cliBoxes.round.bottom.repeat(7)}${
cliBoxes.round.bottomRight
}`,
'Below'
].join('\n')
);
});