Skip to content

Commit

Permalink
fix(ui5-avatar): fix XS size (SAP#2582)
Browse files Browse the repository at this point in the history 
With the introduce of the AvatarGroup the XS size of the Avatar has been broken. Due to the following css the XS size appeared 3rem X 3rem, instead of 2rem X 2rem (as it is by spec). The "XS" styles define min-height and min-width, but the default styles make it 3rem by 3rem.
  • Loading branch information
@ilhan007 @niyap
ilhan007 authored and niyap committed Dec 17, 2020
1 parent 3e184d4 commit 106402c
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 31 deletions.
2 changes: 2 additions & 0 deletions packages/main/src/themes/Avatar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@

:host([_size="XS"]),
:host([size="XS"]) {
height: 2rem;
width: 2rem;
min-height: 2rem;
min-width: 2rem;
font-size: .75rem;
Expand Down
115 changes: 84 additions & 31 deletions packages/main/test/pages/AvatarGroup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,39 +108,39 @@ <h5>Business card</h5>
</div>
</ui5-popover>
<ui5-avatar-group type="Individual" avatar-size="XL" id="avatar-group-individual">
<ui5-avatar interactive initials="LL" id="avatar-1"></ui5-avatar>
<ui5-avatar interactive initials="LL"></ui5-avatar>
<ui5-avatar interactive initials="LL"></ui5-avatar>
<ui5-avatar interactive initials="LL"></ui5-avatar>
<ui5-avatar interactive initials="LL"></ui5-avatar>
<ui5-avatar interactive initials="LL"></ui5-avatar>
<ui5-avatar interactive initials="LL"></ui5-avatar>
<ui5-avatar interactive initials="LL"></ui5-avatar>
<ui5-avatar interactive initials="LL"></ui5-avatar>
<ui5-avatar interactive initials="LL"></ui5-avatar>
<ui5-avatar interactive initials="LL"></ui5-avatar>
<ui5-avatar interactive initials="LL"></ui5-avatar>
<ui5-avatar interactive initials="XL" id="avatar-1"></ui5-avatar>
<ui5-avatar interactive initials="XL"></ui5-avatar>
<ui5-avatar interactive initials="XL"></ui5-avatar>
<ui5-avatar interactive initials="XL"></ui5-avatar>
<ui5-avatar interactive initials="XL"></ui5-avatar>
<ui5-avatar interactive initials="XL"></ui5-avatar>
<ui5-avatar interactive initials="XL"></ui5-avatar>
<ui5-avatar interactive initials="XL"></ui5-avatar>
<ui5-avatar interactive initials="XL"></ui5-avatar>
<ui5-avatar interactive initials="XL"></ui5-avatar>
<ui5-avatar interactive initials="XL"></ui5-avatar>
<ui5-avatar interactive initials="XL"></ui5-avatar>
</ui5-avatar-group>
<br>
<ui5-avatar-group type="Group" avatar-size="M" id="avatar-group-group">
<ui5-avatar initials="LL" image="./img/woman_avatar_5.png"></ui5-avatar>
<ui5-avatar initials="LL"></ui5-avatar>
<ui5-avatar initials="LL"></ui5-avatar>
<ui5-avatar initials="LL" image="./img/Lamp_avatar_01.jpg"></ui5-avatar>
<ui5-avatar initials="LL"></ui5-avatar>
<ui5-avatar initials="LL"></ui5-avatar>
<ui5-avatar initials="LL"></ui5-avatar>
<ui5-avatar initials="LL" image="./img/John_Miller.png"></ui5-avatar>
<ui5-avatar initials="LL"></ui5-avatar>
<ui5-avatar initials="LL"></ui5-avatar>
<ui5-avatar initials="LL"></ui5-avatar>
<ui5-avatar initials="LL"></ui5-avatar>
<ui5-avatar initials="LL" image="./img/woman_avatar_5.png"></ui5-avatar>
<ui5-avatar initials="LL"></ui5-avatar>
<ui5-avatar initials="LL"></ui5-avatar>
<ui5-avatar initials="LL" image="./img/Lamp_avatar_01.jpg"></ui5-avatar>
<ui5-avatar initials="LL"></ui5-avatar>
<ui5-avatar initials="LL"></ui5-avatar>
<ui5-avatar initials="M" image="./img/woman_avatar_5.png"></ui5-avatar>
<ui5-avatar initials="M"></ui5-avatar>
<ui5-avatar initials="M"></ui5-avatar>
<ui5-avatar initials="M" image="./img/Lamp_avatar_01.jpg"></ui5-avatar>
<ui5-avatar initials="M"></ui5-avatar>
<ui5-avatar initials="M"></ui5-avatar>
<ui5-avatar initials="M"></ui5-avatar>
<ui5-avatar initials="M" image="./img/John_Miller.png"></ui5-avatar>
<ui5-avatar initials="M"></ui5-avatar>
<ui5-avatar initials="M"></ui5-avatar>
<ui5-avatar initials="M"></ui5-avatar>
<ui5-avatar initials="M"></ui5-avatar>
<ui5-avatar initials="M" image="./img/woman_avatar_5.png"></ui5-avatar>
<ui5-avatar initials="M"></ui5-avatar>
<ui5-avatar initials="M"></ui5-avatar>
<ui5-avatar initials="M" image="./img/Lamp_avatar_01.jpg"></ui5-avatar>
<ui5-avatar initials="M"></ui5-avatar>
<ui5-avatar initials="M"></ui5-avatar>
</ui5-avatar-group>
<br>

Expand All @@ -159,7 +159,60 @@ <h5>Business card</h5>

<button id="reset-btn">Reset fields</button>
</div>

<br>
<br>

<h3>"XS" size</h3>
<ui5-avatar-group type="Individual" avatar-size="XS">
<ui5-avatar interactive initials="XS"></ui5-avatar>
<ui5-avatar interactive initials="XS"></ui5-avatar>
<ui5-avatar interactive initials="XS"></ui5-avatar>
<ui5-avatar interactive initials="XS"></ui5-avatar>
<ui5-avatar interactive initials="XS"></ui5-avatar>
<ui5-avatar interactive initials="XS"></ui5-avatar>
<ui5-avatar interactive initials="XS"></ui5-avatar>
<ui5-avatar interactive initials="XS"></ui5-avatar>
<ui5-avatar interactive initials="XS"></ui5-avatar>
<ui5-avatar interactive initials="XS"></ui5-avatar>
<ui5-avatar interactive initials="XS"></ui5-avatar>
<ui5-avatar interactive initials="XS"></ui5-avatar>
</ui5-avatar-group>

<br>
<br>

<h3>"S" size</h3>
<ui5-avatar-group type="Individual" avatar-size="S">
<ui5-avatar interactive initials="S"></ui5-avatar>
<ui5-avatar interactive initials="S"></ui5-avatar>
<ui5-avatar interactive initials="S"></ui5-avatar>
<ui5-avatar interactive initials="S"></ui5-avatar>
<ui5-avatar interactive initials="S"></ui5-avatar>
<ui5-avatar interactive initials="S"></ui5-avatar>
<ui5-avatar interactive initials="S"></ui5-avatar>
<ui5-avatar interactive initials="S"></ui5-avatar>
<ui5-avatar interactive initials="S"></ui5-avatar>
<ui5-avatar interactive initials="S"></ui5-avatar>
<ui5-avatar interactive initials="S"></ui5-avatar>
<ui5-avatar interactive initials="S"></ui5-avatar>
</ui5-avatar-group>

<br>
<br>

<h3>Unordinary group</h3>
<ui5-avatar-group type="Individual">
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
<ui5-avatar size="M" interactive initials="M"></ui5-avatar>
<ui5-avatar size="L" interactive initials="L"></ui5-avatar>
<ui5-avatar size="XL" interactive initials="XL"></ui5-avatar>
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
<ui5-avatar size="M" interactive initials="M"></ui5-avatar>
<ui5-avatar size="L" interactive initials="L"></ui5-avatar>
<ui5-avatar size="XL" interactive initials="XL"></ui5-avatar>
</ui5-avatar-group>
</div>

<script>
Expand Down

0 comments on commit 106402c

Please sign in to comment.