Merge branch 'master' into release

Author: nitzanyiz

.eslintrc.js

@@ -8,6 +8,13 @@ module.exports = {
     'no-undef': 'off',
     /* Other Rules */
     'no-unused-expressions': 'off',
+    'no-restricted-syntax': [
+      'error',
+      {
+        selector: `CallExpression[callee.object.name='console'][callee.property.name='error']`,
+        message: 'Using console.error is not allowed as it is sent to Sentry, please use LogService.error instead'
+      }
+    ],
     'arrow-parens': 'off',
     // TODO: remove after migration of legacy lifecycle methods
     camelcase: 'off',

demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap

@@ -3555,6 +3555,14 @@ exports[`TextField Screen renders screen 1`] = `
           accessible={true}
           collapsable={false}
           focusable={true}
+          hitSlop={
+            {
+              "bottom": 15,
+              "left": 0,
+              "right": 0,
+              "top": 15,
+            }
+          }
           onClick={[Function]}
           onLayout={[Function]}
           onResponderGrant={[Function]}
@@ -4613,6 +4621,14 @@ exports[`TextField Screen renders screen 1`] = `
             accessible={true}
             collapsable={false}
             focusable={true}
+            hitSlop={
+              {
+                "bottom": 7.5,
+                "left": 10,
+                "right": 10,
+                "top": 7.5,
+              }
+            }
             onClick={[Function]}
             onLayout={[Function]}
             onResponderGrant={[Function]}

demo/src/screens/componentScreens/CheckboxScreen.tsx

@@ -89,7 +89,7 @@ export default class CheckboxScreen extends Component {
             disabled
             value={this.state.value5}
             onValueChange={value5 => this.setState({value5})}
-            style={{marginRight: 10}}
+            style={{marginRight: 20}}
           />
           <Checkbox
             disabled

demo/src/screens/componentScreens/RadioButtonScreen.js

@@ -69,7 +69,7 @@ export default class RadioButtonScreen extends Component {
             Radio Buttons
           </Text>
 
-          <RadioGroup initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
+          <RadioGroup gap-s4 initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
             <Text marginB-20 text60 $textDefault>
               Select a color{'\n'}
               (enum with default value)
@@ -82,6 +82,7 @@ export default class RadioButtonScreen extends Component {
           </RadioGroup>
 
           <RadioGroup
+            gap-s4
             marginT-30
             initialValue={this.state.textSide}
             onValueChange={value => this.setState({textSide: value})}
@@ -96,7 +97,7 @@ export default class RadioButtonScreen extends Component {
             <Text marginT-10>You chose: {this.state.textSide}</Text>
           </RadioGroup>
 
-          <RadioGroup marginT-30 initialValue={this.state.value} onValueChange={value => this.setState({value})}>
+          <RadioGroup gap-s4 marginT-30 initialValue={this.state.value} onValueChange={value => this.setState({value})}>
             <Text marginB-20 text60 $textDefault>
               Yes or No?
             </Text>
@@ -112,6 +113,7 @@ export default class RadioButtonScreen extends Component {
           </Text>
           <View row centerV marginB-10>
             <RadioButton
+              gap-s4
               selected={this.state.individualValue2}
               onPress={() => this.setState({individualValue2: !this.state.individualValue2})}
               label="Individual Radio Button (with style)"

docuilib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.3.5",
+  "version": "3.7.0",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",
@@ -30,6 +30,7 @@
     "clsx": "^1.1.1",
     "docusaurus-plugin-sass": "^0.2.1",
     "file-loader": "^6.2.0",
+    "prettier": "2.8.8",
     "prism-react-renderer": "^2.1.0",
     "react-html-parser": "^2.0.2",
     "react-native-web": "^0.19.12",

docuilib/src/assets/icons/code.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const CodeIcon = (props: React.ComponentProps<'svg'>) => {
+  return (
+    <svg {...props} viewBox="0 0 18 18" fill="currentColor" width="18" height="18">
+      <path d="M10,6.00254473 L11,6.00254473 L8,13 L7,13 L10,6.00254473 Z M6,12 L5.74819324,12 L1.99934428,9.78978657 L2.00158404,9.20893357 L5.74819324,7 L6.00018511,7 L6.00018511,8 L3.50778222,9.5 L6,11 L6,12 Z M11.9995294,12 L11.9995294,11 L14.4917472,9.5 L11.9993443,8 L11.9993443,7 L12.2513362,7 L15.9979454,9.20893357 L16.0001851,9.78978657 L12.2513362,12 L11.9995294,12 Z"/>
+    </svg>
+  );
+};
+
+export default CodeIcon;