feat(Input): add iconPosition property

CHANGELOG.md

@@ -31,6 +31,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Set the ref of the `FocusZone` in `Embed` mode @sophieH29 ([#435](https://github.com/stardust-ui/react/pull/435))
 - Close `Popup` on outside click @kuzhelov ([#410](https://github.com/stardust-ui/react/pull/410))
 - Set default `chatBehavior` which uses Enter/Esc keys @sophieH29 ([#443](https://github.com/stardust-ui/react/pull/443))
+- Add `iconPosition` property to `Input` component @mnajdova ([#442](https://github.com/stardust-ui/react/pull/442)) 
 
 ### Documentation
 - Add all missing component descriptions and improve those existing @levithomason ([#400](https://github.com/stardust-ui/react/pull/400))

docs/src/examples/components/Input/Variations/InputExampleIconPosition.shorthand.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Input } from '@stardust-ui/react'
+
+const InputExampleIconPosition = () => (
+  <Input icon="search" placeholder="Search..." iconPosition="start" />
+)
+
+export default InputExampleIconPosition

docs/src/examples/components/Input/Variations/index.tsx

@@ -9,6 +9,11 @@ const Variations = () => (
       description="An input can have an icon."
       examplePath="components/Input/Variations/InputExampleIcon"
     />
+    <ComponentExample
+      title="Icon position"
+      description="The icon inside the input can be positioned at the start of the input."
+      examplePath="components/Input/Variations/InputExampleIconPosition"
+    />
     <ComponentExample
       title="Fluid"
       description="An input can take the full width of the parent element."

src/components/Input/Input.tsx

@@ -29,6 +29,7 @@ export interface InputProps {
   defaultValue?: React.ReactText
   fluid?: boolean
   icon?: ShorthandValue
+  iconPosition?: 'start' | 'end'
   inline?: boolean
   input?: ShorthandValue
   onChange?: ComponentEventHandler<InputProps>
@@ -87,6 +88,9 @@ class Input extends AutoControlledComponent<Extendable<InputProps>, InputState>
     /** Optional Icon to display inside the Input. */
     icon: customPropTypes.itemShorthand,
 
+    /** An Input with icon can format the icon to appear at the start or at the end of the input field. */
+    iconPosition: PropTypes.oneOf(['start', 'end']),
+
     /** Shorthand for the input component. */
     input: customPropTypes.itemShorthand,
 
@@ -155,6 +159,7 @@ class Input extends AutoControlledComponent<Extendable<InputProps>, InputState>
     as: 'div',
     type: 'text',
     wrapper: 'div',
+    iconPosition: 'end',
   }
 
   static autoControlledProps = ['value']

src/themes/teams/components/Input/inputStyles.ts

@@ -29,12 +29,22 @@ const inputStyles: ComponentSlotStylesInput<InputProps, InputVariables> = {
       borderBottomColor: v.inputFocusBorderBottomColor,
       boxShadow: v.boxShadow,
     },
+    ...(p.clearable && { padding: v.inputPaddingWithIconAtEnd }),
+    ...(p.icon && {
+      padding:
+        p.iconPosition === 'start' ? v.inputPaddingWithIconAtStart : v.inputPaddingWithIconAtEnd,
+    }),
   }),
 
-  icon: ({ variables: v }): ICSSInJSStyle => ({
+  icon: ({ props: { iconPosition }, variables: v }): ICSSInJSStyle => ({
     position: v.iconPosition as PositionProperty,
     color: v.iconColor,
-    right: v.iconRight,
+    ...(iconPosition === 'start' && {
+      left: v.iconLeft,
+    }),
+    ...(iconPosition === 'end' && {
+      right: v.iconRight,
+    }),
     outline: 0,
   }),
 }

src/themes/teams/components/Input/inputVariables.ts

@@ -1,4 +1,5 @@
 import { pxToRem } from '../../../../lib'
+
 export interface InputVariables {
   backgroundColor: string
   border: string
@@ -9,6 +10,9 @@ export interface InputVariables {
   iconColor: string
   iconPosition: string
   iconRight: string
+  iconLeft: string
+  inputPaddingWithIconAtStart: string
+  inputPaddingWithIconAtEnd: string
   inputPadding: string
   inputFocusBorderBottomColor: string
   inputFocusBorderRadius: string
@@ -26,8 +30,11 @@ export default (siteVars): InputVariables => ({
   iconPosition: 'absolute',
   iconRight: pxToRem(2),
   iconColor: siteVars.bodyColor,
+  iconLeft: pxToRem(6),
+  inputPaddingWithIconAtStart: `${pxToRem(6)} ${pxToRem(12)} ${pxToRem(6)} ${pxToRem(24)}`,
+  inputPaddingWithIconAtEnd: `${pxToRem(6)} ${pxToRem(24)} ${pxToRem(6)} ${pxToRem(12)}`,
 
-  inputPadding: `${pxToRem(6)} ${pxToRem(24)} ${pxToRem(6)} ${pxToRem(12)}`,
+  inputPadding: `${pxToRem(6)} ${pxToRem(12)} ${pxToRem(6)} ${pxToRem(12)}`,
   inputFocusBorderBottomColor: siteVars.brand,
   inputFocusBorderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`,
 })