From d91ea0d4b8da0985d3a28aa47c05845e8d42db58 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Thu, 14 Nov 2024 15:21:51 +0000
Subject: [PATCH 1/2] feat: include example for icon insert on input fields

---
 src/core/Icon/__snapshots__/Icon.stories.tsx.snap |  4 ++--
 src/core/styles/Forms.stories.tsx                 | 14 ++++++++++++++
 .../styles/__snapshots__/Forms.stories.tsx.snap   | 15 +++++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
index c68200073..1d052720a 100644
--- a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
+++ b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
@@ -447,14 +447,14 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
   </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-display-connection-state-&amp;-recovery
+      icon-display-connection-state-recovery
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
         <svg class="text-cool-black hover:text-active-orange"
              style="width: 1.5rem; height: 1.5rem;"
         >
-          <use xlink:href="#sprite-icon-display-connection-state-&amp;-recovery">
+          <use xlink:href="#sprite-icon-display-connection-state-recovery">
           </use>
         </svg>
       </div>
diff --git a/src/core/styles/Forms.stories.tsx b/src/core/styles/Forms.stories.tsx
index ff3bbd488..2e3301754 100644
--- a/src/core/styles/Forms.stories.tsx
+++ b/src/core/styles/Forms.stories.tsx
@@ -80,6 +80,20 @@ export const Inputs = {
         />
         <p className="ui-text-p3 text-gui-error-red mt-8">Oof, what an input</p>
       </div>
+      <div>
+        <p className="mb-16 text-neutral-800">With character insert</p>
+        <div className="relative">
+          <div className="h-32 w-32 absolute left-8 top-8 flex items-center justify-center select-none cursor-default">
+            $
+          </div>
+          <input
+            type="search"
+            className="ui-input pl-40"
+            placeholder="With icon"
+            autoComplete="off"
+          />
+        </div>
+      </div>
     </div>
   ),
 };
diff --git a/src/core/styles/__snapshots__/Forms.stories.tsx.snap b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
index 7303c8cd0..91675344e 100644
--- a/src/core/styles/__snapshots__/Forms.stories.tsx.snap
+++ b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
@@ -255,6 +255,21 @@ exports[`CSS/Forms Inputs smoke-test 1`] = `
       Oof, what an input
     </p>
   </div>
+  <div>
+    <p class="mb-16 text-neutral-800">
+      With character insert
+    </p>
+    <div class="relative">
+      <div class="h-32 w-32 absolute left-8 top-8 flex items-center justify-center select-none cursor-default">
+        $
+      </div>
+      <input type="search"
+             class="ui-input pl-40"
+             placeholder="With icon"
+             autocomplete="off"
+      >
+    </div>
+  </div>
 </div>
 `;
 

From 1732e0a683f609f26a6eab17d3525d0cae1f277b Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Thu, 14 Nov 2024 15:22:15 +0000
Subject: [PATCH 2/2] chore: rename connection state icon to selector-friendly
 name

---
 ...-&-recovery.svg => icon-display-connection-state-recovery.svg} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/core/icons/{icon-display-connection-state-&-recovery.svg => icon-display-connection-state-recovery.svg} (100%)

diff --git a/src/core/icons/icon-display-connection-state-&-recovery.svg b/src/core/icons/icon-display-connection-state-recovery.svg
similarity index 100%
rename from src/core/icons/icon-display-connection-state-&-recovery.svg
rename to src/core/icons/icon-display-connection-state-recovery.svg