diff --git a/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx b/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx index c57255facff7b..057e81c57d6b3 100644 --- a/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx +++ b/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx @@ -91,4 +91,31 @@ describe("AvatarBadge visual", () => { ); cy.screenshot(); }); + + it("extended color palette - all accents", () => { + cy.mount( +
+ {["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"].map((scheme) => ( + + + + ))} +
+ ); + cy.screenshot(); + }); + + it("extended color palette - semantic state overrides colorScheme", () => { + cy.mount( + + + + ); + // semantic state wins - Negative red styling should apply + cy.get("[ui5-avatar]") + .find("[ui5-avatar-badge]") + .should("have.attr", "state", "Negative") + .should("have.attr", "color-scheme", "3"); + cy.screenshot(); + }); }); diff --git a/packages/main/src/AvatarBadge.ts b/packages/main/src/AvatarBadge.ts index 0ecfaebbe4a5f..d851659201cf5 100644 --- a/packages/main/src/AvatarBadge.ts +++ b/packages/main/src/AvatarBadge.ts @@ -87,12 +87,30 @@ class AvatarBadge extends UI5Element { * - `Negative` - Red, used for error/rejected states * - `Information` - Blue, used for informational states * + * **Note:** `state` takes precedence over `colorScheme`. When `state` is set + * to any value other than `None`, the semantic styling applies and `colorScheme` is ignored. + * * @default "None" * @public */ @property() state: `${ValueState}` = ValueState.None; + /** + * Defines the color scheme of the badge using the indication color palette. + * + * Available options are `"1"` through `"10"`, matching the indication colors. + * + * **Note:** `state` takes precedence - when `state` is set to any value other than `None`, + * the semantic state styling applies and `colorScheme` is ignored. + * + * @default undefined + * @public + * @since 2.27.0 + */ + @property() + colorScheme?: string; + /** * @private */ diff --git a/packages/main/src/themes/AvatarBadge.css b/packages/main/src/themes/AvatarBadge.css index d4a51c539ac18..58ad79c8e75d1 100644 --- a/packages/main/src/themes/AvatarBadge.css +++ b/packages/main/src/themes/AvatarBadge.css @@ -38,6 +38,18 @@ color: var(--sapInformativeTextColor); } +/* Extended color palette - applies only when state is None */ +:host([color-scheme="1"][state="None"]) { background: var(--sapIndicationColor_1_Background); border-color: var(--sapIndicationColor_1_BorderColor); color: var(--sapIndicationColor_1_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="2"][state="None"]) { background: var(--sapIndicationColor_2_Background); border-color: var(--sapIndicationColor_2_BorderColor); color: var(--sapIndicationColor_2_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="3"][state="None"]) { background: var(--sapIndicationColor_3_Background); border-color: var(--sapIndicationColor_3_BorderColor); color: var(--sapIndicationColor_3_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="4"][state="None"]) { background: var(--sapIndicationColor_4_Background); border-color: var(--sapIndicationColor_4_BorderColor); color: var(--sapIndicationColor_4_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="5"][state="None"]) { background: var(--sapIndicationColor_5_Background); border-color: var(--sapIndicationColor_5_BorderColor); color: var(--sapIndicationColor_5_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="6"][state="None"]) { background: var(--sapIndicationColor_6_Background); border-color: var(--sapIndicationColor_6_BorderColor); color: var(--sapIndicationColor_6_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="7"][state="None"]) { background: var(--sapIndicationColor_7_Background); border-color: var(--sapIndicationColor_7_BorderColor); color: var(--sapIndicationColor_7_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="8"][state="None"]) { background: var(--sapIndicationColor_8_Background); border-color: var(--sapIndicationColor_8_BorderColor); color: var(--sapIndicationColor_8_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="9"][state="None"]) { background: var(--sapIndicationColor_9_Background); border-color: var(--sapIndicationColor_9_BorderColor); color: var(--sapIndicationColor_9_TextColor); box-shadow: var(--sapContent_Shadow1); } +:host([color-scheme="10"][state="None"]) { background: var(--sapIndicationColor_10_Background); border-color: var(--sapIndicationColor_10_BorderColor); color: var(--sapIndicationColor_10_TextColor); box-shadow: var(--sapContent_Shadow1); } + .ui5-avatar-badge-icon { width: var(--_ui5-avatar-badge-icon-size); height: var(--_ui5-avatar-badge-icon-size); diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html index 5cfb13726062c..46cd134ddadc6 100644 --- a/packages/main/test/pages/Avatar.html +++ b/packages/main/test/pages/Avatar.html @@ -287,22 +287,106 @@

Avatar Badge - With Initials and Color Schemes

-

Avatar Badge - With Icons

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

Avatar Badge - Extended Color Palette (Avatar color-scheme / Badge color-scheme)

+
+
+ + + +

Accent1 / colorScheme 1

+
+
+ + + +

Accent2 / colorScheme 2

+
+
+ + + +

Accent3 / colorScheme 3

+
+
+ + + +

Accent4 / colorScheme 4

+
+
+ + + +

Accent5 / colorScheme 5

+
+
+ + + +

Accent6 / colorScheme 6

+
+
+ + + +

Accent7 / colorScheme 7

+
+
+ + + +

Accent8 / colorScheme 8

+
+
+ + + +

Accent9 / colorScheme 9

+
+
+ + + +

Accent10 / colorScheme 10

+
+
+
+ +
+

Avatar Badge - Extended Color Palette with Value State (Avatar color-scheme / Badge state)

+

Semantic state takes precedence over colorScheme.

+
+
+ + + +

Accent1 / None

+
+
+ + + +

Accent1 / Positive

+
+
+ + + +

Accent1 / Critical

+
+
+ + + +

Accent1 / Negative

+
+
+ + + +

Accent1 / Information

+
+
diff --git a/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx b/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx index f86f5918928ea..d8187109a2413 100644 --- a/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx +++ b/packages/website/docs/_components_pages/main/Avatar/AvatarBadge.mdx @@ -4,6 +4,7 @@ slug: ../../AvatarBadge import Basic from "../../../_samples/main/AvatarBadge/Basic/Basic.md"; import ValueStates from "../../../_samples/main/AvatarBadge/ValueStates/ValueStates.md"; +import ColorSchemes from "../../../_samples/main/AvatarBadge/ColorSchemes/ColorSchemes.md"; <%COMPONENT_OVERVIEW%> @@ -18,3 +19,8 @@ import ValueStates from "../../../_samples/main/AvatarBadge/ValueStates/ValueSta The AvatarBadge supports different states to indicate status or notifications. + +### Extended Color Palette +The AvatarBadge supports an extended color palette via the `colorScheme` property. Use values `"1"` through `"10"` to apply indication colors — vivid background, border, and text tones drawn from the SAP indication color tokens, with a subtle box shadow to enhance visibility. + + diff --git a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/ColorSchemes.md b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/ColorSchemes.md new file mode 100644 index 0000000000000..0c062a836e844 --- /dev/null +++ b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/ColorSchemes.md @@ -0,0 +1,5 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; +import react from '!!raw-loader!./sample.tsx'; + + diff --git a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/main.js b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/main.js new file mode 100644 index 0000000000000..03a733dc9e16d --- /dev/null +++ b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/main.js @@ -0,0 +1,4 @@ +import "@ui5/webcomponents/dist/Avatar.js"; +import "@ui5/webcomponents/dist/AvatarBadge.js"; +// Icons +import "@ui5/webcomponents-icons/dist/employee.js"; diff --git a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.html b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.html new file mode 100644 index 0000000000000..7d2fab3857e08 --- /dev/null +++ b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.html @@ -0,0 +1,59 @@ + + + + + + + + Sample + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx new file mode 100644 index 0000000000000..c0f0bf0e98b7d --- /dev/null +++ b/packages/website/docs/_samples/main/AvatarBadge/ColorSchemes/sample.tsx @@ -0,0 +1,23 @@ +import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; +import AvatarClass from "@ui5/webcomponents/dist/Avatar.js"; +import "@ui5/webcomponents-icons/dist/employee.js"; +import AvatarBadgeClass from "@ui5/webcomponents/dist/AvatarBadge.js"; + +const Avatar = createReactComponent(AvatarClass); +const AvatarBadge = createReactComponent(AvatarBadgeClass); + +const schemes = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"] as const; + +function App() { + return ( +
+ {schemes.map((scheme) => ( + + + + ))} +
+ ); +} + +export default App;