ink

ink copied to clipboard

A simple example:

<Color bgCyan black>
  <Box padding={1}>Text here</Box>
</Color>

Expected result: Text here at the center of a cyan box with 1 padding all around

Actual result: Text here with cyan background, but at the center of a 1 padding black box

I would recommend using <Color> with text children only, not with nested <Box>es. Think of <Color> and <Text> like <span> in the browser, it's uncommon to see nested <div>s in a <span>.

That makes sense, but also makes me think that there's missing functionality there on Box. Of course, that's probably more suited to wait until after borders go on so any color stuff can take advantage of the same boundary handling.

Yeah, there was support for coloring boxes initially, but there were some edge cases which made me revert this functionality. I should've documented those or noted somewhere, but I didn't. I will try to add support again and see how it goes.

I was trying to use this exactly, and this is how I solved it...

<ColorPipe styles='white.bold.bgblue'>
  {text.padEnd(width, ' ')}
</ColorPipe>

by the way, what's the difference between Color and ColorPipe? because this is exactly the same as

<Color bgBlue white bold>
  {text.padEnd(width, ' ')}
</Color>

and yeah, this functionality, if possible, should be provided by Box because this solution will break as soon as it's resized :-/

<ColorPipe> is a 3rd-party component, it could implement coloring differently than Ink's built-in <Color>. I will check it out!

@danikaze ink-color-pipe was designed for users who want to do some mutation with their color schemes. All styles in one prop will be more convenient in this case.

Like this tool:

So the issue is when you have a box with padding, like <Box padding={1}>Text</Box>, for <Color> component there's nothing to color on first and third lines, because those are just empty.

I'm going to leave this issue open for now, but I think when Ink is going to have support for borders, this will get solved as part of that work.

Closing, since the original issue was for Color component, which was removed in Ink 3.