@hero-design/rn 8.83.0 → 8.84.1

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -1,5 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`StyledButtonContainer has false style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#401960",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledButtonContainer has filled-danger style 1`] = `
 <View
   style={
@@ -627,6 +696,145 @@ exports[`StyledButtonContainer has text-secondary style 1`] = `
 </View>
 `;
 
+exports[`StyledButtonContainer has true style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "backgroundColor": "#401960",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledButtonContainer has undefined style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#401960",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledButtonContainer renders disabled correctly 1`] = `
 <View
   style={
@@ -701,6 +909,57 @@ exports[`StyledButtonContainer renders disabled correctly 1`] = `
 </View>
 `;
 
+exports[`StyledButtonIcon has false style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledButtonIcon has filled-danger style 1`] = `
 <View
   style={
@@ -1313,6 +1572,108 @@ exports[`StyledButtonIcon has text-secondary style 2`] = `
 </View>
 `;
 
+exports[`StyledButtonIcon has true style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledButtonIcon has undefined style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledButtonIcon renders disabled correctly 1`] = `
 <View
   style={
@@ -1364,6 +1725,49 @@ exports[`StyledButtonIcon renders disabled correctly 1`] = `
 </View>
 `;
 
+exports[`StyledButtonIconWrapper has false style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "paddingRight": 12,
+        },
+        undefined,
+      ]
+    }
+    themeIsCompact={false}
+    themePosition="left"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledButtonIconWrapper has left style 1`] = `
 <View
   style={
@@ -1448,6 +1852,91 @@ exports[`StyledButtonIconWrapper has right style 1`] = `
 </View>
 `;
 
+exports[`StyledButtonIconWrapper has true style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "paddingRight": 8,
+        },
+        undefined,
+      ]
+    }
+    themeIsCompact={true}
+    themePosition="left"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledButtonIconWrapper has undefined style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "paddingRight": 12,
+        },
+        undefined,
+      ]
+    }
+    themePosition="left"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`StyledButtonText has filled-danger style 1`] = `
 <View
   style={

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -35,6 +35,7 @@ const DatePickerIOS = ({
   testID,
   supportedOrientations = ['portrait'],
   variant = 'default',
+  locale,
 }: DatePickerIOSProps) => {
   const [selectingDate, setSelectingDate] = useState<Date>(
     getDateValue(value || new Date(), minDate, maxDate)
@@ -83,6 +84,7 @@ const DatePickerIOS = ({
           {variant === 'month-year' ? (
             <MonthYearPickerViewIOS
               value={value}
+              locale={locale}
               minimumDate={minDate}
               maximumDate={maxDate}
               onChange={(date: Date | undefined) => {
@@ -95,6 +97,7 @@ const DatePickerIOS = ({
           ) : null}
           {variant === 'default' ? (
             <DateTimePicker
+              locale={locale}
               testID="datePickerIOS"
               value={selectingDate}
               minimumDate={minDate}

package/src/components/DatePicker/__tests__/DatePickerIOS.spec.tsx

@@ -102,6 +102,40 @@ describe('DatePickerIOS', () => {
     expect(onChange).toBeCalledWith(new Date('December 17, 1995'));
   });
 
+  it('renders correctly with custom locale', () => {
+    const onChange = jest.fn();
+    const { getByText, queryByTestId, toJSON } = renderWithTheme(
+      <DatePickerIOS
+        locale="zh-CN"
+        value={new Date('December 21, 1995')}
+        label="Start date"
+        confirmLabel="Confirm"
+        onChange={onChange}
+      />
+    );
+
+    expect(getByText('Start date')).toBeDefined();
+    expect(queryByTestId('text-input').props.value).toBe('21/12/1995');
+    expect(queryByTestId('datePickerIOS')).toBeNull();
+
+    // Open date picker
+    fireEvent.press(getByText('Start date'));
+    expect(queryByTestId('datePickerIOS')).toBeTruthy();
+
+    expect(toJSON()).toMatchSnapshot();
+
+    // Change date
+    fireEvent(
+      queryByTestId('datePickerIOS'),
+      'onChange',
+      null,
+      new Date('December 17, 1995')
+    );
+    fireEvent.press(getByText('Confirm'));
+
+    expect(onChange).toBeCalledWith(new Date('December 17, 1995'));
+  });
+
   it('renders correct help text', () => {
     const { getByText } = renderWithTheme(
       <DatePickerIOS