feat(Input): add iconPosition property #442
Conversation
mnajdova
requested review from
dvdzkwsk,
kuzhelov,
levithomason and
miroslavstastny
as code owners
Codecov Report
@@ Coverage Diff @@
## master #442 +/- ##
=======================================
Coverage 88.96% 88.96%
=======================================
Files 41 41
Lines 1386 1386
Branches 177 177
=======================================
Hits 1233 1233
Misses 149 149
Partials 4 4
Continue to review full report at Codecov.
|
| @@ -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 in the start of the input." | |||
| @@ -7,6 +8,9 @@ export interface InputVariables { | |||
| fontSize: string | |||
| iconPosition: string | |||
| iconRight: string | |||
| iconLeft: string | |||
| inputPaddingWithIconOnStart: string | |||
There was a problem hiding this comment.
nit: 'at' would be a better fit here: inputPaddingWithIconAtStart
| @@ -26,11 +26,23 @@ const inputStyles: ComponentSlotStylesInput<InputProps, InputVariables> = { | |||
| borderColor: v.inputFocusBorderColor, | |||
| borderRadius: v.inputFocusBorderRadius, | |||
| }, | |||
| ...(p.iconPosition === 'start' && | |||
There was a problem hiding this comment.
nit: we could simplify and decouple conditions in the following way:
...
...(p.clearable && { padding: v.inputPaddingWithIconAtEnd, }),
...(p.icon && { padding: p.iconPosition === 'start'
? v.inputPaddingWithIconAtStart
: v.inputPaddingWithIconAtEnd })Most important benefit of this approach would be decoupling the effects of clearable and iconPosition props for styles, so that if, say, one of these props will be eliminated in future, it would be just a matter of removing the corresponding paragraph
There was a problem hiding this comment.
Rearranged styles and changed variables names. Thanks!
# Conflicts: # src/themes/teams/components/Input/inputStyles.ts # src/themes/teams/components/Input/inputVariables.ts
# Conflicts: # CHANGELOG.md
This PR aims to add iconPosition property on the Input component.
API
iconPosition: 'start' | 'end'
new prop for positioning the icon consistent with the other components. By default it's value is 'end'.
Usage
Example code
Rendered component
Rendered HTML