diff --git a/examples/react-template/screens/Input.tsx b/examples/react-template/screens/Input.tsx
index aaa03714..e70141c0 100644
--- a/examples/react-template/screens/Input.tsx
+++ b/examples/react-template/screens/Input.tsx
@@ -38,6 +38,7 @@ export const InputScreen = (): JSX.Element => {
help='Search helper input'
onKeyUp={(e) => console.log(e)}
required
+ hasIcon
customIconLeft='tri-search'
/>
@@ -46,6 +47,7 @@ export const InputScreen = (): JSX.Element => {
help='Search helper input'
onKeyUp={(e) => console.log(e)}
required
+ hasIcon
customIconLeft='tri-search'
/>
@@ -63,7 +65,6 @@ export const InputScreen = (): JSX.Element => {
minLength={10}
maxLength={12}
onKeyPress={() => console.log('key')}
- hovered
hasIcon
defaultValue='Input, with placeholder (without padding top)'
help='Do not display upper padding when there is no placeholder'
@@ -74,7 +75,6 @@ export const InputScreen = (): JSX.Element => {
/>
{
/>
{
onIconClick={() => {
window.alert('lol')
}}
- search
customIcon={IconName.ALERT}
placeholder='Placeholder with activated search'
/>
{
onIconClick={() => {
window.alert('test')
}}
- search
customIcon={IconName.ALERT}
placeholder='Placeholder with activated search'
/>
{
/>
{
/>
{
/>
{
{
onKeyUp={(e) => console.log(e)}
required
iconName={IconName.CHECK}
+ statusIconName="tri-exclamation-circle"
dynamicPlaceholder={false}
/>
diff --git a/packages/react/components/input/Input.native.tsx b/packages/react/components/input/Input.native.tsx
index 46a4b0f8..f3167a29 100644
--- a/packages/react/components/input/Input.native.tsx
+++ b/packages/react/components/input/Input.native.tsx
@@ -30,6 +30,7 @@ import { AutoCompleteProps } from './autocomplete'
import AutoComplete from './autocomplete/AutoComplete.native'
import InputGauge from './gauge/InputGauge.native'
import { TypographyColor } from '@/objects'
+import { Spacer, SpacerSize } from '../spacer'
export interface InputNativeProps extends InputProps, InputNativeEvents {}
@@ -96,7 +97,6 @@ const Input = ({
securityGauge,
validationRules,
onIconClick,
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
required,
...others
}: InputNativeProps): JSX.Element => {
@@ -284,7 +284,7 @@ const Input = ({
inputIconLeft: {
position: 'absolute',
left: 10,
- top: !value ? -33 : -38,
+ top: !dynamicPlaceholder && !value ? -33 : -38,
},
text: {
zIndex: -1,
@@ -311,8 +311,19 @@ const Input = ({
accessibilityLabel={inputAccessibilityLabel}
testID={inputTestId}
>
- {!dynamicPlaceholder && {label} {label && required && *}}
- {!dynamicPlaceholder && label && sample && {sample}}
+ {!dynamicPlaceholder && label && (
+ <>
+ {label} {label && required && *}
+
+ >
+ )}
+
+ {!dynamicPlaceholder && label && sample && (
+ <>
+ {sample}
+
+ >
+ )}
{dynamicPlaceholder && type !== InputType.SEARCH && (
diff --git a/packages/react/components/textarea/Textarea.native.tsx b/packages/react/components/textarea/Textarea.native.tsx
index 3d6db255..ea3f3f30 100644
--- a/packages/react/components/textarea/Textarea.native.tsx
+++ b/packages/react/components/textarea/Textarea.native.tsx
@@ -11,10 +11,16 @@ import { getColorStyle, TrilogyColor } from "@/objects/facets/Color"
import { AlertState, getAlertStyle } from "@/objects/facets/Alert"
import { Icon, IconColor } from "@/components/icon"
import { ComponentName } from "@/components/enumsComponentsName"
+import { TypographyColor } from "@/objects"
+import { Spacer, SpacerSize } from "../spacer"
+import { TextLevels } from "../text/TextEnum"
+import { Text as TrilogyText } from "../text"
/**
* Textarea Native Component
* @param name {string} Textarea name
+ * @param label {string} Textarea label
+ * @param sample {string} Textarea sample
* @param disabled {boolean} Disabled input
* @param onChange {Function} OnChange Input Event
* @param placeholder {string} Placeholder Input
@@ -34,6 +40,7 @@ const Textarea = (
{
defaultValue,
name,
+ sample,
onChange,
disabled,
help,
@@ -52,6 +59,7 @@ const Textarea = (
customHeight = 120,
value,
testId,
+ required,
...others
}: TextareaNativeProps,
// eslint-disable-next-line
@@ -135,13 +143,13 @@ const Textarea = (
},
leftIcon: {
position: "absolute",
- top: 16,
+ top: dynamicPlaceholder && 16 || !dynamicPlaceholder && label && sample && 60 || 55,
left: 16,
zIndex: 10
},
rightIcon: {
position: "absolute",
- top: dynamicPlaceholder ? 16 : 32,
+ top: dynamicPlaceholder && 16 || !dynamicPlaceholder && label && sample && 60 || 55,
right: 16,
zIndex: 10
},
@@ -149,8 +157,18 @@ const Textarea = (
return (
- {!dynamicPlaceholder && (
- {label}
+ {!dynamicPlaceholder && label && (
+ <>
+ {label} {label && required && *}
+
+ >
+ )}
+
+ {!dynamicPlaceholder && label && sample && (
+ <>
+ {sample}
+
+ >
)}
{iconName && (