Merge branch 'master' of https://github.com/wix/react-native-ui-lib i…

…nto release

README.md

@@ -15,8 +15,12 @@
 [![NPM Downloads](https://img.shields.io/npm/dm/react-native-ui-lib.svg?style=flat)](https://www.npmjs.com/package/react-native-ui-lib)
 <a href="https://twitter.com/rnuilib"><img src="https://img.shields.io/twitter/follow/rnuilib.svg?style=flat&colorA=1DA1F2&colorB=20303C&label=Follow%20us%20on%20Twitter" alt="Follow on Twitter"></a>
 
-Check out our [Docs](https://wix.github.io/react-native-ui-lib/). <br>
-Our [Discord Channel](https://discord.gg/2eW4g6Z)
+
+## Links
+- [Docs](https://wix.github.io/react-native-ui-lib/)
+- [Figma library](https://www.figma.com/community/file/1379775092983284111/rnui-library)
+- [Discord Channel](https://discord.gg/2eW4g6Z)
+
 
 Download our Expo demo app <br>
 <img height="120" src="https://qr.expo.dev/expo-go?owner=vn.chemgio&slug=rnuilib&releaseChannel=default&host=exp.host"> <br>
@@ -130,4 +134,4 @@ class MyScreen extends Component {
 
 ## Contributing
  See [Contribution Guide](https://github.com/wix/react-native-ui-lib/blob/master/CONTRIBUTING.md)
-
+

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

@@ -1899,6 +1899,8 @@ exports[`TextField Screen renders screen 1`] = `
  }
  >
  <Image
+ accessibilityRole="image"
+ accessible={false}
  source={
  {
  "testUri": "../../../demo/src/assets/icons/info.png",
@@ -2695,6 +2697,7 @@ exports[`TextField Screen renders screen 1`] = `
  ],
  ]
  }
+ testID="undefined.clearButton.container"
  >
  <View
  accessibilityLabel="clear"
@@ -2753,25 +2756,13 @@ exports[`TextField Screen renders screen 1`] = `
  <Image
  accessibilityRole="image"
  accessible={false}
- assetGroup="icons"
- onError={[Function]}
  source={
  {
  "testUri": "../../../src/assets/icons/xFlat.png",
  }
  }
  style={
  [
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- false,
  [
  {
  "tintColor": "#5A48F5",
@@ -2780,14 +2771,21 @@ exports[`TextField Screen renders screen 1`] = `
  "tintColor": "#A6ACB1",
  },
  ],
- false,
+ undefined,
+ undefined,
+ undefined,
+ {
+ "tintColor": "#5A48F5",
+ },
  ]
  }
  testID="undefined.clearButton.icon"
  />
  </View>
  </View>
  <Image
+ accessibilityRole="image"
+ accessible={false}
  source={
  {
  "testUri": "../../../demo/src/assets/icons/search.png",
@@ -3427,32 +3425,25 @@ exports[`TextField Screen renders screen 1`] = `
  <Image
  accessibilityRole="image"
  accessible={false}
- assetGroup="icons"
- onError={[Function]}
  source={
  {
  "testUri": "../../../demo/src/assets/icons/search.png",
  }
  }
  style={
  [
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- undefined,
- false,
  [
  {
  "tintColor": "#20303C",
  },
  undefined,
  ],
- false,
+ undefined,
+ undefined,
+ undefined,
+ {
+ "tintColor": "#20303C",
+ },
  ]
  }
  testID="undefined.icon"
@@ -5398,6 +5389,8 @@ exports[`TextField Screen renders screen 1`] = `
  }
  >
  <Image
+ accessibilityRole="image"
+ accessible={false}
  marginL-s1={true}
  source={
  {

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -82,6 +82,7 @@ const dialogOptions = [
  {label: 'Option 7', value: 6},
  {label: 'Option 8', value: 6}
 ];
+
 export default class PickerScreen extends Component {
  picker = React.createRef<PickerMethods>();
  state = {
@@ -99,7 +100,7 @@ export default class PickerScreen extends Component {
  contact: 0
  };
 
- renderDialog: PickerProps['renderCustomModal'] = (modalProps: RenderCustomModalProps) => {
+ renderDialog: PickerProps['renderOverlay'] = (modalProps: RenderCustomModalProps) => {
  const {visible, children, toggleModal, onDone} = modalProps;
  return (
  <Incubator.Dialog
@@ -128,6 +129,7 @@ export default class PickerScreen extends Component {
  <Text text40 $textDefault>
  Picker
  </Text>
+
  <Picker
  placeholder="Favorite Language"
  floatingPlaceholder
@@ -170,7 +172,7 @@ export default class PickerScreen extends Component {
  onChange={items => this.setState({customModalValues: items})}
  mode={Picker.modes.MULTI}
  trailingAccessory={dropdownIcon}
- renderCustomModal={this.renderDialog}
+ renderOverlay={this.renderDialog}
  items={options}
  />
 
@@ -183,7 +185,7 @@ export default class PickerScreen extends Component {
  onChange={item => this.setState({option: item})}
  topBarProps={{title: 'Languages'}}
  useDialog
- renderCustomDialogHeader={({onDone, onCancel}) => (
+ renderHeader={({onDone, onCancel}) => (
  <View padding-s5 row spread>
  <Button link label="Cancel" onPress={onCancel}/>
  <Button link label="Done" onPress={onDone}/>
@@ -194,13 +196,14 @@ export default class PickerScreen extends Component {
  searchPlaceholder={'Search a language'}
  items={dialogOptions}
  />
+
  <Text marginB-10 text70 $textDefault>
  Custom Picker:
  </Text>
  <Picker
  value={this.state.filter}
  onChange={filter => this.setState({filter})}
- renderPicker={(_value?: any, label?: string) => {
+ renderInput={(_value?: any, label?: string) => {
  return (
  <View row>
  <Icon
@@ -216,6 +219,7 @@ export default class PickerScreen extends Component {
  }}
  items={filters}
  />
+
  <Text marginT-20 marginB-10 text70 $textDefault>
  Custom Picker Items:
  </Text>
@@ -225,7 +229,7 @@ export default class PickerScreen extends Component {
  onChange={contact => {
  this.setState({contact});
  }}
- renderPicker={(contactValue?: number) => {
+ renderInput={(contactValue?: number) => {
  const contact = contacts[contactValue!] ?? undefined;
  return (
  <View row>
@@ -252,6 +256,7 @@ export default class PickerScreen extends Component {
  style={{alignSelf: 'flex-start'}}
  onPress={() => this.picker.current?.openExpandable?.()}
  />
+
  <Text text60 marginT-s5>
  Different Field Types
  </Text>

src/assets/emojis/index.js → src/assets/emojis/index.ts

@@ -1342,5 +1342,5 @@ export const emojis = {
  "woman-woman-girl-girl": "👩‍👩‍👧‍👧",
  "woman-heart-woman": "👩‍❤️‍👩",
  "woman-kiss-woman": "👩‍❤️‍💋‍👩"
-}
+} as const;
 

src/components/button/Button.driver.ts

@@ -1,4 +1,4 @@
-import {ButtonProps} from './ButtonTypes';
+import {ButtonProps} from './types';
 import {ImageDriver} from '../image/Image.driver';
 import {ComponentDriver, ComponentDriverArgs} from '../../testkit/Component.driver';
 import {TextDriver} from '../text/Text.driver';

src/components/button/ButtonConstants.ts

@@ -1,4 +1,4 @@
-import {ButtonSize} from './ButtonTypes';
+import {ButtonSize} from './types';
 
 
 export const PADDINGS = {