@hero-design/rn 8.1.0 → 8.2.1

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

@@ -163,6 +163,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
               "alignSelf": "stretch",
               "flexGrow": 2,
               "fontSize": 14,
+              "lineHeight": 18,
               "marginHorizontal": 8,
               "paddingVertical": 0,
               "textAlignVertical": "center",
@@ -424,6 +425,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
               "alignSelf": "stretch",
               "flexGrow": 2,
               "fontSize": 14,
+              "lineHeight": 18,
               "marginHorizontal": 8,
               "paddingVertical": 0,
               "textAlignVertical": "center",
@@ -670,6 +672,7 @@ exports[`TextInput disabled renders correctly 1`] = `
               "alignSelf": "stretch",
               "flexGrow": 2,
               "fontSize": 14,
+              "lineHeight": 18,
               "marginHorizontal": 8,
               "paddingVertical": 0,
               "textAlignVertical": "center",
@@ -843,6 +846,7 @@ exports[`TextInput error renders correctly 1`] = `
                   "alignItems": "center",
                   "color": "#001f23",
                   "fontSize": 14,
+                  "lineHeight": 18,
                   "textAlignVertical": "center",
                 },
                 undefined,
@@ -876,6 +880,7 @@ exports[`TextInput error renders correctly 1`] = `
               "alignSelf": "stretch",
               "flexGrow": 2,
               "fontSize": 14,
+              "lineHeight": 18,
               "marginHorizontal": 8,
               "paddingVertical": 0,
               "textAlignVertical": "center",
@@ -1108,6 +1113,7 @@ exports[`TextInput filled renders correctly 1`] = `
               "alignSelf": "stretch",
               "flexGrow": 2,
               "fontSize": 14,
+              "lineHeight": 18,
               "marginHorizontal": 8,
               "paddingVertical": 0,
               "textAlignVertical": "center",
@@ -1296,6 +1302,7 @@ exports[`TextInput helper text renders correctly 1`] = `
                   "alignItems": "center",
                   "color": "#001f23",
                   "fontSize": 14,
+                  "lineHeight": 18,
                   "textAlignVertical": "center",
                 },
                 undefined,
@@ -1329,6 +1336,7 @@ exports[`TextInput helper text renders correctly 1`] = `
               "alignSelf": "stretch",
               "flexGrow": 2,
               "fontSize": 14,
+              "lineHeight": 18,
               "marginHorizontal": 8,
               "paddingVertical": 0,
               "textAlignVertical": "center",
@@ -1502,6 +1510,7 @@ exports[`TextInput idle renders correctly 1`] = `
                   "alignItems": "center",
                   "color": "#001f23",
                   "fontSize": 14,
+                  "lineHeight": 18,
                   "textAlignVertical": "center",
                 },
                 undefined,
@@ -1535,6 +1544,7 @@ exports[`TextInput idle renders correctly 1`] = `
               "alignSelf": "stretch",
               "flexGrow": 2,
               "fontSize": 14,
+              "lineHeight": 18,
               "marginHorizontal": 8,
               "paddingVertical": 0,
               "textAlignVertical": "center",
@@ -1722,6 +1732,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
                   "alignItems": "center",
                   "color": "#001f23",
                   "fontSize": 14,
+                  "lineHeight": 18,
                   "textAlignVertical": "center",
                 },
                 undefined,
@@ -1755,6 +1766,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
               "alignSelf": "stretch",
               "flexGrow": 2,
               "fontSize": 14,
+              "lineHeight": 18,
               "marginHorizontal": 8,
               "paddingVertical": 0,
               "textAlignVertical": "center",
@@ -1900,6 +1912,7 @@ exports[`TextInput loading renders correctly 1`] = `
               "alignSelf": "stretch",
               "flexGrow": 2,
               "fontSize": 14,
+              "lineHeight": 18,
               "marginHorizontal": 8,
               "paddingVertical": 0,
               "textAlignVertical": "center",
@@ -1914,7 +1927,6 @@ exports[`TextInput loading renders correctly 1`] = `
     </View>
     <View
       collapsable={false}
-      nativeID="animatedComponent"
       style={
         Object {
           "transform": Array [
@@ -2115,6 +2127,7 @@ exports[`TextInput max length renders correctly 1`] = `
               "alignSelf": "stretch",
               "flexGrow": 2,
               "fontSize": 14,
+              "lineHeight": 18,
               "marginHorizontal": 8,
               "paddingVertical": 0,
               "textAlignVertical": "center",
@@ -2381,6 +2394,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
                   "alignItems": "center",
                   "color": "#001f23",
                   "fontSize": 14,
+                  "lineHeight": 18,
                   "textAlignVertical": "center",
                 },
                 undefined,
@@ -2414,6 +2428,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
               "alignSelf": "stretch",
               "flexGrow": 2,
               "fontSize": 14,
+              "lineHeight": 18,
               "marginHorizontal": 8,
               "paddingVertical": 0,
               "textAlignVertical": "center",
@@ -2638,6 +2653,7 @@ exports[`TextInput readonly renders correctly 1`] = `
               "alignSelf": "stretch",
               "flexGrow": 2,
               "fontSize": 14,
+              "lineHeight": 18,
               "marginHorizontal": 8,
               "paddingVertical": 0,
               "textAlignVertical": "center",
@@ -2826,6 +2842,7 @@ exports[`TextInput required renders correctly 1`] = `
                   "alignItems": "center",
                   "color": "#001f23",
                   "fontSize": 14,
+                  "lineHeight": 18,
                   "textAlignVertical": "center",
                 },
                 undefined,
@@ -2859,6 +2876,7 @@ exports[`TextInput required renders correctly 1`] = `
               "alignSelf": "stretch",
               "flexGrow": 2,
               "fontSize": 14,
+              "lineHeight": 18,
               "marginHorizontal": 8,
               "paddingVertical": 0,
               "textAlignVertical": "center",

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

@@ -2,10 +2,14 @@
 
 exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -142,6 +146,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
                   "alignSelf": "stretch",
                   "flexGrow": 2,
                   "fontSize": 14,
+                  "lineHeight": 18,
                   "marginHorizontal": 8,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
@@ -210,7 +215,13 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
 
 exports[`TimePickerAndroid renders correctly 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
+  collapsable={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -348,6 +359,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                   "alignSelf": "stretch",
                   "flexGrow": 2,
                   "fontSize": 14,
+                  "lineHeight": 18,
                   "marginHorizontal": 8,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",

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

@@ -2,10 +2,14 @@
 
 exports[`TimePickerIOS renders correct with hide suffix 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -142,6 +146,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
                   "alignSelf": "stretch",
                   "flexGrow": 2,
                   "fontSize": 14,
+                  "lineHeight": 18,
                   "marginHorizontal": 8,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
@@ -210,7 +215,13 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
 
 exports[`TimePickerIOS renders correctly 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
+  collapsable={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -348,6 +359,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   "alignSelf": "stretch",
                   "flexGrow": 2,
                   "fontSize": 14,
+                  "lineHeight": 18,
                   "marginHorizontal": 8,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
@@ -405,6 +417,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
     animationType="none"
     hardwareAccelerated={false}
     identifier={0}
+    onDismiss={[Function]}
     onRequestClose={[Function]}
     onStartShouldSetResponder={[Function]}
     presentationStyle="overFullScreen"
@@ -414,6 +427,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
       }
     }
     transparent={true}
+    visible={true}
   >
     <View
       collapsable={false}
@@ -484,7 +498,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 accessible={true}
                 collapsable={false}
                 focusable={true}
-                nativeID="animatedComponent"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -509,7 +522,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
               <RCTSafeAreaView
                 collapsable={false}
                 emulateUnlessSupported={true}
-                nativeID="animatedComponent"
                 style={
                   Object {
                     "backgroundColor": "#ffffff",
@@ -598,7 +610,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       accessible={true}
                       collapsable={false}
                       focusable={true}
-                      nativeID="animatedComponent"
                       onClick={[Function]}
                       onResponderGrant={[Function]}
                       onResponderMove={[Function]}
@@ -693,10 +704,14 @@ exports[`TimePickerIOS renders correctly 1`] = `
                     }
                   >
                     <View
+                      accessibilityState={
+                        Object {
+                          "disabled": false,
+                        }
+                      }
                       accessible={true}
                       collapsable={false}
                       focusable={true}
-                      nativeID="animatedComponent"
                       onClick={[Function]}
                       onResponderGrant={[Function]}
                       onResponderMove={[Function]}

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

@@ -3,7 +3,6 @@
 exports[`Toast Icon render custom icon correctly 1`] = `
 <View
   collapsable={false}
-  nativeID="animatedComponent"
   style={
     Object {
       "backgroundColor": "#b5c3fd",
@@ -110,7 +109,6 @@ exports[`Toast Icon render custom icon correctly 1`] = `
 exports[`Toast renders correctly when intent is error 1`] = `
 <View
   collapsable={false}
-  nativeID="animatedComponent"
   style={
     Object {
       "backgroundColor": "#f46363",
@@ -215,7 +213,6 @@ exports[`Toast renders correctly when intent is error 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -259,7 +256,6 @@ exports[`Toast renders correctly when intent is error 1`] = `
 exports[`Toast renders correctly when intent is info 1`] = `
 <View
   collapsable={false}
-  nativeID="animatedComponent"
   style={
     Object {
       "backgroundColor": "#b5c3fd",
@@ -364,7 +360,6 @@ exports[`Toast renders correctly when intent is info 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -408,7 +403,6 @@ exports[`Toast renders correctly when intent is info 1`] = `
 exports[`Toast renders correctly when intent is notification 1`] = `
 <View
   collapsable={false}
-  nativeID="animatedComponent"
   style={
     Object {
       "backgroundColor": "#ffffff",
@@ -486,7 +480,6 @@ exports[`Toast renders correctly when intent is notification 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -530,7 +523,6 @@ exports[`Toast renders correctly when intent is notification 1`] = `
 exports[`Toast renders correctly when intent is snackbar 1`] = `
 <View
   collapsable={false}
-  nativeID="animatedComponent"
   style={
     Object {
       "backgroundColor": "#001f23",
@@ -608,7 +600,6 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -652,7 +643,6 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
 exports[`Toast renders correctly when intent is success 1`] = `
 <View
   collapsable={false}
-  nativeID="animatedComponent"
   style={
     Object {
       "backgroundColor": "#5ace7d",
@@ -757,7 +747,6 @@ exports[`Toast renders correctly when intent is success 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -801,7 +790,6 @@ exports[`Toast renders correctly when intent is success 1`] = `
 exports[`Toast renders correctly when intent is warning 1`] = `
 <View
   collapsable={false}
-  nativeID="animatedComponent"
   style={
     Object {
       "backgroundColor": "#ffbe71",
@@ -906,7 +894,6 @@ exports[`Toast renders correctly when intent is warning 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}

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

@@ -16,10 +16,14 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
   }
 >
   <View
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -73,10 +77,14 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
     </Text>
   </View>
   <View
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -148,10 +156,14 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
   }
 >
   <View
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -205,10 +217,14 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
     </Text>
   </View>
   <View
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -280,10 +296,14 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
   }
 >
   <View
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -337,10 +357,14 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
     </Text>
   </View>
   <View
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}

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

@@ -2,10 +2,14 @@
 
 exports[`ToolbarItems renders correctly when disabled 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -62,10 +66,14 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
 
 exports[`ToolbarItems renders correctly when intent is danger 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -122,10 +130,14 @@ exports[`ToolbarItems renders correctly when intent is danger 1`] = `
 
 exports[`ToolbarItems renders correctly when intent is info 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -182,10 +194,14 @@ exports[`ToolbarItems renders correctly when intent is info 1`] = `
 
 exports[`ToolbarItems renders correctly when intent is primary 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -242,10 +258,14 @@ exports[`ToolbarItems renders correctly when intent is primary 1`] = `
 
 exports[`ToolbarItems renders correctly when intent is success 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -302,10 +322,14 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
 
 exports[`ToolbarItems renders correctly when intent is warning 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}

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

@@ -803,6 +803,10 @@ Object {
         "maxLength": 12,
         "text": 14,
       },
+      "lineHeights": Object {
+        "labelInsideTextInput": 18,
+        "text": 18,
+      },
       "radii": Object {
         "container": 8,
       },

package/src/theme/components/textInput.ts

@@ -64,6 +64,11 @@ const getTextInputTheme = (theme: GlobalTheme) => {
     asteriskLabel: theme.fontSizes.medium,
   };
 
+  const lineHeights = {
+    text: theme.lineHeights.xsmall,
+    labelInsideTextInput: theme.lineHeights.xsmall,
+  };
+
   const borderWidths = {
     container: {
       normal: theme.borderWidths.base,
@@ -75,7 +80,7 @@ const getTextInputTheme = (theme: GlobalTheme) => {
     container: theme.radii.medium,
   };
 
-  return { colors, space, fontSizes, borderWidths, radii };
+  return { colors, space, fontSizes, borderWidths, radii, lineHeights };
 };
 
 export default getTextInputTheme;

package/types/components/Alert/StyledAlert.d.ts

@@ -4,6 +4,7 @@ declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
+    themeVariant: 'rounded' | 'unrounded';
     themeIntent: 'success' | 'info' | 'warning' | 'error' | 'notification';
 }, {}, {
     ref?: import("react").Ref<View> | undefined;

package/types/components/Alert/index.d.ts

@@ -25,6 +25,10 @@ interface AlertProps {
      * Closing callback. When onClose is available, an X button will be rendered on the right side of alert. The callback will be called when user clicks on X button.
      */
     onClose?: () => void;
+    /**
+     * Alert variant.
+     */
+    variant?: 'unrounded' | 'rounded';
     /**
      * Addtional style.
      */
@@ -34,5 +38,5 @@ interface AlertProps {
      */
     testID?: string;
 }
-declare const Alert: ({ content, icon, title, intent, onClose, style, testID, }: AlertProps) => JSX.Element;
+declare const Alert: ({ content, icon, title, intent, onClose, variant, style, testID, }: AlertProps) => JSX.Element;
 export default Alert;

package/types/theme/components/textInput.d.ts

@@ -69,5 +69,9 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
     radii: {
         container: number;
     };
+    lineHeights: {
+        text: number;
+        labelInsideTextInput: number;
+    };
 };
 export default getTextInputTheme;