@hero-design/rn 7.28.1 → 7.30.0

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

@@ -133,6 +133,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
+            placeholder=" "
             style={
               Array [
                 Object {
@@ -476,9 +477,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
                           "alignItems": "center",
                           "flexDirection": "row",
                           "justifyContent": "flex-end",
-                          "minHeight": 64,
-                          "paddingHorizontal": 24,
-                          "paddingVertical": 16,
+                          "paddingHorizontal": 12,
+                          "paddingVertical": 2,
                         },
                         undefined,
                       ]
@@ -498,27 +498,46 @@ exports[`DatePickerIOS renders correctly 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         Object {
+                          "alignItems": "center",
+                          "borderWidth": 0,
+                          "flexDirection": "row",
+                          "justifyContent": "center",
                           "opacity": 1,
+                          "padding": 16,
                         }
                       }
                     >
                       <Text
+                        disabled={false}
+                        ellipsizeMode="tail"
+                        numberOfLines={1}
                         style={
                           Array [
                             Object {
-                              "color": "#401960",
-                              "fontFamily": "BeVietnamPro-SemiBold",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
+                              "color": "#001f23",
+                              "fontFamily": "BeVietnamPro-Regular",
+                              "fontSize": 14,
+                              "letterSpacing": 0.42,
+                              "lineHeight": 22,
                             },
-                            undefined,
+                            Array [
+                              Object {
+                                "color": "#401960",
+                                "flexShrink": 1,
+                                "fontFamily": "BeVietnamPro-SemiBold",
+                                "fontSize": 16,
+                                "lineHeight": 24,
+                                "textAlign": "center",
+                              },
+                              undefined,
+                            ],
                           ]
                         }
-                        themeFontSize="large"
-                        themeFontWeight="semi-bold"
-                        themeIntent="primary"
+                        themeFontSize="medium"
+                        themeFontWeight="regular"
+                        themeIntent="body"
                         themeTypeface="neutral"
+                        themeVariant="text-primary"
                       >
                         Confirm
                       </Text>

package/src/components/Progress/ProgressCircle.tsx

@@ -19,7 +19,7 @@ export interface ProgressCircleProps extends ViewProps {
    */
   value: number;
   /*
-   * Testing id of the component.
+   * Custom displayed value.
    */
   renderValue?: (value: number) => React.ReactNode;
   /**

package/src/components/Select/Footer.tsx

@@ -1,13 +1,8 @@
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import { FooterText } from './StyledSelect';
+import Button from '../Button';
 
 const Footer = ({ label, onPress }: { label: string; onPress: () => void }) => (
-  <TouchableOpacity onPress={onPress}>
-    <FooterText fontSize="large" fontWeight="semi-bold">
-      {label}
-    </FooterText>
-  </TouchableOpacity>
+  <Button variant="text" text={label} onPress={onPress} />
 );
 
 export default Footer;

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -142,6 +142,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -1277,9 +1278,8 @@ Array [
                     "alignItems": "center",
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
-                    "minHeight": 64,
-                    "paddingHorizontal": 24,
-                    "paddingVertical": 16,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 2,
                   },
                   undefined,
                 ]
@@ -1297,32 +1297,46 @@ Array [
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
+                    "alignItems": "center",
+                    "borderWidth": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                     "opacity": 1,
+                    "padding": 16,
                   }
                 }
               >
                 <Text
+                  disabled={false}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
                   style={
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
                       },
                       Array [
                         Object {
-                          "color": "#795e90",
+                          "color": "#401960",
+                          "flexShrink": 1,
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "lineHeight": 24,
+                          "textAlign": "center",
                         },
                         undefined,
                       ],
                     ]
                   }
-                  themeFontSize="large"
-                  themeFontWeight="semi-bold"
+                  themeFontSize="medium"
+                  themeFontWeight="regular"
                   themeIntent="body"
                   themeTypeface="neutral"
+                  themeVariant="text-primary"
                 >
                   Confirm
                 </Text>
@@ -1475,6 +1489,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -2788,9 +2803,8 @@ Array [
                     "alignItems": "center",
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
-                    "minHeight": 64,
-                    "paddingHorizontal": 24,
-                    "paddingVertical": 16,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 2,
                   },
                   undefined,
                 ]
@@ -2810,32 +2824,46 @@ Array [
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
+                    "alignItems": "center",
+                    "borderWidth": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                     "opacity": 1,
+                    "padding": 16,
                   }
                 }
               >
                 <Text
+                  disabled={false}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
                   style={
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
                       },
                       Array [
                         Object {
-                          "color": "#795e90",
+                          "color": "#401960",
+                          "flexShrink": 1,
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "lineHeight": 24,
+                          "textAlign": "center",
                         },
                         undefined,
                       ],
                     ]
                   }
-                  themeFontSize="large"
-                  themeFontWeight="semi-bold"
+                  themeFontSize="medium"
+                  themeFontWeight="regular"
                   themeIntent="body"
                   themeTypeface="neutral"
+                  themeVariant="text-primary"
                 >
                   Confirm
                 </Text>
@@ -2986,6 +3014,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -4280,9 +4309,8 @@ Array [
                     "alignItems": "center",
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
-                    "minHeight": 64,
-                    "paddingHorizontal": 24,
-                    "paddingVertical": 16,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 2,
                   },
                   undefined,
                 ]
@@ -4300,32 +4328,46 @@ Array [
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
+                    "alignItems": "center",
+                    "borderWidth": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                     "opacity": 1,
+                    "padding": 16,
                   }
                 }
               >
                 <Text
+                  disabled={false}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
                   style={
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
                       },
                       Array [
                         Object {
-                          "color": "#795e90",
+                          "color": "#401960",
+                          "flexShrink": 1,
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "lineHeight": 24,
+                          "textAlign": "center",
                         },
                         undefined,
                       ],
                     ]
                   }
-                  themeFontSize="large"
-                  themeFontWeight="semi-bold"
+                  themeFontSize="medium"
+                  themeFontWeight="regular"
                   themeIntent="body"
                   themeTypeface="neutral"
+                  themeVariant="text-primary"
                 >
                   Confirm
                 </Text>
@@ -4478,6 +4520,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -5805,9 +5848,8 @@ Array [
                     "alignItems": "center",
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
-                    "minHeight": 64,
-                    "paddingHorizontal": 24,
-                    "paddingVertical": 16,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 2,
                   },
                   undefined,
                 ]
@@ -5827,32 +5869,46 @@ Array [
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
+                    "alignItems": "center",
+                    "borderWidth": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                     "opacity": 1,
+                    "padding": 16,
                   }
                 }
               >
                 <Text
+                  disabled={false}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
                   style={
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
                       },
                       Array [
                         Object {
-                          "color": "#795e90",
+                          "color": "#401960",
+                          "flexShrink": 1,
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "lineHeight": 24,
+                          "textAlign": "center",
                         },
                         undefined,
                       ],
                     ]
                   }
-                  themeFontSize="large"
-                  themeFontWeight="semi-bold"
+                  themeFontSize="medium"
+                  themeFontWeight="regular"
                   themeIntent="body"
                   themeTypeface="neutral"
+                  themeVariant="text-primary"
                 >
                   Confirm
                 </Text>
@@ -6003,6 +6059,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -6939,9 +6996,8 @@ Array [
                     "alignItems": "center",
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
-                    "minHeight": 64,
-                    "paddingHorizontal": 24,
-                    "paddingVertical": 16,
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 2,
                   },
                   undefined,
                 ]
@@ -6959,32 +7015,46 @@ Array [
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
+                    "alignItems": "center",
+                    "borderWidth": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
                     "opacity": 1,
+                    "padding": 16,
                   }
                 }
               >
                 <Text
+                  disabled={false}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
                   style={
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.42,
+                        "lineHeight": 22,
                       },
                       Array [
                         Object {
-                          "color": "#795e90",
+                          "color": "#401960",
+                          "flexShrink": 1,
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "lineHeight": 24,
+                          "textAlign": "center",
                         },
                         undefined,
                       ],
                     ]
                   }
-                  themeFontSize="large"
-                  themeFontWeight="semi-bold"
+                  themeFontSize="medium"
+                  themeFontWeight="regular"
                   themeIntent="body"
                   themeTypeface="neutral"
+                  themeVariant="text-primary"
                 >
                   Confirm
                 </Text>

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -142,6 +142,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -1402,6 +1403,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -2785,6 +2787,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -4151,6 +4154,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [
@@ -5548,6 +5552,7 @@ Array [
                 onBlur={[Function]}
                 onChangeText={[Function]}
                 onFocus={[Function]}
+                placeholder=" "
                 pointerEvents="none"
                 style={
                   Array [

package/src/components/Select/StyledSelect.tsx

@@ -1,6 +1,5 @@
 import { SectionList, View } from 'react-native';
 import styled from '@emotion/native';
-import Typography from '../Typography';
 
 const SectionSpacer = styled(View)(({ theme }) => ({
   marginTop: theme.__hd__.select.space.sectionSpacing,
@@ -10,10 +9,6 @@ const OptionSpacer = styled(View)(({ theme }) => ({
   marginTop: theme.__hd__.select.space.optionSpacing,
 }));
 
-const FooterText = styled(Typography.Text)(({ theme }) => ({
-  color: theme.__hd__.select.colors.footerText,
-}));
-
 const StyledSearchBar = styled(View)(({ theme }) => ({
   marginTop: theme.__hd__.select.space.searchBarMarginTopSpacing,
   paddingHorizontal: theme.__hd__.select.space.searchBarHorizontalSpacing,
@@ -24,10 +19,4 @@ const StyledSectionList = styled(SectionList)(({ theme }) => ({
   paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding,
 })) as unknown as typeof SectionList;
 
-export {
-  SectionSpacer,
-  OptionSpacer,
-  FooterText,
-  StyledSearchBar,
-  StyledSectionList,
-};
+export { SectionSpacer, OptionSpacer, StyledSearchBar, StyledSectionList };

package/src/components/Tag/index.tsx

@@ -43,7 +43,7 @@ const Tag = ({
 }: TagProps): JSX.Element => {
   useDeprecation(
     "Tag's default intent is deprecated and will be removed in the next major release.\nPlease use primary intent instead.",
-    intent !== 'default'
+    intent === 'default'
   );
 
   return (

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

@@ -156,6 +156,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -416,6 +417,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -661,6 +663,7 @@ exports[`TextInput disabled renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -866,6 +869,7 @@ exports[`TextInput error renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -1097,6 +1101,7 @@ exports[`TextInput filled renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -1317,6 +1322,7 @@ exports[`TextInput helper text renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -1522,6 +1528,7 @@ exports[`TextInput idle renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -1741,6 +1748,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -2100,6 +2108,7 @@ exports[`TextInput max length renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -2398,6 +2407,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -2621,6 +2631,7 @@ exports[`TextInput readonly renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {
@@ -2841,6 +2852,7 @@ exports[`TextInput required renders correctly 1`] = `
         onBlur={[Function]}
         onChangeText={[Function]}
         onFocus={[Function]}
+        placeholder=" "
         style={
           Array [
             Object {

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

@@ -59,6 +59,8 @@ describe('TextInput', () => {
       expect(
         within(getByTestId('idle-text-input')).queryAllByTestId('input-suffix')
       ).toHaveLength(1);
+
+      expect(getByTestId('text-input').props.placeholder).toBe(' ');
     });
 
     it('should not render input-label if label is empty', () => {
@@ -319,13 +321,13 @@ describe('TextInput', () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
+        expect(wrapper.getByTestId('text-input').props.placeholder).toBe(' ');
 
         fireEvent(wrapper.getByTestId('text-input'), 'focus');
         expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeTruthy();
 
         fireEvent(wrapper.getByTestId('text-input'), 'blur');
-        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
+        expect(wrapper.getByTestId('text-input').props.placeholder).toBe(' ');
       });
     });
   });