Skip to content

fix(GlNewDropdown): item text can be truncated

Miguel Rincon requested to merge mrincon/fix-no-wrap-test-dropdown-items into master

What does this MR do?

Allow library users to truncate text in their dropdown items with ellipsis, for cases in which wrapping is not suitable.

Please note that this behavior is opt-in, developers must remove define the wrapping strategy (such as having gl-text-truncate) in their item's contents.

Screenshots

Provided a dropdown item:

<gl-new-dropdown-item icon-right-name="star">
   <div class="gl-text-truncate">ellipsis/should/truncate/this/item</div>
</gl-new-dropdown-item>

We have this result:

before after
Screen_Shot_2020-08-05_at_4.09.16_PM Screen_Shot_2020-08-05_at_4.09.23_PM

|

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • [-] If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.
Edited by Miguel Rincon

Merge request reports