Merge branch 'master' into release

Author: lidord-wix

.github/ISSUE_TEMPLATE/bug-report.md

@@ -7,12 +7,26 @@ assignees: ''
 
 ---
 
-### Describe the bug
 <!--
-A clear and concise description of what the bug is.
+NOTE: please submit only bug reports here, any new questions or feature requests should be submitted in Discussions:
+https://github.com/wix/react-native-ui-lib/discussions
+ -->
+
+## Description
+
+<!--
+A clear and concise description of what is the bug.
 -->
 
-### To Reproduce
+### Related to
+
+- [ ] Components
+- [ ] Demo
+- [ ] Docs
+- [ ] Typings
+
+### Steps to reproduce
+
 <!--
 Steps to reproduce the behavior:
 1. Go to '...'
@@ -21,28 +35,50 @@ Steps to reproduce the behavior:
 4. See error
 -->
 
-### Expected behavior
+#### Expected behavior
+
 <!--
 A clear and concise description of what you expected to happen.
 -->
 
-### Code snippet
+#### Actual behavior
+
 <!--
-A code snippet that reproduce the issue. 
+A clear and concise description of what actually happens.
 -->
 
-### Screenshots
+## More Info
+
+### Code snippet
+
 <!--
-If applicable, add screenshots to help explain your problem.
+A code snippet that reproduce the issue. 
 -->
 
-### Device (please complete the following information)
+```
+
+
+```
+
+### Screenshots/Video
+
 <!--
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
+If applicable, add screenshots or a video to help explain your problem.
 -->
 
-### Additional context
+### Environment
+
 <!--
-Add any other context about the problem here.
+Fill in your RNUILib and React Native versions below.
+
+List other libraries if relevant.
 -->
+
+- React Native:
+- React Native UI Lib:
+
+### Affected platforms
+
+- [ ] Android
+- [ ] iOS
+- [ ] Web

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Question
+    url: https://github.com/wix/react-native-ui-lib/discussions/categories/q-a
+    about: Please ask and answer questions here.
+  - name: Feature Request
+    url: https://github.com/wix/react-native-ui-lib/discussions/categories/ideas
+    about: Please submit feature requests here.

.github/ISSUE_TEMPLATE/docs-issue.md

@@ -24,10 +24,10 @@ Download our Expo demo app <br>
 
 ## Installing
 
-See setup instructions [here](https://wix.github.io/react-native-ui-lib/getting-started/setup).
+See setup instructions [here](https://wix.github.io/react-native-ui-lib/docs/getting-started/setup).
 
 #### New Major Version 6.0
-See [breaking changes](https://wix.github.io/react-native-ui-lib/getting-started/v6)
+See [breaking changes](https://wix.github.io/react-native-ui-lib/docs/getting-started/v6)
 
 #### For React Native >= 0.60.0
 please use `react-native-ui-lib`
@@ -95,7 +95,7 @@ ThemeManager.setComponentTheme('Button', (props, context) => {
 
 ### Step 3
 Use it all together. 
-Your configurations will be applied on uilib components so you can use them easily with [modifiers](https://wix.github.io/react-native-ui-lib/foundation/modifiers). 
+Your configurations will be applied on uilib components so you can use them easily with [modifiers](https://wix.github.io/react-native-ui-lib/docs/foundation/modifiers). 
 
 ```jsx
 // MyScreen.js

.github/ISSUE_TEMPLATE/feature-request.md

@@ -157,6 +157,7 @@ export const navigationData = {
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: '(New) Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
       {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
+      {title: '(New) Toast', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'},
       {title: 'ExpandableOverlay', tags: 'text field expandable input picker', screen: 'unicorn.components.IncubatorExpandableOverlayScreen'},
       {title: 'WheelPicker (Incubator)', tags: 'wheel picker spinner experimental', screen: 'unicorn.incubator.WheelPickerScreen'},
       {title: 'Pan View', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'},

.github/ISSUE_TEMPLATE/question.md

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {TouchableOpacity, ScrollView, Platform, StyleSheet} from 'react-native';
+import {TouchableOpacity, ScrollView} from 'react-native';
 import {Assets, RadioButton, Colors, Shadows, RadioGroup, View, Text} from 'react-native-ui-lib'; //eslint-disable-line
 const starIcon = require('../../assets/icons/star.png');
 
@@ -39,7 +39,14 @@ export default class RadioButtonScreen extends Component {
   renderRadioButtonWithImage(value, icon, style) {
     return (
       <View row centerV marginR-15>
-        <RadioButton value={value} size={15} color={Colors.green30} borderRadius={0} iconSource={icon} iconStyle={style}/>
+        <RadioButton
+          value={value}
+          size={15}
+          color={Colors.green30}
+          borderRadius={0}
+          iconSource={icon}
+          iconStyle={style}
+        />
       </View>
     );
   }
@@ -55,8 +62,12 @@ export default class RadioButtonScreen extends Component {
   render() {
     return (
       <View flex useSafeArea bg-grey80>
-        <View flex>
-          <ScrollView style={{padding: 20}}>
+        <ScrollView>
+          <View padding-page>
+            <Text h1 marginB-s5>
+              Radio Buttons
+            </Text>
+
             <RadioGroup initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
               <Text marginB-20 text60 grey10>
                 Select a color{'\n'}
@@ -69,7 +80,11 @@ export default class RadioButtonScreen extends Component {
               <Text marginT-10>You chose: {this.state.color ? this.state.color : 'Default'}</Text>
             </RadioGroup>
 
-            <RadioGroup marginT-30 initialValue={this.state.textSide} onValueChange={value => this.setState({textSide: value})}>
+            <RadioGroup
+              marginT-30
+              initialValue={this.state.textSide}
+              onValueChange={value => this.setState({textSide: value})}
+            >
               <Text marginB-20 text60 grey10>
                 Alignments
               </Text>
@@ -129,28 +144,9 @@ export default class RadioButtonScreen extends Component {
             </View>
 
             <View style={{height: 30}}/>
-          </ScrollView>
-
-          <View paddingH-20 paddingV-10 style={[styles.shadow, {backgroundColor: Colors.grey80}]}>
-            <Text text40 grey10>
-              Radio Buttons
-            </Text>
           </View>
-        </View>
+        </ScrollView>
       </View>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  shadow: {
-    ...Platform.select({
-      ios: {
-        ...Shadows.grey20.bottom
-      },
-      android: {
-        elevation: 3
-      }
-    })
-  }
-});

.github/ISSUE_TEMPLATE/typescript-issue.md

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {StyleSheet, ModalProps} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
-import {View, Text, Card, Button, Incubator, Colors, BorderRadiuses, Constants} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, Card, Button, Incubator, Colors, Spacings} from 'react-native-ui-lib';
 
 interface Item {
   value: string;
@@ -34,10 +34,11 @@ const colors: Item[] = [
 export default class IncubatorDialogScreen extends Component {
   state = {visible: false};
   modalProps: ModalProps = {supportedOrientations: ['portrait', 'landscape']};
+  headerProps: Incubator.DialogHeaderProps = {text: {title: 'Title (swipe here)'}};
 
   renderVerticalItem = ({item}: {item: Item}) => {
     return (
-      <Text text50 margin-20 color={item.value} onPress={this.closeDialog}>
+      <Text text50 marginH-s5 marginV-s2 color={item.value} onPress={this.closeDialog}>
         {item.label}
       </Text>
     );
@@ -63,12 +64,12 @@ export default class IncubatorDialogScreen extends Component {
     const {visible} = this.state;
 
     return (
-      <View bg-dark80 flex padding-20>
+      <View bg-grey80 flex padding-20>
         <Card height={100} center padding-20>
           <Text text50>IncubatorDialogScreen</Text>
         </Card>
         <View flex center>
-          <Button marginV-20 label="Open Dialog" onPress={this.openDialog}/>
+          <Button marginV-s5 label="Open Dialog" onPress={this.openDialog}/>
         </View>
         <Incubator.Dialog
           useSafeArea
@@ -77,35 +78,23 @@ export default class IncubatorDialogScreen extends Component {
           bottom
           centerH
           modalProps={this.modalProps}
+          headerProps={this.headerProps}
         >
-          <View style={styles.dialog}>
-            <Text text60 margin-s2>
-              Title (swipe here)
-            </Text>
-            <View height={1} bg-grey40/>
-            <FlatList
-              showsVerticalScrollIndicator={false}
-              style={styles.verticalScroll}
-              data={colors}
-              renderItem={this.renderVerticalItem}
-              keyExtractor={this.keyExtractor}
-            />
-          </View>
+          <FlatList
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.verticalScroll}
+            data={colors}
+            renderItem={this.renderVerticalItem}
+            keyExtractor={this.keyExtractor}
+          />
         </Incubator.Dialog>
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  dialog: {
-    marginBottom: 20,
-    backgroundColor: Colors.white,
-    maxHeight: Constants.screenHeight * 0.8,
-    width: 300,
-    borderRadius: BorderRadiuses.br20
-  },
   verticalScroll: {
-    marginTop: 20
+    paddingVertical: Spacings.s2
   }
 });

README.md

@@ -228,6 +228,11 @@ export default class TextFieldScreen extends Component {
             placeholder="Enter text..."
             multiline
             showCharCounter
+            bottomAccessory={
+              <Text text100>
+                {Assets.emojis.grapes} {Assets.emojis.melon} {Assets.emojis.banana}
+              </Text>
+            }
             charCounterStyle={{color: Colors.blue30}}
             maxLength={20}
             fieldStyle={styles.withFrame}