From 92b003d6dd30a0e97251f2c16c83659c8e02769a Mon Sep 17 00:00:00 2001 From: Filip Siderov Date: Tue, 11 May 2021 16:45:25 +0300 Subject: [PATCH 1/5] chore(ui5-avatar): rename backgroundColor property to backgroundDesign --- packages/main/src/Avatar.js | 16 +++---- packages/main/src/AvatarGroup.js | 8 ++-- packages/main/src/themes/Avatar.css | 44 +++++++++---------- ...oundColor.js => AvatarBackgroundDesign.js} | 18 ++++---- packages/main/test/pages/Avatar.html | 40 ++++++++--------- packages/main/test/samples/Avatar.sample.html | 20 ++++----- 6 files changed, 73 insertions(+), 73 deletions(-) rename packages/main/src/types/{AvatarBackgroundColor.js => AvatarBackgroundDesign.js} (67%) diff --git a/packages/main/src/Avatar.js b/packages/main/src/Avatar.js index 60bf550b50ae..24cc70857bec 100644 --- a/packages/main/src/Avatar.js +++ b/packages/main/src/Avatar.js @@ -16,7 +16,7 @@ import Icon from "./Icon.js"; import AvatarSize from "./types/AvatarSize.js"; import AvatarShape from "./types/AvatarShape.js"; import AvatarFitType from "./types/AvatarFitType.js"; -import AvatarBackgroundColor from "./types/AvatarBackgroundColor.js"; +import AvatarBackgroundDesign from "./types/AvatarBackgroundDesign.js"; /** * @public @@ -166,21 +166,21 @@ const metadata = { *
  • Accent10
    • *
  • Placeholder
    • * - * @type {AvatarBackgroundColor} + * @type {AvatarBackgroundDesign} * @defaultvalue "Accent6" * @public */ - backgroundColor: { - type: AvatarBackgroundColor, - defaultValue: AvatarBackgroundColor.Accent6, + backgroundDesign: { + type: AvatarBackgroundDesign, + defaultValue: AvatarBackgroundDesign.Accent6, }, /** * @private */ - _backgroundColor: { + _backgroundDesign: { type: String, - defaultValue: AvatarBackgroundColor.Accent6, + defaultValue: AvatarBackgroundDesign.Accent6, }, /** @@ -294,7 +294,7 @@ class Avatar extends UI5Element { */ get _effectiveBackgroundColor() { // we read the attribute, because the "background-color" property will always have a default value - return this.getAttribute("background-color") || this._backgroundColor; + return this.getAttribute("background-design") || this._backgroundDesign; } get validInitials() { diff --git a/packages/main/src/AvatarGroup.js b/packages/main/src/AvatarGroup.js index 31babe2e6b94..83f0341e22d6 100644 --- a/packages/main/src/AvatarGroup.js +++ b/packages/main/src/AvatarGroup.js @@ -15,7 +15,7 @@ import AvatarGroupCss from "./generated/themes/AvatarGroup.css.js"; import Button from "./Button.js"; import AvatarSize from "./types/AvatarSize.js"; import AvatarGroupType from "./types/AvatarGroupType.js"; -import AvatarBackgroundColor from "./types/AvatarBackgroundColor.js"; +import AvatarBackgroundDesign from "./types/AvatarBackgroundDesign.js"; const OVERFLOW_BTN_CLASS = "ui5-avatar-group-overflow-btn"; const AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`; @@ -253,7 +253,7 @@ class AvatarGroup extends UI5Element { } /** - * Returns an array containing the AvatarBackgroundColor values that correspond to the avatars in the ui5-avatar-group. + * Returns an array containing the AvatarBackgroundDesign values that correspond to the avatars in the ui5-avatar-group. * @readonly * @type { Array } * @defaultValue [] @@ -403,9 +403,9 @@ class AvatarGroup extends UI5Element { const colorIndex = this._getNextBackgroundColor(); avatar.interactive = !this._isGroup; - if (!avatar.getAttribute("background-color")) { + if (!avatar.getAttribute("background-design")) { // AvatarGroup respects colors set to ui5-avatar - avatar.setAttribute("_background-color", AvatarBackgroundColor[`Accent${colorIndex}`]); + avatar.setAttribute("_background-design", AvatarBackgroundDesign[`Accent${colorIndex}`]); } if (!avatar.getAttribute("size")) { diff --git a/packages/main/src/themes/Avatar.css b/packages/main/src/themes/Avatar.css index c535595fe872..efa6ed19d038 100644 --- a/packages/main/src/themes/Avatar.css +++ b/packages/main/src/themes/Avatar.css @@ -119,58 +119,58 @@ background-color: var(--ui5-avatar-accent6); } -:host([_background-color="Accent1"]), -:host([background-color="Accent1"]) { +:host([_background-design="Accent1"]), +:host([background-design="Accent1"]) { background-color: var(--ui5-avatar-accent1); } -:host([_background-color="Accent2"]), -:host([background-color="Accent2"]) { +:host([_background-design="Accent2"]), +:host([background-design="Accent2"]) { background-color: var(--ui5-avatar-accent2); } -:host([_background-color="Accent3"]), -:host([background-color="Accent3"]) { +:host([_background-design="Accent3"]), +:host([background-design="Accent3"]) { background-color: var(--ui5-avatar-accent3); } -:host([_background-color="Accent4"]), -:host([background-color="Accent4"]) { +:host([_background-design="Accent4"]), +:host([background-design="Accent4"]) { background-color: var(--ui5-avatar-accent4); } -:host([_background-color="Accent5"]), -:host([background-color="Accent5"]) { +:host([_background-design="Accent5"]), +:host([background-design="Accent5"]) { background-color: var(--ui5-avatar-accent5); } -:host([_background-color="Accent6"]), -:host([background-color="Accent6"]) { +:host([_background-design="Accent6"]), +:host([background-design="Accent6"]) { background-color: var(--ui5-avatar-accent6); } -:host([_background-color="Accent7"]), -:host([background-color="Accent7"]) { +:host([_background-design="Accent7"]), +:host([background-design="Accent7"]) { background-color: var(--ui5-avatar-accent7); } -:host([_background-color="Accent8"]), -:host([background-color="Accent8"]) { +:host([_background-design="Accent8"]), +:host([background-design="Accent8"]) { background-color: var(--ui5-avatar-accent8); } -:host([_background-color="Accent9"]), -:host([background-color="Accent9"]) { +:host([_background-design="Accent9"]), +:host([background-design="Accent9"]) { background-color: var(--ui5-avatar-accent9); } -:host([_background-color="Accent10"]), -:host([background-color="Accent10"]) { +:host([_background-design="Accent10"]), +:host([background-design="Accent10"]) { background-color: var(--ui5-avatar-accent10); } -:host([_background-color="Placeholder"]), -:host([background-color="Placeholder"]) { +:host([_background-design="Placeholder"]), +:host([background-design="Placeholder"]) { background-color: var(--ui5-avatar-placeholder); } diff --git a/packages/main/src/types/AvatarBackgroundColor.js b/packages/main/src/types/AvatarBackgroundDesign.js similarity index 67% rename from packages/main/src/types/AvatarBackgroundColor.js rename to packages/main/src/types/AvatarBackgroundDesign.js index 4a984982ee19..5649cb321c94 100644 --- a/packages/main/src/types/AvatarBackgroundColor.js +++ b/packages/main/src/types/AvatarBackgroundDesign.js @@ -1,11 +1,11 @@ import DataType from "@ui5/webcomponents-base/dist/types/DataType.js"; /** - * Different types of AvatarBackgroundColor. - * @lends sap.ui.webcomponents.main.types.AvatarBackgroundColor.prototype + * Different types of AvatarBackgroundDesigns. + * @lends sap.ui.webcomponents.main.types.AvatarBackgroundDesign.prototype * @public */ -const AvatarBackGroundColors = { +const AvatarBackGroundDesigns = { /** * * @public @@ -86,19 +86,19 @@ const AvatarBackGroundColors = { /** * @class - * Different types of AvatarBackgroundColor. + * Different types of AvatarBackgroundDesign. * @constructor * @author SAP SE - * @alias sap.ui.webcomponents.main.types.AvatarBackgroundColor + * @alias sap.ui.webcomponents.main.types.AvatarBackgroundDesign * @public * @enum {string} */ -class AvatarBackgroundColor extends DataType { +class AvatarBackgroundDesign extends DataType { static isValid(value) { - return !!AvatarBackGroundColors[value]; + return !!AvatarBackGroundDesigns[value]; } } -AvatarBackgroundColor.generateTypeAccessors(AvatarBackGroundColors); +AvatarBackgroundDesign.generateTypeAccessors(AvatarBackGroundDesigns); -export default AvatarBackgroundColor; +export default AvatarBackgroundDesign; diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html index b26054347a1c..769df1f92444 100644 --- a/packages/main/test/pages/Avatar.html +++ b/packages/main/test/pages/Avatar.html @@ -17,7 +17,7 @@ - +

    Avatar - Basic sample

    @@ -69,31 +69,31 @@

    Avatar - UI5 Icons

    Avatar - Background colors [ Accent1, Accent2, Accent3, Accent4, Accent5, Accent6, Accent7, Accent8, Accent9, Accent10, Placeholder ]

    - - - - - + + + + + - - - - - + + + + +

    Avatar - Initials

    - - - - - + + + + + - - - - + + + +
    diff --git a/packages/main/test/samples/Avatar.sample.html b/packages/main/test/samples/Avatar.sample.html index 713412edca71..0559e99ec3b3 100644 --- a/packages/main/test/samples/Avatar.sample.html +++ b/packages/main/test/samples/Avatar.sample.html @@ -76,18 +76,18 @@

    Avatar with UI5 Icons

    Avatar with Initials

    - - - - - + + + + + 
    
-<ui5-avatar initials="XS" background-color="Accent1" size="XS"></ui5-avatar>
-<ui5-avatar initials="S" background-color="Accent2" size="S"></ui5-avatar>
-<ui5-avatar initials="M" background-color="Accent3" size="M"></ui5-avatar>
-<ui5-avatar initials="L" background-color="Accent4" size="L"></ui5-avatar>
-<ui5-avatar initials="XL" background-color="Accent5" size="XL"></ui5-avatar>
+<ui5-avatar initials="XS" background-design="Accent1" size="XS"></ui5-avatar>
+<ui5-avatar initials="S" background-design="Accent2" size="S"></ui5-avatar>
+<ui5-avatar initials="M" background-design="Accent3" size="M"></ui5-avatar>
+<ui5-avatar initials="L" background-design="Accent4" size="L"></ui5-avatar>
+<ui5-avatar initials="XL" background-design="Accent5" size="XL"></ui5-avatar>
    From 0e00a740b90dc60d484e5ae0f512c409f41293ab Mon Sep 17 00:00:00 2001 From: Filip Siderov Date: Tue, 11 May 2021 16:46:37 +0300 Subject: [PATCH 2/5] fix typo --- packages/main/test/pages/Avatar.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html index 769df1f92444..67fb65166c8e 100644 --- a/packages/main/test/pages/Avatar.html +++ b/packages/main/test/pages/Avatar.html @@ -17,7 +17,7 @@ - +

    Avatar - Basic sample

    From a80e9a4da8deb8e545b74ec2080b929741d909a8 Mon Sep 17 00:00:00 2001 From: Filip Siderov Date: Tue, 11 May 2021 17:29:27 +0300 Subject: [PATCH 3/5] fix build --- packages/main/test/pages/AvatarGroup.html | 4 ++-- packages/main/test/samples/AvatarGroup.sample.html | 8 ++++---- packages/main/test/specs/AvatarGroup.spec.js | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/main/test/pages/AvatarGroup.html b/packages/main/test/pages/AvatarGroup.html index 6c50e19e18d5..3943410327d3 100644 --- a/packages/main/test/pages/AvatarGroup.html +++ b/packages/main/test/pages/AvatarGroup.html @@ -294,7 +294,7 @@

    AvatarGroup with user defined overflow button

    hiddenItems.forEach(function (avatar, index) { var color = avatarGroup.colorScheme[firstHiddenIndex + index] html += '
    ' + - '' + + '' + '
    '; }); @@ -302,7 +302,7 @@

    AvatarGroup with user defined overflow button

    var avatarRef = items[index]; html += '
    ' + - '' + + '' + '
    '; } placeholder.innerHTML = html; diff --git a/packages/main/test/samples/AvatarGroup.sample.html b/packages/main/test/samples/AvatarGroup.sample.html index e0325bed8d90..49d4c25d507a 100644 --- a/packages/main/test/samples/AvatarGroup.sample.html +++ b/packages/main/test/samples/AvatarGroup.sample.html @@ -62,7 +62,7 @@

    Avatar Group - type "Individual"

    function onAvatarClicked(avatarRef) { const avatarIndex = avatarGroup.items.indexOf(avatarRef); - popAvatar.backgroundColor = avatarGroup.colorScheme[avatarIndex]; + popAvatar.backgroundDesign = avatarGroup.colorScheme[avatarIndex]; popAvatar.initials = avatarRef.initials; popAvatar.image = avatarRef.image; popAvatar.icon = avatarRef.icon; @@ -81,7 +81,7 @@

    Avatar Group - type "Individual"

    const color = avatarGroup.colorScheme[firstHiddenIndex + index]; html += '
    ' + - '' + + '' + '
    '; }); @@ -143,7 +143,7 @@

    Avatar Group - type "Individual"

    avatarGroup.hiddenItems.forEach((avatar, index) => { html += ``; }); @@ -206,7 +206,7 @@

    Avatar Group - type "Group"

    const avatarColor = avatarGroup.colorScheme[index]; html += '
    ' + - '' + + '' + '
    '; }); diff --git a/packages/main/test/specs/AvatarGroup.spec.js b/packages/main/test/specs/AvatarGroup.spec.js index 6ebfa0c10450..b9e605c6ca23 100644 --- a/packages/main/test/specs/AvatarGroup.spec.js +++ b/packages/main/test/specs/AvatarGroup.spec.js @@ -39,13 +39,13 @@ describe("avatar-group rendering", () => { }); }); - it("tests if _background-color attribute is automatically set to avatars", () => { + it("tests if _background-design attribute is automatically set to avatars", () => { const avatars = browser.$$("#avatar-group-group ui5-avatar"); let index = 0; avatars.forEach(avatar => { - const avatarBackgroundColor = avatar.getAttribute("_background-color"); + const avatarBackgroundColor = avatar.getAttribute("_background-design"); if (++index > 10) { index = 1; From 102b482ff28b84aa8c6b57cd43b02663ebb926bc Mon Sep 17 00:00:00 2001 From: Filip Siderov Date: Thu, 13 May 2021 15:47:27 +0300 Subject: [PATCH 4/5] fix comments --- packages/main/src/Avatar.js | 18 ++++---- packages/main/src/AvatarGroup.js | 6 +-- packages/main/src/themes/Avatar.css | 44 +++++++++---------- ...ckgroundDesign.js => AvatarColorScheme.js} | 18 ++++---- packages/main/test/pages/Avatar.html | 38 ++++++++-------- packages/main/test/pages/AvatarGroup.html | 6 +-- packages/main/test/samples/Avatar.sample.html | 20 ++++----- .../main/test/samples/AvatarGroup.sample.html | 8 ++-- 8 files changed, 79 insertions(+), 79 deletions(-) rename packages/main/src/types/{AvatarBackgroundDesign.js => AvatarColorScheme.js} (67%) diff --git a/packages/main/src/Avatar.js b/packages/main/src/Avatar.js index 24cc70857bec..9c42cf05a7d4 100644 --- a/packages/main/src/Avatar.js +++ b/packages/main/src/Avatar.js @@ -16,7 +16,7 @@ import Icon from "./Icon.js"; import AvatarSize from "./types/AvatarSize.js"; import AvatarShape from "./types/AvatarShape.js"; import AvatarFitType from "./types/AvatarFitType.js"; -import AvatarBackgroundDesign from "./types/AvatarBackgroundDesign.js"; +import AvatarColorScheme from "./types/AvatarColorScheme.js"; /** * @public @@ -150,7 +150,7 @@ const metadata = { }, /** - * Defines the background color of the desired image. + * Defines the background color of the content. *

    * Available options are: *
      @@ -166,21 +166,21 @@ const metadata = { *
    • Accent10
      • *
    • Placeholder
      • *
    - * @type {AvatarBackgroundDesign} + * @type {AvatarColorScheme} * @defaultvalue "Accent6" * @public */ - backgroundDesign: { - type: AvatarBackgroundDesign, - defaultValue: AvatarBackgroundDesign.Accent6, + colorScheme: { + type: AvatarColorScheme, + defaultValue: AvatarColorScheme.Accent6, }, /** * @private */ - _backgroundDesign: { + _colorScheme: { type: String, - defaultValue: AvatarBackgroundDesign.Accent6, + defaultValue: AvatarColorScheme.Accent6, }, /** @@ -294,7 +294,7 @@ class Avatar extends UI5Element { */ get _effectiveBackgroundColor() { // we read the attribute, because the "background-color" property will always have a default value - return this.getAttribute("background-design") || this._backgroundDesign; + return this.getAttribute("background-design") || this._colorScheme; } get validInitials() { diff --git a/packages/main/src/AvatarGroup.js b/packages/main/src/AvatarGroup.js index 83f0341e22d6..6804a00bf25e 100644 --- a/packages/main/src/AvatarGroup.js +++ b/packages/main/src/AvatarGroup.js @@ -15,7 +15,7 @@ import AvatarGroupCss from "./generated/themes/AvatarGroup.css.js"; import Button from "./Button.js"; import AvatarSize from "./types/AvatarSize.js"; import AvatarGroupType from "./types/AvatarGroupType.js"; -import AvatarBackgroundDesign from "./types/AvatarBackgroundDesign.js"; +import AvatarColorScheme from "./types/AvatarColorScheme.js"; const OVERFLOW_BTN_CLASS = "ui5-avatar-group-overflow-btn"; const AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`; @@ -253,7 +253,7 @@ class AvatarGroup extends UI5Element { } /** - * Returns an array containing the AvatarBackgroundDesign values that correspond to the avatars in the ui5-avatar-group. + * Returns an array containing the AvatarColorScheme values that correspond to the avatars in the ui5-avatar-group. * @readonly * @type { Array } * @defaultValue [] @@ -405,7 +405,7 @@ class AvatarGroup extends UI5Element { if (!avatar.getAttribute("background-design")) { // AvatarGroup respects colors set to ui5-avatar - avatar.setAttribute("_background-design", AvatarBackgroundDesign[`Accent${colorIndex}`]); + avatar.setAttribute("_color-scheme", AvatarColorScheme[`Accent${colorIndex}`]); } if (!avatar.getAttribute("size")) { diff --git a/packages/main/src/themes/Avatar.css b/packages/main/src/themes/Avatar.css index efa6ed19d038..9505e8bac002 100644 --- a/packages/main/src/themes/Avatar.css +++ b/packages/main/src/themes/Avatar.css @@ -119,58 +119,58 @@ background-color: var(--ui5-avatar-accent6); } -:host([_background-design="Accent1"]), -:host([background-design="Accent1"]) { +:host([_color-scheme="Accent1"]), +:host([color-scheme="Accent1"]) { background-color: var(--ui5-avatar-accent1); } -:host([_background-design="Accent2"]), -:host([background-design="Accent2"]) { +:host([_color-scheme="Accent2"]), +:host([color-scheme="Accent2"]) { background-color: var(--ui5-avatar-accent2); } -:host([_background-design="Accent3"]), -:host([background-design="Accent3"]) { +:host([_color-scheme="Accent3"]), +:host([color-scheme="Accent3"]) { background-color: var(--ui5-avatar-accent3); } -:host([_background-design="Accent4"]), -:host([background-design="Accent4"]) { +:host([_color-scheme="Accent4"]), +:host([color-scheme="Accent4"]) { background-color: var(--ui5-avatar-accent4); } -:host([_background-design="Accent5"]), -:host([background-design="Accent5"]) { +:host([_color-scheme="Accent5"]), +:host([color-scheme="Accent5"]) { background-color: var(--ui5-avatar-accent5); } -:host([_background-design="Accent6"]), -:host([background-design="Accent6"]) { +:host([_color-scheme="Accent6"]), +:host([color-scheme="Accent6"]) { background-color: var(--ui5-avatar-accent6); } -:host([_background-design="Accent7"]), -:host([background-design="Accent7"]) { +:host([_color-scheme="Accent7"]), +:host([color-scheme="Accent7"]) { background-color: var(--ui5-avatar-accent7); } -:host([_background-design="Accent8"]), -:host([background-design="Accent8"]) { +:host([_color-scheme="Accent8"]), +:host([color-scheme="Accent8"]) { background-color: var(--ui5-avatar-accent8); } -:host([_background-design="Accent9"]), -:host([background-design="Accent9"]) { +:host([_color-scheme="Accent9"]), +:host([color-scheme="Accent9"]) { background-color: var(--ui5-avatar-accent9); } -:host([_background-design="Accent10"]), -:host([background-design="Accent10"]) { +:host([_color-scheme="Accent10"]), +:host([color-scheme="Accent10"]) { background-color: var(--ui5-avatar-accent10); } -:host([_background-design="Placeholder"]), -:host([background-design="Placeholder"]) { +:host([_color-scheme="Placeholder"]), +:host([color-scheme="Placeholder"]) { background-color: var(--ui5-avatar-placeholder); } diff --git a/packages/main/src/types/AvatarBackgroundDesign.js b/packages/main/src/types/AvatarColorScheme.js similarity index 67% rename from packages/main/src/types/AvatarBackgroundDesign.js rename to packages/main/src/types/AvatarColorScheme.js index 5649cb321c94..84052fe4c06a 100644 --- a/packages/main/src/types/AvatarBackgroundDesign.js +++ b/packages/main/src/types/AvatarColorScheme.js @@ -1,11 +1,11 @@ import DataType from "@ui5/webcomponents-base/dist/types/DataType.js"; /** - * Different types of AvatarBackgroundDesigns. - * @lends sap.ui.webcomponents.main.types.AvatarBackgroundDesign.prototype + * Different types of AvatarColorSchemes. + * @lends sap.ui.webcomponents.main.types.AvatarColorScheme.prototype * @public */ -const AvatarBackGroundDesigns = { +const AvatarColorSchemes = { /** * * @public @@ -86,19 +86,19 @@ const AvatarBackGroundDesigns = { /** * @class - * Different types of AvatarBackgroundDesign. + * Different types of AvatarColorScheme. * @constructor * @author SAP SE - * @alias sap.ui.webcomponents.main.types.AvatarBackgroundDesign + * @alias sap.ui.webcomponents.main.types.AvatarColorScheme * @public * @enum {string} */ -class AvatarBackgroundDesign extends DataType { +class AvatarColorScheme extends DataType { static isValid(value) { - return !!AvatarBackGroundDesigns[value]; + return !!AvatarColorSchemes[value]; } } -AvatarBackgroundDesign.generateTypeAccessors(AvatarBackGroundDesigns); +AvatarColorScheme.generateTypeAccessors(AvatarColorSchemes); -export default AvatarBackgroundDesign; +export default AvatarColorScheme; diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html index 67fb65166c8e..eed42bc9073e 100644 --- a/packages/main/test/pages/Avatar.html +++ b/packages/main/test/pages/Avatar.html @@ -69,31 +69,31 @@

    Avatar - UI5 Icons

    Avatar - Background colors [ Accent1, Accent2, Accent3, Accent4, Accent5, Accent6, Accent7, Accent8, Accent9, Accent10, Placeholder ]

    - - - - - + + + + + - - - - - + + + + +

    Avatar - Initials

    - - - - - + + + + + - - - - + + + +
    diff --git a/packages/main/test/pages/AvatarGroup.html b/packages/main/test/pages/AvatarGroup.html index 3943410327d3..78e0732060fa 100644 --- a/packages/main/test/pages/AvatarGroup.html +++ b/packages/main/test/pages/AvatarGroup.html @@ -294,7 +294,7 @@

    AvatarGroup with user defined overflow button

    hiddenItems.forEach(function (avatar, index) { var color = avatarGroup.colorScheme[firstHiddenIndex + index] html += '
    ' + - '' + + '' + '
    '; }); @@ -302,7 +302,7 @@

    AvatarGroup with user defined overflow button

    var avatarRef = items[index]; html += '
    ' + - '' + + '' + '
    '; } placeholder.innerHTML = html; @@ -314,7 +314,7 @@

    AvatarGroup with user defined overflow button

    function onAvatarClicked(avatarGroup, avatarRef) { popAvatar.image = avatarRef.image; popAvatar.initials = avatarRef.initials; - popAvatar.backgroundColor = avatarGroup.colorScheme[avatarGroup.items.indexOf(avatarRef)]; + popAvatar.colorScheme = avatarGroup.colorScheme[avatarGroup.items.indexOf(avatarRef)]; individualPop.close(); individualPop.openBy(avatarRef); diff --git a/packages/main/test/samples/Avatar.sample.html b/packages/main/test/samples/Avatar.sample.html index 0559e99ec3b3..2fc1ba2a608e 100644 --- a/packages/main/test/samples/Avatar.sample.html +++ b/packages/main/test/samples/Avatar.sample.html @@ -76,18 +76,18 @@

    Avatar with UI5 Icons

    Avatar with Initials

    - - - - - + + + + + 
    
-<ui5-avatar initials="XS" background-design="Accent1" size="XS"></ui5-avatar>
-<ui5-avatar initials="S" background-design="Accent2" size="S"></ui5-avatar>
-<ui5-avatar initials="M" background-design="Accent3" size="M"></ui5-avatar>
-<ui5-avatar initials="L" background-design="Accent4" size="L"></ui5-avatar>
-<ui5-avatar initials="XL" background-design="Accent5" size="XL"></ui5-avatar>
+<ui5-avatar initials="XS" color-scheme="Accent1" size="XS"></ui5-avatar>
+<ui5-avatar initials="S" color-scheme="Accent2" size="S"></ui5-avatar>
+<ui5-avatar initials="M" color-scheme="Accent3" size="M"></ui5-avatar>
+<ui5-avatar initials="L" color-scheme="Accent4" size="L"></ui5-avatar>
+<ui5-avatar initials="XL" color-scheme="Accent5" size="XL"></ui5-avatar>
    diff --git a/packages/main/test/samples/AvatarGroup.sample.html b/packages/main/test/samples/AvatarGroup.sample.html index 49d4c25d507a..b2e1fb047f04 100644 --- a/packages/main/test/samples/AvatarGroup.sample.html +++ b/packages/main/test/samples/AvatarGroup.sample.html @@ -62,7 +62,7 @@

    Avatar Group - type "Individual"

    function onAvatarClicked(avatarRef) { const avatarIndex = avatarGroup.items.indexOf(avatarRef); - popAvatar.backgroundDesign = avatarGroup.colorScheme[avatarIndex]; + popAvatar.colorScheme = avatarGroup.colorScheme[avatarIndex]; popAvatar.initials = avatarRef.initials; popAvatar.image = avatarRef.image; popAvatar.icon = avatarRef.icon; @@ -81,7 +81,7 @@

    Avatar Group - type "Individual"

    const color = avatarGroup.colorScheme[firstHiddenIndex + index]; html += '
    ' + - '' + + '' + '
    '; }); @@ -143,7 +143,7 @@

    Avatar Group - type "Individual"

    avatarGroup.hiddenItems.forEach((avatar, index) => { html += ``; }); @@ -206,7 +206,7 @@

    Avatar Group - type "Group"

    const avatarColor = avatarGroup.colorScheme[index]; html += '
    ' + - '' + + '' + '
    '; }); From efb922240aa6dae1dfceaa14993df67110c70935 Mon Sep 17 00:00:00 2001 From: Filip Siderov Date: Mon, 17 May 2021 13:06:23 +0300 Subject: [PATCH 5/5] fix failing tests --- packages/main/src/Avatar.js | 2 +- packages/main/src/AvatarGroup.js | 2 +- packages/main/test/specs/AvatarGroup.spec.js | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/main/src/Avatar.js b/packages/main/src/Avatar.js index 092e2a99e871..ef35fa0da4cd 100644 --- a/packages/main/src/Avatar.js +++ b/packages/main/src/Avatar.js @@ -314,7 +314,7 @@ class Avatar extends UI5Element { */ get _effectiveBackgroundColor() { // we read the attribute, because the "background-color" property will always have a default value - return this.getAttribute("background-design") || this._colorScheme; + return this.getAttribute("_color-scheme") || this._colorScheme; } get _role() { diff --git a/packages/main/src/AvatarGroup.js b/packages/main/src/AvatarGroup.js index 1db2965c742e..8173a549de7c 100644 --- a/packages/main/src/AvatarGroup.js +++ b/packages/main/src/AvatarGroup.js @@ -498,7 +498,7 @@ class AvatarGroup extends UI5Element { const colorIndex = this._getNextBackgroundColor(); avatar.interactive = !this._isGroup; - if (!avatar.getAttribute("background-design")) { + if (!avatar.getAttribute("_color-scheme")) { // AvatarGroup respects colors set to ui5-avatar avatar.setAttribute("_color-scheme", AvatarColorScheme[`Accent${colorIndex}`]); } diff --git a/packages/main/test/specs/AvatarGroup.spec.js b/packages/main/test/specs/AvatarGroup.spec.js index 6dd61e88d83a..9781dfb9cd4b 100644 --- a/packages/main/test/specs/AvatarGroup.spec.js +++ b/packages/main/test/specs/AvatarGroup.spec.js @@ -57,13 +57,13 @@ describe("avatar-group rendering", () => { let index = 0; avatars.forEach(avatar => { - const avatarBackgroundColor = avatar.getAttribute("_background-design"); + const avatarBackgroundColor = avatar.getAttribute("_color-scheme"); if (++index > 10) { index = 1; } - assert.strictEqual(avatarBackgroundColor, `Accent${index}`, "AvatarGroup avatar-size property is assigned to avatars _size property"); + assert.strictEqual(avatarBackgroundColor, `Accent${index}`, "AvatarGroup _color-scheme property is assigned to avatars _size property"); }); });