Skip to content
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.

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

Support flexWrap in Box #479

Merged
merged 8 commits into from Mar 17, 2023
Merged

Support flexWrap in Box #479

merged 8 commits into from Mar 17, 2023

Conversation

jodevsa
Copy link
Contributor

@jodevsa jodevsa commented Oct 2, 2021

adding support for flexWrap

motivation:

Building a flashcard app
Screenshot 2021-10-03 at 01 35 35

Also contributes to #464

@jodevsa
Copy link
Contributor Author

jodevsa commented Oct 2, 2021

#478 must be merged first

@jodevsa
Copy link
Contributor Author

jodevsa commented Oct 3, 2021

@sindresorhus

src/styles.ts Outdated Show resolved Hide resolved
@sindresorhus sindresorhus changed the title Add support for flexWrap Add support for flexWrap Oct 4, 2021
test/flex-wrap.tsx Outdated Show resolved Hide resolved
src/styles.ts Show resolved Hide resolved
@jodevsa
Copy link
Contributor Author

jodevsa commented Oct 4, 2021

@sindresorhus @SimenB adjusted :)

@jodevsa
Copy link
Contributor Author

jodevsa commented Oct 7, 2021

@sindresorhus @SimenB

any updates? I need this on NPM :)

@SimenB
Copy link
Contributor

SimenB commented Oct 7, 2021

I'm not a maintainer, sorry 🙂

@sindresorhus
Copy link
Collaborator

any updates?

It will need to be reviewed by @vadimdemedes

I need this on NPM :)

npm install 'jodevsa/ink#flexWrap'

src/styles.ts Outdated Show resolved Hide resolved
</Box>
);

t.is(output, 'BC\n');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it expected that there's no A here?

Copy link
Contributor Author

@jodevsa jodevsa Oct 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not really, by default overflow is expected to be visible in flex-box layout. this can be seen with plain Yoga:
https://replit.com/@SubhiAl/MonumentalNegligibleTrust#index.js

I needed to add the test to show the difference. The behaviour was there even before my changes.

Copy link
Contributor Author

@jodevsa jodevsa Oct 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It turns out that this is behaviour is caused by applying flexShrink=1 on each text node:
https://github.com/vadimdemedes/ink/blob/master/src/components/Text.tsx#L114

Changing flexShrink to 0 makes 'A' visible in the output

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was also able to reproduce the behaviour in plain Yoga:

https://replit.com/@SubhiAl/AwfulThreadbareMicroinstruction#index.js

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👋

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vadimdemedes sorry to spam you, but can this be merged?

@jodevsa
Copy link
Contributor Author

jodevsa commented Feb 22, 2022

@vadimdemedes i see that you reopened the PR. what is the next step to get this baked in?

@jodevsa jodevsa closed this Mar 6, 2022
@matteodepalo
Copy link
Contributor

@vadimdemedes @jodevsa would love to get this in! Could we reopen the PR and work towards merging it?

@jodevsa
Copy link
Contributor Author

jodevsa commented Oct 13, 2022

@matteodepalo same here :( it seems like that this repo is no longer maintained anymore. I tried hard to push for someone to merge my change.

@matteodepalo
Copy link
Contributor

@jodevsa that's a shame. I think it's be worth keeping the PR open if you think it's complete and wait for a maintainer's comment. Is there any specific reason you closed it?

@jodevsa jodevsa reopened this Oct 14, 2022
@jodevsa
Copy link
Contributor Author

jodevsa commented Oct 14, 2022

@matteodepalo not really, I've closed it to be able to track the things I'm working on as I usually ignore my notifications because they are distracting and stressful and look on my open PRs every day. I hope someday someone would improve GitHub notifications.

I've reopened the PR. @vadimdemedes it would be really nice if we can get this in someday :)

@vadimdemedes vadimdemedes changed the title Add support for flexWrap Support flexWrap in Box Mar 17, 2023
Copy link
Owner

@vadimdemedes vadimdemedes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you and sorry for taking so long 💛

@vadimdemedes vadimdemedes merged commit 7bdbde5 into vadimdemedes:master Mar 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants