DataGrid noWrap has no effect

[dmitriy-kudelko]

Hey guys,

I'm pretty sure that it used to work, 'cause we relied on this prop just recently. But it doesn't seem to be working any more and cell text is always wrapped.

Any insights what could affect it?

I can see that whiteSpace prop was introduced for grid rows/headers cells, which is good, since it provides a more granular control. However noWrap on the grid level was also a convenient one to use. I assume this is why noWrap doesn't work any more. It's is still though supported by the component and is reflected in the documentation.

It's might be a bug. But if it wasn't meaning that the prop was removed on purpose, then it was a breaking change, and AFAICS it was not mentioned anywhere in the release notes. We updated Paste version in our app, and boom - we have a visual regression.

BTW, do you guys have any discussions regarding better documenting breaking changes and corresponding migration guides?
It would be really helpful, 'cause otherwise we (consumers) have no way to detect such changes rather than performing a full blown test each time we want to bump the version.

[dosubot[bot]]

🤖

Hey there, @dmitriy-kudelko! 😊 Good to see you back. Looks like we've got another puzzle to solve together. Hang tight, I'm diving into your issue and will get back with some insights shortly!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Datagrid - text align (updated: 06/14/2022, similarity score: 84%)
• Guidance on vertical grid spacing - Answer (updated: 06/28/2022, similarity score: 83%)
• Flex component issues with setting width/height - Answer (updated: 11/16/2022, similarity score: 82%)

[dosubot[bot]]

🤖

I appreciate your detailed feedback and I understand the inconvenience this may have caused. Based on the context provided, it seems that the noWrap prop is not being used in the Th component of the DataGrid. Instead, the whiteSpace prop is being used with a default value of "normal". This means that the text in the cells will wrap by default.

If you want to prevent the text from wrapping, you should pass "nowrap" to the whiteSpace prop when using the Th component. Here's an example:

<Th whiteSpace="nowrap">Your text here</Th>

As for the change or removal of the noWrap prop, I wasn't able to find any specific information in the repository. It's possible that this change was not documented in the release notes or the component's documentation. I understand the importance of documenting such changes and I agree that it would be beneficial to have a more detailed migration guide for breaking changes.

Regarding your question about discussions on better documenting breaking changes and corresponding migration guides, I don't have any information on that. However, your feedback is valuable and I'm sure the maintainers of the Paste design system would appreciate it.

I hope this helps! If you have any more questions or need further clarification, feel free to ask.

Sources

• packages/paste-core/components/data-grid/src/table/Th.tsx

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[SiTaggart]

Hi @dmitriy-kudelko

Based on your description that definitely sounds like a regression.

Are you able to put together a very simple reproduction in Codesandbox for us, and one of us will take a look over the next couple of days?

We are very intentional when introducing breaking changes. We even have an upgrade guide for when we do major releases https://paste.twilio.design/core/upgrade-guide.

This change to data grid, if it was the cause, was never intended to be a breaking change.

We will from time to time change the visual design of a component, it could be reasonably drastic. We tend to think of that as a private API of sorts, it's something we own and not something a consumer interfaces with. We don't class those as breaking changes.

A prop that appears on the public API of the component that affects how a component renders though, should also do what it says it should do. It's independent of the visual design mostly. Which is why this sounds like a regression.

[dmitriy-kudelko]

Hello!

I'm AFK now but earlier today I was able to easily reproduce this by modifying a Codesandbox example directly on the Paste documentation website: https://paste.twilio.design/components/data-grid.

All that is needed is to open one of examples on this page in edit mode, and then add noWrap prop to the DataGrid component invocation.

[TheSisb]

I've checked and this indeed was an unintended regression. Sorry! A fix will be coming shortly, thanks for the bug report.

[TheSisb]

Fixed in 20.9.0

[dmitriy-kudelko]

Thanks! It indeed works now 🎉