npm - @hero-design/rn - Versions diffs - 8.35.0-alpha.3 → 8.35.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (371) hide show

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap CHANGED Viewed

@@ -43,7 +43,7 @@ exports[`Option renders correctly when not selected 1`] = `
       collapsable={false}
       style={
         Object {
-          "backgroundColor": "#de350b",
+          "backgroundColor": "#cb300a",
           "borderRadius": 999,
           "height": 8,
           "opacity": 1,
@@ -114,7 +114,7 @@ exports[`Option renders correctly when selected 1`] = `
       collapsable={false}
       style={
         Object {
-          "backgroundColor": "#de350b",
+          "backgroundColor": "#cb300a",
           "borderRadius": 999,
           "height": 8,
           "opacity": 1,
@@ -179,7 +179,7 @@ exports[`OptionContent renders correctly when there is a badge 1`] = `
     collapsable={false}
     style={
       Object {
-        "backgroundColor": "#de350b",
+        "backgroundColor": "#cb300a",
         "borderRadius": 999,
         "height": 8,
         "opacity": 1,

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -15,11 +15,11 @@ exports[`SelectorSwitch renders correctly 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ffffff",
         "borderRadius": 999,
         "flexDirection": "row",
-        "height": 56,
-        "padding": 4,
+        "height": 40,
+        "paddingHorizontal": 4,
         "position": "relative",
         "width": "100%",
       },
@@ -109,7 +109,7 @@ exports[`SelectorSwitch renders correctly 1`] = `
         collapsable={false}
         style={
           Object {
-            "backgroundColor": "#de350b",
+            "backgroundColor": "#cb300a",
             "borderRadius": 999,
             "height": 8,
             "opacity": 1,
@@ -132,13 +132,13 @@ exports[`SelectorSwitch renders correctly 1`] = `
     collapsable={false}
     style={
       Object {
-        "backgroundColor": "#ffffff",
+        "backgroundColor": "#ccd2d3",
         "borderRadius": 999,
-        "bottom": 4,
-        "left": 4,
+        "bottom": 0,
+        "left": 0,
         "position": "absolute",
-        "right": 4,
-        "top": 4,
+        "right": 0,
+        "top": 0,
         "transform": Array [
           Object {
             "translateX": 0,

package/src/components/Switch/SelectorSwitch/index.tsx CHANGED Viewed

@@ -7,14 +7,13 @@ import React, {
 } from 'react';
 import {
   Animated,
+  Easing,
+  LayoutChangeEvent,
   Platform,
   StyleProp,
   TouchableWithoutFeedback,
   ViewStyle,
-  Easing,
-  LayoutChangeEvent,
 } from 'react-native';
-import { useTheme } from '@emotion/react';
 import type { IconName } from '../../Icon';
 import Option from './Option';
 import { StyledKnot, StyledWrapper } from './StyledSelectorSwitch';
@@ -61,17 +60,13 @@ const SelectorSwitch = <T,>({
   style,
   testID,
 }: SelectorSwitchProps<T>): ReactElement => {
-  const theme = useTheme();
   const [knotWidth, setKnotWidth] = useState(0);
   const [containerWidth, setContainerWidth] = useState(0);
   const animatedValue = useRef(new Animated.Value(0)).current;
   const translateX = animatedValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [
-      0,
-      Math.floor(containerWidth - knotWidth - theme.space.small),
-    ],
+    outputRange: [0, Math.floor(containerWidth - knotWidth)],
   });
   useEffect(() => {
@@ -81,14 +76,11 @@ const SelectorSwitch = <T,>({
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
     }).start();
-  }, [value]);
+  }, [value, animatedValue, options]);
-  const onContainerLayout = useCallback(
-    (e: LayoutChangeEvent) => {
-      setContainerWidth(e.nativeEvent.layout.width);
-    },
-    [options]
-  );
+  const onContainerLayout = useCallback((e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  }, []);
   const onItemLayout = useCallback(
     (e: LayoutChangeEvent, optionValue: T) => {

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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