feat: added css vars action

TheComputerM · Aug 30, 2020 · 2de2b39 · 2de2b39
1 parent c54970d
commit 2de2b39
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 10 deletions.
diff --git a/packages/docs/src/examples/components/expansionPanels/customIcon.svelte b/packages/docs/src/examples/components/expansionPanels/customIcon.svelte
@@ -12,7 +12,7 @@
     <span slot="icon" let:active>
       <Icon
         class="mdi mdi-arrow-down-drop-circle-outline"
-        rotate={active ? '180deg' : '0deg'} />
+        rotate={active ? 180 : 0} />
     </span>
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat amet
     natus obcaecati molestiae quas mollitia error modi atque aliquam esse.
@@ -22,15 +22,15 @@
     <span slot="icon" let:active>
       <Icon
         class="mdi mdi-arrow-down-drop-circle"
-        rotate={active ? '180deg' : '0deg'} />
+        rotate={active ? 180 : 0 } />
     </span>
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat amet
     natus obcaecati molestiae quas mollitia error modi atque aliquam esse.
   </ExpansionPanel>
   <ExpansionPanel>
     <span slot="header">Item</span>
     <span slot="icon" let:active>
-      <Icon class="mdi mdi-menu-down" rotate={active ? '180deg' : '0deg'} />
+      <Icon class="mdi mdi-menu-down" rotate={active ? 180 : 0} />
     </span>
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat amet
     natus obcaecati molestiae quas mollitia error modi atque aliquam esse.

diff --git a/packages/docs/src/helpers/Navigation/LeftNavigationDrawer.svelte b/packages/docs/src/helpers/Navigation/LeftNavigationDrawer.svelte
@@ -61,7 +61,7 @@
         <div slot="right">
           <Icon
             path={mdiChevronDown}
-            rotate={item.open ? '180deg' : ''}
+            rotate={item.open ? 180 : 0}
             class="chevron" />
         </div>
       </ListItem>

diff --git a/packages/svelte-materialify/src/components/ExpansionPanels/ExpansionPanel.svelte b/packages/svelte-materialify/src/components/ExpansionPanels/ExpansionPanel.svelte
@@ -103,7 +103,7 @@
     <div class="s-expansion-panel__icon">
       <!-- Slot for the icon at the right of the header. -->
       <slot name="icon" {active}>
-        <Icon {disabled} path={down} rotate={active ? '180deg' : '0deg'} />
+        <Icon {disabled} path={down} rotate={active ? 180 : 0} />
       </slot>
     </div>
   </button>

diff --git a/packages/svelte-materialify/src/components/Icon/Icon.scss b/packages/svelte-materialify/src/components/Icon/Icon.scss
@@ -1,5 +1,7 @@
 .s-icon {
   color: var(--theme-icons-active);
+  font-size: var(--s-icon-size);
+  transform: rotate(var(--s-icon-rotate));
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;

diff --git a/packages/svelte-materialify/src/components/Icon/Icon.svelte b/packages/svelte-materialify/src/components/Icon/Icon.svelte
@@ -1,11 +1,13 @@
 <script>
+  import Style from '../../internal/Style';
+
   let classes = '';
-  export let disabled = false;
   export let size = '24px';
+  export let rotate = 0;
+  export let disabled = false;
   export let path = null;
   export let title = null;
-  export let rotate = '0deg';
-  export let style = '';
+  export let style = null;
   export { classes as class };
 </script>
 
@@ -15,10 +17,11 @@
 
 <i
   aria-hidden="true"
-  style="font-size: {size};transform: rotate({rotate});{style}"
   class="s-icon {classes}"
   {title}
-  class:disabled>
+  class:disabled
+  use:Style={{ 'icon-size': size, 'icon-rotate': `${rotate}deg` }}
+  {style}>
   {#if path}
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/svelte-materialify/src/internal/Style/index.js b/packages/svelte-materialify/src/internal/Style/index.js
@@ -0,0 +1,19 @@
+function setCustomProperties(node, styles) {
+  Object.entries(styles).forEach(([key, value]) => {
+    node.style.setProperty(`--s-${key}`, value);
+  });
+}
+
+/**
+ * @param node {Element}
+ * @param styles {Object}
+ */
+export default (node, styles) => {
+  setCustomProperties(node, styles);
+
+  return {
+    update(newStyles) {
+      setCustomProperties(node, newStyles);
+    },
+  };
+};