@hero-design/rn 8.81.0 → 8.81.1-alpha.0

package/src/components/Chip/index.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import { ViewProps } from 'react-native';
 import Box from '../Box';
-import Icon, { IconName } from '../Icon';
+import { IconName } from '../Icon';
 import Typography from '../Typography';
-import { StyledChipWrapper } from './StyledChip';
+import { StyledChipIcon, StyledChipWrapper } from './StyledChip';
 
 export interface ChipProps extends ViewProps {
   /**
    * The label of the chip.
    */
-  label: string;
+  label: string | ReactNode;
   /**
    * Variant of the chip.
    */
@@ -32,6 +32,14 @@ export interface ChipProps extends ViewProps {
   showSelectedIcon?: boolean;
 }
 
+const getChipLabel = (label: string | ReactNode) => {
+  if (typeof label === 'string') {
+    return <Typography.Body variant="small">{label}</Typography.Body>;
+  }
+
+  return label;
+};
+
 const Chip = ({
   label,
   variant = 'outlined',
@@ -42,7 +50,11 @@ const Chip = ({
   ...otherProps
 }: ChipProps) => {
   const shouldShowSelectedIcon =
-    variant === 'outlined' && selected && showSelectedIcon;
+    (variant === 'outlined' || variant === 'compact-outlined') &&
+    selected &&
+    showSelectedIcon;
+
+  const chipLabel = useMemo(() => getChipLabel(label), [label]);
 
   return (
     <StyledChipWrapper
@@ -53,19 +65,15 @@ const Chip = ({
     >
       {icon && (
         <Box marginRight="small">
-          <Icon size="xsmall" icon={icon} testID={`chip-icon-${icon}`} />
+          <StyledChipIcon icon={icon} testID={`chip-icon-${icon}`} />
         </Box>
       )}
 
-      <Typography.Body>{label}</Typography.Body>
+      {chipLabel}
 
       {shouldShowSelectedIcon && (
         <Box marginLeft="small">
-          <Icon
-            size="xsmall"
-            icon="cancel"
-            testID="selected-chip-icon-cancel"
-          />
+          <StyledChipIcon icon="cancel" testID="selected-chip-icon-cancel" />
         </Box>
       )}
     </StyledChipWrapper>

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -1,5 +1,5 @@
 import DateTimePicker from '@react-native-community/datetimepicker';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import formatTime from 'date-fns/fp/format';
 
@@ -33,6 +33,10 @@ const TimePickerIOS = ({
   const displayValue = value ? formatTime(displayFormat, value) : '';
   const theme = useTheme();
 
+  useEffect(() => {
+    setSelectingDate(value || new Date());
+  }, [value]);
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="timePickerInputIOS">

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -401,6 +401,9 @@ exports[`theme returns correct theme object 1`] = `
         "secondaryBackground": "#ece8ef",
         "wrapperSelectedBorder": "transparent",
       },
+      "fontSizes": {
+        "icon": 12,
+      },
       "radii": {
         "wrapper": 999,
       },

package/src/theme/components/chip.ts

@@ -33,12 +33,17 @@ const getChipTheme = (theme: GlobalTheme) => {
     filledWrapper: theme.shadows.default,
   };
 
+  const fontSizes = {
+    icon: theme.fontSizes.small,
+  };
+
   return {
     colors,
     space,
     radii,
     borderWidths,
     shadows,
+    fontSizes,
   };
 };