@hero-design/rn 8.80.1 → 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/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -628,6 +628,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                           }
                           themeButtonVariant="text-primary"
                           themeIntent="body"
+                          themeIsPressed={false}
                           themeTypeface="neutral"
                           themeVariant="regular-bold"
                         >

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

@@ -1502,6 +1502,7 @@ exports[`rendering allows custom renderer 1`] = `
                   }
                   themeButtonVariant="text-primary"
                   themeIntent="body"
+                  themeIsPressed={false}
                   themeTypeface="neutral"
                   themeVariant="regular-bold"
                 >
@@ -3230,6 +3231,7 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
                     }
                     themeButtonVariant="text-primary"
                     themeIntent="body"
+                    themeIsPressed={false}
                     themeTypeface="neutral"
                     themeVariant="regular-bold"
                   >
@@ -5260,6 +5262,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                   }
                   themeButtonVariant="text-primary"
                   themeIntent="body"
+                  themeIsPressed={false}
                   themeTypeface="neutral"
                   themeVariant="regular-bold"
                 >
@@ -6882,6 +6885,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                   }
                   themeButtonVariant="text-primary"
                   themeIntent="body"
+                  themeIsPressed={false}
                   themeTypeface="neutral"
                   themeVariant="regular-bold"
                 >
@@ -8177,6 +8181,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                   }
                   themeButtonVariant="text-primary"
                   themeIntent="body"
+                  themeIsPressed={false}
                   themeTypeface="neutral"
                   themeVariant="regular-bold"
                 >

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/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -914,6 +914,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                           }
                           themeButtonVariant="text-primary"
                           themeIntent="body"
+                          themeIsPressed={false}
                           themeTypeface="neutral"
                           themeVariant="regular-bold"
                         >

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

@@ -247,6 +247,11 @@ exports[`theme returns correct theme object 1`] = `
           "textPrimary": "#ece8ef",
           "textSecondary": "#f6f6f7",
         },
+        "pressedText": {
+          "danger": "#f68282",
+          "primary": "#33144d",
+          "secondary": "#001f23",
+        },
         "primary": "#401960",
         "secondary": "#4d6265",
         "textLoadingBackground": "#ece8ef",
@@ -396,6 +401,9 @@ exports[`theme returns correct theme object 1`] = `
         "secondaryBackground": "#ece8ef",
         "wrapperSelectedBorder": "transparent",
       },
+      "fontSizes": {
+        "icon": 12,
+      },
       "radii": {
         "wrapper": 999,
       },

package/src/theme/components/button.ts

@@ -55,6 +55,11 @@ const getButtonTheme = (theme: GlobalTheme) => {
       textSecondary: theme.colors.neutralGlobalSurface,
       textDanger: theme.colors.errorSurface,
     },
+    pressedText: {
+      primary: theme.colors.pressedSurface,
+      secondary: theme.colors.onDefaultGlobalSurface,
+      danger: theme.colors.mutedError,
+    },
   };
 
   const lineHeights = {

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,
   };
 };