Merge pull request #72 from Trendyol/fix/input

fix:input #56
Trendyol · Dec 10, 2024 · 87d645f · 87d645f
2 parents 06bb51e + 4b1e343
commit 87d645f
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 57 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -558,4 +558,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 2c095cf05d0978e12f6ac4350329c2d085601c15
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
@@ -26,7 +26,8 @@ const InputMeta: ComponentMeta<typeof Input> = {
     label: 'Label',
     placeholder: 'Placeholder Text',
     labelFixed: false,
-    required: true,
+    required: false,
+    requiredText: false,
     secureTextEntry: false,
     helpText: 'Help Text',
     error: false,
@@ -83,6 +84,22 @@ export const Cases: InputStory = args => {
         label={null}
       />
 
+      <Input
+        {...args}
+        labelFixed={true}
+        icon={null}
+        requiredText={true}
+        size="large"
+        helpText={null}
+      />
+      <Input
+        {...args}
+        icon={null}
+        requiredText={true}
+        size="large"
+        helpText={null}
+      />
+
       <Input
         {...args}
         labelFixed={false}

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -41,6 +41,7 @@ type InputProps = React.ComponentProps<typeof Box> &
     errorText?: string | null;
     successText?: string | null;
     required?: boolean;
+    requiredText?: boolean;
     icon?: IconNameType | null;
     success?: boolean;
     error?: boolean;
@@ -89,6 +90,7 @@ const Input = forwardRef<TextInputHandles, InputProps>(
       error = false,
       secureTextEntry = false,
       required = false,
+      requiredText = false,
       disabled = false,
       editable = true,
       easing = Easing.inOut(Easing.ease),
@@ -232,6 +234,7 @@ const Input = forwardRef<TextInputHandles, InputProps>(
           label={label}
           labelFixed={labelFixed}
           required={required}
+          requiredText={requiredText}
           errorState={errorState}
           successState={successState}
           animatedViewProps={animatedViewProps}

diff --git a/src/components/Input/InputLabel.test.tsx b/src/components/Input/InputLabel.test.tsx
@@ -7,6 +7,7 @@ describe('Input Label', () => {
   let label: string | null;
   let labelFixed: boolean;
   let required: boolean;
+  let requiredText: boolean;
   let errorState: boolean;
   let successState: boolean;
   let animatedViewProps: AnimatedViewPropsType;
@@ -16,7 +17,8 @@ describe('Input Label', () => {
   beforeEach(() => {
     label = 'Label';
     labelFixed = false;
-    required = true;
+    required = false;
+    requiredText = false;
     errorState = false;
     successState = false;
     animatedViewProps = {};
@@ -53,6 +55,7 @@ describe('Input Label', () => {
         label={label}
         labelFixed={labelFixed}
         required={required}
+        requiredText={requiredText}
         errorState={errorState}
         successState={successState}
         animatedViewProps={animatedViewProps}
@@ -75,6 +78,7 @@ describe('Input Label', () => {
         label={label}
         labelFixed={labelFixed}
         required={required}
+        requiredText={requiredText}
         errorState={errorState}
         successState={successState}
         animatedViewProps={animatedViewProps}
@@ -97,6 +101,7 @@ describe('Input Label', () => {
         label={label}
         labelFixed={labelFixed}
         required={required}
+        requiredText={requiredText}
         errorState={errorState}
         successState={successState}
         animatedViewProps={animatedViewProps}
@@ -120,6 +125,7 @@ describe('Input Label', () => {
         label={label}
         labelFixed={labelFixed}
         required={required}
+        requiredText={requiredText}
         errorState={errorState}
         successState={successState}
         animatedViewProps={animatedViewProps}

diff --git a/src/components/Input/InputLabel.tsx b/src/components/Input/InputLabel.tsx
@@ -10,6 +10,7 @@ export const InputLabel = React.memo(
     label,
     labelFixed,
     required,
+    requiredText,
     errorState,
     successState,
     animatedViewProps,
@@ -18,7 +19,8 @@ export const InputLabel = React.memo(
   }: {
     label?: string | null;
     labelFixed?: boolean;
-    required: boolean;
+    required?: boolean;
+    requiredText?: boolean;
     errorState: boolean;
     successState: boolean;
     animatedViewProps: AnimatedViewPropsType;
@@ -40,7 +42,7 @@ export const InputLabel = React.memo(
             testID="fixed-label">
             {label}
           </Text>
-          {!required ? (
+          {!required && requiredText ? (
             <Text
               testID="optional-fixed-label"
               ml="4xs"
@@ -63,7 +65,7 @@ export const InputLabel = React.memo(
               testID="outlined-label-box">
               <Animated.Text {...animatedTextProps}>
                 {label}
-                {!required ? ' (Optional)' : ''}
+                {!required && requiredText ? ' (Optional)' : ''}
               </Animated.Text>
             </Box>
           </Animated.View>

diff --git a/src/components/Input/__snapshots__/Input.test.tsx.snap b/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`Input should render disabled input correctly 1`] = `
         }
       >
         label
-         (Optional)
+        
       </Text>
     </View>
   </View>
@@ -157,7 +157,7 @@ exports[`Input should render input correctly 1`] = `
         }
       >
         label
-         (Optional)
+        
       </Text>
     </View>
   </View>
@@ -260,7 +260,7 @@ exports[`Input should render input with error state and error text correctly 1`]
         }
       >
         label
-         (Optional)
+        
       </Text>
     </View>
   </View>
@@ -453,7 +453,7 @@ exports[`Input should render input with error state correctly 1`] = `
         }
       >
         label
-         (Optional)
+        
       </Text>
     </View>
   </View>
@@ -618,7 +618,7 @@ exports[`Input should render input with help text correctly 1`] = `
         }
       >
         label
-         (Optional)
+        
       </Text>
     </View>
   </View>
@@ -749,7 +749,7 @@ exports[`Input should render input with icon correctly 1`] = `
         }
       >
         label
-         (Optional)
+        
       </Text>
     </View>
   </View>
@@ -942,7 +942,7 @@ exports[`Input should render input with leadingText correctly 1`] = `
         }
       >
         label
-         (Optional)
+        
       </Text>
     </View>
   </View>
@@ -1074,7 +1074,7 @@ exports[`Input should render input with medium size correctly 1`] = `
         }
       >
         label
-         (Optional)
+        
       </Text>
     </View>
   </View>
@@ -1177,7 +1177,7 @@ exports[`Input should render input with small size correctly 1`] = `
         }
       >
         label
-         (Optional)
+        
       </Text>
     </View>
   </View>
@@ -1280,7 +1280,7 @@ exports[`Input should render input with success state and success text correctly
         }
       >
         label
-         (Optional)
+        
       </Text>
     </View>
   </View>
@@ -1473,7 +1473,7 @@ exports[`Input should render input with success state correctly 1`] = `
         }
       >
         label
-         (Optional)
+        
       </Text>
     </View>
   </View>
@@ -1638,7 +1638,7 @@ exports[`Input should render input with trailingText correctly 1`] = `
         }
       >
         label
-         (Optional)
+        
       </Text>
     </View>
   </View>
@@ -1759,25 +1759,6 @@ exports[`Input should render label fixed input correctly 1`] = `
     >
       label
     </Text>
-    <Text
-      accessibilityLabel="optional-fixed-label"
-      accessible={true}
-      style={
-        Array [
-          Object {
-            "color": "#95A1B5",
-            "fontFamily": "Rubik-Regular",
-            "fontSize": 12,
-            "fontWeight": "400",
-            "lineHeight": 14,
-            "marginLeft": 2,
-          },
-        ]
-      }
-      testID="optional-fixed-label"
-    >
-      (Optional)
-    </Text>
   </View>
   <View
     accessibilityLabel="input-box"

diff --git a/src/components/Input/__snapshots__/InputLabel.test.tsx.snap b/src/components/Input/__snapshots__/InputLabel.test.tsx.snap
@@ -67,25 +67,6 @@ exports[`Input Label should render fixed label with optional correctly 1`] = `
   >
     Label
   </Text>
-  <Text
-    accessibilityLabel="optional-fixed-label"
-    accessible={true}
-    style={
-      Array [
-        Object {
-          "color": "#95A1B5",
-          "fontFamily": "Rubik-Regular",
-          "fontSize": 12,
-          "fontWeight": "400",
-          "lineHeight": 14,
-          "marginLeft": 2,
-        },
-      ]
-    }
-    testID="optional-fixed-label"
-  >
-    (Optional)
-  </Text>
 </View>
 `;
 
@@ -145,7 +126,7 @@ exports[`Input Label should render outlined label with optional correctly 1`] =
       style={Object {}}
     >
       Label
-       (Optional)
+      
     </Text>
   </View>
 </View>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -558,4 +558,4 @@ SPEC CHECKSUMS:

		PODFILE CHECKSUM: 2c095cf05d0978e12f6ac4350329c2d085601c15

		COCOAPODS: 1.14.3
		COCOAPODS: 1.15.2