ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard

Published 20 hours ago • verified publisher icon SAP

ui5-shellbar: truncated text in popovers is not visible

Open JarrettChan opened this issue 2 years ago • 4 comments

Bug Description

The ui5-li in popovers of ui5-shellbar do not show the full text to the sighted user in some way. Affects menu popover, overflow shellbar items popover. Hover does not reveal the full text.

Expected Behavior

User should be able to view the full non-truncated text in some way.

Steps to Reproduce

  1. Go to https://sap.github.io/ui5-webcomponents/playground/components/ShellBar/
  2. Reduce screen width
  3. Append to the text content for a slotted [slot="menuItems"] so that it would overflow in the menu popover
  4. Open menu

Isolated Example

https://codesandbox.io/s/ui5-webcomponents-forked-wi8vzt?file=/index.html

Context

  • UI5 Web Components version: 1.7.1
  • OS/Platform: MacOS 12.5.1
  • Browser: Chrome Version 105.0.5195.125 (Official Build) (x86_64)
  • Affected component: ui5-shellbar, ui5-li

Log Output / Stack Trace / Screenshots

Screen Shot 2022-10-04 at 9 35 21 AM

Priority

  • [ ] Low
  • [x] Medium
  • [ ] High
  • [ ] Very High

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

  • Breaks entire application or system - High or Very High
  • Accessibility issue - Medium or High
  • Functional issue - Medium or High
  • Visual issue - Low or Medium

Note: The priority might be re-evaluated by the issue processor.

Stakeholder Info (if applicable)

  • Organization: SuccessFactors
  • Business impact: Affects usage with high zoom / mobile view / languages with longer phrases/characters

JarrettChan avatar Oct 04 '22 17:10 JarrettChan

Hi @SAP/ui5-webcomponents-topic-p This issue is about long text being truncated in the Shellbar Popover. Perhaps it should be wrapping instead.

georgimkv avatar Oct 05 '22 08:10 georgimkv

Hi @JarrettChan, according to the visual design of the component, the text inside the menu items should not wrap, but truncate as implemented. Please use the title attribute to show a tooltip with the whole text when an item is hovered.

<ui5-li title="Very long text that truncate...">
    Very long text that truncate...
</ui5-li>

Kind Regards, Dobrin

dobrinyonkov avatar Oct 06 '22 08:10 dobrinyonkov

@dobrinyonkov , Ok I can probably control the menu popover ui5-li since I believe it's copied over from the [slot="menuSlot"] but not the overflow popover ui5-li since that's defined by ui5-shellbar https://github.com/SAP/ui5-webcomponents/blob/main/packages/fiori/src/ShellBarPopover.hbs

Please help with the ui5-li in the overflow popover

JarrettChan avatar Oct 06 '22 16:10 JarrettChan