Fixing textarea & input (native)

BouyguesTelecom · Aug 27, 2024 · ca4689f · ca4689f
1 parent 2b92ef9
commit ca4689f
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 19 deletions.
diff --git 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 => {
       />
 
       <Input
-        hovered
         hasIcon
         defaultValue='Input, without placeholder, without search'
         help='Do not display upper padding when there is no placeholder'
@@ -85,35 +85,30 @@ export const InputScreen = (): JSX.Element => {
       />
 
       <Input
-        hovered
         hasIcon
         defaultValue='Input, with placeholder, with search'
         help='this is my help message'
         type={InputType.TEXT}
         onIconClick={() => {
           window.alert('lol')
         }}
-        search
         customIcon={IconName.ALERT}
         placeholder='Placeholder with activated search'
       />
 
       <Input
-        hovered
         hasIcon
         defaultValue='Input, with search & customIcon'
         help='CustomIcon takes precedence over the display of the search to avoid displaying 2 icons, one above the other.'
         type={InputType.TEXT}
         onIconClick={() => {
           window.alert('test')
         }}
-        search
         customIcon={IconName.ALERT}
         placeholder='Placeholder with activated search'
       />
 
       <Input
-        hovered
         hasIcon
         defaultValue='My default input value'
         help='this is my help message'
@@ -127,7 +122,6 @@ export const InputScreen = (): JSX.Element => {
       />
 
       <Input
-        hovered
         hasIcon
         defaultValue='My default input value'
         help='this is my help message'
@@ -141,7 +135,6 @@ export const InputScreen = (): JSX.Element => {
       />
 
       <Input
-        hovered
         hasIcon
         defaultValue='My default input value'
         help='this is my help message'
@@ -155,7 +148,6 @@ export const InputScreen = (): JSX.Element => {
       />
 
       <Input
-        hovered
         hasIcon
         forceControl
         defaultValue='12'
@@ -176,7 +168,6 @@ export const InputScreen = (): JSX.Element => {
         <Divider />
 
         <Input
-          hovered
           hasIcon
           forceControl
           defaultValue='Input Success'

diff --git a/examples/react-template/screens/Textarea.tsx b/examples/react-template/screens/Textarea.tsx
@@ -16,6 +16,7 @@ export const TextareaScreen = (): JSX.Element => {
         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
@@ -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 && <Text>{label} {label && required && <Text typo={TypographyColor.TEXT_ERROR}>*</Text>}</Text>}
-      {!dynamicPlaceholder && label && sample && <Text level={TextLevels.TWO} typo={TypographyColor.TEXT_DISABLED}>{sample}</Text>}
+      {!dynamicPlaceholder && label && (
+        <>
+          <Text typo={TypographyColor.TEXT_DISABLED}>{label} {label && required && <Text typo={TypographyColor.TEXT_ERROR}>*</Text>}</Text>
+          <Spacer size={SpacerSize.SMALL} />
+        </>
+      )}
+
+      {!dynamicPlaceholder && label && sample && (
+        <>
+          <Text level={TextLevels.THREE} typo={TypographyColor.TEXT_DISABLED}>{sample}</Text>
+          <Spacer size={SpacerSize.SMALL} />
+        </>
+      )}
 
       <View testID='input-wrapper-id' style={styles.inputWrapper}>
         {dynamicPlaceholder && type !== InputType.SEARCH && (

diff --git 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,22 +143,32 @@ 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
     },
   })
 
   return (
     <View>
-      {!dynamicPlaceholder && (
-        <Text style={{ color: getColorStyle(TrilogyColor.MAIN) }}>{label}</Text>
+      {!dynamicPlaceholder && label && (
+        <>
+          <TrilogyText typo={TypographyColor.TEXT_DISABLED}>{label} {label && required && <TrilogyText typo={TypographyColor.TEXT_ERROR}>*</TrilogyText>}</TrilogyText>
+          <Spacer size={SpacerSize.SMALL} />
+        </>
+      )}
+
+      {!dynamicPlaceholder && label && sample && (
+        <>
+          <TrilogyText level={TextLevels.THREE} typo={TypographyColor.TEXT_DISABLED}>{sample}</TrilogyText>
+          <Spacer size={SpacerSize.SMALL} />
+        </>
       )}
 
       {iconName && (