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 && (