yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

umb-icon's color property now properly overrides color

Browse Source
This commit is contained in:
Lone Iversen
2024-07-08 14:38:18 +02:00
committed by Jacob Overgaard
parent 543e22c915
commit bd1f20928e
1 changed files with 24 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts
View File

@@ -16,6 +16,12 @@ export class UmbIconElement extends UmbLitElement {
@state()
private _color?: string;
@state()
private _fallbackColor?: string;
/**
* Override the icon color.
* */
@property({ type: String })
public set color(value: string) {
if (!value) return;
@@ -31,12 +37,26 @@ export class UmbIconElement extends UmbLitElement {
this._color = alias ? (variable ? `--uui-icon-color: var(${variable})` : `--uui-icon-color: ${alias}`) : undefined;
}
#setFallbackColorStyle(value: string) {
const alias = value.replace('color-', '');
const variable = extractUmbColorVariable(alias);
this._fallbackColor = alias
? variable
? `--uui-icon-color: var(${variable})`
: `--uui-icon-color: ${alias}`
: undefined;
}
/**
* The icon name. Can be appended with a color.
* Example "icon-heart color-red"
*/
@property({ type: String })
public set name(value: string | undefined) {
const [icon, alias] = value ? value.split(' ') : [];
if (alias) {
this.#setColorStyle(alias);
this.#setFallbackColorStyle(alias);
} else {
this._color = undefined;
}
@@ -48,7 +68,9 @@ export class UmbIconElement extends UmbLitElement {
}
override render() {
return html`<uui-icon name=${ifDefined(this._icon)} style=${ifDefined(this._color)}></uui-icon>`;
return html`<uui-icon
name=${ifDefined(this._icon)}
style=${ifDefined(this._color ?? this._fallbackColor)}></uui-icon>`;
}
static override styles = [