From acc31c3e456ad11ae9bff28bf46b1811b7f0663d Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Wed, 2 Apr 2025 14:54:55 +0200
Subject: [PATCH] OZG-7707 rename "color" prop to "fill"
---
alfa-client/apps/demo/src/app/app.component.html | 6 +++---
.../libs/design-system/src/lib/icon/icon.component.ts | 9 ++++++---
2 files changed, 9 insertions(+), 6 deletions(-)
diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 8905cd8a7a..c4fa3ed1a6 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -58,10 +58,10 @@
<div class="my-12">
<h2 class="heading-2">Icons</h2>
- <div class="mb-6 flex">
+ <div class="mb-6 flex gap-1">
<ods-icon name="account-circle" size="xxl" />
- <ods-icon name="accessibility" size="extra-large" color="text" />
- <ods-icon name="accessibility" size="large" color="error" />
+ <ods-icon name="accessibility" size="extra-large" fill="text" />
+ <ods-icon name="accessibility" size="large" fill="error" />
<ods-icon name="accessibility" class="fill-red-500" />
<ods-icon name="accessibility" size="small" />
<ods-icon name="admin-logo" size="unset" />
diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
index 62f64bd9c2..df7f281cd8 100644
--- a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
+++ b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
@@ -38,11 +38,14 @@ const iconVariants = cva('', {
xxl: 'size-12',
unset: '',
},
- color: {
+ fill: {
primary: 'fill-primary',
text: 'fill-text',
whitetext: 'fill-whitetext',
error: 'fill-error',
+ pdf: 'fill-pdf',
+ neutral: 'fill-neutral-500 dark:fill-neutral-400',
+ abgelehnt: 'fill-abgelehnt',
},
},
});
@@ -53,14 +56,14 @@ type IconVariants = VariantProps<typeof iconVariants>;
selector: 'ods-icon',
standalone: true,
imports: [CommonModule, SvgIconComponent],
- template: `<svg-icon [src]="'assets/icons/' + name + '.svg'" [svgClass]="twMerge(iconVariants({ size, color }), class)" />`,
+ template: `<svg-icon [src]="'assets/icons/' + name + '.svg'" [svgClass]="twMerge(iconVariants({ size, fill }), class)" />`,
styles: [':host {@apply block w-fit}'],
})
export class IconComponent {
@Input({ required: true }) name!: string;
@Input() class: string;
@Input() size: IconVariants['size'] = 'medium';
- @Input() color: IconVariants['color'] = 'primary';
+ @Input() fill: IconVariants['fill'] = 'primary';
readonly iconVariants = iconVariants;
readonly twMerge = twMerge;
--
GitLab