@hero-design/rn 8.22.0 → 8.24.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.22.0",
+  "version": "8.24.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.22.0",
+    "@hero-design/colors": "8.23.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -45,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.22.0",
+    "@hero-design/eslint-plugin": "8.23.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,9 +61,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.22.0",
+    "eslint-config-hd": "8.23.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.22.0",
+    "prettier-config-hd": "8.23.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Alert/index.tsx

@@ -11,6 +11,7 @@ import {
   TextContainer,
 } from './StyledAlert';
 import type { IconName } from '../Icon';
+import { useDeprecation } from '../../utils/hooks';
 
 const getIntentIcon = (
   intent: 'success' | 'info' | 'warning' | 'error' | 'notification'
@@ -84,6 +85,11 @@ const Alert = ({
   style,
   testID,
 }: AlertProps): JSX.Element => {
+  useDeprecation(
+    `Alert's notification intent is deprecated and will be removed in the next major release. Please use other intents instead.`,
+    intent === 'notification'
+  );
+
   return (
     <Container
       themeVariant={variant}

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -76,7 +76,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -123,8 +123,8 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Start date
           </Text>
@@ -160,8 +160,11 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -172,6 +175,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="17/12/1995"
           />
         </View>
@@ -295,7 +299,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -342,8 +346,8 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Start date
           </Text>
@@ -379,8 +383,11 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -391,6 +398,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="17/12/1995"
           />
         </View>
@@ -520,7 +528,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -567,8 +575,8 @@ exports[`DatePicker renders variant Calendar 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Start date
           </Text>
@@ -604,8 +612,11 @@ exports[`DatePicker renders variant Calendar 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -616,6 +627,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="17/12/1995"
           />
         </View>

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -76,7 +76,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -123,8 +123,8 @@ exports[`DatePickerAndroid renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Start date
           </Text>
@@ -160,8 +160,11 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -172,6 +175,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="21/12/1995"
           />
         </View>

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -76,7 +76,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -123,8 +123,8 @@ exports[`DatePickerCalendar renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Start date
           </Text>
@@ -160,8 +160,11 @@ exports[`DatePickerCalendar renders correctly 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -172,6 +175,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="21/12/1995"
           />
         </View>

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -76,7 +76,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -123,8 +123,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Start date
           </Text>
@@ -160,8 +160,11 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -172,6 +175,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="21/12/1995"
           />
         </View>

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

@@ -32,7 +32,7 @@ exports[`Empty renders empty state content correctly 1`] = `
             "color": "#001f23",
             "fontFamily": "RebondGrotesque-SemiBold",
             "fontSize": 24,
-            "marginBottom": 16,
+            "marginBottom": 8,
             "textAlign": "center",
           },
           undefined,
@@ -127,7 +127,7 @@ exports[`Empty renders empty state with image correctly 1`] = `
             "color": "#001f23",
             "fontFamily": "RebondGrotesque-SemiBold",
             "fontSize": 24,
-            "marginBottom": 16,
+            "marginBottom": 8,
             "textAlign": "center",
           },
           undefined,

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

@@ -35,7 +35,7 @@ exports[`Error renders error screen with custom image element correctly 1`] = `
         Array [
           Object {
             "height": 176,
-            "marginBottom": 32,
+            "marginBottom": 24,
             "width": 176,
           },
           undefined,
@@ -159,7 +159,7 @@ exports[`Error renders error screen with image correctly 1`] = `
         Array [
           Object {
             "height": 176,
-            "marginBottom": 32,
+            "marginBottom": 24,
             "width": 176,
           },
           undefined,
@@ -182,7 +182,7 @@ exports[`Error renders error screen with image correctly 1`] = `
             Array [
               Object {
                 "height": 176,
-                "marginBottom": 32,
+                "marginBottom": 24,
                 "resizeMode": "contain",
                 "width": 176,
               },
@@ -307,7 +307,7 @@ exports[`Error renders full screen error page correctly 1`] = `
           Array [
             Object {
               "height": 176,
-              "marginBottom": 32,
+              "marginBottom": 24,
               "width": 176,
             },
             undefined,
@@ -330,7 +330,7 @@ exports[`Error renders full screen error page correctly 1`] = `
               Array [
                 Object {
                   "height": 176,
-                  "marginBottom": 32,
+                  "marginBottom": 24,
                   "resizeMode": "contain",
                   "width": 176,
                 },

package/src/components/List/ListItem.tsx

@@ -1,21 +1,21 @@
 import React, { ReactElement } from 'react';
 
-import { View } from 'react-native';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+import { useTheme } from '../../theme';
+import type { IconName } from '../Icon';
 import Icon from '../Icon';
 import Typography from '../Typography';
 import {
-  StyledListItemContainer,
   StyledChildrenContainer,
-  StyledLeadingStatus,
   StyledContentContainer,
+  StyledLeadingStatus,
+  StyledListItemContainer,
   StyledPrefixContainer,
   StyledSuffixContainer,
   StyledTitleContainer,
 } from './StyledListItem';
-import type { IconName } from '../Icon';
-import { useTheme } from '../../theme';
 
 export interface ListItemProps {
   /**
@@ -123,9 +123,13 @@ const ListItem = ({
               </StyledPrefixContainer>
             )}
             <StyledTitleContainer>
-              <Typography.Text intent="body" fontSize="large">
-                {title}
-              </Typography.Text>
+              {typeof title === 'string' ? (
+                <Typography.Text intent="body" fontSize="large">
+                  {title}
+                </Typography.Text>
+              ) : (
+                title
+              )}
               {!!subtitle && (
                 <Typography.Text intent="subdued" fontSize="small">
                   {subtitle}

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -134,7 +134,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
 
   const [isFocused, setIsFocused] = useState(false);
   const isEmptyValue = useMemo(() => isEmptyContent(value), [value]);
-  const variant = useMemo(() => {
+  const state = useMemo(() => {
     if (error) {
       return 'error';
     }
@@ -309,11 +309,11 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   return (
     <StyledContainer testID={testID}>
       <StyledTextInputContainer>
-        <StyledBorderBackDrop themeVariant={variant} themeFocused={isFocused} />
+        <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (
-              <StyledAsteriskLabel themeVariant={variant} fontSize="small">
+              <StyledAsteriskLabel themeState={state} fontSize="small">
                 *
               </StyledAsteriskLabel>
             )}
@@ -321,7 +321,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
               <StyledLabel
                 testID="input-label"
                 fontSize="small"
-                themeVariant={variant}
+                themeState={state}
               >
                 {label}
               </StyledLabel>
@@ -330,9 +330,12 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
         )}
         <StyledTextInputAndLabelContainer>
           {!isFocused && isEmptyValue && (
-            <StyledLabelContainerInsideTextInput pointerEvents="none">
+            <StyledLabelContainerInsideTextInput
+              themeVariant="text"
+              pointerEvents="none"
+            >
               {required && (
-                <StyledAsteriskLabelInsideTextInput themeVariant={variant}>
+                <StyledAsteriskLabelInsideTextInput themeState={state}>
                   *
                 </StyledAsteriskLabelInsideTextInput>
               )}
@@ -340,7 +343,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
                 <StyledLabelInsideTextInput
                   testID="input-label"
                   fontSize="medium"
-                  themeVariant={variant}
+                  themeState={state}
                 >
                   {label}
                 </StyledLabelInsideTextInput>

package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap

@@ -43,7 +43,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
         ]
       }
       themeFocused={false}
-      themeVariant="error"
+      themeState="error"
     />
     <View
       style={
@@ -76,6 +76,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
             undefined,
           ]
         }
+        themeVariant="text"
       >
         <Text
           allowFontScaling={false}
@@ -93,7 +94,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
                   "alignContent": "center",
                   "alignItems": "center",
                   "color": "#001f23",
-                  "fontSize": 14,
+                  "fontSize": 16,
                   "marginTop": -2,
                   "textAlignVertical": "center",
                 },
@@ -105,8 +106,8 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="error"
           themeTypeface="neutral"
-          themeVariant="error"
         >
           Rich Text Editor
         </Text>
@@ -169,7 +170,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           Array [
             Object {
               "backgroundColor": "transparent",
-              "fontSize": 14,
+              "fontSize": 16,
               "height": 480,
               "marginHorizontal": 8,
               "minHeight": 24,
@@ -313,7 +314,7 @@ exports[`RichTextEditor should render correctly 1`] = `
         ]
       }
       themeFocused={false}
-      themeVariant="error"
+      themeState="error"
     />
     <View
       style={
@@ -346,6 +347,7 @@ exports[`RichTextEditor should render correctly 1`] = `
             undefined,
           ]
         }
+        themeVariant="text"
       >
         <Text
           allowFontScaling={false}
@@ -363,7 +365,7 @@ exports[`RichTextEditor should render correctly 1`] = `
                   "alignContent": "center",
                   "alignItems": "center",
                   "color": "#001f23",
-                  "fontSize": 14,
+                  "fontSize": 16,
                   "marginTop": -2,
                   "textAlignVertical": "center",
                 },
@@ -375,8 +377,8 @@ exports[`RichTextEditor should render correctly 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="error"
           themeTypeface="neutral"
-          themeVariant="error"
         >
           Rich Text Editor
         </Text>
@@ -438,7 +440,7 @@ exports[`RichTextEditor should render correctly 1`] = `
           Array [
             Object {
               "backgroundColor": "transparent",
-              "fontSize": 14,
+              "fontSize": 16,
               "height": undefined,
               "marginHorizontal": 8,
               "minHeight": 24,