@hero-design/rn 8.44.0-alpha.0 → 8.44.1

package/src/components/TextInput/StyledTextInput.tsx

@@ -1,4 +1,4 @@
-import { TextInput, View, StyleSheet } from 'react-native';
+import { TextInput, View, StyleSheet, Animated } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
 
@@ -10,36 +10,16 @@ const StyledContainer = styled(View)(({ theme }) => ({
   marginTop: theme.__hd__.textInput.space.containerMarginTop,
 }));
 
-const StyledLabelContainer = styled(View)(({ theme }) => ({
-  position: 'absolute',
-  flexDirection: 'row',
-  left: theme.__hd__.textInput.space.labelLeft,
-  top: theme.__hd__.textInput.space.labelTop,
-  backgroundColor: theme.__hd__.textInput.colors.labelBackground,
-  zIndex: 1,
-  paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding,
-}));
-const StyledLabel = styled(Typography.Caption)<{
-  themeState: State;
-}>(({ theme, themeState }) => ({
-  color: theme.__hd__.textInput.colors.labels[themeState],
-  lineHeight: theme.__hd__.textInput.lineHeights.topLabel,
-}));
-
-const StyledAsteriskLabel = styled(Typography.Caption)<{
-  themeState: State;
-}>(({ theme, themeState }) => ({
-  color: theme.__hd__.textInput.colors.asterisks[themeState],
-  lineHeight: theme.__hd__.textInput.lineHeights.topLabel,
-}));
-
-const StyledLabelContainerInsideTextInput = styled(View)<{
+const StyledLabelContainerInsideTextInput = styled(Animated.View)<{
   themeVariant: Variant;
-}>(({ themeVariant }) => ({
+}>(({ themeVariant, theme }) => ({
   flexDirection: 'row',
-  zIndex: 9999,
   alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
-  ...StyleSheet.absoluteFillObject,
+  position: 'absolute',
+  zIndex: 1,
+  left: -theme.__hd__.textInput.space.labelLeft,
+  right: 0,
+  top: -theme.__hd__.textInput.space.labelTop,
 }));
 
 const StyledLabelInsideTextInput = styled(Typography.Body)<{
@@ -144,9 +124,6 @@ const StyledErrorAndMaxLengthContainer = styled(View)(() => ({
 
 export {
   StyledTextInputContainer,
-  StyledLabel,
-  StyledLabelContainer,
-  StyledAsteriskLabel,
   StyledAsteriskLabelInsideTextInput,
   StyledTextInput,
   StyledError,

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

@@ -2,33 +2,14 @@ import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import {
   StyledHelperText,
-  StyledLabel,
   StyledTextInput,
   StyledMaxLengthMessage,
   StyledError,
   StyledErrorContainer,
-  StyledAsteriskLabel,
-  StyledLabelContainer,
   StyledLabelInsideTextInput,
   StyledBorderBackDrop,
 } from '../StyledTextInput';
 
-describe('Label', () => {
-  it.each`
-    themeState
-    ${'default'}
-    ${'filled'}
-    ${'error'}
-    ${'disabled'}
-    ${'readonly'}
-  `('renders correctly with themeState $themeState', ({ themeState }) => {
-    const { toJSON } = renderWithTheme(
-      <StyledLabel themeState={themeState}>Label</StyledLabel>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
 describe('LabelInsideTextInput', () => {
   it.each`
     themeState
@@ -48,31 +29,6 @@ describe('LabelInsideTextInput', () => {
   });
 });
 
-describe('LabelContainer', () => {
-  it('renders correctly', (): void => {
-    const { toJSON } = renderWithTheme(<StyledLabelContainer />);
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
-
-describe('StyledAsteriskLabel', () => {
-  it.each`
-    themeState
-    ${'default'}
-    ${'filled'}
-    ${'error'}
-    ${'disabled'}
-    ${'readonly'}
-  `('renders correctly with themeState $themeState', ({ themeState }): void => {
-    const { toJSON } = renderWithTheme(
-      <StyledAsteriskLabel themeState={themeState}>*</StyledAsteriskLabel>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
-
 describe('StyledErrorMessageContainer', () => {
   it('renders correctly', (): void => {
     const { toJSON } = renderWithTheme(<StyledErrorContainer />);