From ab9d2c9625334210103d9c7e162014aef82c1c2a Mon Sep 17 00:00:00 2001
From: vsandvold <6734787+vsandvold@users.noreply.github.com>
Date: Thu, 6 Jan 2022 16:04:47 +0100
Subject: [PATCH] feat: support icon as textfield prefix/suffix

---
 packages/_helpers/affix.tsx                   | 22 +++++++++++++++++++
 packages/_helpers/index.ts                    |  2 +-
 .../textfield/stories/Textfield.stories.tsx   | 21 ++++++++++++++++--
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/packages/_helpers/affix.tsx b/packages/_helpers/affix.tsx
index 797fad1b..4f0d3e48 100644
--- a/packages/_helpers/affix.tsx
+++ b/packages/_helpers/affix.tsx
@@ -86,3 +86,25 @@ export function Affix(props: AffixProps) {
     </>,
   );
 }
+
+interface IconAffixProps {
+  /** The icon SVG element */
+  children: React.ReactNode;
+
+  /** Affix added at the beginning of input */
+  prefix?: boolean;
+
+  /** Affix added at the end of input */
+  suffix?: boolean;
+}
+
+export function IconAffix(props: IconAffixProps) {
+  const classBase = props.prefix ? prefix : suffix;
+  const affixClass = `${classBase.wrapper} ${classBase.wrapperWithIcon}`;
+
+  return (
+    <div className={affixClass}>
+      <span className={classBase.label}>{props.children}</span>
+    </div>
+  );
+}
diff --git a/packages/_helpers/index.ts b/packages/_helpers/index.ts
index eeb873a1..7c1f404d 100644
--- a/packages/_helpers/index.ts
+++ b/packages/_helpers/index.ts
@@ -1,3 +1,3 @@
 export { Clickable } from './clickable';
 export { DeadToggle } from './dead-toggle';
-export { Affix } from './affix';
+export { Affix, IconAffix } from './affix';
diff --git a/packages/textfield/stories/Textfield.stories.tsx b/packages/textfield/stories/Textfield.stories.tsx
index a70b7f8c..886c1fd0 100644
--- a/packages/textfield/stories/Textfield.stories.tsx
+++ b/packages/textfield/stories/Textfield.stories.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import Search from '@fabric-ds/icons/react/search-16';
 import { action } from '@storybook/addon-actions';
+import React from 'react';
+import { Affix, IconAffix } from '../../_helpers';
 import { TextField as TroikaTextField } from '../src';
-import { Affix } from '../../_helpers';
 
 const metadata = { title: 'Forms/TextField' };
 export default metadata;
@@ -50,6 +51,14 @@ export const labelPrefix = () => (
   </TextField>
 );
 
+export const iconPrefix = () => (
+  <TextField>
+    <IconAffix prefix>
+      <Search />
+    </IconAffix>
+  </TextField>
+);
+
 export const clearSuffix = () => (
   <TextField>
     <Affix suffix clear onClick={() => alert('clear')} />
@@ -68,6 +77,14 @@ export const labelSuffix = () => (
   </TextField>
 );
 
+export const iconSuffix = () => (
+  <TextField>
+    <IconAffix suffix>
+      <Search />
+    </IconAffix>
+  </TextField>
+);
+
 export const helpText = () => (
   <TextField helpText="Necessary because of reasons" />
 );