@hero-design/rn 8.71.0 → 8.72.0

package/src/components/Search/__tests__/__snapshots__/SearchOneLine.spec.tsx.snap

@@ -31,13 +31,14 @@ exports[`SearchOneLine disabled renders correctly 1`] = `
             "borderWidth": 2,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 8,
-            "paddingVertical": 8,
+            "paddingHorizontal": 6,
+            "paddingVertical": 6,
           },
           undefined,
         ]
       }
       themeFocused={false}
+      themeVariant="basic"
     >
       <View
         style={
@@ -176,13 +177,14 @@ exports[`SearchOneLine filled renders correctly 1`] = `
             "borderWidth": 2,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 8,
-            "paddingVertical": 8,
+            "paddingHorizontal": 6,
+            "paddingVertical": 6,
           },
           undefined,
         ]
       }
       themeFocused={false}
+      themeVariant="basic"
     >
       <View
         style={
@@ -320,13 +322,14 @@ exports[`SearchOneLine idle renders correctly 1`] = `
             "borderWidth": 2,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 8,
-            "paddingVertical": 8,
+            "paddingHorizontal": 6,
+            "paddingVertical": 6,
           },
           undefined,
         ]
       }
       themeFocused={false}
+      themeVariant="basic"
     >
       <View
         style={
@@ -463,13 +466,14 @@ exports[`SearchOneLine idle renders custom affix correctly 1`] = `
             "borderWidth": 2,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 8,
-            "paddingVertical": 8,
+            "paddingHorizontal": 6,
+            "paddingVertical": 6,
           },
           undefined,
         ]
       }
       themeFocused={false}
+      themeVariant="basic"
     >
       <Text
         allowFontScaling={false}
@@ -561,6 +565,157 @@ exports[`SearchOneLine idle renders custom affix correctly 1`] = `
 </View>
 `;
 
+exports[`SearchOneLine idle renders reserved variant correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    pointerEvents="auto"
+    style={
+      [
+        {
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+    testID="idle-search-text-input"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#ffffff",
+            "borderColor": "#e8e9ea",
+            "borderRadius": 999,
+            "borderWidth": 1,
+            "elevation": 3,
+            "flexDirection": "row",
+            "height": 56,
+            "paddingHorizontal": 7,
+            "paddingVertical": 7,
+            "shadowOffset": {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.12,
+            "shadowRadius": 4,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeVariant="reversed"
+    >
+      <View
+        style={
+          [
+            {
+              "paddingHorizontal": 4,
+            },
+            undefined,
+          ]
+        }
+      >
+        <HeroIcon
+          name="search-outlined"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 20,
+              },
+              undefined,
+            ]
+          }
+          testID="input-prefix"
+          themeIntent="text"
+          themeSize="small"
+        />
+      </View>
+      <TextInput
+        accessibilityState={
+          {
+            "disabled": false,
+          }
+        }
+        editable={true}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        placeholder="Search"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "marginHorizontal": 8,
+              "paddingVertical": 0,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="text-input"
+      />
+      <View
+        style={
+          [
+            {
+              "paddingHorizontal": 4,
+            },
+            undefined,
+          ]
+        }
+      >
+        <HeroIcon
+          name="adjustment"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 20,
+              },
+              undefined,
+            ]
+          }
+          testID="input-suffix"
+          themeIntent="text"
+          themeSize="small"
+        />
+      </View>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`SearchOneLine readonly renders correctly 1`] = `
 <View
   style={
@@ -592,13 +747,14 @@ exports[`SearchOneLine readonly renders correctly 1`] = `
             "borderWidth": 2,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 8,
-            "paddingVertical": 8,
+            "paddingHorizontal": 6,
+            "paddingVertical": 6,
           },
           undefined,
         ]
       }
       themeFocused={false}
+      themeVariant="basic"
     >
       <View
         style={

package/src/components/Search/__tests__/__snapshots__/SearchSuffixIcon.spec.tsx.snap

@@ -30,7 +30,9 @@ exports[`SearchSuffixIcon renders correctly 1`] = `
         {
           "alignItems": "center",
           "backgroundColor": "#401960",
+          "borderColor": "#401960",
           "borderRadius": 999,
+          "borderWidth": 2,
           "height": 16,
           "justifyContent": "center",
           "minWidth": 16,
@@ -50,6 +52,7 @@ exports[`SearchSuffixIcon renders correctly 1`] = `
       themeIntent="primary"
       themePadding="narrowContent"
       themeSize="small"
+      themeVariant="filled"
     >
       <Text
         allowFontScaling={false}

package/src/components/Search/__tests__/__snapshots__/SearchTwoLine.spec.tsx.snap

@@ -29,13 +29,14 @@ exports[`SearchTwoLine renders correctly 1`] = `
             "borderWidth": 2,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 8,
-            "paddingVertical": 8,
+            "paddingHorizontal": 6,
+            "paddingVertical": 6,
           },
           undefined,
         ]
       }
       themeFocused={false}
+      themeVariant="basic"
     >
       <View
         style={
@@ -74,6 +75,185 @@ exports[`SearchTwoLine renders correctly 1`] = `
               "height": "100%",
               "justifyContent": "space-between",
               "marginHorizontal": 8,
+              "paddingVertical": 2,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontSize": 12,
+                "letterSpacing": 0.24,
+                "lineHeight": 16,
+              },
+              undefined,
+            ]
+          }
+          themeFontWeight="semi-bold"
+          themeIntent="body"
+        >
+          Find Work
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 12,
+                "letterSpacing": 0.36,
+                "lineHeight": 16,
+              },
+              undefined,
+            ]
+          }
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          Anywhere
+        </Text>
+      </View>
+      <View
+        style={
+          [
+            {
+              "paddingHorizontal": 4,
+            },
+            undefined,
+          ]
+        }
+      >
+        <HeroIcon
+          name="adjustment"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 20,
+              },
+              undefined,
+            ]
+          }
+          testID="input-suffix"
+          themeIntent="text"
+          themeSize="small"
+        />
+      </View>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`SearchTwoLine renders reserved variant correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#ffffff",
+            "borderColor": "#e8e9ea",
+            "borderRadius": 999,
+            "borderWidth": 1,
+            "elevation": 3,
+            "flexDirection": "row",
+            "height": 56,
+            "paddingHorizontal": 7,
+            "paddingVertical": 7,
+            "shadowOffset": {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.12,
+            "shadowRadius": 4,
+          },
+          undefined,
+        ]
+      }
+      themeFocused={false}
+      themeVariant="reversed"
+    >
+      <View
+        style={
+          [
+            {
+              "paddingHorizontal": 4,
+            },
+            undefined,
+          ]
+        }
+      >
+        <HeroIcon
+          name="search-outlined"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 20,
+              },
+              undefined,
+            ]
+          }
+          testID="input-prefix"
+          themeIntent="text"
+          themeSize="small"
+        />
+      </View>
+      <View
+        style={
+          [
+            {
+              "alignItems": "flex-start",
+              "display": "flex",
+              "flexDirection": "column",
+              "flexGrow": 1,
+              "height": "100%",
+              "justifyContent": "space-between",
+              "marginHorizontal": 8,
+              "paddingVertical": 2,
             },
             undefined,
           ]

package/src/components/Switch/__tests__/__snapshots__/StyledSwitch.spec.tsx.snap

@@ -150,7 +150,7 @@ exports[`StyledWrapper renders correct style with variant disabled-unchecked 1`]
     style={
       [
         {
-          "backgroundColor": "#bfc1c5",
+          "backgroundColor": "#4d6265",
           "borderRadius": 999,
           "display": "flex",
           "height": 24,

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

@@ -693,7 +693,9 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                         {
                           "alignItems": "center",
                           "backgroundColor": "#355bfb",
+                          "borderColor": "#355bfb",
                           "borderRadius": 999,
+                          "borderWidth": 2,
                           "height": 24,
                           "justifyContent": "center",
                           "marginLeft": 4,
@@ -710,6 +712,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                       themeIntent="info"
                       themePadding="wideContent"
                       themeSize="medium"
+                      themeVariant="filled"
                     >
                       <Text
                         allowFontScaling={false}
@@ -1619,7 +1622,9 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                         {
                           "alignItems": "center",
                           "backgroundColor": "#355bfb",
+                          "borderColor": "#355bfb",
                           "borderRadius": 999,
+                          "borderWidth": 2,
                           "height": 24,
                           "justifyContent": "center",
                           "marginLeft": 4,
@@ -1636,6 +1641,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                       themeIntent="info"
                       themePadding="wideContent"
                       themeSize="medium"
+                      themeVariant="filled"
                     >
                       <Text
                         allowFontScaling={false}
@@ -2545,7 +2551,9 @@ exports[`useIsFocused renders correctly 1`] = `
                         {
                           "alignItems": "center",
                           "backgroundColor": "#355bfb",
+                          "borderColor": "#355bfb",
                           "borderRadius": 999,
+                          "borderWidth": 2,
                           "height": 24,
                           "justifyContent": "center",
                           "marginLeft": 4,
@@ -2562,6 +2570,7 @@ exports[`useIsFocused renders correctly 1`] = `
                       themeIntent="info"
                       themePadding="wideContent"
                       themeSize="medium"
+                      themeVariant="filled"
                     >
                       <Text
                         allowFontScaling={false}

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

@@ -588,7 +588,9 @@ exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
                       {
                         "alignItems": "center",
                         "backgroundColor": "#355bfb",
+                        "borderColor": "#355bfb",
                         "borderRadius": 999,
+                        "borderWidth": 2,
                         "height": 24,
                         "justifyContent": "center",
                         "marginLeft": 4,
@@ -605,6 +607,7 @@ exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
                     themeIntent="info"
                     themePadding="wideContent"
                     themeSize="medium"
+                    themeVariant="filled"
                   >
                     <Text
                       allowFontScaling={false}
@@ -1186,7 +1189,9 @@ exports[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
                       {
                         "alignItems": "center",
                         "backgroundColor": "#355bfb",
+                        "borderColor": "#355bfb",
                         "borderRadius": 999,
+                        "borderWidth": 2,
                         "height": 24,
                         "justifyContent": "center",
                         "marginLeft": 4,
@@ -1203,6 +1208,7 @@ exports[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
                     themeIntent="info"
                     themePadding="wideContent"
                     themeSize="medium"
+                    themeVariant="filled"
                   >
                     <Text
                       allowFontScaling={false}

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

@@ -26,7 +26,9 @@ exports[`TabWithBadge renders correctly with counter badge config 1`] = `
         {
           "alignItems": "center",
           "backgroundColor": "#355bfb",
+          "borderColor": "#355bfb",
           "borderRadius": 999,
+          "borderWidth": 2,
           "height": 24,
           "justifyContent": "center",
           "marginLeft": 4,
@@ -43,6 +45,7 @@ exports[`TabWithBadge renders correctly with counter badge config 1`] = `
       themeIntent="info"
       themePadding="wideContent"
       themeSize="medium"
+      themeVariant="filled"
     >
       <Text
         allowFontScaling={false}

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

@@ -421,7 +421,9 @@ exports[`Tabs renders correctly 1`] = `
                     {
                       "alignItems": "center",
                       "backgroundColor": "#355bfb",
+                      "borderColor": "#355bfb",
                       "borderRadius": 999,
+                      "borderWidth": 2,
                       "height": 24,
                       "justifyContent": "center",
                       "marginLeft": 4,
@@ -438,6 +440,7 @@ exports[`Tabs renders correctly 1`] = `
                   themeIntent="info"
                   themePadding="wideContent"
                   themeSize="medium"
+                  themeVariant="filled"
                 >
                   <Text
                     allowFontScaling={false}
@@ -1091,7 +1094,9 @@ exports[`useIsFocused renders correctly 1`] = `
                     {
                       "alignItems": "center",
                       "backgroundColor": "#355bfb",
+                      "borderColor": "#355bfb",
                       "borderRadius": 999,
+                      "borderWidth": 2,
                       "height": 24,
                       "justifyContent": "center",
                       "marginLeft": 4,
@@ -1108,6 +1113,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   themeIntent="info"
                   themePadding="wideContent"
                   themeSize="medium"
+                  themeVariant="filled"
                 >
                   <Text
                     allowFontScaling={false}
@@ -1761,7 +1767,9 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                     {
                       "alignItems": "center",
                       "backgroundColor": "#355bfb",
+                      "borderColor": "#355bfb",
                       "borderRadius": 999,
+                      "borderWidth": 2,
                       "height": 24,
                       "justifyContent": "center",
                       "marginLeft": 4,
@@ -1778,6 +1786,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                   themeIntent="info"
                   themePadding="wideContent"
                   themeSize="medium"
+                  themeVariant="filled"
                 >
                   <Text
                     allowFontScaling={false}

package/src/components/Toolbar/StyledToolbar.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/native';
 import { TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import Typography from '../Typography';
+import { BodyProps } from '../Typography/Body';
 
 const ToolbarWrapper = styled(View)<ViewProps>(({ theme }) => ({
   position: 'absolute',
@@ -55,10 +56,20 @@ const IconButtonLabel = styled(Typography.Body)(({ theme }) => ({
   marginLeft: theme.__hd__.toolbar.space.iconButtonLabelMarginLeft,
 }));
 
+const StyledLabel = styled(Typography.Body)<{
+  intent: Exclude<BodyProps['intent'], undefined>;
+}>(({ theme, intent }) => ({
+  color:
+    intent === 'secondary'
+      ? theme.__hd__.toolbar.colors.secondary
+      : theme.__hd__.typography.colors[intent],
+}));
+
 export {
   ToolbarWrapper,
   ToolbarGroupWrapper,
   ToolbarItemWrapper,
   IconButtonWrapper,
   IconButtonLabel,
+  StyledLabel,
 };

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../Icon';
-import Typography from '../Typography';
 import {
   IconButtonLabel,
   IconButtonWrapper,
   ToolbarItemWrapper,
+  StyledLabel,
 } from './StyledToolbar';
 import type { IconName } from '../Icon';
 
@@ -86,14 +86,14 @@ const ToolbarItemContent = ({
   }
   if (label) {
     return (
-      <Typography.Body
+      <StyledLabel
         variant="regular-bold"
         intent={disabled ? 'disabled' : intent}
         allowFontScaling={false}
         numberOfLines={1}
       >
         {label}
-      </Typography.Body>
+      </StyledLabel>
     );
   }
   return null;