Page MenuHomePhabricator

[web] Modify Label component so that the content can be broken in any place
ClosedPublic

Authored by tomek on Jun 14 2022, 12:12 PM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Nov 12, 12:28 PM
Unknown Object (File)
Tue, Nov 12, 11:59 AM
Unknown Object (File)
Sat, Nov 9, 11:41 AM
Unknown Object (File)
Sat, Nov 9, 11:41 AM
Unknown Object (File)
Fri, Nov 8, 6:25 PM
Unknown Object (File)
Fri, Nov 8, 8:08 AM
Unknown Object (File)
Tue, Nov 5, 2:00 AM
Unknown Object (File)
Oct 4 2024, 12:37 PM

Details

Summary

We need to handle long content (e.g. usernames). We should be able to see the full content instead of having an ellipsis, so setting this prop makes the most sense.

long_tag.png (484×954 px, 46 KB)

Test Plan

Render a label with modified style and check if it looks ok.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

Looks good. I noticed we're using the Label component in a few other places (eg member.react.js), but those are pretty short strings so I don't think word-break will affect anything there.

In the future there might be cases where we pass long strings into the Label component and want them to be shortened with ellipses... but I guess we can add a prop to Label if/when that scenario comes up.

This revision is now accepted and ready to land.Jun 14 2022, 12:25 PM

I've checked all the usages and this change is neutral when we display a hardcoded string and beneficial when we display a username (add members modal).
Agree, in the future we can either add a new prop with a flag or with a classname - both should work.