@hero-design/rn 8.35.0-alpha.4 → 8.35.1

package/src/components/Tag/StyledTag.tsx

@@ -1,6 +1,5 @@
-import { View } from 'react-native';
 import styled from '@emotion/native';
-import { Theme } from '../../theme';
+import { View } from 'react-native';
 import Typography from '../Typography';
 
 type ThemeIntent =
@@ -11,54 +10,26 @@ type ThemeIntent =
   | 'danger'
   | 'archived';
 
-type ThemeVariant = 'filled' | 'outlined';
-
-const getFilledStyles = (themeIntent: ThemeIntent, theme: Theme) => ({
-  textColor: theme.__hd__.tag.colors[themeIntent],
-  borderColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
-  backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
-});
-
-const getOutlinedStyles = (themeIntent: ThemeIntent, theme: Theme) => ({
-  textColor: theme.__hd__.tag.colors[themeIntent],
-  borderColor: theme.__hd__.tag.colors[themeIntent],
-  backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
-});
-
 const StyledView = styled(View)<{
   themeIntent: ThemeIntent;
-  themeVariant: ThemeVariant;
-}>(({ themeIntent, themeVariant, theme }) => {
-  const { borderColor, backgroundColor } =
-    themeVariant === 'filled'
-      ? getFilledStyles(themeIntent, theme)
-      : getOutlinedStyles(themeIntent, theme);
-
+}>(({ themeIntent, theme }) => {
   return {
-    borderWidth: theme.__hd__.tag.borderWidths.default,
+    backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
     borderRadius: theme.__hd__.tag.radii.default,
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
-    borderColor,
-    backgroundColor,
   };
 });
 
 const StyledText = styled(Typography.Caption)<{
   themeIntent: ThemeIntent;
-  themeVariant: ThemeVariant;
-}>(({ themeIntent, themeVariant, theme }) => {
-  const { textColor } =
-    themeVariant === 'filled'
-      ? getFilledStyles(themeIntent, theme)
-      : getOutlinedStyles(themeIntent, theme);
-
+}>(({ themeIntent, theme }) => {
   return {
-    color: textColor,
+    color: theme.__hd__.tag.colors[themeIntent],
     includeFontPadding: false,
     textAlignVertical: 'center',
     textAlign: 'center',
   };
 });
 
-export { StyledView, StyledText };
+export { StyledText, StyledView };

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

@@ -5,21 +5,21 @@ import Typography from '../../Typography';
 
 describe('Tag', () => {
   it.each`
-    variant       | intent       | content      | expected
-    ${'outlined'} | ${'success'} | ${'SUCCESS'} | ${'SUCCESS'}
-    ${'outlined'} | ${'warning'} | ${'WARNING'} | ${'WARNING'}
-    ${'outlined'} | ${'danger'}  | ${'DANGER'}  | ${'DANGER'}
-    ${'outlined'} | ${'info'}    | ${'INFO'}    | ${'INFO'}
-    ${'outlined'} | ${'primary'} | ${'PRIMARY'} | ${'PRIMARY'}
-    ${'filled'}   | ${'warning'} | ${'WARNING'} | ${'WARNING'}
-    ${'filled'}   | ${'danger'}  | ${'DANGER'}  | ${'DANGER'}
-    ${'filled'}   | ${'info'}    | ${'INFO'}    | ${'INFO'}
-    ${'filled'}   | ${'primary'} | ${'PRIMARY'} | ${'PRIMARY'}
+    intent       | content      | expected
+    ${'success'} | ${'SUCCESS'} | ${'SUCCESS'}
+    ${'warning'} | ${'WARNING'} | ${'WARNING'}
+    ${'danger'}  | ${'DANGER'}  | ${'DANGER'}
+    ${'info'}    | ${'INFO'}    | ${'INFO'}
+    ${'primary'} | ${'PRIMARY'} | ${'PRIMARY'}
+    ${'warning'} | ${'WARNING'} | ${'WARNING'}
+    ${'danger'}  | ${'DANGER'}  | ${'DANGER'}
+    ${'info'}    | ${'INFO'}    | ${'INFO'}
+    ${'primary'} | ${'PRIMARY'} | ${'PRIMARY'}
   `(
-    'renders correctly when variant is $variant and intent is $intent',
-    ({ variant, intent, content, expected }) => {
+    'renders correctly when intent is $intent',
+    ({ intent, content, expected }) => {
       const { getByText, toJSON } = renderWithTheme(
-        <Tag content={content} intent={intent} variant={variant} />
+        <Tag content={content} intent={intent} />
       );
 
       expect(toJSON()).toMatchSnapshot();

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

@@ -1,14 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Tag renders correctly when variant is filled and intent is danger 1`] = `
+exports[`Tag renders correctly when intent is danger 1`] = `
 <View
   style={
     Array [
       Object {
         "backgroundColor": "#fcebe7",
-        "borderColor": "#fcebe7",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
@@ -16,7 +14,6 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
     ]
   }
   themeIntent="danger"
-  themeVariant="filled"
 >
   <Text
     allowFontScaling={false}
@@ -31,7 +28,7 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -42,30 +39,26 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="filled"
   >
     DANGER
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
+exports[`Tag renders correctly when intent is danger 2`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#ecf0ff",
-        "borderColor": "#ecf0ff",
+        "backgroundColor": "#fcebe7",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="info"
-  themeVariant="filled"
+  themeIntent="danger"
 >
   <Text
     allowFontScaling={false}
@@ -80,7 +73,7 @@ exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
         },
         Array [
           Object {
-            "color": "#4568fb",
+            "color": "#cb300a",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -91,30 +84,26 @@ exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="filled"
   >
-    INFO
+    DANGER
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is filled and intent is primary 1`] = `
+exports[`Tag renders correctly when intent is info 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": undefined,
-        "borderColor": undefined,
+        "backgroundColor": "#ecf0ff",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="primary"
-  themeVariant="filled"
+  themeIntent="info"
 >
   <Text
     allowFontScaling={false}
@@ -129,7 +118,7 @@ exports[`Tag renders correctly when variant is filled and intent is primary 1`]
         },
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#355bfb",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -140,30 +129,26 @@ exports[`Tag renders correctly when variant is filled and intent is primary 1`]
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="filled"
   >
-    PRIMARY
+    INFO
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is filled and intent is warning 1`] = `
+exports[`Tag renders correctly when intent is info 2`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#fff6eb",
-        "borderColor": "#fff6eb",
+        "backgroundColor": "#ecf0ff",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="warning"
-  themeVariant="filled"
+  themeIntent="info"
 >
   <Text
     allowFontScaling={false}
@@ -178,7 +163,7 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
         },
         Array [
           Object {
-            "color": "#ffa234",
+            "color": "#355bfb",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -189,30 +174,26 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="filled"
   >
-    WARNING
+    INFO
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is danger 1`] = `
+exports[`Tag renders correctly when intent is primary 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#fcebe7",
-        "borderColor": "#de350b",
+        "backgroundColor": "#ece8ef",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="danger"
-  themeVariant="outlined"
+  themeIntent="primary"
 >
   <Text
     allowFontScaling={false}
@@ -227,7 +208,7 @@ exports[`Tag renders correctly when variant is outlined and intent is danger 1`]
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#401960",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -238,30 +219,26 @@ exports[`Tag renders correctly when variant is outlined and intent is danger 1`]
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
-    DANGER
+    PRIMARY
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is info 1`] = `
+exports[`Tag renders correctly when intent is primary 2`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#ecf0ff",
-        "borderColor": "#4568fb",
+        "backgroundColor": "#ece8ef",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="info"
-  themeVariant="outlined"
+  themeIntent="primary"
 >
   <Text
     allowFontScaling={false}
@@ -276,7 +253,7 @@ exports[`Tag renders correctly when variant is outlined and intent is info 1`] =
         },
         Array [
           Object {
-            "color": "#4568fb",
+            "color": "#401960",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -287,30 +264,26 @@ exports[`Tag renders correctly when variant is outlined and intent is info 1`] =
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
-    INFO
+    PRIMARY
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is primary 1`] = `
+exports[`Tag renders correctly when intent is success 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": undefined,
-        "borderColor": "#001f23",
+        "backgroundColor": "#f0fef4",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="primary"
-  themeVariant="outlined"
+  themeIntent="success"
 >
   <Text
     allowFontScaling={false}
@@ -325,7 +298,7 @@ exports[`Tag renders correctly when variant is outlined and intent is primary 1`
         },
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#017d6d",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -336,30 +309,26 @@ exports[`Tag renders correctly when variant is outlined and intent is primary 1`
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
-    PRIMARY
+    SUCCESS
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is success 1`] = `
+exports[`Tag renders correctly when intent is warning 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#f0fef4",
-        "borderColor": "#017d6d",
+        "backgroundColor": "#fff6eb",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="success"
-  themeVariant="outlined"
+  themeIntent="warning"
 >
   <Text
     allowFontScaling={false}
@@ -374,7 +343,7 @@ exports[`Tag renders correctly when variant is outlined and intent is success 1`
         },
         Array [
           Object {
-            "color": "#017d6d",
+            "color": "#ac5d00",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -385,22 +354,19 @@ exports[`Tag renders correctly when variant is outlined and intent is success 1`
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
-    SUCCESS
+    WARNING
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is warning 1`] = `
+exports[`Tag renders correctly when intent is warning 2`] = `
 <View
   style={
     Array [
       Object {
         "backgroundColor": "#fff6eb",
-        "borderColor": "#ffa234",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
@@ -408,7 +374,6 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
     ]
   }
   themeIntent="warning"
-  themeVariant="outlined"
 >
   <Text
     allowFontScaling={false}
@@ -423,7 +388,7 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
         },
         Array [
           Object {
-            "color": "#ffa234",
+            "color": "#ac5d00",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -434,7 +399,6 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
     WARNING
   </Text>
@@ -446,10 +410,8 @@ exports[`Tag renders correctly with custom content 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": undefined,
-        "borderColor": "#001f23",
+        "backgroundColor": "#ece8ef",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
@@ -457,7 +419,6 @@ exports[`Tag renders correctly with custom content 1`] = `
     ]
   }
   themeIntent="primary"
-  themeVariant="outlined"
 >
   <Text
     allowFontScaling={false}

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,20 +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}
-          fontWeight="semi-bold"
-        >
+        <StyledText themeIntent={intent} fontWeight="semi-bold">
           {content}
         </StyledText>
       ) : (

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

@@ -343,7 +343,7 @@ exports[`StyledAsteriskLabel renders correctly with themeState default 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "lineHeight": 12,
         },
         undefined,
@@ -401,7 +401,7 @@ exports[`StyledAsteriskLabel renders correctly with themeState error 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "lineHeight": 12,
         },
         undefined,
@@ -430,7 +430,7 @@ exports[`StyledAsteriskLabel renders correctly with themeState filled 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "lineHeight": 12,
         },
         undefined,
@@ -479,7 +479,7 @@ exports[`StyledBorderBackDrop renders correctly when focused 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 2,
         "bottom": 0,
@@ -545,7 +545,7 @@ exports[`StyledBorderBackDrop renders correctly with themeState error 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 1,
         "bottom": 0,
@@ -620,7 +620,7 @@ exports[`StyledErrorMessage renders correctly 1`] = `
       },
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#cb300a",
           "marginLeft": 4,
         },
         undefined,
@@ -763,7 +763,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeState error 1`] = `
       Array [
         Object {
           "alignSelf": "flex-end",
-          "color": "#de350b",
+          "color": "#cb300a",
           "flex": 1,
           "flexGrow": 1,
           "marginRight": 4,