fix(ui5-avatar): fix default size appearance and font-family (#8415)

- Fix missing font-family. Avatar used to not set font-family and relies on inheriting it which is not always the case. (In storybook this is not visible as the font is set on the body and the Avatar is inheriting it). - Fix default size appearance. When the "size" attribute is not present, the initials font was wrong as styles for the default "S" are applied only when the "size" attribute is present, which by default is missing:
SAP · Mar 11, 2024 · 22826f0 · 22826f0
1 parent baeb523
commit 22826f0
Show file tree

Hide file tree

Showing 18 changed files with 176 additions and 54 deletions.
diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts
@@ -137,10 +137,11 @@ type BreadcrumbsItemClickEventDetail = {
 })
 class Breadcrumbs extends UI5Element {
 	/**
-	 * Defines the visual indication and behavior of the breadcrumbs.
+	 * Defines the visual appearance of the last BreadcrumbsItem.
 	 *
-	 * **Note:** The `Standard` breadcrumbs show the current page as the last item in the trail.
-	 * The last item contains only plain text and is not a link.
+	 * The Breadcrumbs supports two visual appearances for the last BreadcrumbsItem:
+	 * - "Standard" - displaying the last item as "current page" (bold and without separator)
+	 * - "NoCurrentPage" - displaying the last item as a regular BreadcrumbsItem, followed by separator
 	 * @default "Standard"
 	 * @public
 	*/

diff --git a/packages/main/src/themes/Avatar.css b/packages/main/src/themes/Avatar.css
@@ -2,6 +2,7 @@
 	display: inline-block;
 	box-sizing: border-box;
 	position: relative;
+	font-family: "72override", var(--sapFontFamily);
 }
 
 /* The ui5_hovered class is set by FileUploader to indicate hover state of the control */
@@ -66,6 +67,7 @@
 	font-size: var(--_ui5_avatar_fontsize_XS);
 }
 
+:host(:not([size])),
 :host([_size="S"]),
 :host([size="S"]) {
 	min-height: 3rem;

diff --git a/packages/website/docs/_components_pages/main/Avatar.mdx b/packages/website/docs/_components_pages/main/Avatar.mdx
@@ -9,6 +9,7 @@ import ColorSchemes from "../../_samples/main/Avatar/ColorSchemes/ColorSchemes.m
 import Sizes from "../../_samples/main/Avatar/Sizes/Sizes.md";
 import Shapes from "../../_samples/main/Avatar/Shapes/Shapes.md";
 import WithImage from "../../_samples/main/Avatar/WithImage/WithImage.md";
+import WithIcon from "../../_samples/main/Avatar/WithIcon/WithIcon.md";
 import Styles from "../../_samples/main/Avatar/Styles/Styles.md";
 
 <%COMPONENT_OVERVIEW%>
@@ -33,19 +34,26 @@ The Avatar can be interactive, e.g. responds to hover, focus and press.
 
 <Interactive />
 
-### ColorSchemes
+### Color Schemes
 The Avatar can be dislpayed in multiple color schemes.
+
 <ColorSchemes />
 
-### With Badge
-The Avatar can show badge.
+### With Icon
+The Avatar can show icons.
 
-<WithBadge />
+<WithIcon />
 
 ### With Image
 The Avatar can show images.
 <WithImage />
 
+
+### With Badge
+The Avatar can show badge.
+
+<WithBadge />
+
 ### Custom Styling
 The Avatar allows customization with pure CSS on tag level.
 

diff --git a/packages/website/docs/_components_pages/main/Breadcrumbs/Breadcrumbs.mdx b/packages/website/docs/_components_pages/main/Breadcrumbs/Breadcrumbs.mdx
@@ -29,6 +29,6 @@ Separator between the links can be easily changed.
 <BreadcrumbsStyles />
 
 ### Current Page Appearance
-The Breadcrumbs supports two visual appearances for the "current page" - as a regular link or as prominent one.
+The Breadcrumbs supports two visual appearances for the last BreadcrumbsItem - as "current page" (bold and without separator) and as a regular link, followed by separator.
 
 <NoCurrentPage />
diff --git a/packages/website/docs/_components_pages/main/List/List.mdx b/packages/website/docs/_components_pages/main/List/List.mdx
@@ -4,6 +4,7 @@ slug: ../../List
 
 import Basic from "../../../_samples/main/List/Basic/Basic.md";
 import Growing from "../../../_samples/main/List/Growing/Growing.md";
+import GrowingOnButtonPress from "../../../_samples/main/List/GrowingOnButtonPress/GrowingOnButtonPress.md";
 import Modes from "../../../_samples/main/List/Modes/Modes.md";
 import NoData from "../../../_samples/main/List/NoData/NoData.md";
 import GroupHeaders from "../../../_samples/main/List/GroupHeaders/GroupHeaders.md";
@@ -18,12 +19,18 @@ import SeparationTypes from "../../../_samples/main/List/SeparationTypes/Separat
 
 ## More Samples
 
-### Growing List
-The List fires an <b>load-more</b> event when the user scrolls to the bottom and one can load more data (items)
-as shown in the sample. 
+### Growing On Scroll
+The List fires an <b>load-more</b> event when the user scrolls to the bottom.
+The event can be used for loading more data (items) as shown in the sample. 
 
 <Growing />
 
+### Growing On Button Press
+The List fires an <b>load-more</b> event when the user clicks to the "Load More" button at the bottom. 
+The event can be used for loading more data (items) as shown in the sample. 
+
+<GrowingOnButtonPress />
+
 ### Selection Modes
 The List supports several selection modes <b>None</b>, <b>SingleSelect</b>, <b>SingleSelectBegin</b>, <b>SingleSelectEnd</b>, <b>SingleSelectAuto</b>, <b>MultiSelect</b> and <b>Delete</b>.
 <Modes />

diff --git a/packages/website/docs/_samples/main/Avatar/Sizes/sample.html b/packages/website/docs/_samples/main/Avatar/Sizes/sample.html
@@ -10,24 +10,12 @@
 
 <body style="background-color: var(--sapBackgroundColor)">
     <!-- playground-fold-end -->
-
-    <ui5-avatar size="S" initials="L" color-scheme="Accent1"> </ui5-avatar>
-    <ui5-avatar fallback-icon="employee" size="S">
-        <img alt="Woman 1" src="../assets/images/avatars/man_avatar_1.png" />
-    </ui5-avatar></br>
-    <ui5-avatar size="M" initials="M" color-scheme="Accent1"> </ui5-avatar>
-    <ui5-avatar fallback-icon="employee" size="M">
-        <img alt="Woman 1" src="../assets/images/avatars/man_avatar_1.png" />
-    </ui5-avatar></br>
-    <ui5-avatar size="L" initials="L" color-scheme="Accent1"> </ui5-avatar>
-    <ui5-avatar fallback-icon="employee" size="L">
-        <img alt="Woman 1" src="../assets/images/avatars/man_avatar_1.png" />
-    </ui5-avatar></br>
-    <ui5-avatar size="XL" initials="XL" color-scheme="Accent2"></ui5-avatar>
-    <ui5-avatar fallback-icon="employee" size="XL">
-        <img alt="Woman 1" src="../assets/images/avatars/man_avatar_1.png" />
-    </ui5-avatar>
-
+
+    <ui5-avatar initials="XS" size="XS"></ui5-avatar>
+    <ui5-avatar initials="S" size="S"></ui5-avatar>
+    <ui5-avatar initials="M" size="M"></ui5-avatar>
+    <ui5-avatar initials="L" size="L"></ui5-avatar>
+    <ui5-avatar initials="XL" size="XL"></ui5-avatar>
     <!-- playground-fold -->
     <script type="module" src="main.js"></script>
 </body>

diff --git a/packages/website/docs/_samples/main/Avatar/WithIcon/WithIcon.md b/packages/website/docs/_samples/main/Avatar/WithIcon/WithIcon.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/main/Avatar/WithIcon/main.js b/packages/website/docs/_samples/main/Avatar/WithIcon/main.js
@@ -0,0 +1,7 @@
+import "@ui5/webcomponents/dist/Avatar.js";
+
+import "@ui5/webcomponents-icons/dist/filter.js";
+import "@ui5/webcomponents-icons/dist/employee.js";
+import "@ui5/webcomponents-icons/dist/product.js";
+import "@ui5/webcomponents-icons/dist/supplier.js";
+import "@ui5/webcomponents-icons/dist/shipping-status.js";
diff --git a/packages/website/docs/_samples/main/Avatar/WithIcon/sample.html b/packages/website/docs/_samples/main/Avatar/WithIcon/sample.html
@@ -0,0 +1,25 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <!-- playground-fold-end -->
+
+    <ui5-avatar icon="filter" size="XS"></ui5-avatar>
+    <ui5-avatar icon="employee" size="S"></ui5-avatar>
+    <ui5-avatar icon="product" size="M"></ui5-avatar>
+    <ui5-avatar icon="supplier" size="L"></ui5-avatar>
+    <ui5-avatar icon="shipping-status" size="XL"></ui5-avatar>
+
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
diff --git a/packages/website/docs/_samples/main/Avatar/WithImage/sample.html b/packages/website/docs/_samples/main/Avatar/WithImage/sample.html
@@ -11,17 +11,20 @@
 <body style="background-color: var(--sapBackgroundColor)">
     <!-- playground-fold-end -->
 
+    <ui5-avatar fallback-icon="employee" size="XS">
+        <img alt="Woman" src="../assets/images/avatars/woman_avatar_1.png" />
+    </ui5-avatar>
     <ui5-avatar fallback-icon="employee" size="S">
-        <img alt="Woman 1" src="../assets/images/avatars/man_avatar_1.png" />
-    </ui5-avatar></br>
+        <img alt="Woman" src="../assets/images/avatars/woman_avatar_1.png" />
+    </ui5-avatar>
     <ui5-avatar fallback-icon="employee" size="M">
-        <img alt="Woman 1" src="../assets/images/avatars/man_avatar_1.png" />
-    </ui5-avatar></br>
+        <img alt="Woman" src="../assets/images/avatars/woman_avatar_1.png" />
+    </ui5-avatar>
     <ui5-avatar fallback-icon="employee" size="L">
-        <img alt="Woman 1" src="../assets/images/avatars/man_avatar_1.png" />
-    </ui5-avatar></br>
+        <img alt="Woman" src="../assets/images/avatars/woman_avatar_1.png" />
+    </ui5-avatar>
     <ui5-avatar fallback-icon="employee" size="XL">
-        <img alt="Woman 1" src="../assets/images/avatars/man_avatar_1.png" />
+        <img alt="Woman" src="../assets/images/avatars/woman_avatar_1.png" />
     </ui5-avatar>
 
     <!-- playground-fold -->

diff --git a/packages/website/docs/_samples/main/Breadcrumbs/NoCurrentPage/sample.html b/packages/website/docs/_samples/main/Breadcrumbs/NoCurrentPage/sample.html
@@ -14,7 +14,7 @@
     <ui5-breadcrumbs design="NoCurrentPage">
         <ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Root Page</ui5-breadcrumbs-item>
         <ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
-        <ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
+        <ui5-breadcrumbs-item>Parent Page</ui5-breadcrumbs-item>
     </ui5-breadcrumbs>
     <ui5-breadcrumbs design="Standard">
         <ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Root Page</ui5-breadcrumbs-item>

diff --git a/packages/website/docs/_samples/main/List/Growing/main.js b/packages/website/docs/_samples/main/List/Growing/main.js
@@ -3,25 +3,31 @@ import "@ui5/webcomponents/dist/StandardListItem.js";
 
 import "@ui5/webcomponents-icons/dist/nutrition-activity.js";
 
-function template(i) {
+let itemsLoaded = 0;
+const itemToLoad = 5;
+const growingList = document.querySelector("#growingList");
+const listItemTemplate = (index) => {
     var li = document.createElement("ui5-li");
     li.textContent = "Fruit name";
-    li.description = "the description goes here " + i;
+    li.description = "the description goes here " + index;
     li.additionalText = "Available";
     li.additionalTextState = "Success";
     li.icon = "nutrition-activity";
     return li;
 }
-function insertItems(el, num) {
-    for (var i = 0; i < num; i++) {
-        el.appendChild(template(i));
+
+const insertItems = (list) => {
+    for (var i = itemsLoaded; i < itemsLoaded + itemToLoad; i++) {
+        list.appendChild(listItemTemplate(i));
     }
+    itemsLoaded+=itemToLoad;
 }
-infiniteScrollEx.addEventListener("load-more", (e) => {
-    var el = infiniteScrollEx;
-    el.busy = true;
+
+growingList.addEventListener("load-more", (e) => {
+    growingList.busy = true;
+
     setTimeout(() => {
-        insertItems(el, 5);
-        el.busy = false;
-    }, 200);
+        insertItems(growingList);
+        growingList.busy = false;
+    }, 1500);
 });
diff --git a/packages/website/docs/_samples/main/List/Growing/sample.html b/packages/website/docs/_samples/main/List/Growing/sample.html
@@ -11,13 +11,17 @@
 <body style="background-color: var(--sapBackgroundColor)">
     <!-- playground-fold-end -->
 
-    <ui5-list id="infiniteScrollEx" style="height: 200px" growing="Scroll">
+    <ui5-list id="growingList" style="height: 300px" growing="Scroll" busy-delay="0">
         <ui5-li icon="nutrition-activity" description="Tropical plant with an edible fruit" additional-text="In-stock"
             additional-text-state="Success">Pineapple</ui5-li>
         <ui5-li icon="nutrition-activity" description="Occurs between red and yellow" additional-text="Expires"
             additional-text-state="Warning">Orange</ui5-li>
         <ui5-li icon="nutrition-activity" description="The yellow lengthy fruit" additional-text="Re-stock"
             additional-text-state="Error">Banana</ui5-li>
+        <ui5-li icon="nutrition-activity" description="Small fruit that comes in various colors, including red, purple" additional-text="Re-stock"
+            additional-text-state="Information">Plum</ui5-li>
+        <ui5-li icon="nutrition-activity" description=" tropical fruit known for its sweet and juicy interior" additional-text="Re-stock"
+            additional-text-state="Error">Mango</ui5-li>
     </ui5-list>
     <!-- playground-fold -->
     <script type="module" src="main.js"></script>

diff --git a/...es/website/docs/_samples/main/List/GrowingOnButtonPress/GrowingOnButtonPress.md b/...es/website/docs/_samples/main/List/GrowingOnButtonPress/GrowingOnButtonPress.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/main/List/GrowingOnButtonPress/main.js b/packages/website/docs/_samples/main/List/GrowingOnButtonPress/main.js
@@ -0,0 +1,33 @@
+import "@ui5/webcomponents/dist/List.js";
+import "@ui5/webcomponents/dist/StandardListItem.js";
+
+import "@ui5/webcomponents-icons/dist/nutrition-activity.js";
+
+let itemsLoaded = 0;
+const itemToLoad = 5;
+const growingList = document.querySelector("#growingList");
+const listItemTemplate = (index) => {
+    var li = document.createElement("ui5-li");
+    li.textContent = "Fruit name";
+    li.description = "the description goes here " + index;
+    li.additionalText = "Available";
+    li.additionalTextState = "Success";
+    li.icon = "nutrition-activity";
+    return li;
+}
+
+const insertItems = (list) => {
+    for (var i = itemsLoaded; i < itemsLoaded + itemToLoad; i++) {
+        list.appendChild(listItemTemplate(i));
+    }
+    itemsLoaded+=itemToLoad;
+}
+
+growingList.addEventListener("load-more", (e) => {
+    growingList.busy = true;
+
+    setTimeout(() => {
+        insertItems(growingList);
+        growingList.busy = false;
+    }, 1500);
+});
diff --git a/packages/website/docs/_samples/main/List/GrowingOnButtonPress/sample.html b/packages/website/docs/_samples/main/List/GrowingOnButtonPress/sample.html
@@ -0,0 +1,31 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <!-- playground-fold-end -->
+
+    <ui5-list id="growingList" style="height: 300px" growing="Button" busy-delay="0">
+        <ui5-li icon="nutrition-activity" description="Tropical plant with an edible fruit" additional-text="In-stock"
+            additional-text-state="Success">Pineapple</ui5-li>
+        <ui5-li icon="nutrition-activity" description="Occurs between red and yellow" additional-text="Expires"
+            additional-text-state="Warning">Orange</ui5-li>
+        <ui5-li icon="nutrition-activity" description="The yellow lengthy fruit" additional-text="Re-stock"
+            additional-text-state="Error">Banana</ui5-li>
+        <ui5-li icon="nutrition-activity" description="Small fruit that comes in various colors, including red, purple" additional-text="Re-stock"
+            additional-text-state="Information">Plum</ui5-li>
+        <ui5-li icon="nutrition-activity" description=" tropical fruit known for its sweet and juicy interior" additional-text="Re-stock"
+            additional-text-state="Error">Mango</ui5-li>
+    </ui5-list>
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
diff --git a/packages/website/docs/_samples/main/Table/GrowingOnButtonPress/sample.html b/packages/website/docs/_samples/main/Table/GrowingOnButtonPress/sample.html
@@ -9,7 +9,7 @@
 <body style="background-color: var(--sapBackgroundColor);">
 <!-- playground-fold-end -->
 
-<ui5-table growing="Button" growing-button-text="Load More" growing-button-subtext="2 of 10">
+<ui5-table growing="Button" growing-button-text="Load More" growing-button-subtext="2 of 10" busy-delay="0">
 
     <ui5-table-column slot="columns" popin-display="Inline">
         <span>Product</span>

diff --git a/packages/website/docs/_samples/main/Table/GrowingOnScroll/sample.html b/packages/website/docs/_samples/main/Table/GrowingOnScroll/sample.html
@@ -6,12 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sample</title>
 </head>
-<body style="background-color: var(--sapBackgroundColor); height: 500px; overflow: visible;">
+<body style="background-color: var(--sapBackgroundColor)">
 <!-- playground-fold-end -->
 
-
-<div style="height: 300px; overflow-y: hidden;">
-    <ui5-table growing="Scroll">
+<div style="height: 200px; overflow: scroll;">
+    <ui5-table growing="Scroll" busy-delay="0">
         <ui5-table-column slot="columns">
             <span>Product</span>
         </ui5-table-column>