Skip to content

feat(ui5-avatar-badge): add colorScheme property for extended color palette - #14009

Merged
plamenivanov91 merged 5 commits into
mainfrom
avatar-extended-color
Sep 16, 2026
Merged

plamenivanov91 merged 5 commits into
mainfrom
avatar-extended-color

Conversation

@plamenivanov91

@plamenivanov91 plamenivanov91 commented Aug 31, 2026

Copy link
Copy Markdown
Contributor

Adds a new colorScheme property accepting values "1" through "10",
backed by the SAP indication color tokens (sapIndicationColor_N_*).
This follows the same pattern used by ui5-tag and avoids introducing
a new enum, keeping the API intentionally loose to match established
conventions.

Each value maps directly to its own CSS rule setting background,
border-color, and text color from the indication palette, plus a
box-shadow via sapContent_Shadow1 for visual depth. The semantic
state property takes precedence over colorScheme when set to any
value other than None.

Fixes: #13925
JIRA: BGSOFUIPIRIN-7121

…alette

Adds a new `colorScheme` property accepting `Accent1` through `Accent10`,
matching the color scheme values available on `ui5-avatar`. The semantic
`state` property takes precedence over `colorScheme` when set to any
value other than `None`.

CSS custom properties inherited from the parent Avatar are reused so the
badge background and icon color stay in sync with the avatar across all
themes without duplicating theme token mappings.

Fixes: #13925
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

Replace the AccentN color scheme values with numeric "1"-"10" values
backed by sapIndicationColor_N_* tokens, matching the ui5-tag pattern.
Each color scheme gets its own per-rule declaration (no catch-all),
adds a box-shadow via sapContent_Shadow1, and uses dedicated border
color tokens instead of reusing the text color token.

Update test page, website sample (HTML + React), docs description,
and Cypress visual tests to reflect the new values.
@github-actions

Copy link
Copy Markdown

👋 Heads-up: dev close is in effect

Thanks for the contribution! This repository is currently in dev close ahead of release 2.27 (scheduled 2026-09-23, UTC). See the release schedule for the full timeline.

This PR appears to introduce public-API changes (detected by diffing the Custom Elements Manifest against the latest published version on npm):

@ui5/webcomponents

  • ➕ added property: colorScheme
  • ➕ added attribute: color-scheme
  • 🔄 changed attribute state (type)

Could you please hold off on merging into main until the release ships? Public-API changes are best landed in the next dev cycle so they don't slip into the release at the last minute. Once the release is out, this PR is good to go.

If this change must ship in the current release, please request a review from one or two members of @UI5/ui5-team-webc so the team can sign off explicitly.

💬 False positive? If you believe this PR doesn't actually change the public API (e.g. only internal refactoring, or an entry the detector mis-attributed), please reply on this thread — your feedback helps us improve the detection during this trial run.

Posted automatically by the Dev Close Notice workflow.

@plamenivanov91
plamenivanov91 merged commit 849466d into main Sep 16, 2026
21 of 22 checks passed
@plamenivanov91
plamenivanov91 deleted the avatar-extended-color branch September 16, 2026 07:32
@plamenivanov91
plamenivanov91 deployed to netlify-preview September 16, 2026 07:32 — with GitHub Actions Active
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

🧹 Preview deployment cleaned up: https://pr-14009--ui5-webcomponents.netlify.app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request]: Avatar badge to support Extended color palette

2 participants