fix: dynamic color and size updates will be reflected

Kajabi · Aug 1, 2024 · ca33cff · ca33cff
1 parent 8772e3e
commit ca33cff
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/pds-icon/pds-icon.tsx b/src/components/pds-icon/pds-icon.tsx
@@ -103,6 +103,12 @@ export class PdsIcon {
     }
   }
 
+  @Watch('size')
+  @Watch('color')
+  updateStyles() {
+    this.setCSSVariables();
+  }
+
   @Watch('name')
   @Watch('src')
   @Watch('icon')

diff --git a/src/index-template.html b/src/index-template.html
@@ -30,6 +30,13 @@ <h3>Default Sizes</h3>
     <h3>Custom size</h3>
     <pds-icon name="youtube" size="140px"></pds-icon>
 
+    <h3>Custom size using a class</h3>
+    <p>Style will override the size of 140px and be set to 20px</p>
+    <style>
+      .custom-class { height: 20px; width: 20px; }
+    </style>
+    <pds-icon name="youtube" size="140px" class="custom-class"></pds-icon>
+
     <h3>Color</h3>
     <pds-icon name="youtube" size="140px" color="red"></pds-icon>