New component - GlTruncateBlock
Description
There are at least three locations in GitLab that currently - or will - use vertical height to truncate block elements.
- User profile readme
- Work item description
- MR description
There are slight variations on the implementation, and significant CSS duplication to accomplish this task.
The existing truncation implementations also do not offer the ability to re-hide the expanded area.
We should standardize all of this behavior and bring it into gitlab-ui
as GlTruncateBlock.
(It's possible this is a complex super-variant of GlCollapse
or - less likely - a highly tweaked variant of GlAccordion
)
(This is not either GlTruncate
or GlTruncateText
, as the truncation here is based on vertical page space consumed rather than length of text or number of lines of text.)
<GlTruncateBlock
height="${setInThisParentComponent}" // Has default like [ /*min*/ 10vh, /*ideal*/ 512px, /*max*/ 40vh ], but also accepts single value for the ideal (e.g. 512px)
expand-text="${localizationForThisUseCase}" // Has default like "Show more"
collapse-text="${seeAbove}" // Has default like "Hide expanded content"
expanded?="${userSetToggleState}" // defaults to `false`
>
<OurThingThatGetsTooBig></>
</GlTruncateBlock>
Figma file
??
Checklist
Make sure the following are completed before closing the issue:
-
Assign the correct component label to this issue. -
Create an MR with the additions or updates needed. -
Be sure to get your MR reviewed by a FE/UX Foundations designer. -
When applicable, create an MR in Pajamas to update the demos. If you do not have capacity to complete the demos, create an issue in Pajamas and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one. -
When applicable, create an MR in Pajamas to update the component status. -
When applicable, create an issue in Pajamas using the "Component Documentation" issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling. -
When applicable, create an issue in Pajamas using the "Figma update" issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling. -
When introducing a major or breaking change, communicate the changes within the Engineering Week in Review. -
🎉 Congrats, you made it! You can now close this issue.