@hero-design/rn 7.28.0 → 7.29.0

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -5,7 +5,7 @@ import formatDate from 'date-fns/fp/format';
 
 import BottomSheet from '../BottomSheet';
 import TextInput from '../TextInput';
-import Typography from '../Typography';
+import Button from '../Button';
 import { StyledPickerWrapper } from './StyledDatePicker';
 import type { DatePickerProps } from './types';
 
@@ -49,22 +49,16 @@ const DatePickerIOS = ({
         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/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

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

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 {
@@ -287,7 +288,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#001f23",
+                    "backgroundColor": "#000000",
                     "bottom": 0,
                     "left": 0,
                     "opacity": 0.48,
@@ -313,8 +314,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
                       "height": 3,
                       "width": 0,
                     },
-                    "shadowOpacity": 0.27,
-                    "shadowRadius": 4.65,
+                    "shadowOpacity": 0.4,
+                    "shadowRadius": 16,
                     "transform": Array [
                       Object {
                         "scaleY": 1,
@@ -410,13 +411,13 @@ exports[`DatePickerIOS renders correctly 1`] = `
                           Array [
                             Object {
                               "color": "#001f23",
-                              "fontSize": 20,
+                              "fontSize": 16,
                             },
                             undefined,
                           ]
                         }
                         themeIntent="text"
-                        themeSize="small"
+                        themeSize="xsmall"
                       />
                     </View>
                   </View>
@@ -476,9 +477,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
                           "alignItems": "center",
                           "flexDirection": "row",
                           "justifyContent": "flex-end",
-                          "minHeight": 64,
                           "paddingHorizontal": 12,
-                          "paddingVertical": 8,
+                          "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/Empty/StyledEmpty.tsx

@@ -32,7 +32,7 @@ const StyledDescription = styled(Text)<{ themeVariant: ThemeVariant }>(
     textAlign: 'center',
     color:
       themeVariant === 'dark'
-        ? theme.__hd__.empty.colors.invertedText
+        ? theme.__hd__.empty.colors.invertedSubduedText
         : theme.__hd__.empty.colors.subduedText,
   })
 );

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

@@ -21,8 +21,8 @@ exports[`Empty renders empty state content correctly 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 28,
+          "fontFamily": "RebondGrotesque-SemiBold",
+          "fontSize": 24,
           "marginBottom": 16,
           "textAlign": "center",
         },
@@ -37,9 +37,9 @@ exports[`Empty renders empty state content correctly 1`] = `
     style={
       Array [
         Object {
-          "color": "#bfc1c5",
-          "fontFamily": "BeVietnamPro-Light",
-          "fontSize": 16,
+          "color": "#4d6265",
+          "fontFamily": "RebondGrotesque-Regular",
+          "fontSize": 18,
           "textAlign": "center",
         },
         undefined,
@@ -88,8 +88,8 @@ exports[`Empty renders empty state with image correctly 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 28,
+          "fontFamily": "RebondGrotesque-SemiBold",
+          "fontSize": 24,
           "marginBottom": 16,
           "textAlign": "center",
         },
@@ -104,9 +104,9 @@ exports[`Empty renders empty state with image correctly 1`] = `
     style={
       Array [
         Object {
-          "color": "#bfc1c5",
-          "fontFamily": "BeVietnamPro-Light",
-          "fontSize": 16,
+          "color": "#4d6265",
+          "fontFamily": "RebondGrotesque-Regular",
+          "fontSize": 18,
           "textAlign": "center",
         },
         undefined,

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -24,7 +24,7 @@ exports[`ActionGroup has active false 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#000000",
         "bottom": 0,
         "left": 0,
         "opacity": 0,
@@ -593,10 +593,10 @@ exports[`ActionGroup has active true 1`] = `
     pointerEvents="auto"
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#000000",
         "bottom": 0,
         "left": 0,
-        "opacity": 0.9,
+        "opacity": 0.4,
         "position": "absolute",
         "right": 0,
         "top": 0,

package/src/components/FAB/ActionGroup/index.tsx

@@ -100,7 +100,7 @@ const ActionGroup = ({
   const interpolatedBackdropOpacityAnimation =
     tranlateXAnimation.current.interpolate({
       inputRange: [0, 1],
-      outputRange: [0, 0.9],
+      outputRange: [0, 0.4],
     });
 
   const interpolatedActionGroupOpacityAnimation =

package/src/components/List/ListItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { View } from 'react-native';
 import type { ReactNode } from 'react';
@@ -28,7 +28,7 @@ export interface ListItemProps {
   /**
    * The title of the component.
    */
-  title?: string;
+  title?: string | ReactElement;
   /**
    * The subtile title of the component.
    */

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/{StyledOptionList.tsx → BaseOptionList.tsx}

@@ -5,7 +5,7 @@ import type { ReactElement } from 'react';
 import type { SectionListRenderItemInfo } from 'react-native';
 import SectionHeading from '../SectionHeading';
 import Spinner from '../Spinner';
-import { OptionSpacer, SectionSpacer } from './StyledSelect';
+import { OptionSpacer, SectionSpacer, StyledSectionList } from './StyledSelect';
 import type {
   SectionData,
   OptionType,
@@ -13,7 +13,7 @@ import type {
   SectionType,
 } from './types';
 
-export type StyledOptionListProps<V, T extends OptionType<V>> = Pick<
+export type BaseOptionListProps<V, T extends OptionType<V>> = Pick<
   SelectProps<V, T>,
   'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange'
 > & {
@@ -22,7 +22,7 @@ export type StyledOptionListProps<V, T extends OptionType<V>> = Pick<
   sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
 
-const StyledOptionList = <V, T extends OptionType<V>>({
+const BaseOptionList = <V, T extends OptionType<V>>({
   keyExtractor,
   loading,
   onEndReached,
@@ -30,13 +30,13 @@ const StyledOptionList = <V, T extends OptionType<V>>({
   sections,
   renderItem,
   sectionListRef,
-}: StyledOptionListProps<V, T>) => {
+}: BaseOptionListProps<V, T>) => {
   const theme = useTheme();
 
   const [onEndReachedCalled, setOnEndReachedCalled] = useState(false);
 
   return (
-    <SectionList<T, SectionType>
+    <StyledSectionList<T, SectionType>
       ref={sectionListRef}
       style={{
         ...(onQueryChange ? { height: Dimensions.get('screen').height } : {}),
@@ -79,4 +79,4 @@ const StyledOptionList = <V, T extends OptionType<V>>({
   );
 };
 
-export default StyledOptionList;
+export default BaseOptionList;

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/Option.tsx

@@ -2,30 +2,43 @@ import React from 'react';
 import type { ReactElement } from 'react';
 import { useTheme } from '../../../theme';
 import List from '../../List';
+import Icon from '../../Icon';
 
 const Option = ({
   text,
   disabled = false,
   selected,
   onPress,
+  highlighted = false,
 }: {
   text: string | ReactElement;
   disabled?: boolean;
   selected: boolean;
   onPress: () => void;
+  highlighted?: boolean;
 }) => {
   const theme = useTheme();
-  return (
-    <List.BasicItem
-      selected={selected}
-      disabled={disabled}
-      onPress={onPress}
-      title={text}
-      suffix={selected ? 'checkmark' : undefined}
-      style={{
-        marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin,
-      }}
-    />
+  const props = {
+    selected,
+    disabled,
+    onPress,
+    title: text,
+    suffix:
+      selected === true ? (
+        <Icon
+          icon="checkmark"
+          intent={disabled ? 'disabled-text' : 'primary'}
+          size="small"
+          style={{
+            marginRight: theme.__hd__.select.space.suffixMarginRight,
+          }}
+        />
+      ) : undefined,
+  };
+  return highlighted === true ? (
+    <List.Item {...props} />
+  ) : (
+    <List.BasicItem {...props} />
   );
 };
 

package/src/components/Select/MultiSelect/OptionList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SectionListRenderItemInfo, SectionList } from 'react-native';
-import StyledOptionList from '../StyledOptionList';
+import BaseOptionList from '../BaseOptionList';
 import Option from './Option';
 import type { MultiSelectProps } from '.';
 import type { OptionType, SectionData, SectionType } from '../types';
@@ -49,12 +49,13 @@ const OptionList = <V, T extends OptionType<V>>({
         text={item.text}
         disabled={item.disabled}
         onPress={onItemPress}
+        highlighted={item.highlighted}
       />
     );
   };
 
   return (
-    <StyledOptionList
+    <BaseOptionList
       keyExtractor={keyExtractor}
       loading={loading}
       onEndReached={onEndReached}

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

@@ -19,7 +19,6 @@ exports[`Option renders correctly 1`] = `
       "backgroundColor": "#ece8ef",
       "borderRadius": 4,
       "flexDirection": "row",
-      "marginHorizontal": 12,
       "opacity": 1,
       "padding": 16,
     }
@@ -74,7 +73,9 @@ exports[`Option renders correctly 1`] = `
             "color": "#401960",
             "fontSize": 20,
           },
-          undefined,
+          Object {
+            "marginRight": 12,
+          },
         ]
       }
       themeIntent="primary"

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

@@ -61,7 +61,14 @@ exports[`OptionList render isLoading correctly 1`] = `
       3,
     ]
   }
-  style={Object {}}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 12,
+      },
+      Object {},
+    ]
+  }
 >
   <View>
     <View
@@ -197,7 +204,6 @@ exports[`OptionList render isLoading correctly 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -252,7 +258,9 @@ exports[`OptionList render isLoading correctly 1`] = `
                     "color": "#401960",
                     "fontSize": 20,
                   },
-                  undefined,
+                  Object {
+                    "marginRight": 12,
+                  },
                 ]
               }
               themeIntent="primary"
@@ -442,7 +450,6 @@ exports[`OptionList render isLoading correctly 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -554,7 +561,6 @@ exports[`OptionList render isLoading correctly 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -854,7 +860,14 @@ exports[`OptionList renders correctly 1`] = `
       3,
     ]
   }
-  style={Object {}}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 12,
+      },
+      Object {},
+    ]
+  }
 >
   <View>
     <View
@@ -990,7 +1003,6 @@ exports[`OptionList renders correctly 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1045,7 +1057,9 @@ exports[`OptionList renders correctly 1`] = `
                     "color": "#401960",
                     "fontSize": 20,
                   },
-                  undefined,
+                  Object {
+                    "marginRight": 12,
+                  },
                 ]
               }
               themeIntent="primary"
@@ -1235,7 +1249,6 @@ exports[`OptionList renders correctly 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1347,7 +1360,6 @@ exports[`OptionList renders correctly 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1487,7 +1499,14 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
       3,
     ]
   }
-  style={Object {}}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 12,
+      },
+      Object {},
+    ]
+  }
 >
   <View>
     <View
@@ -1623,7 +1642,6 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1678,7 +1696,9 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
                     "color": "#401960",
                     "fontSize": 20,
                   },
-                  undefined,
+                  Object {
+                    "marginRight": 12,
+                  },
                 ]
               }
               themeIntent="primary"
@@ -1868,7 +1888,6 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1923,7 +1942,9 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
                     "color": "#401960",
                     "fontSize": 20,
                   },
-                  undefined,
+                  Object {
+                    "marginRight": 12,
+                  },
                 ]
               }
               themeIntent="primary"
@@ -2005,7 +2026,6 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -2145,7 +2165,14 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
       3,
     ]
   }
-  style={Object {}}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 12,
+      },
+      Object {},
+    ]
+  }
 >
   <View>
     <View
@@ -2281,7 +2308,6 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -2336,7 +2362,9 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
                     "color": "#401960",
                     "fontSize": 20,
                   },
-                  undefined,
+                  Object {
+                    "marginRight": 12,
+                  },
                 ]
               }
               themeIntent="primary"
@@ -2526,7 +2554,6 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -2638,7 +2665,6 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }