feat: include example for icon insert on input fields

ably · Nov 14, 2024 · d91ea0d · d91ea0d
1 parent 44b39b8
commit d91ea0d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>
 `;