feat: support icon as textfield prefix/suffix

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>
+  );
+}

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';

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" />
 );