feat(header): properly support the Icon interface

Now the consumer can specify `color` and `backgroundColor` directly on the `icon`. The styles code are however backwards compatible, and still support the old custom CSS props of `--header-icon-color` and `--header-icon-background-color`. In case any consumer has specified the CSS props, they will get the same result as before. But we removed the props from the documentations, since we want the consumers to use the `Icon` interface instead of adding styles.
Lundalogik · Jan 30, 2025 · 75f01bf · 75f01bf
1 parent 27e42f9
commit 75f01bf
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 9 deletions.
diff --git a/src/components/header/examples/header-colors.scss b/src/components/header/examples/header-colors.scss
@@ -1,6 +1,5 @@
 :host(limel-example-header-colors) {
     --header-background-color: rgb(var(--color-yellow-dark));
-    --header-icon-color: rgb(var(--color-white));
     --header-heading-color: rgb(var(--color-brown-default));
     --header-subheading-color: rgb(var(--color-brown-darker));
 }
diff --git a/src/components/header/examples/header-colors.tsx b/src/components/header/examples/header-colors.tsx
@@ -25,7 +25,10 @@ export class HeaderExample {
     public render() {
         return (
             <limel-header
-                icon="create_new"
+                icon={{
+                    name: 'create_new',
+                    color: 'rgb(var(--color-white))',
+                }}
                 heading="Edit note"
                 subheading="Created: 17 Jan 2023"
             >

diff --git a/src/components/header/examples/header-narrow.scss b/src/components/header/examples/header-narrow.scss
@@ -1,4 +1,3 @@
 :host(limel-example-header-narrow) {
-    --header-icon-color: rgb(var(--color-blue-default));
     --header-top-right-left-border-radius: 0;
 }
diff --git a/src/components/header/examples/header-narrow.tsx b/src/components/header/examples/header-narrow.tsx
@@ -26,7 +26,10 @@ export class HeaderExample {
         return (
             <limel-header
                 class="is-narrow"
-                icon="ok"
+                icon={{
+                    name: 'ok',
+                    color: 'rgb(var(--color-blue-default))',
+                }}
                 heading="This is a narrow header"
             />
         );

diff --git a/src/components/header/header.scss b/src/components/header/header.scss
@@ -6,8 +6,6 @@
  * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.
  * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.
  * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.
- * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.
- * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.
  * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.
  * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.
  */
@@ -36,8 +34,14 @@
 .icon {
     --limel-icon-svg-margin: 0.25rem;
     flex-shrink: 0;
-    color: var(--header-icon-color, rgb(var(--contrast-1100)));
-    background-color: var(--header-icon-background-color, transparent);
+    color: var(
+        --limel-header-icon-color,
+        var(--header-icon-color, rgb(var(--contrast-1100)))
+    );
+    background-color: var(
+        --limel-header-icon-background-color,
+        var(--header-icon-background-color, transparent)
+    );
     width: 2.25rem;
     border-radius: 0.56rem;
 }

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -118,7 +118,20 @@ export class Header {
             return;
         }
 
-        return <limel-icon class="icon" badge={true} name={icon} />;
+        return (
+            <limel-icon
+                class="icon"
+                badge={true}
+                name={icon}
+                style={{
+                    '--limel-header-icon-color': `${(this.icon as Icon)?.color ?? ''}`,
+                    '--limel-header-icon-background-color': `${
+                        (this.icon as Icon)?.backgroundColor ?? ''
+                    }`,
+                    title: `${(this.icon as Icon)?.title}`,
+                }}
+            />
+        );
     }
 
     private renderSupportingText() {