@hero-design/rn 7.9.0 → 7.10.2-rc.0

package/src/components/Icon/IconList.ts

@@ -94,6 +94,8 @@ const IconList = [
   'loading-2',
   'location',
   'lock',
+  'looks-one',
+  'looks-two',
   'media-content',
   'menu',
   'moneybag',

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

@@ -20,34 +20,54 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
   }
 >
   <View
+    pointerEvents="auto"
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "flexDirection": "row",
-          "padding": 16,
-          "position": "relative",
+          "marginVertical": 8,
           "width": "100%",
         },
         undefined,
       ]
     }
   >
-    <Text
+    <View
       style={
         Array [
           Object {
-            "color": "#292a2b",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 12,
-            "letterSpacing": 0.36,
-            "lineHeight": 20,
+            "alignItems": "center",
+            "flexDirection": "row",
+            "padding": 16,
           },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#8b8d92",
+              "borderRadius": 8,
+              "borderWidth": 1,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            undefined,
+          ]
+        }
+        themeVariant="readonly"
+      />
+      <View
+        pointerEvents="none"
+        style={
           Array [
             Object {
               "backgroundColor": "#ffffff",
+              "flexDirection": "row",
               "left": 16,
               "paddingHorizontal": 4,
               "position": "absolute",
@@ -55,49 +75,106 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
               "zIndex": 1,
             },
             undefined,
-          ],
-        ]
-      }
-      testID="input-label"
-      themeFontSize="small"
-      themeFontWeight="regular"
-      themeIntent="body"
-    >
-      Allow notifications
-    </Text>
-    <TextInput
-      editable={false}
-      multiline={true}
-      onPressIn={[Function]}
+          ]
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 12,
+                "letterSpacing": 0.36,
+                "lineHeight": 20,
+              },
+              Array [
+                Object {
+                  "color": "#8b8d92",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-label"
+          themeFontSize="small"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeVariant="readonly"
+        >
+          Allow notifications
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flexDirection": "row",
+              "flexGrow": 2,
+            },
+            undefined,
+          ]
+        }
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          editable={false}
+          multiline={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          onFocus={[Function]}
+          onPressIn={[Function]}
+          style={
+            Array [
+              Object {
+                "alignSelf": "stretch",
+                "flexGrow": 2,
+                "fontSize": 14,
+                "marginHorizontal": 8,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "color": "#292a2b",
+              },
+            ]
+          }
+          testID="text-input"
+          value="Monday, Tuesday"
+        />
+      </View>
+      <HeroIcon
+        name="arrow-down"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="input-suffix"
+        themeIntent="text"
+        themeSize="xsmall"
+      />
+    </View>
+    <View
       style={
         Array [
           Object {
             "flex": 1,
-            "fontSize": 16,
-            "marginHorizontal": 8,
-          },
-          Object {
-            "color": "#292a2b",
-          },
-        ]
-      }
-      testID="text-input"
-      value="Monday, Tuesday"
-    />
-    <HeroIcon
-      name="arrow-down"
-      style={
-        Array [
-          Object {
-            "color": "#292a2b",
-            "fontSize": 16,
+            "flexDirection": "row",
+            "justifyContent": "space-between",
           },
           undefined,
         ]
       }
-      testID="input-suffix"
-      themeIntent="text"
-      themeSize="xsmall"
     />
   </View>
   <Modal
@@ -844,34 +921,54 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
   }
 >
   <View
+    pointerEvents="auto"
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "flexDirection": "row",
-          "padding": 16,
-          "position": "relative",
+          "marginVertical": 8,
           "width": "100%",
         },
         undefined,
       ]
     }
   >
-    <Text
+    <View
       style={
         Array [
           Object {
-            "color": "#292a2b",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 12,
-            "letterSpacing": 0.36,
-            "lineHeight": 20,
+            "alignItems": "center",
+            "flexDirection": "row",
+            "padding": 16,
           },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#8b8d92",
+              "borderRadius": 8,
+              "borderWidth": 1,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            undefined,
+          ]
+        }
+        themeVariant="readonly"
+      />
+      <View
+        pointerEvents="none"
+        style={
           Array [
             Object {
               "backgroundColor": "#ffffff",
+              "flexDirection": "row",
               "left": 16,
               "paddingHorizontal": 4,
               "position": "absolute",
@@ -879,49 +976,106 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               "zIndex": 1,
             },
             undefined,
-          ],
-        ]
-      }
-      testID="input-label"
-      themeFontSize="small"
-      themeFontWeight="regular"
-      themeIntent="body"
-    >
-      Allow notifications
-    </Text>
-    <TextInput
-      editable={false}
-      multiline={true}
-      onPressIn={[Function]}
+          ]
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 12,
+                "letterSpacing": 0.36,
+                "lineHeight": 20,
+              },
+              Array [
+                Object {
+                  "color": "#8b8d92",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-label"
+          themeFontSize="small"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeVariant="readonly"
+        >
+          Allow notifications
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flexDirection": "row",
+              "flexGrow": 2,
+            },
+            undefined,
+          ]
+        }
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          editable={false}
+          multiline={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          onFocus={[Function]}
+          onPressIn={[Function]}
+          style={
+            Array [
+              Object {
+                "alignSelf": "stretch",
+                "flexGrow": 2,
+                "fontSize": 14,
+                "marginHorizontal": 8,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "color": "#292a2b",
+              },
+            ]
+          }
+          testID="text-input"
+          value="Monday, Tuesday"
+        />
+      </View>
+      <HeroIcon
+        name="arrow-down"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="input-suffix"
+        themeIntent="text"
+        themeSize="xsmall"
+      />
+    </View>
+    <View
       style={
         Array [
           Object {
             "flex": 1,
-            "fontSize": 16,
-            "marginHorizontal": 8,
-          },
-          Object {
-            "color": "#292a2b",
-          },
-        ]
-      }
-      testID="text-input"
-      value="Monday, Tuesday"
-    />
-    <HeroIcon
-      name="arrow-down"
-      style={
-        Array [
-          Object {
-            "color": "#292a2b",
-            "fontSize": 16,
+            "flexDirection": "row",
+            "justifyContent": "space-between",
           },
           undefined,
         ]
       }
-      testID="input-suffix"
-      themeIntent="text"
-      themeSize="xsmall"
     />
   </View>
   <Modal