Add `overflow` props to `Box` component

This PR adds overflowX, overflowY and overflow props to Box component to hide any content overflowing the element's bounds. Allowed values are visible (default) and hidden.

This is a follow up PR to https://github.com/vadimdemedes/ink/pull/393. Credit to @tin-t for submitting an initial implementation of this feature, which this PR is based on!

Everyone is welcome to try it out!

I'm really excited to see this progress. I made a fun project over the holiday break and ran into some of these scroll/overflow issues others have been commenting on.

I have a few questions that could help explain how this overflow is supposed to work. I pulled down this branch locally and was modifying an example and wasn't quite able to get it to work. I then checked the tests and noticed they all required flexShrink={0} on the inner Box. This was a bit different than the way I expected it to work with CSS but this could just be a different mental model that I have.

For example:

<Box width={2} overflowX="hidden">
    <Box>
      <Text>Hello World</Text>
    </Box>
</Box>

I would expect to output:

He
Wo

Compared to the similar CSS example:

Thanks again for this awesome project, ink has been really fun to work with.

I would expect to output:

Great observation.

What's the hold up for not merging this PR? Are there any blockers?

@dsmyda https://github.com/vadimdemedes/ink/issues/506

It may really be time to fork. Even before the war collaboration on this project was very slow.

Now there's the war, and the author has stated they aren't moving ahead on the project any more (which I personally respect, and sincerely hope they and people they care about are ok). #506

The thing is, evidenced by continued contributions, others are still interested in advancing the software. To this end I've forked Ink and renamed Ink Solid . It's name is a reflection of the project standing in solidarity with the original author. At this link you'll find an invitation to contribute ideas to move Ink forward through Ink Solid. When development resumes here, the author may find any progress useful.

P.S. this is my first time using Open Source to literally copy a project. If there's anything wrong with doing this either ethically, technically, or otherwise please do let me know...

It may really be time to fork. Even before the war collaboration on this project was very slow.

Now there's the war, and the author has stated they aren't moving ahead on the project any more (which I personally respect, and sincerely hope they and people they care about are ok). #506

The thing is, evidenced by continued contributions, others are still interested in advancing the software. To this end I've forked Ink and renamed Ink Solid . It's name is a reflection of the project standing in solidarity with the original author. At this link you'll find an invitation to contribute ideas to move Ink forward through Ink Solid. When development resumes here, the author may find any progress useful.

P.S. this is my first time using Open Source to literally copy a project. If there's anything wrong with doing this either ethically, technically, or otherwise please do let me know...

I probably would've waited for someone with a bit more experience to lead the charge and do that.

@vadimdemedes any progress on this? sorry to bother you, but I'm building something and this feature would help me quite a bit

cc: @sindresorhus any chance this could be merged?

Seeing that development was unpaused, could we please get this merged?

Will take a look at it again soon.

@ad4mx can you try it out by installing Ink from this branch and seeing if it works well?

I currently don't have enough time to test it, perhaps @ProjectBarks, @Claudi0-V or @chadian could test it?

I have a few questions that could help explain how this overflow is supposed to work. I pulled down this branch locally and was modifying an example and wasn't quite able to get it to work. I then checked the tests and noticed they all required flexShrink={0} on the inner Box. This was a bit different than the way I expected it to work with CSS but this could just be a different mental model that I have.

@chadian Ink tries to work more similar to React Native layout, rather than a browser layout. The overflow prop introduced in this PR is meant for clipping Boxes rather than Text nodes, since Text is already wrapped by default in Ink → https://github.com/vadimdemedes/ink#wrap.

If we look at your example, Ink lays out text as if you added word-break: break-all on the container.