@hero-design/rn 8.92.2 → 8.92.3

package/src/components/Search/SearchOneLine.tsx

@@ -174,7 +174,7 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
             intent="text"
             testID="input-clear-button"
             icon="circle-cancel"
-            size="small"
+            size="xsmall"
             disabled={state === 'disabled' || state === 'readonly'}
           />
         </StyledAffixContainer>
@@ -192,7 +192,7 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
         testID={testID}
         style={style}
       >
-        <StyledInputContainer themeFocused={isFocused} themeVariant={variant}>
+        <StyledInputContainer themeVariant={variant}>
           {renderPrefix({ prefix })}
           {renderInput({
             nativeInputProps: {

package/src/components/Search/SearchTwoLine.tsx

@@ -53,7 +53,7 @@ const SearchTwoLine = (props: SearchTwoLineProps) => {
   } = props;
   return (
     <StyledContainer style={style} testID={testID}>
-      <StyledInputContainer themeFocused={false} themeVariant={variant}>
+      <StyledInputContainer themeVariant={variant}>
         {renderPrefix({ prefix })}
         <StyledHandlerContainer>
           <Typography.Caption fontWeight="semi-bold">

package/src/components/Search/StyledSearch.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/native';
 import { TextInput, View } from 'react-native';
-import { Theme } from '../../theme';
 import Badge, { BadgeProps } from '../Badge';
 
 export type State = 'default' | 'filled' | 'disabled' | 'readonly';
@@ -11,40 +10,25 @@ export const StyledContainer = styled(View)(() => ({
   width: '100%',
 }));
 
-const getBorderWidth = (
-  theme: Theme,
-  themeFocused: boolean,
-  themeVariant: Variant
-) =>
-  themeFocused
-    ? theme.__hd__.search.borderWidths.container[themeVariant].focused
-    : theme.__hd__.search.borderWidths.container[themeVariant].normal;
-
-export const StyledInputContainer = styled(View)<{
-  themeFocused: boolean;
-  themeVariant: Variant;
-}>(({ theme, themeFocused, themeVariant }) => {
-  const borderWidth = getBorderWidth(theme, themeFocused, themeVariant);
-  return {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal:
-      theme.__hd__.search.space.containerHorizontalPadding - borderWidth,
-    paddingVertical:
-      theme.__hd__.search.space.containerVerticalPadding - borderWidth,
-    backgroundColor:
-      theme.__hd__.search.colors[themeVariant].containerBackground,
-    height: 56,
-    borderRadius: theme.__hd__.search.radii.container,
-    borderWidth,
-    borderColor: themeFocused
-      ? theme.__hd__.search.colors[themeVariant].focusedBorder
-      : theme.__hd__.search.colors[themeVariant].border,
-    ...(themeVariant === 'reversed' && {
-      ...theme.__hd__.search.shadows.container,
-    }),
-  };
-});
+export const StyledInputContainer = styled(View)<{ themeVariant: Variant }>(
+  ({ theme, themeVariant }) => {
+    return {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: theme.__hd__.search.space.containerHorizontalPadding,
+      paddingVertical: theme.__hd__.search.space.containerVerticalPadding,
+      backgroundColor:
+        theme.__hd__.search.colors[themeVariant].containerBackground,
+      height: 56,
+      borderRadius: theme.__hd__.search.radii.container,
+      borderWidth: theme.__hd__.search.borderWidths.container.default,
+      borderColor: theme.__hd__.search.colors[themeVariant].border,
+      ...(themeVariant === 'reversed' && {
+        ...theme.__hd__.search.shadows.container,
+      }),
+    };
+  }
+);
 
 export const StyledAffixContainer = styled(View)(({ theme }) => ({
   paddingHorizontal: theme.__hd__.search.space.prefixHorizontalPadding,
@@ -63,6 +47,7 @@ export const StyledSuffixContainer = styled(View)(({ theme }) => ({
 export const StyledInput = styled(TextInput)(({ theme }) => ({
   textAlignVertical: 'center',
   fontSize: theme.__hd__.search.fontSizes.text,
+  color: theme.__hd__.textInput.colors.text,
   alignSelf: 'stretch',
   flexGrow: 1,
   flexShrink: 1,

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

@@ -28,16 +28,15 @@ exports[`SearchOneLine idle renders correctly 1`] = `
             "backgroundColor": "#f6f6f7",
             "borderColor": "#f6f6f7",
             "borderRadius": 999,
-            "borderWidth": 2,
+            "borderWidth": 1,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 6,
-            "paddingVertical": 6,
+            "paddingHorizontal": 8,
+            "paddingVertical": 8,
           },
           undefined,
         ]
       }
-      themeFocused={false}
       themeVariant="basic"
     >
       <View
@@ -56,14 +55,14 @@ exports[`SearchOneLine idle renders correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-prefix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
       <TextInput
@@ -81,6 +80,7 @@ exports[`SearchOneLine idle renders correctly 1`] = `
           [
             {
               "alignSelf": "stretch",
+              "color": "#001f23",
               "flexGrow": 1,
               "flexShrink": 1,
               "fontFamily": "BeVietnamPro-Regular",
@@ -110,14 +110,14 @@ exports[`SearchOneLine idle renders correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
     </View>
@@ -173,16 +173,15 @@ exports[`SearchOneLine idle renders custom affix correctly 1`] = `
             "backgroundColor": "#f6f6f7",
             "borderColor": "#f6f6f7",
             "borderRadius": 999,
-            "borderWidth": 2,
+            "borderWidth": 1,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 6,
-            "paddingVertical": 6,
+            "paddingHorizontal": 8,
+            "paddingVertical": 8,
           },
           undefined,
         ]
       }
-      themeFocused={false}
       themeVariant="basic"
     >
       <Text
@@ -219,6 +218,7 @@ exports[`SearchOneLine idle renders custom affix correctly 1`] = `
           [
             {
               "alignSelf": "stretch",
+              "color": "#001f23",
               "flexGrow": 1,
               "flexShrink": 1,
               "fontFamily": "BeVietnamPro-Regular",
@@ -308,8 +308,8 @@ exports[`SearchOneLine idle renders reserved variant correctly 1`] = `
             "elevation": 6,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 7,
-            "paddingVertical": 7,
+            "paddingHorizontal": 8,
+            "paddingVertical": 8,
             "shadowColor": "#001f23",
             "shadowOffset": {
               "height": 2,
@@ -321,7 +321,6 @@ exports[`SearchOneLine idle renders reserved variant correctly 1`] = `
           undefined,
         ]
       }
-      themeFocused={false}
       themeVariant="reversed"
     >
       <View
@@ -340,14 +339,14 @@ exports[`SearchOneLine idle renders reserved variant correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-prefix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
       <TextInput
@@ -365,6 +364,7 @@ exports[`SearchOneLine idle renders reserved variant correctly 1`] = `
           [
             {
               "alignSelf": "stretch",
+              "color": "#001f23",
               "flexGrow": 1,
               "flexShrink": 1,
               "fontFamily": "BeVietnamPro-Regular",
@@ -394,14 +394,14 @@ exports[`SearchOneLine idle renders reserved variant correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
     </View>
@@ -457,16 +457,15 @@ exports[`filled disabled renders correctly 1`] = `
             "backgroundColor": "#f6f6f7",
             "borderColor": "#f6f6f7",
             "borderRadius": 999,
-            "borderWidth": 2,
+            "borderWidth": 1,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 6,
-            "paddingVertical": 6,
+            "paddingHorizontal": 8,
+            "paddingVertical": 8,
           },
           undefined,
         ]
       }
-      themeFocused={false}
       themeVariant="basic"
     >
       <View
@@ -485,14 +484,14 @@ exports[`filled disabled renders correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-prefix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
       <TextInput
@@ -511,6 +510,7 @@ exports[`filled disabled renders correctly 1`] = `
           [
             {
               "alignSelf": "stretch",
+              "color": "#001f23",
               "flexGrow": 1,
               "flexShrink": 1,
               "fontFamily": "BeVietnamPro-Regular",
@@ -541,14 +541,14 @@ exports[`filled disabled renders correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
     </View>
@@ -604,16 +604,15 @@ exports[`filled readonly renders correctly 1`] = `
             "backgroundColor": "#f6f6f7",
             "borderColor": "#f6f6f7",
             "borderRadius": 999,
-            "borderWidth": 2,
+            "borderWidth": 1,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 6,
-            "paddingVertical": 6,
+            "paddingHorizontal": 8,
+            "paddingVertical": 8,
           },
           undefined,
         ]
       }
-      themeFocused={false}
       themeVariant="basic"
     >
       <View
@@ -632,14 +631,14 @@ exports[`filled readonly renders correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-prefix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
       <TextInput
@@ -658,6 +657,7 @@ exports[`filled readonly renders correctly 1`] = `
           [
             {
               "alignSelf": "stretch",
+              "color": "#001f23",
               "flexGrow": 1,
               "flexShrink": 1,
               "fontFamily": "BeVietnamPro-Regular",
@@ -688,14 +688,14 @@ exports[`filled readonly renders correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
     </View>
@@ -751,16 +751,15 @@ exports[`filled renders clearable input correctly 1`] = `
             "backgroundColor": "#f6f6f7",
             "borderColor": "#f6f6f7",
             "borderRadius": 999,
-            "borderWidth": 2,
+            "borderWidth": 1,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 6,
-            "paddingVertical": 6,
+            "paddingHorizontal": 8,
+            "paddingVertical": 8,
           },
           undefined,
         ]
       }
-      themeFocused={false}
       themeVariant="basic"
     >
       <View
@@ -779,14 +778,14 @@ exports[`filled renders clearable input correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-prefix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
       <TextInput
@@ -804,6 +803,7 @@ exports[`filled renders clearable input correctly 1`] = `
           [
             {
               "alignSelf": "stretch",
+              "color": "#001f23",
               "flexGrow": 1,
               "flexShrink": 1,
               "fontFamily": "BeVietnamPro-Regular",
@@ -869,13 +869,13 @@ exports[`filled renders clearable input correctly 1`] = `
               [
                 {
                   "color": "#001f23",
-                  "fontSize": 20,
+                  "fontSize": 16,
                 },
                 undefined,
               ]
             }
             themeIntent="text"
-            themeSize="small"
+            themeSize="xsmall"
           />
         </View>
       </View>
@@ -932,16 +932,15 @@ exports[`filled renders correctly 1`] = `
             "backgroundColor": "#f6f6f7",
             "borderColor": "#f6f6f7",
             "borderRadius": 999,
-            "borderWidth": 2,
+            "borderWidth": 1,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 6,
-            "paddingVertical": 6,
+            "paddingHorizontal": 8,
+            "paddingVertical": 8,
           },
           undefined,
         ]
       }
-      themeFocused={false}
       themeVariant="basic"
     >
       <View
@@ -960,14 +959,14 @@ exports[`filled renders correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-prefix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
       <TextInput
@@ -985,6 +984,7 @@ exports[`filled renders correctly 1`] = `
           [
             {
               "alignSelf": "stretch",
+              "color": "#001f23",
               "flexGrow": 1,
               "flexShrink": 1,
               "fontFamily": "BeVietnamPro-Regular",
@@ -1015,14 +1015,14 @@ exports[`filled renders correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
     </View>

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

@@ -102,14 +102,14 @@ exports[`SearchSuffixIcon renders correctly 1`] = `
           [
             {
               "color": "#001f23",
-              "fontSize": 20,
+              "fontSize": 16,
             },
             undefined,
           ]
         }
         testID="input-suffix"
         themeIntent="text"
-        themeSize="small"
+        themeSize="xsmall"
       />
     </View>
   </View>

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

@@ -26,16 +26,15 @@ exports[`SearchTwoLine renders correctly 1`] = `
             "backgroundColor": "#f6f6f7",
             "borderColor": "#f6f6f7",
             "borderRadius": 999,
-            "borderWidth": 2,
+            "borderWidth": 1,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 6,
-            "paddingVertical": 6,
+            "paddingHorizontal": 8,
+            "paddingVertical": 8,
           },
           undefined,
         ]
       }
-      themeFocused={false}
       themeVariant="basic"
     >
       <View
@@ -54,14 +53,14 @@ exports[`SearchTwoLine renders correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-prefix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
       <View
@@ -136,14 +135,14 @@ exports[`SearchTwoLine renders correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
     </View>
@@ -201,8 +200,8 @@ exports[`SearchTwoLine renders reserved variant correctly 1`] = `
             "elevation": 6,
             "flexDirection": "row",
             "height": 56,
-            "paddingHorizontal": 7,
-            "paddingVertical": 7,
+            "paddingHorizontal": 8,
+            "paddingVertical": 8,
             "shadowColor": "#001f23",
             "shadowOffset": {
               "height": 2,
@@ -214,7 +213,6 @@ exports[`SearchTwoLine renders reserved variant correctly 1`] = `
           undefined,
         ]
       }
-      themeFocused={false}
       themeVariant="reversed"
     >
       <View
@@ -233,14 +231,14 @@ exports[`SearchTwoLine renders reserved variant correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-prefix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
       <View
@@ -315,14 +313,14 @@ exports[`SearchTwoLine renders reserved variant correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontSize": 20,
+                "fontSize": 16,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="small"
+          themeSize="xsmall"
         />
       </View>
     </View>

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

@@ -24,14 +24,14 @@ exports[`utils renderPrefix renders correctly 1`] = `
         [
           {
             "color": "#001f23",
-            "fontSize": 20,
+            "fontSize": 16,
           },
           undefined,
         ]
       }
       testID="input-prefix"
       themeIntent="text"
-      themeSize="small"
+      themeSize="xsmall"
     />
   </View>
   <View
@@ -81,14 +81,14 @@ exports[`utils renderSuffix renders correctly 1`] = `
         [
           {
             "color": "#001f23",
-            "fontSize": 20,
+            "fontSize": 16,
           },
           undefined,
         ]
       }
       testID="input-suffix"
       themeIntent="text"
-      themeSize="small"
+      themeSize="xsmall"
     />
   </View>
   <View

package/src/components/Search/utils.tsx

@@ -9,7 +9,7 @@ export const renderPrefix = ({
 }) => {
   return typeof prefix === 'string' ? (
     <StyledAffixContainer>
-      <Icon intent="text" testID="input-prefix" icon={prefix} size="small" />
+      <Icon intent="text" testID="input-prefix" icon={prefix} size="xsmall" />
     </StyledAffixContainer>
   ) : (
     prefix
@@ -23,7 +23,7 @@ export const renderSuffix = ({
 }) => {
   return typeof suffix === 'string' ? (
     <StyledAffixContainer>
-      <Icon intent="text" testID="input-suffix" icon={suffix} size="small" />
+      <Icon intent="text" testID="input-suffix" icon={suffix} size="xsmall" />
     </StyledAffixContainer>
   ) : (
     suffix