From 71ffb7f1be8fc3e90377e736009d4c5adec2693e Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Mon, 9 Sep 2024 13:05:42 -0700
Subject: [PATCH] Add the slide-out "Customize more" label back to item preview
 button

I skipped this for a bit because I couldn't think of a simple way to
adapt this behavior to a web component + vanilla CSS setting, but then
I thought of CSS variables, and sat down and cranked this out!
---
 app/assets/javascripts/items/show.js    | 19 +++++++++++++++++++
 app/assets/stylesheets/items/_show.sass | 15 ++++++++++++++-
 app/views/items/show.html.haml          |  3 +++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/items/show.js b/app/assets/javascripts/items/show.js
index e9d8aaab..43f88160 100644
--- a/app/assets/javascripts/items/show.js
+++ b/app/assets/javascripts/items/show.js
@@ -81,6 +81,25 @@ class SpeciesFacePickerOptions extends HTMLElement {
     }
 }
 
+class MeasuredContent extends HTMLElement {
+    connectedCallback() {
+        setTimeout(() => this.#measure(), 0);
+    }
+
+    #measure() {
+        // Find our `<measured-container>` parent, and set our natural width
+        // as `var(--natural-width)` in the context of its CSS styles.
+        const container = this.closest("measured-container");
+        if (container == null) {
+            throw new Error(
+                `<measured-content> must be in a <measured-container>`,
+            );
+        }
+        container.style.setProperty("--natural-width", this.offsetWidth + "px");
+    }
+}
+
 customElements.define("species-color-picker", SpeciesColorPicker);
 customElements.define("species-face-picker", SpeciesFacePicker);
 customElements.define("species-face-picker-options", SpeciesFacePickerOptions);
+customElements.define("measured-content", MeasuredContent);
diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index ea2ea066..8c06325d 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -55,12 +55,25 @@ body.items-show
       text-decoration: none
 
       background: #EDF2F7
-      padding: .75em
+      padding-inline: .75em
       border-radius: .375em
       min-height: 2rem
       min-width: 2rem
       box-sizing: border-box
 
+      .customize-more-label
+        width: 0
+        overflow: hidden
+        transition: width .25s
+        white-space: nowrap
+
+        measured-content
+          padding-right: .5em
+
+      &:hover, &:focus
+        .customize-more-label
+          width: var(--natural-width)
+
   outfit-viewer
     display: block
     position: relative
diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml
index acd75df9..d8171b46 100644
--- a/app/views/items/show.html.haml
+++ b/app/views/items/show.html.haml
@@ -22,6 +22,9 @@
     = link_to wardrobe_path(params: @preview_outfit.wardrobe_params),
               class: "customize-more", target: "_blank",
               title: "Customize more", "aria-label": "Customize more" do
+      %measured-container.customize-more-label
+        %measured-content
+          Customize more
       = edit_icon
 
   %species-color-picker