From c5034e882db4a42ae734780669f05f83ba2b00cf Mon Sep 17 00:00:00 2001
From: sua yoo <sua@webrecorder.org>
Date: Thu, 16 May 2024 11:36:08 -0700
Subject: [PATCH] Upgrade Shoelace for UI fixes (#1806)

Fixes https://github.com/webrecorder/browsertrix/issues/1802

<!-- Fixes #issue_number -->

### Changes

- Upgrades Shoelace to 2.15.0 for UI fixes including #1802 (See
https://github.com/shoelace-style/shoelace/blob/v2.15.0/docs/pages/resources/changelog.md)
- Refactors custom components that extend Shoelace components so that
shared shoelace `componentStyles` are included properly
---
 frontend/package.json                      | 2 +-
 frontend/src/components/ui/dialog.ts       | 9 ++-------
 frontend/src/components/ui/inline-input.ts | 5 ++---
 frontend/src/components/ui/tag.ts          | 5 ++---
 frontend/yarn.lock                         | 8 ++++----
 5 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 7c8a22e5..8c5d896f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,7 +10,7 @@
     "@lit/task": "^1.0.0",
     "@novnc/novnc": "^1.4.0-beta",
     "@rollup/plugin-commonjs": "^18.0.0",
-    "@shoelace-style/shoelace": "~2.13.0",
+    "@shoelace-style/shoelace": "~2.15.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/color": "^3.0.2",
     "@types/diff": "^5.0.9",
diff --git a/frontend/src/components/ui/dialog.ts b/frontend/src/components/ui/dialog.ts
index d5b98efb..c74e5585 100644
--- a/frontend/src/components/ui/dialog.ts
+++ b/frontend/src/components/ui/dialog.ts
@@ -1,5 +1,4 @@
 import SlDialog from "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
-import dialogStyles from "@shoelace-style/shoelace/dist/components/dialog/dialog.styles.js";
 import { css } from "lit";
 import {
   customElement,
@@ -15,7 +14,7 @@ import {
 @customElement("btrix-dialog")
 export class Dialog extends SlDialog {
   static styles = [
-    dialogStyles,
+    SlDialog.styles,
     css`
       :host {
         --header-spacing: var(--sl-spacing-medium);
@@ -54,11 +53,7 @@ export class Dialog extends SlDialog {
         border-top: 1px solid var(--sl-color-neutral-100);
       }
     `,
-    // TODO remove this type coercion once we migrate to
-    // lit@3 (or more specifically, to when the version of lit we use uses the
-    // same version of `@lit/reactive-element` as Shoelace -- at the time of
-    // writing, that's `@lit/reactive-element@2.0.2`)
-  ] as typeof SlDialog.styles;
+  ];
 
   @queryAssignedElements({ selector: "form", flatten: true })
   readonly formElems!: HTMLFormElement[];
diff --git a/frontend/src/components/ui/inline-input.ts b/frontend/src/components/ui/inline-input.ts
index 140558e5..315b5e79 100644
--- a/frontend/src/components/ui/inline-input.ts
+++ b/frontend/src/components/ui/inline-input.ts
@@ -1,5 +1,4 @@
 import SlInput from "@shoelace-style/shoelace/dist/components/input/input.js";
-import inputStyles from "@shoelace-style/shoelace/dist/components/input/input.styles.js";
 import { css } from "lit";
 import { customElement } from "lit/decorators.js";
 
@@ -9,7 +8,7 @@ import { customElement } from "lit/decorators.js";
 @customElement("btrix-inline-input")
 export class InlineInput extends SlInput {
   static styles = [
-    inputStyles,
+    SlInput.styles,
     css`
       :host {
         --sl-input-height-small: var(--sl-font-size-x-large);
@@ -21,5 +20,5 @@ export class InlineInput extends SlInput {
         padding: 0 0.5ch;
       }
     `,
-  ] as typeof SlInput.styles;
+  ];
 }
diff --git a/frontend/src/components/ui/tag.ts b/frontend/src/components/ui/tag.ts
index 22df7e0b..0cb3ee5a 100644
--- a/frontend/src/components/ui/tag.ts
+++ b/frontend/src/components/ui/tag.ts
@@ -1,5 +1,4 @@
 import SLTag from "@shoelace-style/shoelace/dist/components/tag/tag.js";
-import tagStyles from "@shoelace-style/shoelace/dist/components/tag/tag.styles.js";
 import { css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -20,7 +19,7 @@ export class Tag extends SLTag {
   };
 
   static styles = [
-    tagStyles,
+    SLTag.styles,
     css`
       :host {
         max-width: 100%;
@@ -91,7 +90,7 @@ export class Tag extends SLTag {
         padding: 0 0.125rem 0 0.5rem;
       }
     `,
-  ] as (typeof SLTag)["styles"];
+  ];
 
   @property({ type: String, noAccessor: true })
   tabindex?: string;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index b9e1d234..cf2bed85 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1135,10 +1135,10 @@
   resolved "https://registry.yarnpkg.com/@shoelace-style/localize/-/localize-3.1.2.tgz#2c63f16d8aa80842dbe5127845c76ed53f6a5e8e"
   integrity sha512-Hf45HeO+vdQblabpyZOTxJ4ZeZsmIUYXXPmoYrrR4OJ5OKxL+bhMz5mK8JXgl7HsoEowfz7+e248UGi861de9Q==
 
-"@shoelace-style/shoelace@~2.13.0":
-  version "2.13.1"
-  resolved "https://registry.yarnpkg.com/@shoelace-style/shoelace/-/shoelace-2.13.1.tgz#bd3eb4d6076cdc6f307cdd10fff3775177174289"
-  integrity sha512-QMMvq7xgKzZR5+HEgZvv82V1yDKxucsW3XTbF+Tl5ckkzyXlKtKdY1k0eK9EnWPK482JXjoKeeiBJnrx+h6i4Q==
+"@shoelace-style/shoelace@~2.15.0":
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/@shoelace-style/shoelace/-/shoelace-2.15.0.tgz#3410d6bb50811fad001b2c2fbd455cb60d6341a9"
+  integrity sha512-Lcg938Y8U2VsHqIYewzlt+H1rbrXC4GRSUkTJgXyF8/0YAOlI+srd5OSfIw+/LYmwLP2Peyh398Kae/6tg4PDA==
   dependencies:
     "@ctrl/tinycolor" "^4.0.2"
     "@floating-ui/dom" "^1.5.3"