Ink: Add <Newline> and <Spacer> components

[colinking]

This question might make zero sense in the context of terminals, but would Ink consider adding support for the break line (<br/>) tag?

This would replace the need to use {'\n'} for new lines, though CMIIW and there is already a better way to add newlines to text in Ink! Might be that most use-cases should just use flex/margin/height, but that seems to quickly become verbose in my experiences so far.

[sindresorhus]

If we decide to add this, which I personally think could be useful, it should be something like <Newline/> and not <br/> as we also moved away from using <div> and <span>.

[vadimdemedes]

Could you share where do you find a need to use \n?

[vadimdemedes]

Hey @sindresorhus, curious why do you think a <Newline/> component would be useful, since there are margin and padding built in?

[sindresorhus]

1. Same reason I still use <br> in HTML. I'm lazy. I just want some quick vertical spacing. Padding/margin requires more thinking.
2. https://mxstbr.com/thoughts/margin
3. SwiftUI has a Spacer component (which can have static height too).
4. Sometimes easier to use a <Newline> with dynamic content, than having to change the padding based on some state.

Alternatively, add a Spacer component that can both have fixed width/height, but also flexible width/height that would push the content.

[vadimdemedes]

Good points!

[vadimdemedes]

Added <Newline> in https://github.com/vadimdemedes/ink/commit/9f4c6f89088865c59bc84ebcf0bdadfef6606784.

However, not so sure about the usefulness of <Spacer>, when there are alignItems and justifyContent props in <Box>. E.g. these are the same:

<Box justifyContent="space-between">
  <Text>Left</Text>
  <Text>Right</Text>
</Box>

<Box>
  <Text>Left</Text>
  <Spacer/>
  <Text>Right</Text>
</Box>

[sindresorhus]

What if you want:

<Box>
  <Text>Left</Text>
  <Spacer/>
  <Text>Right</Text>
  <Text>Right2</Text>
</Box>

[vadimdemedes]

Good point again. This would require grouping Right and Right2 nodes.

[vadimdemedes]

Added <Spacer> via https://github.com/vadimdemedes/ink/commit/e8ae2af76ec2b23a0b700f0c153e25579f2bcd3d. Going to keep this issue open until Ink 3 is out.

[vadimdemedes]

Ink 3 is out with the fix for this issue included! Read the full announcement at https://vadimdemedes.com/posts/ink-3 :)