Skip to content

Commit 9661ab8

Browse files
ilhan007ilhan007
authored
fix(ui5-avatar): fix XS size (#2582)
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.
1 parent 283e9db commit 9661ab8

File tree

2 files changed

+86
-31
lines changed

2 files changed

+86
-31
lines changed

‎packages/main/src/themes/Avatar.css

+2
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@
4242

4343
:host([_size="XS"]),
4444
:host([size="XS"]) {
45+
height: 2rem;
46+
width: 2rem;
4547
min-height: 2rem;
4648
min-width: 2rem;
4749
font-size: .75rem;

‎packages/main/test/pages/AvatarGroup.html

+84-31
Original file line numberDiff line numberDiff line change
@@ -108,39 +108,39 @@ <h5>Business card</h5>
108108
</div>
109109
</ui5-popover>
110110
<ui5-avatar-group type="Individual" avatar-size="XL" id="avatar-group-individual">
111-
<ui5-avatar interactive initials="LL" id="avatar-1"></ui5-avatar>
112-
<ui5-avatar interactive initials="LL"></ui5-avatar>
113-
<ui5-avatar interactive initials="LL"></ui5-avatar>
114-
<ui5-avatar interactive initials="LL"></ui5-avatar>
115-
<ui5-avatar interactive initials="LL"></ui5-avatar>
116-
<ui5-avatar interactive initials="LL"></ui5-avatar>
117-
<ui5-avatar interactive initials="LL"></ui5-avatar>
118-
<ui5-avatar interactive initials="LL"></ui5-avatar>
119-
<ui5-avatar interactive initials="LL"></ui5-avatar>
120-
<ui5-avatar interactive initials="LL"></ui5-avatar>
121-
<ui5-avatar interactive initials="LL"></ui5-avatar>
122-
<ui5-avatar interactive initials="LL"></ui5-avatar>
111+
<ui5-avatar interactive initials="XL" id="avatar-1"></ui5-avatar>
112+
<ui5-avatar interactive initials="XL"></ui5-avatar>
113+
<ui5-avatar interactive initials="XL"></ui5-avatar>
114+
<ui5-avatar interactive initials="XL"></ui5-avatar>
115+
<ui5-avatar interactive initials="XL"></ui5-avatar>
116+
<ui5-avatar interactive initials="XL"></ui5-avatar>
117+
<ui5-avatar interactive initials="XL"></ui5-avatar>
118+
<ui5-avatar interactive initials="XL"></ui5-avatar>
119+
<ui5-avatar interactive initials="XL"></ui5-avatar>
120+
<ui5-avatar interactive initials="XL"></ui5-avatar>
121+
<ui5-avatar interactive initials="XL"></ui5-avatar>
122+
<ui5-avatar interactive initials="XL"></ui5-avatar>
123123
</ui5-avatar-group>
124124
<br>
125125
<ui5-avatar-group type="Group" avatar-size="M" id="avatar-group-group">
126-
<ui5-avatar initials="LL" image="./img/woman_avatar_5.png"></ui5-avatar>
127-
<ui5-avatar initials="LL"></ui5-avatar>
128-
<ui5-avatar initials="LL"></ui5-avatar>
129-
<ui5-avatar initials="LL" image="./img/Lamp_avatar_01.jpg"></ui5-avatar>
130-
<ui5-avatar initials="LL"></ui5-avatar>
131-
<ui5-avatar initials="LL"></ui5-avatar>
132-
<ui5-avatar initials="LL"></ui5-avatar>
133-
<ui5-avatar initials="LL" image="./img/John_Miller.png"></ui5-avatar>
134-
<ui5-avatar initials="LL"></ui5-avatar>
135-
<ui5-avatar initials="LL"></ui5-avatar>
136-
<ui5-avatar initials="LL"></ui5-avatar>
137-
<ui5-avatar initials="LL"></ui5-avatar>
138-
<ui5-avatar initials="LL" image="./img/woman_avatar_5.png"></ui5-avatar>
139-
<ui5-avatar initials="LL"></ui5-avatar>
140-
<ui5-avatar initials="LL"></ui5-avatar>
141-
<ui5-avatar initials="LL" image="./img/Lamp_avatar_01.jpg"></ui5-avatar>
142-
<ui5-avatar initials="LL"></ui5-avatar>
143-
<ui5-avatar initials="LL"></ui5-avatar>
126+
<ui5-avatar initials="M" image="./img/woman_avatar_5.png"></ui5-avatar>
127+
<ui5-avatar initials="M"></ui5-avatar>
128+
<ui5-avatar initials="M"></ui5-avatar>
129+
<ui5-avatar initials="M" image="./img/Lamp_avatar_01.jpg"></ui5-avatar>
130+
<ui5-avatar initials="M"></ui5-avatar>
131+
<ui5-avatar initials="M"></ui5-avatar>
132+
<ui5-avatar initials="M"></ui5-avatar>
133+
<ui5-avatar initials="M" image="./img/John_Miller.png"></ui5-avatar>
134+
<ui5-avatar initials="M"></ui5-avatar>
135+
<ui5-avatar initials="M"></ui5-avatar>
136+
<ui5-avatar initials="M"></ui5-avatar>
137+
<ui5-avatar initials="M"></ui5-avatar>
138+
<ui5-avatar initials="M" image="./img/woman_avatar_5.png"></ui5-avatar>
139+
<ui5-avatar initials="M"></ui5-avatar>
140+
<ui5-avatar initials="M"></ui5-avatar>
141+
<ui5-avatar initials="M" image="./img/Lamp_avatar_01.jpg"></ui5-avatar>
142+
<ui5-avatar initials="M"></ui5-avatar>
143+
<ui5-avatar initials="M"></ui5-avatar>
144144
</ui5-avatar-group>
145145
<br>
146146

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

160160
<button id="reset-btn">Reset fields</button>
161161
</div>
162-
162+
<br>
163+
<br>
164+
165+
<h3>"XS" size</h3>
166+
<ui5-avatar-group type="Individual" avatar-size="XS">
167+
<ui5-avatar interactive initials="XS"></ui5-avatar>
168+
<ui5-avatar interactive initials="XS"></ui5-avatar>
169+
<ui5-avatar interactive initials="XS"></ui5-avatar>
170+
<ui5-avatar interactive initials="XS"></ui5-avatar>
171+
<ui5-avatar interactive initials="XS"></ui5-avatar>
172+
<ui5-avatar interactive initials="XS"></ui5-avatar>
173+
<ui5-avatar interactive initials="XS"></ui5-avatar>
174+
<ui5-avatar interactive initials="XS"></ui5-avatar>
175+
<ui5-avatar interactive initials="XS"></ui5-avatar>
176+
<ui5-avatar interactive initials="XS"></ui5-avatar>
177+
<ui5-avatar interactive initials="XS"></ui5-avatar>
178+
<ui5-avatar interactive initials="XS"></ui5-avatar>
179+
</ui5-avatar-group>
180+
181+
<br>
182+
<br>
183+
184+
<h3>"S" size</h3>
185+
<ui5-avatar-group type="Individual" avatar-size="S">
186+
<ui5-avatar interactive initials="S"></ui5-avatar>
187+
<ui5-avatar interactive initials="S"></ui5-avatar>
188+
<ui5-avatar interactive initials="S"></ui5-avatar>
189+
<ui5-avatar interactive initials="S"></ui5-avatar>
190+
<ui5-avatar interactive initials="S"></ui5-avatar>
191+
<ui5-avatar interactive initials="S"></ui5-avatar>
192+
<ui5-avatar interactive initials="S"></ui5-avatar>
193+
<ui5-avatar interactive initials="S"></ui5-avatar>
194+
<ui5-avatar interactive initials="S"></ui5-avatar>
195+
<ui5-avatar interactive initials="S"></ui5-avatar>
196+
<ui5-avatar interactive initials="S"></ui5-avatar>
197+
<ui5-avatar interactive initials="S"></ui5-avatar>
198+
</ui5-avatar-group>
199+
200+
<br>
201+
<br>
202+
203+
<h3>Unordinary group</h3>
204+
<ui5-avatar-group type="Individual">
205+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
206+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
207+
<ui5-avatar size="M" interactive initials="M"></ui5-avatar>
208+
<ui5-avatar size="L" interactive initials="L"></ui5-avatar>
209+
<ui5-avatar size="XL" interactive initials="XL"></ui5-avatar>
210+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
211+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
212+
<ui5-avatar size="M" interactive initials="M"></ui5-avatar>
213+
<ui5-avatar size="L" interactive initials="L"></ui5-avatar>
214+
<ui5-avatar size="XL" interactive initials="XL"></ui5-avatar>
215+
</ui5-avatar-group>
163216
</div>
164217

165218
<script>

0 commit comments

Comments
 (0)