@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/src/components/Tag/index.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { StyledText, StyledView } from './StyledTag';
+import { useDeprecation } from '../../utils/hooks';
 
 interface TagProps extends ViewProps {
   /**
@@ -12,6 +13,7 @@ interface TagProps extends ViewProps {
    */
   intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
   /**
+   * @deprecated Tag variant prop is deprecated and will be removed in the next major release. Please remove it.
    * Tag variant.
    */
   variant?: 'filled' | 'outlined';
@@ -33,16 +35,20 @@ const Tag = ({
   testID,
   ...nativeProps
 }: TagProps): JSX.Element => {
+  useDeprecation(
+    `Tag's variant prop is deprecated and will be removed in the next major release. Please remove it.`,
+    variant !== undefined
+  );
+
   return (
     <StyledView
       {...nativeProps}
       themeIntent={intent}
-      themeVariant={variant}
       style={style}
       testID={testID}
     >
       {typeof content === 'string' ? (
-        <StyledText themeIntent={intent} themeVariant={variant}>
+        <StyledText themeIntent={intent} fontWeight="semi-bold">
           {content}
         </StyledText>
       ) : (

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,56 +10,33 @@ 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.Text)<{
-  themeState: State;
-}>(({ theme, themeState }) => ({
-  color: theme.__hd__.textInput.colors.labels[themeState],
-  fontSize: theme.__hd__.textInput.fontSizes.topLabel,
-  lineHeight: theme.__hd__.textInput.lineHeights.topLabel,
-}));
-
-const StyledAsteriskLabel = styled(Typography.Text)<{
-  themeState: State;
-}>(({ theme, themeState }) => ({
-  color: theme.__hd__.textInput.colors.asterisks[themeState],
-  fontSize: theme.__hd__.textInput.fontSizes.topLabel,
-  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,
+  justifyContent: 'center',
+  position: 'absolute',
+  zIndex: 1,
+  left: 0,
+  right: 0,
+  top: -theme.__hd__.textInput.space.labelTop,
 }));
 
-const StyledLabelInsideTextInput = styled(Typography.Text)<{
+const StyledLabelInsideTextInput = styled(Typography.Body)<{
   themeState: State;
 }>(({ theme, themeState }) => ({
   textAlignVertical: 'center',
   alignContent: 'center',
-  fontSize: theme.__hd__.textInput.fontSizes.labelInsideTextInput,
   alignItems: 'center',
   color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeState],
   marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop,
 }));
 
-const StyledAsteriskLabelInsideTextInput = styled(Typography.Text)<{
+const StyledAsteriskLabelInsideTextInput = styled(Typography.Body)<{
   themeState: State;
 }>(({ theme, themeState }) => ({
   color: theme.__hd__.textInput.colors.asterisks[themeState],
-  fontSize: theme.__hd__.textInput.fontSizes.asteriskLabel,
 }));
 
 const StyledErrorContainer = styled(View)(({ theme }) => ({
@@ -70,28 +47,21 @@ const StyledErrorContainer = styled(View)(({ theme }) => ({
   flexGrow: 4,
 }));
 
-const StyledError = styled(Typography.Text)(({ theme }) => ({
+const StyledError = styled(Typography.Caption)(({ theme }) => ({
   color: theme.__hd__.textInput.colors.error,
-  fontSize: theme.__hd__.textInput.fontSizes.error,
   marginLeft: theme.__hd__.textInput.space.errorMarginLeft,
 }));
 
-const StyledMaxLengthMessage = styled(Typography.Text)<{
+const StyledMaxLengthMessage = styled(Typography.Caption)<{
   themeState: State;
 }>(({ theme, themeState }) => ({
   color: theme.__hd__.textInput.colors.maxLengthLabels[themeState],
-  fontSize: theme.__hd__.textInput.fontSizes.maxLength,
-  marginRight: theme.__hd__.textInput.space.maxLengthLabelMarginLeft,
-  alignSelf: 'flex-end',
   flex: 1,
   flexGrow: 1,
   textAlign: 'right',
 }));
 
-const StyledHelperText = styled(Typography.Text)(({ theme }) => ({
-  fontSize: theme.__hd__.textInput.fontSizes.error,
-}));
-
+const StyledHelperText = Typography.Caption;
 const StyledTextInput = styled(TextInput)<{ themeVariant: Variant }>(
   ({ theme, themeVariant }) => ({
     textAlignVertical: themeVariant === 'text' ? 'center' : 'top',
@@ -140,21 +110,20 @@ const StyledTextInputAndLabelContainer = styled(View)(() => ({
 }));
 
 const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({
-  paddingLeft:
-    theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft,
+  paddingHorizontal:
+    theme.__hd__.textInput.space.errorAndHelpTextContainerHorizontalPadding,
   minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight,
+  paddingTop: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingTop,
 }));
 
 const StyledErrorAndMaxLengthContainer = styled(View)(() => ({
   flexDirection: 'row',
   justifyContent: 'space-between',
+  alignItems: 'flex-start',
 }));
 
 export {
   StyledTextInputContainer,
-  StyledLabel,
-  StyledLabelContainer,
-  StyledAsteriskLabel,
   StyledAsteriskLabelInsideTextInput,
   StyledTextInput,
   StyledError,

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

@@ -1,34 +1,15 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { StyledHeaderText } from '../../FAB/ActionGroup/StyledActionGroup';
 import {
-  StyledLabel,
+  StyledHelperText,
   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 />);
@@ -113,7 +69,7 @@ describe('StyledMaxLengthMessage', () => {
 describe('StyledHelperText', () => {
   it('renders correctly', (): void => {
     const { toJSON } = renderWithTheme(
-      <StyledHeaderText>helper text</StyledHeaderText>
+      <StyledHelperText>helper text</StyledHelperText>
     );
 
     expect(toJSON()).toMatchSnapshot();