From 0801e1d078d5eb1dd795494d9a19dfff43a6b487 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Sun, 29 May 2022 08:16:27 -0700
Subject: [PATCH] refactor: prefer class directive over class attribute (#1318)

---
 src/Accordion/AccordionSkeleton.svelte     |  6 +++---
 src/DatePicker/DatePicker.svelte           |  9 +++++----
 src/Dropdown/Dropdown.svelte               |  2 +-
 src/FileUploader/FileUploaderButton.svelte |  6 +++++-
 src/MultiSelect/MultiSelect.svelte         |  2 +-
 src/NumberInput/NumberInput.svelte         |  3 ++-
 src/Select/Select.svelte                   |  6 ++++--
 src/TextInput/PasswordInput.svelte         | 12 +++++++++---
 src/TextInput/TextInput.svelte             |  6 ++++--
 9 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/Accordion/AccordionSkeleton.svelte b/src/Accordion/AccordionSkeleton.svelte
index 770f0f44..d9a71b8e 100644
--- a/src/Accordion/AccordionSkeleton.svelte
+++ b/src/Accordion/AccordionSkeleton.svelte
@@ -44,7 +44,7 @@
         <ChevronRight class="bx--accordion__arrow" />
         <SkeletonText class="bx--accordion__title" />
       </span>
-      <div class="bx--accordion__content">
+      <div class:bx--accordion__content="{true}">
         <SkeletonText width="90%" />
         <SkeletonText width="80%" />
         <SkeletonText width="95%" />
@@ -52,8 +52,8 @@
     </li>
   {/if}
   {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
-    <li class="bx--accordion__item">
-      <span class="bx--accordion__heading">
+    <li class:bx--accordion__item="{true}">
+      <span class:bx--accordion__heading="{true}">
         <ChevronRight class="bx--accordion__arrow" />
         <SkeletonText class="bx--accordion__title" />
       </span>
diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte
index 3443dc5e..00740f78 100644
--- a/src/DatePicker/DatePicker.svelte
+++ b/src/DatePicker/DatePicker.svelte
@@ -247,10 +247,11 @@
     class:bx--date-picker="{true}"
     class:bx--date-picker--short="{short}"
     class:bx--date-picker--light="{light}"
-    class="{datePickerType && `bx--date-picker--${datePickerType}`}
-      {datePickerType === 'range' &&
-      $labelTextEmpty &&
-      'bx--date-picker--nolabel'}"
+    class:bx--date-picker--simple="{datePickerType === 'simple'}"
+    class:bx--date-picker--single="{datePickerType === 'single'}"
+    class:bx--date-picker--range="{datePickerType === 'range'}"
+    class:bx--date-picker--nolabel="{datePickerType === 'range' &&
+      $labelTextEmpty}"
     on:keydown="{(e) => {
       if (calendar?.isOpen && e.key === 'Escape') {
         e.stopPropagation();
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index e93fce46..907182d7 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -231,7 +231,7 @@
       translateWithId="{translateWithId}"
       id="{id}"
     >
-      <span class="bx--list-box__label">
+      <span class:bx--list-box__label="{true}">
         {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
       </span>
       <ListBoxMenuIcon
diff --git a/src/FileUploader/FileUploaderButton.svelte b/src/FileUploader/FileUploaderButton.svelte
index 122cb253..1e8b8366 100644
--- a/src/FileUploader/FileUploaderButton.svelte
+++ b/src/FileUploader/FileUploaderButton.svelte
@@ -67,7 +67,11 @@
   class:bx--btn="{true}"
   class:bx--btn--sm="{true}"
   class:bx--btn--disabled="{disabled}"
-  class="{kind && `bx--btn--${kind}`}"
+  class:bx--btn--primary="{kind === 'primary'}"
+  class:bx--btn--secondary="{kind === 'secondary'}"
+  class:bx--btn--tertiary="{kind === 'tertiary'}"
+  class:bx--btn--ghost="{kind === 'ghost'}"
+  class:bx--btn--danger="{kind === 'danger'}"
   on:keydown
   on:keydown="{({ key }) => {
     if (key === ' ' || key === 'Enter') {
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index f72b6d99..8a24af0a 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -463,7 +463,7 @@
         />
       {/if}
       {#if !filterable}
-        <span class="bx--list-box__label">{label}</span>
+        <span class:bx--list-box__label="{true}">{label}</span>
         <ListBoxMenuIcon open="{open}" translateWithId="{translateWithId}" />
       {/if}
     </ListBoxField>
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index 7504a32b..84b046a3 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -168,7 +168,8 @@
     class:bx--number--light="{light}"
     class:bx--number--nolabel="{hideLabel}"
     class:bx--number--nosteppers="{hideSteppers}"
-    class="{size && `bx--number--${size}`}"
+    class:bx--number--sm="{size === 'sm'}"
+    class:bx--number--xl="{size === 'xl'}"
   >
     {#if $$slots.label || label}
       <label
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
index d20504df..b3365693 100644
--- a/src/Select/Select.svelte
+++ b/src/Select/Select.svelte
@@ -119,7 +119,8 @@
             id="{id}"
             name="{name}"
             class:bx--select-input="{true}"
-            class="{size && `bx--select-input--${size}`}"
+            class:bx--select-input--sm="{size === 'sm'}"
+            class:bx--select-input--xl="{size === 'xl'}"
             on:change="{({ target }) => {
               selectedValue.set(target.value);
             }}"
@@ -163,7 +164,8 @@
           required="{required || undefined}"
           aria-invalid="{invalid || undefined}"
           class:bx--select-input="{true}"
-          class="{size && `bx--select-input--${size}`}"
+          class:bx--select-input--sm="{size === 'sm'}"
+          class:bx--select-input--xl="{size === 'xl'}"
           on:change="{({ target }) => {
             selectedValue.set(target.value);
           }}"
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index 15d911e5..90134e69 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@@ -178,8 +178,9 @@
         class:bx--text-input--light="{light}"
         class:bx--text-input--invalid="{invalid}"
         class:bx--text-input--warning="{warn}"
+        class:bx--text-input--sm="{size === 'sm'}"
+        class:bx--text-input--xl="{size === 'xl'}"
         {...$$restProps}
-        class="{size && `bx--text-input--${size}`}"
         on:change
         on:input
         on:input="{({ target }) => {
@@ -199,8 +200,13 @@
         class:bx--btn--disabled="{disabled}"
         class:bx--tooltip__trigger="{true}"
         class:bx--tooltip--a11y="{true}"
-        class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
-        {tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
+        class:bx--tooltip--top="{tooltipPosition === 'top'}"
+        class:bx--tooltip--right="{tooltipPosition === 'right'}"
+        class:bx--tooltip--bottom="{tooltipPosition === 'bottom'}"
+        class:bx--tooltip--left="{tooltipPosition === 'left'}"
+        class:bx--tooltip--align-start="{tooltipAlignment === 'start'}"
+        class:bx--tooltip--align-center="{tooltipAlignment === 'center'}"
+        class:bx--tooltip--align-end="{tooltipAlignment === 'end'}"
         on:click="{() => {
           type = type === 'password' ? 'text' : 'password';
         }}"
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index fc8a9aa4..8a474dd8 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -120,7 +120,8 @@
           class:bx--visually-hidden="{hideLabel}"
           class:bx--label--disabled="{disabled}"
           class:bx--label--inline="{inline}"
-          class="{inline && !!size && `bx--label--inline--${size}`}"
+          class:bx--label--inline--sm="{size === 'sm'}"
+          class:bx--label--inline--xl="{size === 'xl'}"
         >
           <slot name="labelText">
             {labelText}
@@ -191,8 +192,9 @@
         class:bx--text-input--light="{light}"
         class:bx--text-input--invalid="{invalid}"
         class:bx--text-input--warn="{warn}"
+        class:bx--text-input--sm="{size === 'sm'}"
+        class:bx--text-input--xl="{size === 'xl'}"
         {...$$restProps}
-        class="{size && `bx--text-input--${size}`}"
         on:change="{onChange}"
         on:input="{onInput}"
         on:keydown