Merge pull request #70 from Synthetixio/text-input

feat(textinput): added icon prop to text input
Synthetixio · May 10, 2022 · 1d5847c · 1d5847c
2 parents b68cb57 + 3ab5e01
commit 1d5847c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
@@ -11,7 +11,8 @@ interface TextInputProps extends HTMLAttributes<HTMLDivElement> {
 	placeholder?: string;
 	size?: 'medium' | 'small';
 	value: string;
-	onInput: FormEventHandler;
+	onInput: FormEventHandler<HTMLInputElement>;
+	icon?: JSX.Element;
 }
 
 export default function TextInput({
@@ -23,6 +24,7 @@ export default function TextInput({
 	size = 'medium',
 	value,
 	name,
+	icon,
 	...rest
 }: TextInputProps) {
 	return (
@@ -37,6 +39,7 @@ export default function TextInput({
 				name={name}
 			/>
 			{label && <StyledLabel htmlFor={id}>{label}</StyledLabel>}
+			{icon && icon}
 		</StyledInputWrapper>
 	);
 }

diff --git a/stories/TextInput.stories.tsx b/stories/TextInput.stories.tsx
@@ -26,6 +26,20 @@ export const Template: ComponentStory<typeof TextInput> = (args) => (
 		label="TextArea Label"
 		placeholder="Some placeholder..."
 		value="Lorem ipsum"
+		icon={
+			<div
+				style={{
+					position: 'absolute',
+					top: '20px',
+					right: 1,
+					color: 'white',
+					zIndex: 10,
+					cursor: 'pointer',
+				}}
+			>
+				CLICK ME
+			</div>
+		}
 	/>
 );