From ba7eeda7635273ec8da12585bbd130e45d34fc84 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 20 Mar 2022 08:18:13 -0700
Subject: [PATCH] breaking: remove deprecated props

---
 src/Button/Button.svelte                   |  10 +-
 src/Button/ButtonSkeleton.svelte           |  10 +-
 src/ContentSwitcher/ContentSwitcher.svelte |   7 -
 src/DataTable/Table.svelte                 |   8 -
 src/NumberInput/NumberInput.svelte         | 234 +++++++--------------
 src/Search/Search.svelte                   |   9 +-
 src/Search/SearchSkeleton.svelte           |   8 +-
 src/StructuredList/StructuredList.svelte   |   7 -
 src/TimePicker/TimePickerSelect.svelte     |   9 +-
 src/UIShell/GlobalHeader/HeaderNav.svelte  |   9 +-
 10 files changed, 88 insertions(+), 223 deletions(-)

diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 00f58160..d6375178 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -25,12 +25,6 @@
    */
   export let isSelected = false;
 
-  /**
-   * Set to `true` for the icon-only variant
-   * @deprecated inferred using the $$slots API
-   */
-  export let hasIconOnly = false;
-
   /**
    * Specify the icon to render
    * @type {typeof import("svelte").SvelteComponent}
@@ -44,8 +38,8 @@
   export let iconDescription = undefined;
 
   /**
-   * Set the alignment of the tooltip relative to the icon
-   * `hasIconOnly` must be set to `true`
+   * Set the alignment of the tooltip relative to the icon.
+   * Only applies to icon-only buttons
    * @type {"start" | "center" | "end"}
    */
   export let tooltipAlignment = "center";
diff --git a/src/Button/ButtonSkeleton.svelte b/src/Button/ButtonSkeleton.svelte
index c0ec0639..5f7f8c3f 100644
--- a/src/Button/ButtonSkeleton.svelte
+++ b/src/Button/ButtonSkeleton.svelte
@@ -10,12 +10,6 @@
    * @type {"default" | "field" | "small" | "lg" | "xl"}
    */
   export let size = "default";
-
-  /**
-   * @deprecated this prop will be removed in the next major release
-   * Use size="small" instead
-   */
-  export let small = false;
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -27,7 +21,7 @@
     class:bx--skeleton="{true}"
     class:bx--btn="{true}"
     class:bx--btn--field="{size === 'field'}"
-    class:bx--btn--sm="{size === 'small' || small}"
+    class:bx--btn--sm="{size === 'small'}"
     class:bx--btn--lg="{size === 'lg'}"
     class:bx--btn--xl="{size === 'xl'}"
     {...$$restProps}
@@ -43,7 +37,7 @@
     class:bx--skeleton="{true}"
     class:bx--btn="{true}"
     class:bx--btn--field="{size === 'field'}"
-    class:bx--btn--sm="{size === 'small' || small}"
+    class:bx--btn--sm="{size === 'small'}"
     class:bx--btn--lg="{size === 'lg'}"
     class:bx--btn--xl="{size === 'xl'}"
     {...$$restProps}
diff --git a/src/ContentSwitcher/ContentSwitcher.svelte b/src/ContentSwitcher/ContentSwitcher.svelte
index 81f8d32e..ce7ef662 100644
--- a/src/ContentSwitcher/ContentSwitcher.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.svelte
@@ -6,12 +6,6 @@
   /** Set the selected index of the switch item */
   export let selectedIndex = 0;
 
-  /**
-   * Set to `true` to enable the light variant
-   * @deprecated
-   */
-  export let light = false;
-
   /**
    * Specify the size of the content switcher
    * @type {"sm" | "xl"}
@@ -67,7 +61,6 @@
 <div
   role="tablist"
   class:bx--content-switcher="{true}"
-  class:bx--content-switcher--light="{light}"
   class:bx--content-switcher--sm="{size === 'sm'}"
   class:bx--content-switcher--xl="{size === 'xl'}"
   {...$$restProps}
diff --git a/src/DataTable/Table.svelte b/src/DataTable/Table.svelte
index ffb83af2..058855db 100644
--- a/src/DataTable/Table.svelte
+++ b/src/DataTable/Table.svelte
@@ -11,12 +11,6 @@
   /** Set to `true` to use static width */
   export let useStaticWidth = false;
 
-  /**
-   * Set to `true` for the bordered variant
-   * @deprecated this prop will be removed in the next major release
-   */
-  export let shouldShowBorder = false;
-
   /** Set to `true` for the sortable variant */
   export let sortable = false;
 
@@ -35,7 +29,6 @@
       class:bx--data-table--sort="{sortable}"
       class:bx--data-table--zebra="{zebra}"
       class:bx--data-table--static="{useStaticWidth}"
-      class:bx--data-table--no-border="{!shouldShowBorder}"
       class:bx--data-table--sticky-header="{stickyHeader}"
     >
       <slot />
@@ -51,7 +44,6 @@
     class:bx--data-table--sort="{sortable}"
     class:bx--data-table--zebra="{zebra}"
     class:bx--data-table--static="{useStaticWidth}"
-    class:bx--data-table--no-border="{!shouldShowBorder}"
     class:bx--data-table--sticky-header="{stickyHeader}"
     {...$$restProps}
   >
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index a7113c97..71e9299d 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -39,12 +39,6 @@
   /** Set to `true` for the input to be read-only */
   export let readonly = false;
 
-  /**
-   * Set to `true` to enable the mobile variant
-   * @deprecated
-   */
-  export let mobile = false;
-
   /** Set to `true` to allow for an empty value */
   export let allowEmpty = false;
 
@@ -174,158 +168,90 @@
     class:bx--number--light="{light}"
     class:bx--number--nolabel="{hideLabel}"
     class:bx--number--nosteppers="{hideSteppers}"
-    class:bx--number--mobile="{mobile}"
     class="{size && `bx--number--${size}`}"
   >
-    {#if mobile}
-      {#if label}
-        <label
-          for="{id}"
-          class:bx--label="{true}"
-          class:bx--label--disabled="{disabled}"
-          class:bx--visually-hidden="{hideLabel}"
-        >
-          <slot name="label">{label}</slot>
-        </label>
-      {/if}
-      <div
-        class:bx--number__input-wrapper="{true}"
-        class:bx--number__input-wrapper--warning="{!invalid && warn}"
+    {#if label}
+      <label
+        for="{id}"
+        class:bx--label="{true}"
+        class:bx--label--disabled="{disabled}"
+        class:bx--visually-hidden="{hideLabel}"
       >
-        <button
-          type="button"
-          aria-live="polite"
-          aria-atomic="true"
-          title="{decrementLabel}"
-          aria-label="{decrementLabel || iconDescription}"
-          class:bx--number__control-btn="{true}"
-          class:down-icon="{true}"
-          on:click="{() => {
-            updateValue(-1);
-          }}"
-          disabled="{disabled}"
-        >
-          <Subtract16 class="down-icon" />
-        </button>
-        <input
-          bind:this="{ref}"
-          type="number"
-          pattern="[0-9]*"
-          aria-label="{label ? undefined : ariaLabel}"
-          disabled="{disabled}"
-          id="{id}"
-          name="{name}"
-          max="{max}"
-          min="{min}"
-          step="{step}"
-          value="{value ?? ''}"
-          readonly="{readonly}"
-          {...$$restProps}
-          on:change="{onChange}"
-          on:input="{onInput}"
-          on:focus
-          on:blur
-        />
-        <button
-          type="button"
-          aria-live="polite"
-          aria-atomic="true"
-          title="{incrementLabel}"
-          aria-label="{incrementLabel || iconDescription}"
-          class:bx--number__control-btn="{true}"
-          class:up-icon="{true}"
-          on:click="{() => {
-            updateValue(1);
-          }}"
-          disabled="{disabled}"
-        >
-          <Add16 class="up-icon" />
-        </button>
-      </div>
-    {:else}
-      {#if label}
-        <label
-          for="{id}"
-          class:bx--label="{true}"
-          class:bx--label--disabled="{disabled}"
-          class:bx--visually-hidden="{hideLabel}"
-        >
-          <slot name="label">{label}</slot>
-        </label>
-      {/if}
-      <div
-        class:bx--number__input-wrapper="{true}"
-        class:bx--number__input-wrapper--warning="{!invalid && warn}"
-      >
-        <input
-          bind:this="{ref}"
-          type="number"
-          pattern="[0-9]*"
-          aria-describedby="{errorId}"
-          data-invalid="{invalid || undefined}"
-          aria-invalid="{invalid || undefined}"
-          aria-label="{label ? undefined : ariaLabel}"
-          disabled="{disabled}"
-          id="{id}"
-          name="{name}"
-          max="{max}"
-          min="{min}"
-          step="{step}"
-          value="{value ?? ''}"
-          readonly="{readonly}"
-          {...$$restProps}
-          on:change="{onChange}"
-          on:input="{onInput}"
-          on:focus
-          on:blur
-        />
-        {#if invalid}
-          <WarningFilled16 class="bx--number__invalid" />
-        {/if}
-        {#if !invalid && warn}
-          <WarningAltFilled16
-            class="bx--number__invalid bx--number__invalid--warning"
-          />
-        {/if}
-        {#if readonly}
-          <EditOff16 class="bx--text-input__readonly-icon" />
-        {/if}
-        {#if !hideSteppers}
-          <div class:bx--number__controls="{true}">
-            <button
-              type="button"
-              tabindex="-1"
-              title="{decrementLabel || iconDescription}"
-              aria-label="{decrementLabel || iconDescription}"
-              class:bx--number__control-btn="{true}"
-              class:down-icon="{true}"
-              on:click="{() => {
-                updateValue(-1);
-              }}"
-              disabled="{disabled}"
-            >
-              <Subtract16 class="down-icon" />
-            </button>
-            <div class:bx--number__rule-divider="{true}"></div>
-            <button
-              type="button"
-              tabindex="-1"
-              title="{incrementLabel || iconDescription}"
-              aria-label="{incrementLabel || iconDescription}"
-              class:bx--number__control-btn="{true}"
-              class:up-icon="{true}"
-              on:click="{() => {
-                updateValue(1);
-              }}"
-              disabled="{disabled}"
-            >
-              <Add16 class="up-icon" />
-            </button>
-            <div class:bx--number__rule-divider="{true}"></div>
-          </div>
-        {/if}
-      </div>
+        <slot name="label">{label}</slot>
+      </label>
     {/if}
+    <div
+      class:bx--number__input-wrapper="{true}"
+      class:bx--number__input-wrapper--warning="{!invalid && warn}"
+    >
+      <input
+        bind:this="{ref}"
+        type="number"
+        pattern="[0-9]*"
+        aria-describedby="{errorId}"
+        data-invalid="{invalid || undefined}"
+        aria-invalid="{invalid || undefined}"
+        aria-label="{label ? undefined : ariaLabel}"
+        disabled="{disabled}"
+        id="{id}"
+        name="{name}"
+        max="{max}"
+        min="{min}"
+        step="{step}"
+        value="{value ?? ''}"
+        readonly="{readonly}"
+        {...$$restProps}
+        on:change="{onChange}"
+        on:input="{onInput}"
+        on:focus
+        on:blur
+      />
+      {#if invalid}
+        <WarningFilled16 class="bx--number__invalid" />
+      {/if}
+      {#if !invalid && warn}
+        <WarningAltFilled16
+          class="bx--number__invalid bx--number__invalid--warning"
+        />
+      {/if}
+      {#if readonly}
+        <EditOff16 class="bx--text-input__readonly-icon" />
+      {/if}
+      {#if !hideSteppers}
+        <div class:bx--number__controls="{true}">
+          <button
+            type="button"
+            tabindex="-1"
+            title="{decrementLabel || iconDescription}"
+            aria-label="{decrementLabel || iconDescription}"
+            class:bx--number__control-btn="{true}"
+            class:down-icon="{true}"
+            on:click="{() => {
+              updateValue(-1);
+            }}"
+            disabled="{disabled}"
+          >
+            <Subtract16 class="down-icon" />
+          </button>
+          <div class:bx--number__rule-divider="{true}"></div>
+          <button
+            type="button"
+            tabindex="-1"
+            title="{incrementLabel || iconDescription}"
+            aria-label="{incrementLabel || iconDescription}"
+            class:bx--number__control-btn="{true}"
+            class:up-icon="{true}"
+            on:click="{() => {
+              updateValue(1);
+            }}"
+            disabled="{disabled}"
+          >
+            <Add16 class="up-icon" />
+          </button>
+          <div class:bx--number__rule-divider="{true}"></div>
+        </div>
+      {/if}
+    </div>
     {#if !error && !warn && helperText}
       <div
         class:bx--form__helper-text="{true}"
diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
index b073377c..9a768a53 100644
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@@ -10,12 +10,6 @@
    */
   export let value = "";
 
-  /**
-   * @deprecated this prop will be removed in the next major release
-   * Use size="sm" instead
-   */
-  export let small = false;
-
   /**
    * Specify the size of the search input
    * @type {"sm" | "lg" | "xl"}
@@ -86,7 +80,6 @@
 
 {#if skeleton}
   <SearchSkeleton
-    small="{small}"
     size="{size}"
     {...$$restProps}
     on:click
@@ -101,7 +94,7 @@
     class:bx--search="{true}"
     class:bx--search--light="{light}"
     class:bx--search--disabled="{disabled}"
-    class:bx--search--sm="{size === 'sm' || small}"
+    class:bx--search--sm="{size === 'sm'}"
     class:bx--search--lg="{size === 'lg'}"
     class:bx--search--xl="{size === 'xl'}"
     class:bx--search--expandable="{expandable}"
diff --git a/src/Search/SearchSkeleton.svelte b/src/Search/SearchSkeleton.svelte
index 5363e935..cb1d461c 100644
--- a/src/Search/SearchSkeleton.svelte
+++ b/src/Search/SearchSkeleton.svelte
@@ -1,10 +1,4 @@
 <script>
-  /**
-   * @deprecated this prop will be removed in the next major release
-   * Set to `true` to use the small variant
-   */
-  export let small = false;
-
   /**
    * Specify the size of the search input
    * @type {"sm" | "lg" | "xl"}
@@ -15,7 +9,7 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--skeleton="{true}"
-  class:bx--search--sm="{size === 'sm' || small}"
+  class:bx--search--sm="{size === 'sm'}"
   class:bx--search--lg="{size === 'lg'}"
   class:bx--search--xl="{size === 'xl'}"
   {...$$restProps}
diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte
index d9ce9c7a..c61aea7b 100644
--- a/src/StructuredList/StructuredList.svelte
+++ b/src/StructuredList/StructuredList.svelte
@@ -5,12 +5,6 @@
    */
   export let selected = undefined;
 
-  /**
-   * Set to `true` to use the bordered variant
-   * @deprecated
-   */
-  export let border = false;
-
   /** Set to `true` to use the condensed variant */
   export let condensed = false;
 
@@ -41,7 +35,6 @@
 <div
   role="table"
   class:bx--structured-list="{true}"
-  class:bx--structured-list--border="{border}"
   class:bx--structured-list--selection="{selection}"
   class:bx--structured-list--condensed="{condensed}"
   class:bx--structured-list--flush="{flush}"
diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte
index 39d13e11..3ce0a6c4 100644
--- a/src/TimePicker/TimePickerSelect.svelte
+++ b/src/TimePicker/TimePickerSelect.svelte
@@ -14,12 +14,6 @@
   /** Specify the label text */
   export let labelText = "";
 
-  /**
-   * @deprecated The `hideLabel` prop for `TimePickerSelect` is no longer needed and has been deprecated. It will be removed in the next major release.
-   * Set to `false` to show the label text
-   */
-  export let hideLabel = true;
-
   /** Set an id for the select element */
   export let id = "ccs-" + Math.random().toString(36);
 
@@ -58,9 +52,8 @@
     <label
       for="{id}"
       class:bx--label="{true}"
-      class:bx--visually-hidden="{hideLabel}"
+      class:bx--visually-hidden="{true}"
     >
-      <!-- TODO: set to always be `true` after `hideLabel` is deprecated -->
       <slot name="labelText">
         {labelText}
       </slot>
diff --git a/src/UIShell/GlobalHeader/HeaderNav.svelte b/src/UIShell/GlobalHeader/HeaderNav.svelte
index 33b68399..91142f4a 100644
--- a/src/UIShell/GlobalHeader/HeaderNav.svelte
+++ b/src/UIShell/GlobalHeader/HeaderNav.svelte
@@ -1,13 +1,6 @@
 <script>
-  /**
-   * Specify the ARIA label for the nav
-   * @deprecated use "aria-label" instead
-   * @type {string}
-   */
-  export let ariaLabel = undefined;
-
   $: props = {
-    "aria-label": ariaLabel || $$props["aria-label"],
+    "aria-label": $$props["aria-label"],
     "aria-labelledby": $$props["aria-labelledby"],
   };
 </script>