From bc7f5821b871691f6a79b95528efabf0c111f227 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 23 Jul 2023 12:26:46 -0700
Subject: [PATCH] refactor: use style directive where applicable (#1760)

Closes #1604
---
 src/CodeSnippet/CodeSnippet.svelte        |  4 +++-
 src/ContextMenu/ContextMenu.svelte        |  3 ++-
 src/DataTable/Toolbar.svelte              |  2 +-
 src/ImageLoader/ImageLoader.svelte        |  4 ++--
 src/Notification/ToastNotification.svelte |  2 +-
 src/Popover/Popover.svelte                |  2 +-
 src/SkeletonText/SkeletonText.svelte      |  4 ++--
 src/Slider/Slider.svelte                  | 11 ++++-------
 src/Tabs/Tab.svelte                       |  2 +-
 src/Toggle/Toggle.svelte                  |  4 ++--
 src/Tooltip/Tooltip.svelte                |  3 ++-
 src/TooltipIcon/TooltipIcon.svelte        |  2 +-
 src/UIShell/Content.svelte                |  2 +-
 src/UIShell/HeaderNavMenu.svelte          |  2 +-
 src/UIShell/SideNav.svelte                |  2 +-
 src/UIShell/SideNavMenu.svelte            |  2 +-
 16 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 939b84ab..3928f23d 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -228,7 +228,9 @@
       tabindex="{type === 'single' && !disabled ? '0' : undefined}"
       aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
       class:bx--snippet-container="{true}"
-      style="width: 100%; min-height: {minHeight}px; max-height: {maxHeight}"
+      style:width="100%"
+      style:min-height="{minHeight}px"
+      style:max-height="{maxHeight}"
     >
       <pre bind:this="{ref}"><code><slot>{code}</slot></code></pre>
     </div>
diff --git a/src/ContextMenu/ContextMenu.svelte b/src/ContextMenu/ContextMenu.svelte
index 80182eb9..1e794f0b 100644
--- a/src/ContextMenu/ContextMenu.svelte
+++ b/src/ContextMenu/ContextMenu.svelte
@@ -164,8 +164,9 @@
   class:bx--menu--open="{open}"
   class:bx--menu--invisible="{open && x === 0 && y === 0}"
   class:bx--menu--root="{level === 1}"
+  style:left="{x}px"
+  style:top="{y}px"
   {...$$restProps}
-  style="left: {x}px; top: {y}px; {$$restProps.style}"
   on:click
   on:click="{({ target }) => {
     const closestOption = target.closest('[tabindex]');
diff --git a/src/DataTable/Toolbar.svelte b/src/DataTable/Toolbar.svelte
index 6f4e7121..99b1f2cf 100644
--- a/src/DataTable/Toolbar.svelte
+++ b/src/DataTable/Toolbar.svelte
@@ -27,8 +27,8 @@
   class:bx--table-toolbar="{true}"
   class:bx--table-toolbar--small="{size === 'sm'}"
   class:bx--table-toolbar--normal="{size === 'default'}"
+  style:z-index="{1}"
   {...$$restProps}
-  style="z-index: 1; {$$restProps.style}"
 >
   <slot />
 </section>
diff --git a/src/ImageLoader/ImageLoader.svelte b/src/ImageLoader/ImageLoader.svelte
index 56e5efd7..f1250576 100644
--- a/src/ImageLoader/ImageLoader.svelte
+++ b/src/ImageLoader/ImageLoader.svelte
@@ -82,8 +82,8 @@
   {/if}
   {#if loaded}
     <img
+      style:width="100%"
       {...$$restProps}
-      style="width: 100%;{$$restProps.style}"
       src="{src}"
       alt="{alt}"
       transition:fade|local="{{ duration: fadeIn ? fast02 : 0 }}"
@@ -99,8 +99,8 @@
     {/if}
     {#if loaded}
       <img
+        style:width="100%"
         {...$$restProps}
-        style="width: 100%;{$$restProps.style}"
         src="{src}"
         alt="{alt}"
         transition:fade|local="{{ duration: fadeIn ? fast02 : 0 }}"
diff --git a/src/Notification/ToastNotification.svelte b/src/Notification/ToastNotification.svelte
index cdc72ea6..63da68c0 100644
--- a/src/Notification/ToastNotification.svelte
+++ b/src/Notification/ToastNotification.svelte
@@ -89,8 +89,8 @@
     class:bx--toast-notification--success="{kind === 'success'}"
     class:bx--toast-notification--warning="{kind === 'warning'}"
     class:bx--toast-notification--warning-alt="{kind === 'warning-alt'}"
+    style:width="{fullWidth ? "100%" : undefined}"
     {...$$restProps}
-    style="{fullWidth && 'width: 100%;'}{$$restProps.style}"
     on:click
     on:mouseover
     on:mouseenter
diff --git a/src/Popover/Popover.svelte b/src/Popover/Popover.svelte
index f76949e3..2249cc9c 100644
--- a/src/Popover/Popover.svelte
+++ b/src/Popover/Popover.svelte
@@ -64,8 +64,8 @@
   class:bx--popover--right-top="{align === 'right-top'}"
   class:bx--popover--open="{open}"
   class:bx--popover--relative="{relative}"
+  style:position="{relative ? "relative" : undefined}"
   {...$$restProps}
-  style="{$$restProps.style}; {relative && 'position: relative'}"
 >
   <div class:bx--popover-contents="{true}">
     <slot />
diff --git a/src/SkeletonText/SkeletonText.svelte b/src/SkeletonText/SkeletonText.svelte
index 7972d91b..f2c95db0 100644
--- a/src/SkeletonText/SkeletonText.svelte
+++ b/src/SkeletonText/SkeletonText.svelte
@@ -34,7 +34,7 @@
       <p
         class:bx--skeleton__text="{true}"
         class:bx--skeleton__heading="{heading}"
-        style="width: {width}"
+        style:width="{width}"
       ></p>
     {/each}
   </div>
@@ -43,8 +43,8 @@
   <p
     class:bx--skeleton__text="{true}"
     class:bx--skeleton__heading="{heading}"
+    style:width="{width}"
     {...$$restProps}
-    style="width: {width};{$$restProps.style}"
     on:click
     on:mouseover
     on:mouseenter
diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index c213889a..33b55e49 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -157,10 +157,7 @@
       {labelText}
     </slot>
   </label>
-  <div
-    class:bx--slider-container="{true}"
-    style="{fullWidth ? 'width: 100%' : undefined}"
-  >
+  <div class:bx--slider-container="{true}" style:width="{fullWidth && "100%"}">
     <span class:bx--slider__range-label="{true}">{minLabel || min}</span>
     <div
       bind:this="{ref}"
@@ -168,7 +165,7 @@
       tabindex="-1"
       class:bx--slider="{true}"
       class:bx--slider--disabled="{disabled}"
-      style="{fullWidth ? 'max-width: none' : undefined}"
+      style:max-width="{fullWidth ? "none" : undefined}"
       on:mousedown="{startDragging}"
       on:mousedown="{startHolding}"
       on:touchstart="{startHolding}"
@@ -189,7 +186,7 @@
         role="slider"
         tabindex="0"
         class:bx--slider__thumb="{true}"
-        style="left: {left}%"
+        style:left="{left}%"
         aria-valuemax="{max}"
         aria-valuemin="{min}"
         aria-valuenow="{value}"
@@ -199,7 +196,7 @@
       <div bind:this="{trackRef}" class:bx--slider__track="{true}"></div>
       <div
         class:bx--slider__filled-track="{true}"
-        style="transform: translate(0, -50%) scaleX({left / 100})"
+        style:transform="translate(0, -50%) scaleX({left / 100})"
       ></div>
     </div>
     <span class:bx--slider__range-label="{true}">{maxLabel || max}</span>
diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte
index dface14e..1bf59aa3 100644
--- a/src/Tabs/Tab.svelte
+++ b/src/Tabs/Tab.svelte
@@ -67,7 +67,7 @@
     id="{id}"
     href="{href}"
     class:bx--tabs__nav-link="{true}"
-    style="{$useAutoWidth ? 'width: auto' : undefined}"
+    style:width="{$useAutoWidth ? "auto" : undefined}"
   >
     <slot>{label}</slot>
   </a>
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte
index 7f38e9af..5c865194 100644
--- a/src/Toggle/Toggle.svelte
+++ b/src/Toggle/Toggle.svelte
@@ -47,8 +47,8 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class:bx--form-item="{true}"
+  style:user-select="none"
   {...$$restProps}
-  style="{$$restProps['style']}; user-select: none"
   on:click
   on:mouseover
   on:mouseenter
@@ -90,7 +90,7 @@
     </span>
     <span
       class:bx--toggle__switch="{true}"
-      style="{hideLabel && 'margin-top: 0'}"
+      style:margin-top="{hideLabel ? 0 : undefined}"
     >
       <span aria-hidden="true" class:bx--toggle__text--off="{true}">
         <slot name="labelA">
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index 0b1aa7e9..cc7c8d20 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@@ -200,8 +200,9 @@
 />
 
 <div
+  style:position="relative"
+  style:z-index="{open ? 1 : undefined}"
   {...$$restProps}
-  style="{open ? 'z-index: 1;' : ''}{$$restProps.style}; position: relative;"
 >
   {#if !hideIcon}
     <div bind:this="{ref}" id="{triggerId}" class:bx--tooltip__label="{true}">
diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte
index 8eac1faa..81a5b3ac 100644
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/src/TooltipIcon/TooltipIcon.svelte
@@ -57,8 +57,8 @@
   class:bx--tooltip--align-start="{align === 'start'}"
   class:bx--tooltip--align-center="{align === 'center'}"
   class:bx--tooltip--align-end="{align === 'end'}"
+  style:cursor="{disabled ? "not-allowed" : "default"}"
   {...$$restProps}
-  style="cursor: {disabled ? 'not-allowed' : 'default'}; {$$restProps.style}"
   on:click
   on:mouseover
   on:mouseenter
diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte
index 768b1dc5..598d287b 100644
--- a/src/UIShell/Content.svelte
+++ b/src/UIShell/Content.svelte
@@ -17,8 +17,8 @@
 <main
   id="{id}"
   class:bx--content="{true}"
+  style:margin-left="{unsetLeftMargin ? 0 : undefined}"
   {...$$restProps}
-  style="{unsetLeftMargin ? 'margin-left: 0;' : ''} {$$restProps.style}"
 >
   <slot />
 </main>
diff --git a/src/UIShell/HeaderNavMenu.svelte b/src/UIShell/HeaderNavMenu.svelte
index 4309bec0..0ec7ef37 100644
--- a/src/UIShell/HeaderNavMenu.svelte
+++ b/src/UIShell/HeaderNavMenu.svelte
@@ -74,8 +74,8 @@
     href="{href}"
     class:bx--header__menu-item="{true}"
     class:bx--header__menu-title="{true}"
+    style:z-index="{1}"
     {...$$restProps}
-    style="{$$restProps.style}; z-index: 1"
     on:keydown
     on:keydown="{(e) => {
       if (e.key === ' ') e.preventDefault();
diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte
index add7269b..7ba772b3 100644
--- a/src/UIShell/SideNav.svelte
+++ b/src/UIShell/SideNav.svelte
@@ -64,7 +64,7 @@
     }}"
     class:bx--side-nav__overlay="{true}"
     class:bx--side-nav__overlay-active="{isOpen}"
-    style="{isOpen && 'z-index: 6000'}"
+    style:z-index="{isOpen ? 6000 : undefined}"
   ></div>
 {/if}
 <nav
diff --git a/src/UIShell/SideNavMenu.svelte b/src/UIShell/SideNavMenu.svelte
index 991092fe..d1e7b6a5 100644
--- a/src/UIShell/SideNavMenu.svelte
+++ b/src/UIShell/SideNavMenu.svelte
@@ -52,7 +52,7 @@
   <ul
     role="menu"
     class:bx--side-nav__menu="{true}"
-    style="{expanded && 'max-height: none'}"
+    style:max-height="{expanded ? "none" : undefined}"
   >
     <slot />
   </ul>