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

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -26,7 +26,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -238,7 +238,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": "#ccd2d3",
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -339,7 +339,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -434,7 +434,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -485,7 +485,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "backgroundColor": "#de350b",
+                        "backgroundColor": "#cb300a",
                         "borderRadius": 999,
                         "height": 8,
                         "opacity": 1,
@@ -556,7 +556,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -612,7 +612,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                     style={
                       Object {
                         "alignItems": "center",
-                        "backgroundColor": "#4568fb",
+                        "backgroundColor": "#355bfb",
                         "borderRadius": 999,
                         "height": 20,
                         "justifyContent": "center",
@@ -845,7 +845,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -1057,7 +1057,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": "#ccd2d3",
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1158,7 +1158,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1253,7 +1253,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1304,7 +1304,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "backgroundColor": "#de350b",
+                        "backgroundColor": "#cb300a",
                         "borderRadius": 999,
                         "height": 8,
                         "opacity": 1,
@@ -1375,7 +1375,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1431,7 +1431,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     style={
                       Object {
                         "alignItems": "center",
-                        "backgroundColor": "#4568fb",
+                        "backgroundColor": "#355bfb",
                         "borderRadius": 999,
                         "height": 20,
                         "justifyContent": "center",
@@ -1664,7 +1664,7 @@ exports[`useIsFocused renders correctly 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -1876,7 +1876,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": "#ccd2d3",
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1977,7 +1977,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -2072,7 +2072,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -2123,7 +2123,7 @@ exports[`useIsFocused renders correctly 1`] = `
                     collapsable={false}
                     style={
                       Object {
-                        "backgroundColor": "#de350b",
+                        "backgroundColor": "#cb300a",
                         "borderRadius": 999,
                         "height": 8,
                         "opacity": 1,
@@ -2194,7 +2194,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -2250,7 +2250,7 @@ exports[`useIsFocused renders correctly 1`] = `
                     style={
                       Object {
                         "alignItems": "center",
-                        "backgroundColor": "#4568fb",
+                        "backgroundColor": "#355bfb",
                         "borderRadius": 999,
                         "height": 20,
                         "justifyContent": "center",

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap

@@ -150,7 +150,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": "#ccd2d3",
-                    "borderRadius": 8,
+                    "borderRadius": 16,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -251,7 +251,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "borderRadius": 8,
+                    "borderRadius": 16,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -346,7 +346,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "borderRadius": 8,
+                    "borderRadius": 16,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -397,7 +397,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                   collapsable={false}
                   style={
                     Object {
-                      "backgroundColor": "#de350b",
+                      "backgroundColor": "#cb300a",
                       "borderRadius": 999,
                       "height": 8,
                       "opacity": 1,
@@ -468,7 +468,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "borderRadius": 8,
+                    "borderRadius": 16,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -524,7 +524,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                   style={
                     Object {
                       "alignItems": "center",
-                      "backgroundColor": "#4568fb",
+                      "backgroundColor": "#355bfb",
                       "borderRadius": 999,
                       "height": 20,
                       "justifyContent": "center",

package/src/components/Tabs/__tests__/__snapshots__/TabWithBadge.spec.tsx.snap

@@ -18,7 +18,7 @@ exports[`TabWithBadge renders correctly with counter badge config 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#4568fb",
+        "backgroundColor": "#355bfb",
         "borderRadius": 999,
         "height": 20,
         "justifyContent": "center",
@@ -80,7 +80,7 @@ exports[`TabWithBadge renders correctly with status badge config 1`] = `
     collapsable={false}
     style={
       Object {
-        "backgroundColor": "#de350b",
+        "backgroundColor": "#cb300a",
         "borderRadius": 999,
         "height": 8,
         "opacity": 1,

package/src/components/Tabs/__tests__/__snapshots__/index.spec.tsx.snap

@@ -26,7 +26,7 @@ exports[`Tabs renders correctly 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -281,7 +281,7 @@ exports[`Tabs renders correctly 1`] = `
                 collapsable={false}
                 style={
                   Object {
-                    "backgroundColor": "#de350b",
+                    "backgroundColor": "#cb300a",
                     "borderRadius": 999,
                     "height": 8,
                     "opacity": 1,
@@ -360,7 +360,7 @@ exports[`Tabs renders correctly 1`] = `
                 style={
                   Object {
                     "alignItems": "center",
-                    "backgroundColor": "#4568fb",
+                    "backgroundColor": "#355bfb",
                     "borderRadius": 999,
                     "height": 20,
                     "justifyContent": "center",
@@ -609,7 +609,7 @@ exports[`useIsFocused renders correctly 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -864,7 +864,7 @@ exports[`useIsFocused renders correctly 1`] = `
                 collapsable={false}
                 style={
                   Object {
-                    "backgroundColor": "#de350b",
+                    "backgroundColor": "#cb300a",
                     "borderRadius": 999,
                     "height": 8,
                     "opacity": 1,
@@ -943,7 +943,7 @@ exports[`useIsFocused renders correctly 1`] = `
                 style={
                   Object {
                     "alignItems": "center",
-                    "backgroundColor": "#4568fb",
+                    "backgroundColor": "#355bfb",
                     "borderRadius": 999,
                     "height": 20,
                     "justifyContent": "center",
@@ -1192,7 +1192,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -1447,7 +1447,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                 collapsable={false}
                 style={
                   Object {
-                    "backgroundColor": "#de350b",
+                    "backgroundColor": "#cb300a",
                     "borderRadius": 999,
                     "height": 8,
                     "opacity": 1,
@@ -1526,7 +1526,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                 style={
                   Object {
                     "alignItems": "center",
-                    "backgroundColor": "#4568fb",
+                    "backgroundColor": "#355bfb",
                     "borderRadius": 999,
                     "height": 20,
                     "justifyContent": "center",

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();