Infra/ Migrate Incubator.TextField to DesignTokens (#1834)

* migrate Incubator.TextField to DesignTokens

* update disabled color

* set error color from screen

Author: lidord-wix

demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -30,14 +30,14 @@ export default class TextFieldScreen extends Component {
   renderTrailingAccessory() {
     const {searching} = this.state;
     if (searching) {
-      return <ActivityIndicator color={Colors.grey10}/>;
+      return <ActivityIndicator color={Colors.$iconDefault}/>;
     } else {
       return (
         <Button
           iconSource={Assets.icons.demo.search}
           link
           marginL-s2
-          grey10
+          $iconDefault
           onPress={() => {
             this.setState({searching: true});
             setTimeout(() => {
@@ -68,8 +68,8 @@ export default class TextFieldScreen extends Component {
               placeholder="Floating placeholder"
               floatingPlaceholder
               floatingPlaceholderColor={{
-                focus: Colors.grey10,
-                default: Colors.grey30
+                focus: Colors.$textDefault,
+                default: Colors.$textNeutral
               }}
               // floatingPlaceholderStyle={Typography.text60}
               // style={Typography.text60}
@@ -114,7 +114,7 @@ export default class TextFieldScreen extends Component {
             placeholder="Enter weight"
             text70
             trailingAccessory={
-              <Text text70 grey30>
+              <Text text70 $textNeutral>
                 Kg.
               </Text>
             }
@@ -191,7 +191,12 @@ export default class TextFieldScreen extends Component {
 
           <TextField
             label="Email"
-            labelColor={{default: Colors.grey10, focus: Colors.blue20, error: Colors.red30, disabled: Colors.grey40}}
+            labelColor={{
+              default: Colors.$textDefault,
+              focus: Colors.$textGeneral,
+              error: Colors.$textDangerLight,
+              disabled: Colors.$textDisabled
+            }}
             placeholder="Enter valid email"
             validationMessage="Email is invalid"
             validate={'email'}
@@ -215,7 +220,9 @@ export default class TextFieldScreen extends Component {
             label="Label"
             placeholder="Enter text..."
             preset={preset}
-            dynamicFieldStyle={(_state, {preset}) => (preset === 'withUnderline' ? styles.withUnderline : styles.withFrame)}
+            dynamicFieldStyle={(_state, {preset}) =>
+              preset === 'withUnderline' ? styles.withUnderline : styles.withFrame
+            }
             editable={!shouldDisable}
           />
 
@@ -233,7 +240,7 @@ export default class TextFieldScreen extends Component {
                 {Assets.emojis.grapes} {Assets.emojis.melon} {Assets.emojis.banana}
               </Text>
             }
-            charCounterStyle={{color: Colors.blue30}}
+            charCounterStyle={{color: Colors.$textGeneral}}
             maxLength={20}
             fieldStyle={styles.withFrame}
           />
@@ -257,8 +264,12 @@ export default class TextFieldScreen extends Component {
             validate={'number'}
             validationMessage="Invalid price"
             // @ts-expect-error
-            formatter={(value) => (isNaN(value) ? value : priceFormatter.format(Number(value)))}
-            leadingAccessory={<Text marginR-s1 grey30>$</Text>}
+            formatter={value => (isNaN(value) ? value : priceFormatter.format(Number(value)))}
+            leadingAccessory={
+              <Text marginR-s1 $textNeutral>
+                $
+              </Text>
+            }
             fieldStyle={styles.withUnderline}
           />
         </View>
@@ -272,12 +283,12 @@ const styles = StyleSheet.create({
   container: {},
   withUnderline: {
     borderBottomWidth: 1,
-    borderColor: Colors.grey40,
+    borderColor: Colors.$outlineDisabledHeavy,
     paddingBottom: 4
   },
   withFrame: {
     borderWidth: 1,
-    borderColor: Colors.grey40,
+    borderColor: Colors.$outlineDisabledHeavy,
     padding: 4,
     borderRadius: 2
   }

generatedTypes/src/incubator/TextField/presets/default.d.ts

@@ -3,12 +3,12 @@ declare const _default: {
     validateOnBlur: boolean;
     floatingPlaceholderColor: {
         focus: string;
-        error: any;
+        error: string;
         disabled: string;
     };
     labelColor: {
         focus: string;
-        error: any;
+        error: string;
         disabled: string;
     };
     fieldStyle: {

generatedTypes/src/incubator/TextField/usePreset.d.ts

@@ -1068,7 +1068,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     label?: string | undefined;
     labelColor: import("./types").ColorType | {
         focus: string;
-        error: any;
+        error: string;
         disabled: string;
     };
     labelStyle?: import("react-native").TextStyle | undefined;
@@ -1077,7 +1077,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     floatingPlaceholder?: boolean | undefined;
     floatingPlaceholderColor: import("./types").ColorType | {
         focus: string;
-        error: any;
+        error: string;
         disabled: string;
     };
     floatOnFocus?: boolean | undefined;

src/incubator/TextField/CharCounter.tsx

@@ -24,7 +24,7 @@ const CharCounter = ({maxLength, charCounterStyle, testID}: CharCounterProps) =>
   }
 
   return (
-    <Text grey30 style={[styles.container, charCounterStyle]} testID={testID}>
+    <Text $textNeutral style={[styles.container, charCounterStyle]} testID={testID}>
       {`${_.size(value)}/${maxLength}`}
     </Text>
   );

src/incubator/TextField/FloatingPlaceholder.tsx

@@ -34,7 +34,7 @@ const FLOATING_PLACEHOLDER_SCALE = 0.875;
 
 const FloatingPlaceholder = ({
   placeholder,
-  floatingPlaceholderColor = Colors.grey40,
+  floatingPlaceholderColor = Colors.$textNeutralLight,
   floatingPlaceholderStyle,
   floatOnFocus,
   validationMessagePosition,

src/incubator/TextField/Input.tsx

@@ -8,8 +8,8 @@ import FieldContext from './FieldContext';
 import useImperativeInputHandle from './useImperativeInputHandle';
 
 const DEFAULT_INPUT_COLOR: ColorType = {
-  default: Colors.grey10,
-  disabled: Colors.grey40
+  default: Colors.$textDefault,
+  disabled: Colors.$textDisabled
 };
 export interface InputProps
   extends Omit<TextInputProps, 'placeholderTextColor'>,

src/incubator/TextField/Label.tsx

@@ -30,7 +30,7 @@ export interface LabelProps {
 
 const Label = ({
   label,
-  labelColor = Colors.grey10,
+  labelColor = Colors.$textDefault,
   labelStyle,
   labelProps,
   validationMessagePosition,

src/incubator/TextField/Presenter.ts

@@ -19,7 +19,7 @@ export function getColorByState(color?: ColorType, context?: FieldContextType) {
       finalColor = color?.focus;
     }
 
-    finalColor = finalColor || color?.default || Colors.grey10;
+    finalColor = finalColor || color?.default || Colors.$textDefault;
   }
 
   return finalColor;

src/incubator/TextField/ValidationMessage.tsx

@@ -41,7 +41,7 @@ const ValidationMessage = ({
   const showValidationMessage = !context.isValid || (!validate && !!validationMessage);
 
   return (
-    <Text testID={testID} red30 style={[styles.validationMessage, validationMessageStyle]}>
+    <Text testID={testID} $textDangerLight style={[styles.validationMessage, validationMessageStyle]}>
       {showValidationMessage ? relevantValidationMessage : ''}
     </Text>
   );

src/incubator/TextField/index.tsx

@@ -217,7 +217,7 @@ const TextField = (props: InternalTextFieldProps) => {
             )}
             {children || (
               <Input
-                placeholderTextColor={hidePlaceholder ? 'transparent' : Colors.grey30}
+                placeholderTextColor={hidePlaceholder ? 'transparent' : Colors.$textNeutral}
                 {...others}
                 style={[typographyStyle, colorStyle, others.style]}
                 onFocus={onFocus}

src/incubator/TextField/presets/default.ts

@@ -2,15 +2,15 @@ import {StyleSheet} from 'react-native';
 import {Colors, Spacings, Typography} from '../../../style';
 
 const colorByState = {
-  focus: Colors.primary,
-  error: Colors.error,
-  disabled: Colors.grey40
+  focus: Colors.$textPrimary,
+  error: Colors.$textDangerLight,
+  disabled: Colors.$textDisabled
 };
 
 const styles = StyleSheet.create({
   field: {
     borderBottomWidth: 1,
-    borderBottomColor: Colors.grey50,
+    borderBottomColor: Colors.$outlineNeutralMedium,
     paddingBottom: Spacings.s2
   },
   input: {