@hero-design/rn 7.27.1 → 8.0.0-rc.0

package/src/components/Switch/index.tsx

@@ -7,6 +7,7 @@ import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { StyledKnot, StyledWrapper, Variant } from './StyledSwitch';
 import SelectorSwitch from './SelectorSwitch';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface SwitchProps {
   /**
@@ -50,16 +51,23 @@ const getVariant = ({
 };
 
 const Switch = ({
-  size = 'medium',
+  size: _size,
   disabled = false,
   checked = false,
   onPress,
   style,
   testID,
 }: SwitchProps): ReactElement => {
+  const size: SwitchProps['size'] = _size === undefined ? 'medium' : _size;
+
   const theme = useTheme();
   const variant = getVariant({ disabled, checked });
 
+  useDeprecation(
+    "Switch's size prop will be removed in the next major release.",
+    _size !== undefined
+  );
+
   const offset = checked
     ? (theme.__hd__.switch.sizes.widths[size] -
         theme.__hd__.switch.sizes.thumbs[size]) /

package/src/components/Tabs/ScrollableTabs.tsx

@@ -35,7 +35,7 @@ const getTabItem = ({
         icon={item}
         testID={`hero-icon-${item}`}
         size="small"
-        intent={active ? 'info' : 'text'}
+        style={{ color }}
       />
     );
   }

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -376,7 +376,9 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                           "color": "#001f23",
                           "fontSize": 20,
                         },
-                        undefined,
+                        Object {
+                          "color": "#001f23",
+                        },
                       ]
                     }
                     testID="hero-icon-speaker-outlined"
@@ -478,7 +480,9 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                           "color": "#001f23",
                           "fontSize": 20,
                         },
-                        undefined,
+                        Object {
+                          "color": "#001f23",
+                        },
                       ]
                     }
                     testID="hero-icon-home-outlined"
@@ -605,7 +609,9 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                           "color": "#001f23",
                           "fontSize": 20,
                         },
-                        undefined,
+                        Object {
+                          "color": "#001f23",
+                        },
                       ]
                     }
                     testID="hero-icon-calendar-dates-outlined"

package/src/components/Tabs/index.tsx

@@ -20,6 +20,7 @@ import ScrollableTabs from './ScrollableTabs';
 import TabWithBadge from './TabWithBadge';
 import type { BadgeConfigType } from './TabWithBadge';
 import { IconName } from '../Icon';
+import { useDeprecation } from '../../utils/hooks';
 
 export type ItemType =
   | string
@@ -113,6 +114,11 @@ const Tabs = ({
   swipeEnabled = true,
   testID: componentTestID,
 }: TabsProps): JSX.Element => {
+  useDeprecation(
+    "Tabs' showBadge will be removed in the next major release. Please use badge prop instead.",
+    tabs.some((item) => item.showBadge !== undefined)
+  );
+
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const pagerViewRef = React.useRef<PagerView>(null);

package/src/components/Tag/index.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import { useDeprecation } from '../../utils/hooks';
 import { StyledView, StyledText } from './StyledTag';
 
 interface TagProps extends ViewProps {
@@ -39,22 +40,29 @@ const Tag = ({
   style,
   testID,
   ...nativeProps
-}: TagProps): JSX.Element => (
-  <StyledView
-    {...nativeProps}
-    themeIntent={intent}
-    themeVariant={variant}
-    style={style}
-    testID={testID}
-  >
-    {typeof content === 'string' ? (
-      <StyledText themeIntent={intent} themeVariant={variant}>
-        {content}
-      </StyledText>
-    ) : (
-      content
-    )}
-  </StyledView>
-);
+}: 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'
+  );
+
+  return (
+    <StyledView
+      {...nativeProps}
+      themeIntent={intent}
+      themeVariant={variant}
+      style={style}
+      testID={testID}
+    >
+      {typeof content === 'string' ? (
+        <StyledText themeIntent={intent} themeVariant={variant}>
+          {content}
+        </StyledText>
+      ) : (
+        content
+      )}
+    </StyledView>
+  );
+};
 
 export default Tag;

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

@@ -1396,7 +1396,7 @@ exports[`TextInput idle renders correctly 1`] = `
         "width": "100%",
       },
       Object {
-        "borderColor": "#de350b",
+        "borderColor": "#f46363",
       },
     ]
   }

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

@@ -38,7 +38,7 @@ describe('TextInput', () => {
           prefix="dollar-sign"
           suffix="arrow-down"
           testID="idle-text-input"
-          style={{ borderColor: theme.colors.danger }}
+          style={{ borderColor: theme.colors.error }}
         />
       );
 

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

@@ -287,7 +287,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#001f23",
+                    "backgroundColor": "#000000",
                     "bottom": 0,
                     "left": 0,
                     "opacity": 0.48,
@@ -313,8 +313,8 @@ exports[`TimePickerIOS 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 +410,13 @@ exports[`TimePickerIOS renders correctly 1`] = `
                           Array [
                             Object {
                               "color": "#001f23",
-                              "fontSize": 20,
+                              "fontSize": 16,
                             },
                             undefined,
                           ]
                         }
                         themeIntent="text"
-                        themeSize="small"
+                        themeSize="xsmall"
                       />
                     </View>
                   </View>
@@ -477,8 +477,8 @@ exports[`TimePickerIOS renders correctly 1`] = `
                           "flexDirection": "row",
                           "justifyContent": "flex-end",
                           "minHeight": 64,
-                          "paddingHorizontal": 12,
-                          "paddingVertical": 8,
+                          "paddingHorizontal": 24,
+                          "paddingVertical": 16,
                         },
                         undefined,
                       ]

package/src/components/Toast/ToastContainer.tsx

@@ -38,7 +38,7 @@ const SingleToastDisplay = ({
 const ToastContainer = React.forwardRef<
   ToastControllerContextType,
   ToastContainerProps
->(({ displayType = 'single', position = 'top', style }, ref) => {
+>(({ displayType = 'single', position = 'bottom', style }, ref) => {
   const theme = useTheme();
   const [toastList, setToastList] = useState<ToastItemProps[]>([]);
 

package/src/components/Toast/ToastProvider.tsx

@@ -6,6 +6,7 @@ import ToastContainer from './ToastContainer';
 import { ToastConfigContext, ToastContext } from './ToastContext';
 import type { ToastControllerContextType } from './ToastContext';
 import type { ToastContainerProps } from './types';
+import { useDeprecation } from '../../utils/hooks';
 
 type ToastProviderProps = {
   /**
@@ -17,8 +18,16 @@ type ToastProviderProps = {
 const ToastProvider = ({
   children,
   displayType = 'single',
-  position = 'top',
+  position: _position,
 }: ToastProviderProps) => {
+  const position: ToastContainerProps['position'] =
+    _position === undefined ? 'bottom' : _position;
+
+  useDeprecation(
+    "Toast's position prop is deprecated and will be removed in the next major release.\nPlease remove it.",
+    _position !== undefined
+  );
+
   const toastRef = useRef<ToastControllerContextType>(null);
   // @ts-expect-error: TODO: @tungv Fix this type error
   const [refState, setRefState] = useState<ToastControllerContextType>(null);

package/src/components/Toast/__tests__/ToastContainer.spec.tsx

@@ -10,11 +10,11 @@ describe('ToastContainer', () => {
   });
 
   it.each`
-    displayType      | position
-    ${'single'}      | ${'top'}
-    ${'displayType'} | ${'top'}
-    ${'single'}      | ${'bottom'}
-    ${'displayType'} | ${'bottom'}
+    displayType | position
+    ${'single'} | ${'top'}
+    ${'stack'}  | ${'top'}
+    ${'single'} | ${'bottom'}
+    ${'stack'}  | ${'bottom'}
   `(
     'renders correctly with displayType: $displayType, position: $position',
     ({ displayType, position }) => {

package/src/components/Toast/__tests__/__snapshots__/ToastContainer.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ToastContainer renders correctly with displayType: displayType, position: bottom 1`] = `
+exports[`ToastContainer renders correctly with displayType: single, position: bottom 1`] = `
 <View
   pointerEvents="box-none"
   position="bottom"
@@ -23,7 +23,7 @@ exports[`ToastContainer renders correctly with displayType: displayType, positio
 />
 `;
 
-exports[`ToastContainer renders correctly with displayType: displayType, position: top 1`] = `
+exports[`ToastContainer renders correctly with displayType: single, position: top 1`] = `
 <View
   pointerEvents="box-none"
   position="top"
@@ -46,7 +46,7 @@ exports[`ToastContainer renders correctly with displayType: displayType, positio
 />
 `;
 
-exports[`ToastContainer renders correctly with displayType: single, position: bottom 1`] = `
+exports[`ToastContainer renders correctly with displayType: stack, position: bottom 1`] = `
 <View
   pointerEvents="box-none"
   position="bottom"
@@ -69,7 +69,7 @@ exports[`ToastContainer renders correctly with displayType: single, position: bo
 />
 `;
 
-exports[`ToastContainer renders correctly with displayType: single, position: top 1`] = `
+exports[`ToastContainer renders correctly with displayType: stack, position: top 1`] = `
 <View
   pointerEvents="box-none"
   position="top"

package/src/components/Typography/Text/StyledText.tsx

@@ -14,7 +14,8 @@ const StyledText = styled(Text)<{
     | 'large'
     | 'xlarge'
     | 'xxxlarge'
-    | 'xxxxxlarge';
+    | 'xxxxxlarge'
+    | '7xlarge';
   themeFontWeight: 'light' | 'regular' | 'semi-bold';
   themeIntent:
     | 'body'

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -190,7 +190,7 @@ exports[`StyledText has playful typeface style 1`] = `
     Array [
       Object {
         "color": "#001f23",
-        "fontFamily": "DarkerGrotesque-Regular",
+        "fontFamily": "RebondGrotesque-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
         "lineHeight": 22,

package/src/components/Typography/Text/index.tsx

@@ -21,7 +21,8 @@ export interface TextProps extends NativeTextProps {
     | 'large'
     | 'xlarge'
     | 'xxxlarge'
-    | 'xxxxxlarge';
+    | 'xxxxxlarge'
+    | '7xlarge';
   /**
    * Font weight of the text.
    */

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

@@ -145,7 +145,7 @@ Object {
     },
     "bottomSheet": Object {
       "colors": Object {
-        "backdrop": "#001f23",
+        "backdrop": "#000000",
         "background": "#ffffff",
         "shadow": "#001f23",
       },
@@ -158,8 +158,8 @@ Object {
           "height": 3,
           "width": 0,
         },
-        "opacity": 0.27,
-        "radius": 4.65,
+        "opacity": 0.4,
+        "radius": 16,
       },
       "sizes": Object {
         "closeIcon": 48,
@@ -167,8 +167,8 @@ Object {
       },
       "space": Object {
         "closeIconMargin": 12,
-        "footerHorizontalPadding": 12,
-        "footerVerticalPadding": 8,
+        "footerHorizontalPadding": 24,
+        "footerVerticalPadding": 16,
         "headerWrapperHorizontalPadding": 16,
         "headerWrapperVerticalPadding": 8,
       },
@@ -331,17 +331,18 @@ Object {
     },
     "empty": Object {
       "colors": Object {
+        "invertedSubduedText": "#ffffff",
         "invertedText": "#ffffff",
-        "subduedText": "#bfc1c5",
+        "subduedText": "#4d6265",
         "text": "#001f23",
       },
       "fontSizes": Object {
-        "description": 16,
-        "title": 28,
+        "description": 18,
+        "title": 24,
       },
       "fonts": Object {
-        "description": "BeVietnamPro-Light",
-        "title": "BeVietnamPro-SemiBold",
+        "description": "RebondGrotesque-Regular",
+        "title": "RebondGrotesque-SemiBold",
       },
       "sizes": Object {
         "image": 168,
@@ -356,7 +357,7 @@ Object {
       "colors": Object {
         "actionItemBackground": "#401960",
         "actionItemText": "#ffffff",
-        "backdropBackground": "#001f23",
+        "backdropBackground": "#000000",
         "buttonBackground": "#401960",
         "headerText": "#ffffff",
         "icon": "#ffffff",
@@ -607,12 +608,14 @@ Object {
       },
       "space": Object {
         "minimumOptionListHeight": 280,
-        "optionHorizontalMargin": 12,
+        "optionListHorizontalPadding": 12,
         "optionSpacing": 4,
         "searchBarBottomSpacing": 8,
         "searchBarHorizontalSpacing": 16,
         "searchBarMarginTopSpacing": 8,
         "sectionSpacing": 12,
+        "singleSelectContentPaddingBottom": 16,
+        "suffixMarginRight": 12,
       },
     },
     "slider": Object {
@@ -909,6 +912,7 @@ Object {
         "warning": "#ffa234",
       },
       "fontSizes": Object {
+        "7xlarge": 42,
         "large": 16,
         "medium": 14,
         "small": 12,
@@ -923,12 +927,13 @@ Object {
           "semiBold": "BeVietnamPro-SemiBold",
         },
         "playful": Object {
-          "light": "DarkerGrotesque-Light",
-          "regular": "DarkerGrotesque-Regular",
-          "semiBold": "DarkerGrotesque-SemiBold",
+          "light": "RebondGrotesque-Light",
+          "regular": "RebondGrotesque-Regular",
+          "semiBold": "RebondGrotesque-SemiBold",
         },
       },
       "lineHeights": Object {
+        "7xlarge": 50,
         "large": 24,
         "medium": 22,
         "small": 20,
@@ -1006,6 +1011,7 @@ Object {
     "onSuccessSurface": "#017d6d",
     "onWarningSurface": "#ffa234",
     "outline": "#e8e9ea",
+    "overlayGlobalSurface": "#000000",
     "platformBackground": "#ffffff",
     "pressedSurface": "#664780",
     "primary": "#401960",
@@ -1033,6 +1039,7 @@ Object {
     "warningSurface": "#fff6eb",
   },
   "fontSizes": Object {
+    "7xlarge": 42,
     "large": 16,
     "medium": 14,
     "small": 12,
@@ -1050,12 +1057,13 @@ Object {
       "semiBold": "BeVietnamPro-SemiBold",
     },
     "playful": Object {
-      "light": "DarkerGrotesque-Light",
-      "regular": "DarkerGrotesque-Regular",
-      "semiBold": "DarkerGrotesque-SemiBold",
+      "light": "RebondGrotesque-Light",
+      "regular": "RebondGrotesque-Regular",
+      "semiBold": "RebondGrotesque-SemiBold",
     },
   },
   "lineHeights": Object {
+    "7xlarge": 50,
     "large": 24,
     "medium": 22,
     "small": 20,

package/src/theme/components/avatar.ts

@@ -7,7 +7,7 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     danger: theme.colors.error,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    text: theme.colors.invertedText,
+    text: theme.colors.onDarkGlobalSurface,
   };
 
   const sizes = {

package/src/theme/components/bottomSheet.ts

@@ -4,7 +4,7 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
   const colors = {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.darkGlobalSurface,
+    backdrop: theme.colors.overlayGlobalSurface,
   };
 
   const sizes = {
@@ -16,14 +16,14 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
     headerWrapperVerticalPadding: theme.space.small,
     headerWrapperHorizontalPadding: theme.space.medium,
     closeIconMargin: theme.space.smallMedium,
-    footerVerticalPadding: theme.space.small,
-    footerHorizontalPadding: theme.space.smallMedium,
+    footerVerticalPadding: theme.space.medium,
+    footerHorizontalPadding: theme.space.large,
   };
 
   const shadows = {
     offset: { width: 0, height: 3 },
-    opacity: 0.27,
-    radius: 4.65,
+    opacity: 0.4,
+    radius: theme.radii.xlarge,
     elevation: 10,
   };
 

package/src/theme/components/empty.ts

@@ -14,17 +14,18 @@ const getEmptyTheme = (theme: GlobalTheme) => {
   const colors = {
     text: theme.colors.onDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    subduedText: theme.colors.disabledOnDefaultGlobalSurface,
+    subduedText: theme.colors.mutedOnDefaultGlobalSurface,
+    invertedSubduedText: theme.colors.onDarkGlobalSurface,
   };
 
   const fontSizes = {
-    title: theme.fontSizes.xxxxlarge,
-    description: theme.fontSizes.large,
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge,
   };
 
   const fonts = {
-    title: theme.fonts.neutral.semiBold,
-    description: theme.fonts.neutral.light,
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular,
   };
 
   return { fontSizes, colors, sizes, space, fonts };

package/src/theme/components/fab.ts

@@ -6,7 +6,7 @@ const getFABTheme = (theme: GlobalTheme) => {
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDarkGlobalSurface,
     actionItemBackground: theme.colors.primary,
-    backdropBackground: theme.colors.darkGlobalSurface,
+    backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onDarkGlobalSurface,
     actionItemText: theme.colors.onPrimary,
   };

package/src/theme/components/select.ts

@@ -9,10 +9,12 @@ const getSelectTheme = (theme: GlobalTheme) => {
     minimumOptionListHeight: theme.space.xxxxlarge * 5,
     sectionSpacing: theme.space.smallMedium,
     optionSpacing: theme.space.xsmall,
-    optionHorizontalMargin: theme.space.smallMedium,
+    optionListHorizontalPadding: theme.space.smallMedium,
     searchBarMarginTopSpacing: theme.space.small,
     searchBarHorizontalSpacing: theme.space.medium,
     searchBarBottomSpacing: theme.space.small,
+    singleSelectContentPaddingBottom: theme.space.medium,
+    suffixMarginRight: theme.space.smallMedium,
   };
 
   const radii = {

package/src/theme/components/typography.ts

@@ -20,6 +20,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: theme.fontSizes.xlarge,
     xxxlarge: theme.fontSizes.xxxlarge,
     xxxxxlarge: theme.fontSizes.xxxxxlarge,
+    '7xlarge': theme.fontSizes['7xlarge'],
   };
 
   const lineHeights = {
@@ -29,6 +30,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: theme.lineHeights.xlarge,
     xxxlarge: theme.lineHeights.xxxlarge,
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
+    '7xlarge': theme.lineHeights['7xlarge'],
   };
 
   return { colors, fonts: theme.fonts, fontSizes, lineHeights };

package/src/theme/global/colors/global.ts

@@ -12,6 +12,7 @@ const globalPalette: GlobalSystemPalette = {
   disabledOnDefaultGlobalSurface: palette.greyLight30,
   darkGlobalSurface: palette.maasstrichtBlue,
   onDarkGlobalSurface: palette.white,
+  overlayGlobalSurface: palette.black,
 
   // Outlines
   primaryOutline: palette.maasstrichtBlue,

package/src/theme/global/colors/types.ts

@@ -9,6 +9,7 @@ export type GlobalSystemPalette = {
   disabledOnDefaultGlobalSurface: string;
   darkGlobalSurface: string;
   onDarkGlobalSurface: string;
+  overlayGlobalSurface: string;
 
   // Outlines
   primaryOutline: string;

package/src/theme/global/scale.ts

@@ -5,7 +5,7 @@ const BASE_SPACE = 8;
 const BASE_SIZE = 8;
 
 const NEUTRAL_FONT = 'BeVietnamPro';
-const PLAYFUL_FONT = 'DarkerGrotesque';
+const PLAYFUL_FONT = 'RebondGrotesque';
 
 const BASE_FONT_SIZE = 10;
 

package/src/theme/global/typography.ts

@@ -12,6 +12,7 @@ interface Fonts {
 }
 
 interface FontSizes {
+  '7xlarge': number;
   xxxxxlarge: number;
   xxxxlarge: number;
   xxxlarge: number;
@@ -50,7 +51,7 @@ const getFonts = ({
 });
 
 const getFontSizes = (baseFontSize: number): FontSizes => {
-  const fontSizes = Array.from(new Array(9));
+  const fontSizes = Array.from(new Array(11));
   fontSizes.forEach((_, index) => {
     if (index === 0) {
       fontSizes[0] = baseFontSize;
@@ -60,6 +61,7 @@ const getFontSizes = (baseFontSize: number): FontSizes => {
     return undefined;
   });
   return {
+    '7xlarge': scale(fontSizes[10]), // 42
     xxxxxlarge: scale(fontSizes[8]), // 32
     xxxxlarge: scale(fontSizes[7]), //  28
     xxxlarge: scale(fontSizes[6]), //   24
@@ -75,6 +77,7 @@ const getFontSizes = (baseFontSize: number): FontSizes => {
 const getLineHeights = (fontSizes: FontSizes): LineHeights => {
   const additionalSpace = 8;
   return {
+    '7xlarge': fontSizes['7xlarge'] + additionalSpace,
     xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
     xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
     xxxlarge: fontSizes.xxxlarge + additionalSpace,

package/src/utils/hooks.ts

@@ -22,6 +22,8 @@ export function usePropsOrInternalState<T>(
 export const useDeprecation = (message: string, cond = true) => {
   useEffect(() => {
     // eslint-disable-next-line no-console
-    console.warn(message);
+    if (cond) {
+      console.warn(message);
+    }
   }, [message, cond]);
 };