@hero-design/rn 7.28.1 → 7.29.0

package/src/components/TextInput/index.tsx

@@ -128,6 +128,10 @@ export const getVariant = ({
   return 'default';
 };
 
+// Fix issue: Placeholder is not shown on iOS when multiline is true
+// https://github.com/callstack/react-native-paper/pull/3331
+const EMPTY_PLACEHOLDER_VALUE = ' ';
+
 const TextInput = ({
   label,
   prefix,
@@ -211,7 +215,9 @@ const TextInput = ({
     },
     defaultValue,
     placeholder:
-      isFocused || label === undefined ? nativeProps.placeholder : undefined,
+      isFocused || label === undefined
+        ? nativeProps.placeholder
+        : EMPTY_PLACEHOLDER_VALUE,
   };
 
   return (

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -5,7 +5,7 @@ import formatTime from 'date-fns/fp/format';
 
 import BottomSheet from '../BottomSheet';
 import TextInput from '../TextInput';
-import Typography from '../Typography';
+import Button from '../Button';
 import { StyledPickerWrapper } from './StyledTimePicker';
 import type { TimePickerProps } from './types';
 
@@ -50,22 +50,16 @@ const TimePickerIOS = ({
         onRequestClose={() => setOpen(false)}
         header={label}
         footer={
-          <TouchableOpacity
+          <Button
+            variant="text"
+            text={confirmLabel}
             onPress={() => {
               if (selectingDate) {
                 onChange(selectingDate);
               }
               setOpen(false);
             }}
-          >
-            <Typography.Text
-              fontSize="large"
-              fontWeight="semi-bold"
-              intent="primary"
-            >
-              {confirmLabel}
-            </Typography.Text>
-          </TouchableOpacity>
+          />
         }
       >
         <StyledPickerWrapper>

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -133,6 +133,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
+            placeholder=" "
             style={
               Array [
                 Object {

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -133,6 +133,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
+            placeholder=" "
             style={
               Array [
                 Object {
@@ -476,9 +477,8 @@ exports[`TimePickerIOS 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[`TimePickerIOS 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/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -163,12 +163,11 @@ Object {
       },
       "sizes": Object {
         "closeIcon": 48,
-        "sectionHeight": 64,
       },
       "space": Object {
         "closeIconMargin": 12,
-        "footerHorizontalPadding": 24,
-        "footerVerticalPadding": 16,
+        "footerHorizontalPadding": 12,
+        "footerVerticalPadding": 2,
         "headerWrapperHorizontalPadding": 16,
         "headerWrapperVerticalPadding": 8,
       },
@@ -600,9 +599,6 @@ Object {
       },
     },
     "select": Object {
-      "colors": Object {
-        "footerText": "#795e90",
-      },
       "radii": Object {
         "option": 4,
       },

package/src/theme/components/bottomSheet.ts

@@ -8,7 +8,6 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    sectionHeight: theme.sizes.xxxxxlarge,
     closeIcon: theme.sizes.xxxlarge,
   };
 
@@ -16,8 +15,8 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
     headerWrapperVerticalPadding: theme.space.small,
     headerWrapperHorizontalPadding: theme.space.medium,
     closeIconMargin: theme.space.smallMedium,
-    footerVerticalPadding: theme.space.medium,
-    footerHorizontalPadding: theme.space.large,
+    footerVerticalPadding: theme.space.xxsmall,
+    footerHorizontalPadding: theme.space.smallMedium,
   };
 
   const shadows = {

package/src/theme/components/select.ts

@@ -1,10 +1,6 @@
 import type { GlobalTheme } from '../global';
 
 const getSelectTheme = (theme: GlobalTheme) => {
-  const colors = {
-    footerText: theme.colors.secondary,
-  };
-
   const space = {
     minimumOptionListHeight: theme.space.xxxxlarge * 5,
     sectionSpacing: theme.space.smallMedium,
@@ -21,7 +17,7 @@ const getSelectTheme = (theme: GlobalTheme) => {
     option: theme.radii.base,
   };
 
-  return { space, colors, radii };
+  return { space, radii };
 };
 
 export default getSelectTheme;

package/types/components/Select/StyledSelect.d.ts

@@ -11,10 +11,6 @@ declare const OptionSpacer: import("@emotion/native").StyledComponent<import("re
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const FooterText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
 declare const StyledSearchBar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -22,4 +18,4 @@ declare const StyledSearchBar: import("@emotion/native").StyledComponent<import(
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledSectionList: typeof SectionList;
-export { SectionSpacer, OptionSpacer, FooterText, StyledSearchBar, StyledSectionList, };
+export { SectionSpacer, OptionSpacer, StyledSearchBar, StyledSectionList };