@hero-design/rn 8.52.2-rc2.0 → 8.53.0

package/src/components/Carousel/__tests__/index.spec.tsx

@@ -45,43 +45,53 @@ const carouselData = [
 ];
 
 describe('Carousel', () => {
-  it('renders correctly', async () => {
-    const onPress = jest.fn();
-    const { getByTestId, queryByText, toJSON } = renderWithTheme(
-      <Carousel
-        testID="carousel"
-        items={carouselData}
-        renderActions={(_) => {
-          return <Button text="Skip" onPress={onPress} />;
-        }}
-      />
-    );
-
-    expect(getByTestId('carousel')).toBeTruthy();
-
-    expect(queryByText('Skip')).toBeTruthy();
-
-    // Slide 1
-    expect(queryByText('Welcome to the new Employment Hero app')).toBeTruthy();
-
-    // Slide 2
-    expect(queryByText('Same app with a new look!')).toBeTruthy();
-    expect(
-      queryByText(
-        'Our app now has a new bright clean modern look and feel with the same great features.'
-      )
-    ).toBeTruthy();
-
-    // Slide 3
-    expect(queryByText('Easier to get around')).toBeTruthy();
-    expect(
-      queryByText(
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.'
-      )
-    ).toBeTruthy();
-
-    expect(toJSON()).toMatchSnapshot();
-  });
+  it.each`
+    pageControlPosition
+    ${'bottom'}
+    ${'top'}
+  `(
+    'renders correctly with pageControlPosition $pageControlPosition',
+    async ({ pageControlPosition }) => {
+      const onPress = jest.fn();
+      const { getByTestId, queryByText, toJSON } = renderWithTheme(
+        <Carousel
+          pageControlPosition={pageControlPosition}
+          testID="carousel"
+          items={carouselData}
+          renderActions={(_) => {
+            return <Button text="Skip" onPress={onPress} />;
+          }}
+        />
+      );
+
+      expect(getByTestId('carousel')).toBeTruthy();
+
+      expect(queryByText('Skip')).toBeTruthy();
+
+      // Slide 1
+      expect(
+        queryByText('Welcome to the new Employment Hero app')
+      ).toBeTruthy();
+
+      // Slide 2
+      expect(queryByText('Same app with a new look!')).toBeTruthy();
+      expect(
+        queryByText(
+          'Our app now has a new bright clean modern look and feel with the same great features.'
+        )
+      ).toBeTruthy();
+
+      // Slide 3
+      expect(queryByText('Easier to get around')).toBeTruthy();
+      expect(
+        queryByText(
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.'
+        )
+      ).toBeTruthy();
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
 
   it('should call skip call back when press skip', () => {
     const onSkip = jest.fn();

package/src/components/Checkbox/__tests__/__snapshots__/StyledCheckbox.spec.tsx.snap

@@ -24,6 +24,7 @@ exports[`StyledCheckbox renders correctly when disabled is false and readonly is
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -68,6 +69,7 @@ exports[`StyledCheckbox renders correctly when disabled is false and readonly is
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -112,6 +114,7 @@ exports[`StyledCheckbox renders correctly when disabled is true and readonly is
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -156,6 +159,7 @@ exports[`StyledCheckbox renders correctly when disabled is true and readonly is
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -225,6 +229,7 @@ exports[`StyledWrapper renders correctly when disabled is false, readonly is fal
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -294,6 +299,7 @@ exports[`StyledWrapper renders correctly when disabled is false, readonly is tru
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -363,6 +369,7 @@ exports[`StyledWrapper renders correctly when disabled is true, readonly is fals
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -432,6 +439,7 @@ exports[`StyledWrapper renders correctly when disabled is true, readonly is true
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Checkbox/__tests__/__snapshots__/index.spec.tsx.snap

@@ -77,6 +77,7 @@ exports[`Checkbox renders correctly when checked is false and there is no descri
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -196,6 +197,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -319,6 +321,7 @@ exports[`Checkbox renders correctly when disabled is false and readonly is false
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -442,6 +445,7 @@ exports[`Checkbox renders correctly when disabled is false and readonly is true
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -565,6 +569,7 @@ exports[`Checkbox renders correctly when disabled is true and readonly is false
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -688,6 +693,7 @@ exports[`Checkbox renders correctly when disabled is true and readonly is true 1
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Checkbox/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import {
-  StyledCheckMark,
   StyledCheckbox,
   StyledCheckboxContainer,
+  StyledCheckMark,
   StyledDescription,
   StyledWrapper,
 } from './StyledCheckbox';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface CheckboxProps {
   /**
@@ -17,6 +18,11 @@ export interface CheckboxProps {
    * Checkbox's description.
    */
   description?: string;
+  /**
+   * @deprecated This prop will be removed in the next major release. Checkboxes will always have border.
+   * Whether the border is shown.
+   */
+  withBorder?: boolean;
   /**
    * Whether the switch is disabled
    */
@@ -59,12 +65,18 @@ export const getThemeState = ({ disabled, readonly }: getStateType) => {
 const Checkbox = ({
   checked,
   description,
+  withBorder = false,
   disabled = false,
   onPress,
   style,
   testID,
   readonly = false,
 }: CheckboxProps) => {
+  useDeprecation(
+    `Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.`,
+    withBorder === true
+  );
+
   const themeState = getThemeState({ disabled, readonly });
 
   return (

package/src/components/Chip/__tests__/__snapshots__/index.spec.tsx.snap

@@ -80,6 +80,7 @@ exports[`Chip does not render icon when variant is outlined 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -216,6 +217,7 @@ exports[`Chip does not render icon when variant is outlined 2`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -315,6 +317,7 @@ exports[`Chip renders correctly when selected is false 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -450,6 +453,7 @@ exports[`Chip renders correctly when selected is true 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -590,6 +594,7 @@ exports[`Chip renders correctly with custom icon 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -730,6 +735,7 @@ exports[`Chip renders correctly with custom icon 2`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -830,6 +836,7 @@ exports[`Chip renders correctly with default icon 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -966,6 +973,7 @@ exports[`Chip renders correctly with default icon 2`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1074,6 +1082,7 @@ exports[`Chip renders correctly with variant filled and selected false 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1214,6 +1223,7 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1314,6 +1324,7 @@ exports[`Chip renders correctly with variant outlined and selected false 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1450,6 +1461,7 @@ exports[`Chip renders correctly with variant outlined and selected true 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Collapse/__tests__/__snapshots__/StyledCollapse.spec.tsx.snap

@@ -25,6 +25,7 @@ exports[`StyledChildWrapper renders correct style 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -69,6 +70,7 @@ exports[`StyledWrapper renders correct style 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Collapse/__tests__/__snapshots__/index.spec.tsx.snap

@@ -51,6 +51,7 @@ exports[`Collapse renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -122,6 +123,7 @@ exports[`Collapse should render Sample Text but not visible 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/ContentNavigator/__tests__/__snapshots__/StyledContentNavigator.spec.tsx.snap

@@ -22,6 +22,7 @@ exports[`Wrapper has correct style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/ContentNavigator/__tests__/__snapshots__/index.spec.tsx.snap

@@ -146,6 +146,7 @@ exports[`rendering renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -312,6 +313,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -478,6 +480,7 @@ exports[`rendering renders correctly with large 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -260,6 +260,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -537,9 +538,16 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
         </View>
       </View>
     </View>
+    <Modal
+      hardwareAccelerated={false}
+      onRequestClose={[Function]}
+      transparent={true}
+      visible={false}
+    />
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -817,9 +825,16 @@ exports[`DatePicker renders variant Calendar 1`] = `
         </View>
       </View>
     </View>
+    <Modal
+      hardwareAccelerated={false}
+      onRequestClose={[Function]}
+      transparent={true}
+      visible={false}
+    />
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -269,6 +269,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -260,6 +260,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {