@hero-design/rn 7.23.0 → 7.25.0

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

@@ -44,7 +44,7 @@ exports[`Tag has archived style when intent is primary 1`] = `
     Array [
       Object {
         "backgroundColor": undefined,
-        "borderColor": "#001f23",
+        "borderColor": "#401960",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -59,7 +59,7 @@ exports[`Tag has archived style when intent is primary 1`] = `
     style={
       Array [
         Object {
-          "color": "#001f23",
+          "color": "#401960",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "includeFontPadding": false,

package/src/components/TextInput/StyledTextInput.tsx

@@ -2,13 +2,7 @@ import { TextInput, View, StyleSheet } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
 
-export type Variant =
-  | 'default'
-  | 'filled'
-  | 'focused'
-  | 'disabled'
-  | 'readonly'
-  | 'error';
+export type Variant = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
 
 const StyledContainer = styled(View)(({ theme }) => ({
   width: '100%',
@@ -95,16 +89,17 @@ const StyledTextInput = styled(TextInput)(({ theme }) => ({
   alignSelf: 'stretch',
   flexGrow: 2,
   marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
+  paddingVertical: 0,
 }));
 
 const StyledBorderBackDrop = styled(View)<{
   themeVariant: Variant;
-}>(({ theme, themeVariant }) => ({
+  themeFocused: boolean;
+}>(({ theme, themeFocused, themeVariant }) => ({
   ...StyleSheet.absoluteFillObject,
-  borderWidth:
-    themeVariant === 'focused'
-      ? theme.__hd__.textInput.borderWidths.container.focused
-      : theme.__hd__.textInput.borderWidths.container.normal,
+  borderWidth: themeFocused
+    ? theme.__hd__.textInput.borderWidths.container.focused
+    : theme.__hd__.textInput.borderWidths.container.normal,
   borderRadius: theme.__hd__.textInput.radii.container,
   borderColor:
     theme.__hd__.textInput.colors.borders[themeVariant] ??

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

@@ -18,7 +18,6 @@ describe('Label', () => {
     themeVariant
     ${'default'}
     ${'filled'}
-    ${'focused'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
@@ -35,7 +34,6 @@ describe('LabelInsideTextInput', () => {
     themeVariant
     ${'default'}
     ${'filled'}
-    ${'focused'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
@@ -66,7 +64,6 @@ describe('StyledAsteriskLabel', () => {
     themeVariant
     ${'default'}
     ${'filled'}
-    ${'focused'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
@@ -105,7 +102,6 @@ describe('StyledMaxLengthMessage', () => {
     themeVariant
     ${'default'}
     ${'filled'}
-    ${'focused'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
@@ -138,7 +134,6 @@ describe('StyledBorderBackDrop', () => {
     themeVariant
     ${'default'}
     ${'filled'}
-    ${'focused'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
@@ -146,12 +141,23 @@ describe('StyledBorderBackDrop', () => {
     'renders correctly with themeVariant $themeVariant',
     ({ themeVariant }): void => {
       const { toJSON } = renderWithTheme(
-        <StyledBorderBackDrop themeVariant={themeVariant} />
+        <StyledBorderBackDrop
+          themeVariant={themeVariant}
+          themeFocused={false}
+        />
       );
 
       expect(toJSON()).toMatchSnapshot();
     }
   );
+
+  it('renders correctly when focused', (): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledBorderBackDrop themeVariant="error" themeFocused />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 describe('StyledTextInput', () => {

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

@@ -112,34 +112,6 @@ exports[`Label renders correctly with themeVariant filled 1`] = `
 </Text>
 `;
 
-exports[`Label renders correctly with themeVariant focused 1`] = `
-<Text
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#001f23",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="focused"
->
-  Label
-</Text>
-`;
-
 exports[`Label renders correctly with themeVariant readonly 1`] = `
 <Text
   style={
@@ -153,7 +125,7 @@ exports[`Label renders correctly with themeVariant readonly 1`] = `
       },
       Array [
         Object {
-          "color": "#bfc1c5",
+          "color": "#808f91",
         },
         undefined,
       ],
@@ -315,38 +287,6 @@ exports[`LabelInsideTextInput renders correctly with themeVariant filled 1`] = `
 </Text>
 `;
 
-exports[`LabelInsideTextInput renders correctly with themeVariant focused 1`] = `
-<Text
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "alignContent": "center",
-          "alignItems": "center",
-          "color": "#001f23",
-          "fontSize": 14,
-          "textAlignVertical": "center",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="focused"
->
-  Label
-</Text>
-`;
-
 exports[`LabelInsideTextInput renders correctly with themeVariant readonly 1`] = `
 <Text
   style={
@@ -362,7 +302,7 @@ exports[`LabelInsideTextInput renders correctly with themeVariant readonly 1`] =
         Object {
           "alignContent": "center",
           "alignItems": "center",
-          "color": "#bfc1c5",
+          "color": "#808f91",
           "fontSize": 14,
           "textAlignVertical": "center",
         },
@@ -392,7 +332,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant default 1`] = `
       },
       Array [
         Object {
-          "color": "#f46363",
+          "color": "#de350b",
         },
         undefined,
       ],
@@ -448,7 +388,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant error 1`] = `
       },
       Array [
         Object {
-          "color": "#f46363",
+          "color": "#de350b",
         },
         undefined,
       ],
@@ -476,7 +416,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant filled 1`] = `
       },
       Array [
         Object {
-          "color": "#f46363",
+          "color": "#de350b",
         },
         undefined,
       ],
@@ -491,34 +431,6 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant filled 1`] = `
 </Text>
 `;
 
-exports[`StyledAsteriskLabel renders correctly with themeVariant focused 1`] = `
-<Text
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#f46363",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="focused"
->
-  *
-</Text>
-`;
-
 exports[`StyledAsteriskLabel renders correctly with themeVariant readonly 1`] = `
 <Text
   style={
@@ -547,14 +459,14 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant readonly 1`] =
 </Text>
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] = `
+exports[`StyledBorderBackDrop renders correctly when focused 1`] = `
 <View
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
+        "borderColor": "#de350b",
         "borderRadius": 8,
-        "borderWidth": 1,
+        "borderWidth": 2,
         "bottom": 0,
         "left": 0,
         "position": "absolute",
@@ -564,16 +476,17 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] =
       undefined,
     ]
   }
-  themeVariant="default"
+  themeFocused={true}
+  themeVariant="error"
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] = `
 <View
   style={
     Array [
       Object {
-        "borderColor": "#bfc1c5",
+        "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 1,
         "bottom": 0,
@@ -585,16 +498,17 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] =
       undefined,
     ]
   }
-  themeVariant="disabled"
+  themeFocused={false}
+  themeVariant="default"
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] = `
 <View
   style={
     Array [
       Object {
-        "borderColor": "#f46363",
+        "borderColor": "#bfc1c5",
         "borderRadius": 8,
         "borderWidth": 1,
         "bottom": 0,
@@ -606,16 +520,17 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
       undefined,
     ]
   }
-  themeVariant="error"
+  themeFocused={false}
+  themeVariant="disabled"
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
 <View
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
+        "borderColor": "#de350b",
         "borderRadius": 8,
         "borderWidth": 1,
         "bottom": 0,
@@ -627,18 +542,19 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
       undefined,
     ]
   }
-  themeVariant="filled"
+  themeFocused={false}
+  themeVariant="error"
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant focused 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
 <View
   style={
     Array [
       Object {
         "borderColor": "#001f23",
         "borderRadius": 8,
-        "borderWidth": 2,
+        "borderWidth": 1,
         "bottom": 0,
         "left": 0,
         "position": "absolute",
@@ -648,7 +564,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant focused 1`] =
       undefined,
     ]
   }
-  themeVariant="focused"
+  themeFocused={false}
+  themeVariant="filled"
 />
 `;
 
@@ -669,6 +586,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant readonly 1`] =
       undefined,
     ]
   }
+  themeFocused={false}
   themeVariant="readonly"
 />
 `;
@@ -686,7 +604,7 @@ exports[`StyledErrorMessage renders correctly 1`] = `
       },
       Array [
         Object {
-          "color": "#f46363",
+          "color": "#de350b",
           "fontSize": 12,
           "marginLeft": 4,
         },
@@ -834,7 +752,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant error 1`] =
       Array [
         Object {
           "alignSelf": "flex-end",
-          "color": "#f46363",
+          "color": "#de350b",
           "flex": 1,
           "flexGrow": 1,
           "fontSize": 12,
@@ -888,40 +806,6 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant filled 1`] =
 </Text>
 `;
 
-exports[`StyledMaxLengthMessage renders correctly with themeVariant focused 1`] = `
-<Text
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "alignSelf": "flex-end",
-          "color": "#001f23",
-          "flex": 1,
-          "flexGrow": 1,
-          "fontSize": 12,
-          "marginRight": 4,
-          "textAlign": "right",
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeVariant="focused"
->
-  100/255
-</Text>
-`;
-
 exports[`StyledMaxLengthMessage renders correctly with themeVariant readonly 1`] = `
 <Text
   style={
@@ -936,7 +820,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant readonly 1`]
       Array [
         Object {
           "alignSelf": "flex-end",
-          "color": "#bfc1c5",
+          "color": "#808f91",
           "flex": 1,
           "flexGrow": 1,
           "fontSize": 12,
@@ -965,6 +849,7 @@ exports[`StyledTextInput renders correctly 1`] = `
         "flexGrow": 2,
         "fontSize": 14,
         "marginHorizontal": 8,
+        "paddingVertical": 0,
         "textAlignVertical": "center",
       },
       undefined,