Preview: https://patternfly-pr-6737.surge.sh

A11y report: https://patternfly-pr-6737-a11y.surge.sh

If we're using the example code from #6260 then this is what their rendered code looks like

<span class="pf-v6-c-truncate"><span class="pf-v6-c-truncate__start" style="
">XXXXXXXXXX         1234 </span><span class="pf-v6-c-truncate__end">4567</span></span>

Looks like the issue is that the missing space is at the end of __start, which is getting collapsed since the parent is inline-grid.

white-space: pre; is one option, but would need to apply to __start to fix the bug above, not __end. However, this will also preserve all white-space, which I don't think should be the default for the truncate component.

I could see this as either a variation in core to preserve all white-space, or possibly a react enhancement that could convert any spaces at the end of __start and beginning of __end to   maybe? cc @tlabaj wdyt?

I could see this as either a variation in core to preserve all white-space, or possibly a react enhancement that could convert any spaces at the end of __start and beginning of __end to   maybe? cc @tlabaj wdyt?

@mcoker that was part of this update and was discussed as an option.

white-space: pre; is one option, but would need to apply to __start to fix the bug above, not __end. However, this will also preserve all white-space, which I don't think should be the default for the truncate component.

@mcoker __end needs it for the middle variant

XXXXXXXXXX 1234 4567

This doesn't seem like a real use case. If it is, there's likely an error, which isn't part of this issue or our responsibility to govern.

@evwilkin @srambach WDYT?

~~@mattnolting were you going to update the parent components (or the children) to have white-space: pre? ~~

Oops, missed that the update is in a grouped selector

@mvollmer Does this solution work for you? Removing multiple whitespaces would require JS. That can be addressed in a followup if necessary.

🎉 This PR is included in version 6.0.0-alpha.169 🎉

The release is available on:

• GitHub release
• npm package (@alpha dist-tag)

Your semantic-release bot 📦🚀