TextField and Switch/ forward id prop (#2608)

* TextField: forward containerId prop

* code-review

* code-review

Author: AmitShwarts

src/components/switch/index.tsx

@@ -56,6 +56,7 @@ export type SwitchProps = {
   thumbStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
   testID?: string;
+  id?: string;
 }
 
 /**

src/components/switch/switch.api.json

@@ -25,7 +25,8 @@
     {"name": "thumbSize", "type": "number", "description": "The Switch's thumb size (width & height)"},
     {"name": "thumbStyle", "type": "ViewStyle", "description": "The Switch's thumb style"},
     {"name": "style", "type": "ViewStyle", "description": "Custom style"},
-    {"name": "testID", "type": "string", "description": "Component test id"}
+    {"name": "testID", "type": "string", "description": "Component test id"},
+    {"name": "id", "type": "string", "description": "Component id"}
   ],
   "snippet": [
     "<Switch value={false$1} onValueChange={() => console.log('value changed')$2}/>"

src/incubator/TextField/index.tsx

@@ -46,6 +46,7 @@ const TextField = (props: InternalTextFieldProps) => {
   const {
     modifiers,
     // General
+    containerProps,
     fieldStyle: fieldStyleProp,
     dynamicFieldStyle,
     containerStyle,
@@ -123,7 +124,7 @@ const TextField = (props: InternalTextFieldProps) => {
 
   return (
     <FieldContext.Provider value={context}>
-      <View style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
+      <View {...containerProps} style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
         <Label
           label={label}
           labelColor={labelColor}

src/incubator/TextField/textField.api.json

@@ -56,6 +56,7 @@
       "type": "ViewStyle | (context: FieldContextType, props) => ViewStyle",
       "description": "Internal style for the field container to style the field underline, outline and fill color"
     },
+    {"name": "containerProps", "type": "Omit<ViewProps, 'style'>", "description": "Container props of the whole component"},
     {"name": "containerStyle", "type": "ViewStyle", "description": "Container style of the whole component"},
     {
       "name": "preset",

src/incubator/TextField/types.ts

@@ -10,6 +10,7 @@ import {
 } from '../../commons/new';
 import {TextProps} from '../../components/text';
 import {PropsWithChildren, ReactElement} from 'react';
+import {ViewProps} from '../../components/view';
 
 export type ColorType =
   | string
@@ -216,6 +217,10 @@ export type TextFieldProps = MarginModifiers &
      * Internal dynamic style callback for the field container
      */
     dynamicFieldStyle?: (context: FieldContextType, props: {preset: TextFieldProps['preset']}) => StyleProp<ViewStyle>;
+    /**
+     * Pass props to the container
+     */
+    containerProps?: Omit<ViewProps, 'style'>;
     /**
      * Container style of the whole component
      */