@hero-design/rn 8.35.0-alpha.4 → 8.35.0

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

@@ -1,14 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Tag renders correctly when variant is filled and intent is danger 1`] = `
+exports[`Tag renders correctly when intent is danger 1`] = `
 <View
   style={
     Array [
       Object {
         "backgroundColor": "#fcebe7",
-        "borderColor": "#fcebe7",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
@@ -16,7 +14,6 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
     ]
   }
   themeIntent="danger"
-  themeVariant="filled"
 >
   <Text
     allowFontScaling={false}
@@ -31,7 +28,7 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -42,30 +39,26 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="filled"
   >
     DANGER
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
+exports[`Tag renders correctly when intent is danger 2`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#ecf0ff",
-        "borderColor": "#ecf0ff",
+        "backgroundColor": "#fcebe7",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="info"
-  themeVariant="filled"
+  themeIntent="danger"
 >
   <Text
     allowFontScaling={false}
@@ -80,7 +73,7 @@ exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
         },
         Array [
           Object {
-            "color": "#4568fb",
+            "color": "#cb300a",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -91,30 +84,26 @@ exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="filled"
   >
-    INFO
+    DANGER
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is filled and intent is primary 1`] = `
+exports[`Tag renders correctly when intent is info 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": undefined,
-        "borderColor": undefined,
+        "backgroundColor": "#ecf0ff",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="primary"
-  themeVariant="filled"
+  themeIntent="info"
 >
   <Text
     allowFontScaling={false}
@@ -129,7 +118,7 @@ exports[`Tag renders correctly when variant is filled and intent is primary 1`]
         },
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#355bfb",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -140,30 +129,26 @@ exports[`Tag renders correctly when variant is filled and intent is primary 1`]
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="filled"
   >
-    PRIMARY
+    INFO
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is filled and intent is warning 1`] = `
+exports[`Tag renders correctly when intent is info 2`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#fff6eb",
-        "borderColor": "#fff6eb",
+        "backgroundColor": "#ecf0ff",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="warning"
-  themeVariant="filled"
+  themeIntent="info"
 >
   <Text
     allowFontScaling={false}
@@ -178,7 +163,7 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
         },
         Array [
           Object {
-            "color": "#ffa234",
+            "color": "#355bfb",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -189,30 +174,26 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="filled"
   >
-    WARNING
+    INFO
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is danger 1`] = `
+exports[`Tag renders correctly when intent is primary 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#fcebe7",
-        "borderColor": "#de350b",
+        "backgroundColor": "#ece8ef",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="danger"
-  themeVariant="outlined"
+  themeIntent="primary"
 >
   <Text
     allowFontScaling={false}
@@ -227,7 +208,7 @@ exports[`Tag renders correctly when variant is outlined and intent is danger 1`]
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#401960",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -238,30 +219,26 @@ exports[`Tag renders correctly when variant is outlined and intent is danger 1`]
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
-    DANGER
+    PRIMARY
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is info 1`] = `
+exports[`Tag renders correctly when intent is primary 2`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#ecf0ff",
-        "borderColor": "#4568fb",
+        "backgroundColor": "#ece8ef",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="info"
-  themeVariant="outlined"
+  themeIntent="primary"
 >
   <Text
     allowFontScaling={false}
@@ -276,7 +253,7 @@ exports[`Tag renders correctly when variant is outlined and intent is info 1`] =
         },
         Array [
           Object {
-            "color": "#4568fb",
+            "color": "#401960",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -287,30 +264,26 @@ exports[`Tag renders correctly when variant is outlined and intent is info 1`] =
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
-    INFO
+    PRIMARY
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is primary 1`] = `
+exports[`Tag renders correctly when intent is success 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": undefined,
-        "borderColor": "#001f23",
+        "backgroundColor": "#f0fef4",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="primary"
-  themeVariant="outlined"
+  themeIntent="success"
 >
   <Text
     allowFontScaling={false}
@@ -325,7 +298,7 @@ exports[`Tag renders correctly when variant is outlined and intent is primary 1`
         },
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#017d6d",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -336,30 +309,26 @@ exports[`Tag renders correctly when variant is outlined and intent is primary 1`
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
-    PRIMARY
+    SUCCESS
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is success 1`] = `
+exports[`Tag renders correctly when intent is warning 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#f0fef4",
-        "borderColor": "#017d6d",
+        "backgroundColor": "#fff6eb",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="success"
-  themeVariant="outlined"
+  themeIntent="warning"
 >
   <Text
     allowFontScaling={false}
@@ -374,7 +343,7 @@ exports[`Tag renders correctly when variant is outlined and intent is success 1`
         },
         Array [
           Object {
-            "color": "#017d6d",
+            "color": "#ac5d00",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -385,22 +354,19 @@ exports[`Tag renders correctly when variant is outlined and intent is success 1`
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
-    SUCCESS
+    WARNING
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is warning 1`] = `
+exports[`Tag renders correctly when intent is warning 2`] = `
 <View
   style={
     Array [
       Object {
         "backgroundColor": "#fff6eb",
-        "borderColor": "#ffa234",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
@@ -408,7 +374,6 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
     ]
   }
   themeIntent="warning"
-  themeVariant="outlined"
 >
   <Text
     allowFontScaling={false}
@@ -423,7 +388,7 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
         },
         Array [
           Object {
-            "color": "#ffa234",
+            "color": "#ac5d00",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -434,7 +399,6 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
     WARNING
   </Text>
@@ -446,10 +410,8 @@ exports[`Tag renders correctly with custom content 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": undefined,
-        "borderColor": "#001f23",
+        "backgroundColor": "#ece8ef",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
@@ -457,7 +419,6 @@ exports[`Tag renders correctly with custom content 1`] = `
     ]
   }
   themeIntent="primary"
-  themeVariant="outlined"
 >
   <Text
     allowFontScaling={false}

package/src/components/Tag/index.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { StyledText, StyledView } from './StyledTag';
+import { useDeprecation } from '../../utils/hooks';
 
 interface TagProps extends ViewProps {
   /**
@@ -12,6 +13,7 @@ interface TagProps extends ViewProps {
    */
   intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
   /**
+   * @deprecated Tag variant prop is deprecated and will be removed in the next major release. Please remove it.
    * Tag variant.
    */
   variant?: 'filled' | 'outlined';
@@ -33,20 +35,20 @@ const Tag = ({
   testID,
   ...nativeProps
 }: TagProps): JSX.Element => {
+  useDeprecation(
+    `Tag's variant prop is deprecated and will be removed in the next major release. Please remove it.`,
+    variant !== undefined
+  );
+
   return (
     <StyledView
       {...nativeProps}
       themeIntent={intent}
-      themeVariant={variant}
       style={style}
       testID={testID}
     >
       {typeof content === 'string' ? (
-        <StyledText
-          themeIntent={intent}
-          themeVariant={variant}
-          fontWeight="semi-bold"
-        >
+        <StyledText themeIntent={intent} fontWeight="semi-bold">
           {content}
         </StyledText>
       ) : (

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

@@ -343,7 +343,7 @@ exports[`StyledAsteriskLabel renders correctly with themeState default 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "lineHeight": 12,
         },
         undefined,
@@ -401,7 +401,7 @@ exports[`StyledAsteriskLabel renders correctly with themeState error 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "lineHeight": 12,
         },
         undefined,
@@ -430,7 +430,7 @@ exports[`StyledAsteriskLabel renders correctly with themeState filled 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "lineHeight": 12,
         },
         undefined,
@@ -479,7 +479,7 @@ exports[`StyledBorderBackDrop renders correctly when focused 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 2,
         "bottom": 0,
@@ -545,7 +545,7 @@ exports[`StyledBorderBackDrop renders correctly with themeState error 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 1,
         "bottom": 0,
@@ -620,7 +620,7 @@ exports[`StyledErrorMessage renders correctly 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "marginLeft": 4,
         },
         undefined,
@@ -763,7 +763,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeState error 1`] = `
       Array [
         Object {
           "alignSelf": "flex-end",
-          "color": "#de350b",
+          "color": "#cb300a",
           "flex": 1,
           "flexGrow": 1,
           "marginRight": 4,

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

@@ -85,7 +85,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -360,7 +360,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -634,7 +634,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -1062,7 +1062,7 @@ exports[`TextInput error renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -1144,7 +1144,7 @@ exports[`TextInput error renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],
@@ -1267,7 +1267,7 @@ exports[`TextInput error renders correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "fontSize": 16,
               },
               undefined,
@@ -1290,7 +1290,7 @@ exports[`TextInput error renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                   "marginLeft": 4,
                 },
                 undefined,
@@ -1632,7 +1632,7 @@ exports[`TextInput helper text renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],
@@ -2086,7 +2086,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],
@@ -2415,7 +2415,7 @@ exports[`TextInput max length renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -2469,7 +2469,7 @@ exports[`TextInput max length renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -2607,7 +2607,7 @@ exports[`TextInput max length renders correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "fontSize": 16,
               },
               undefined,
@@ -2630,7 +2630,7 @@ exports[`TextInput max length renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                   "marginLeft": 4,
                 },
                 undefined,
@@ -2658,7 +2658,7 @@ exports[`TextInput max length renders correctly 1`] = `
             Array [
               Object {
                 "alignSelf": "flex-end",
-                "color": "#de350b",
+                "color": "#cb300a",
                 "flex": 1,
                 "flexGrow": 1,
                 "marginRight": 4,
@@ -2712,7 +2712,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
       style={
         Array [
           Object {
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -2766,7 +2766,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -2904,7 +2904,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
           style={
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "fontSize": 16,
               },
               undefined,
@@ -2927,7 +2927,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                   "marginLeft": 4,
                 },
                 undefined,
@@ -3059,7 +3059,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],
@@ -3716,7 +3716,7 @@ exports[`TextInput required renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -174,7 +174,7 @@ exports[`ToolbarItems renders correctly when intent is info, icon is undefined,
     style={
       Array [
         Object {
-          "color": "#4568fb",
+          "color": "#355bfb",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 16,
           "letterSpacing": 0.24,