Allow displaying icon in TextInput component (#37951)

2026-02-23 15:12:02 +01:00
parent b785f05ddb
commit e0cc3a30ef
7 changed files with 146 additions and 40 deletions
--- a/app/javascript/mastodon/components/form_fields/text_input.module.scss
+++ b/app/javascript/mastodon/components/form_fields/text_input.module.scss
@@ -20,6 +20,15 @@
    font-size: 16px;
  }

+  .iconWrapper & {
+    // Make space for icon displayed at start of input
+    padding-inline-start: 36px;
+  }
+
+  &::placeholder {
+    color: var(--color-text-secondary);
+  }
+
  &:focus {
    outline-color: var(--color-text-brand);
  }
@@ -40,3 +49,17 @@
    cursor: not-allowed;
  }
 }
+
+.iconWrapper {
+  position: relative;
+}
+
+.icon {
+  pointer-events: none;
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  inset-inline-start: 10px;
+  inset-block-start: 10px;
+  color: var(--color-text-secondary);
+}