Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ui5-shellbar]: avatar initials font-size #10217

Open
1 task done
jarrettwchan opened this issue Nov 19, 2024 · 1 comment · May be fixed by #10245
Open
1 task done

[ui5-shellbar]: avatar initials font-size #10217

jarrettwchan opened this issue Nov 19, 2024 · 1 comment · May be fixed by #10245
Assignees
@plamenivanov91
Labels
bug This issue is a bug in the code Low Prio TOPIC P

Comments

@jarrettwchan
Copy link

Bug Description

The Avatar font-size when embedded in Shellbar was changed.
In 1.20.x the embedded Avatar initials font-size was 0.75rem from Shellbar css.
In 1.24.x (and 2.3.x) the embedded Avatar initials uses the Avatar's font-size (XS for 1rem).

This change in the font-size makes a number of two-letter initials trigger the fallback icon.
Before, only "W" was problematic, and some 3-letter combinations worked.
Now, "M" is also problematic, others like "O", "D", "Q", "U", "G" can be more than half the available space, and 3-letter combinations require two "I"s to work.

Affected Component

ui5-shellbar

Expected Behaviour

Reduce the font-size for XS a bit so more of the 2 letter scenarios are visible.
Or dynamically subtract 1px from the font-size until it fits.

Isolated Example

No response

Steps to Reproduce

No response

Log Output, Stack Trace or Screenshots

No response

Priority

Low

UI5 Web Components Version

1.24.8

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

SuccessFactors

Declaration

  • I’m not disclosing any internal or sensitive information.
@jarrettwchan jarrettwchan added the bug This issue is a bug in the code label Nov 19, 2024
@ivoplashkov
Copy link
Member

Hello colleagues,

The isse could be reproduced in the playground. When you add initials="OD" and size="XS" the components triggers the fallback icon.

    <ui5-shellbar primary-title="Corporate Portal" secondary-title="Secondary title">
        <ui5-avatar initials="OD" slot="profile" size="XS"></ui5-avatar>
        <img slot="logo" src="https://sap.github.io/ui5-webcomponents/images/sap-logo-svg.svg" />
        <ui5-button icon="nav-back" slot="startButton"></ui5-button>
    </ui5-shellbar>

Could you please have a look?

Regards,
Ivaylo

@plamenivanov91 plamenivanov91 self-assigned this Nov 21, 2024
plamenivanov91 added a commit to plamenivanov91/ui5-webcomponents that referenced this issue Nov 25, 2024
@plamenivanov91
fix(ui5-avatar): overflow initials are now scaling
5af3c6b 
Problem: Some initials with wide characters are resulting in fallback
icon.

Solution: We scale down font size of the initials until they fit in the
avatar.

Fixes: SAP#10217
@plamenivanov91 plamenivanov91 linked a pull request Nov 25, 2024 that will close this issue
Open
@plamenivanov91 plamenivanov91 linked a pull request Nov 25, 2024 that will close this issue
fix(ui5-avatar): overflow initials are now scaling #10245
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@plamenivanov91 plamenivanov91

Labels
bug This issue is a bug in the code Low Prio TOPIC P
Projects
Maintenance - Topic P
Status: In Progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(ui5-avatar): overflow initials are now scaling plamenivanov91/ui5-webcomponents
3 participants
@plamenivanov91 @ivoplashkov @jarrettwchan