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

package/src/components/Progress/__tests__/__snapshots__/index.spec.js.snap

@@ -7,7 +7,8 @@ exports[`Progress.Bar renders correctly 1`] = `
       Object {
         "alignSelf": "stretch",
         "backgroundColor": "#e8e9ea",
-        "height": 4,
+        "borderRadius": 999,
+        "height": 8,
         "overflow": "hidden",
       },
       undefined,
@@ -45,7 +46,8 @@ exports[`Progress.Bar renders correctly with intent 1`] = `
       Object {
         "alignSelf": "stretch",
         "backgroundColor": "#e8e9ea",
-        "height": 4,
+        "borderRadius": 999,
+        "height": 8,
         "overflow": "hidden",
       },
       undefined,
@@ -110,7 +112,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
               Object {
                 "borderColor": "#5ace7d",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -161,7 +163,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -204,7 +206,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
               Object {
                 "borderColor": "#5ace7d",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -256,7 +258,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -274,11 +276,11 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
           Object {
             "backgroundColor": "#5ace7d",
             "borderRadius": 999,
-            "height": 4,
-            "left": 34,
+            "height": 8,
+            "left": 32,
             "position": "absolute",
             "top": 0,
-            "width": 4,
+            "width": 8,
             "zIndex": 2,
           },
           undefined,
@@ -310,11 +312,11 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
             Object {
               "backgroundColor": "#5ace7d",
               "borderRadius": 999,
-              "height": 4,
-              "left": 34,
+              "height": 8,
+              "left": 32,
               "position": "absolute",
               "top": 0,
-              "width": 4,
+              "width": 8,
               "zIndex": 2,
             },
             undefined,
@@ -329,12 +331,12 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
           Object {
             "alignItems": "center",
             "borderRadius": 999,
-            "height": 64,
+            "height": 56,
             "justifyContent": "center",
-            "left": 4,
+            "left": 8,
             "position": "absolute",
-            "top": 4,
-            "width": 64,
+            "top": 8,
+            "width": 56,
             "zIndex": 3,
           },
           undefined,
@@ -400,7 +402,7 @@ exports[`Progress.Circle renders correctly 1`] = `
               Object {
                 "borderColor": "#401960",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -451,7 +453,7 @@ exports[`Progress.Circle renders correctly 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -494,7 +496,7 @@ exports[`Progress.Circle renders correctly 1`] = `
               Object {
                 "borderColor": "#401960",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -546,7 +548,7 @@ exports[`Progress.Circle renders correctly 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -564,11 +566,11 @@ exports[`Progress.Circle renders correctly 1`] = `
           Object {
             "backgroundColor": "#401960",
             "borderRadius": 999,
-            "height": 4,
-            "left": 34,
+            "height": 8,
+            "left": 32,
             "position": "absolute",
             "top": 0,
-            "width": 4,
+            "width": 8,
             "zIndex": 2,
           },
           undefined,
@@ -600,11 +602,11 @@ exports[`Progress.Circle renders correctly 1`] = `
             Object {
               "backgroundColor": "#401960",
               "borderRadius": 999,
-              "height": 4,
-              "left": 34,
+              "height": 8,
+              "left": 32,
               "position": "absolute",
               "top": 0,
-              "width": 4,
+              "width": 8,
               "zIndex": 2,
             },
             undefined,
@@ -619,12 +621,12 @@ exports[`Progress.Circle renders correctly 1`] = `
           Object {
             "alignItems": "center",
             "borderRadius": 999,
-            "height": 64,
+            "height": 56,
             "justifyContent": "center",
-            "left": 4,
+            "left": 8,
             "position": "absolute",
-            "top": 4,
-            "width": 64,
+            "top": 8,
+            "width": 56,
             "zIndex": 3,
           },
           undefined,
@@ -690,7 +692,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
               Object {
                 "borderColor": "#5ace7d",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -741,7 +743,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -784,7 +786,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
               Object {
                 "borderColor": "#5ace7d",
                 "borderRadius": 999,
-                "borderWidth": 4,
+                "borderWidth": 8,
                 "height": 72,
                 "width": 72,
               },
@@ -836,7 +838,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
                 Object {
                   "borderColor": "#e8e9ea",
                   "borderRadius": 999,
-                  "borderWidth": 4,
+                  "borderWidth": 8,
                   "height": 72,
                   "width": 72,
                 },
@@ -854,11 +856,11 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           Object {
             "backgroundColor": "#5ace7d",
             "borderRadius": 999,
-            "height": 4,
-            "left": 34,
+            "height": 8,
+            "left": 32,
             "position": "absolute",
             "top": 0,
-            "width": 4,
+            "width": 8,
             "zIndex": 2,
           },
           undefined,
@@ -890,11 +892,11 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
             Object {
               "backgroundColor": "#5ace7d",
               "borderRadius": 999,
-              "height": 4,
-              "left": 34,
+              "height": 8,
+              "left": 32,
               "position": "absolute",
               "top": 0,
-              "width": 4,
+              "width": 8,
               "zIndex": 2,
             },
             undefined,
@@ -909,12 +911,12 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
           Object {
             "alignItems": "center",
             "borderRadius": 999,
-            "height": 64,
+            "height": 56,
             "justifyContent": "center",
-            "left": 4,
+            "left": 8,
             "position": "absolute",
-            "top": 4,
-            "width": 64,
+            "top": 8,
+            "width": 56,
             "zIndex": 3,
           },
           undefined,

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

@@ -30,7 +30,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
       style={
         Array [
           Object {
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -225,7 +225,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           style={
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "fontSize": 16,
               },
               undefined,
@@ -248,7 +248,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                   "marginLeft": 4,
                 },
                 undefined,
@@ -297,7 +297,7 @@ exports[`RichTextEditor should render correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -491,7 +491,7 @@ exports[`RichTextEditor should render correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "fontSize": 16,
               },
               undefined,
@@ -514,7 +514,7 @@ exports[`RichTextEditor should render correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                   "marginLeft": 4,
                 },
                 undefined,

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

@@ -44,7 +44,7 @@ exports[`SectionHeading allows to customise the icon 1`] = `
         style={
           Array [
             Object {
-              "color": "#de350b",
+              "color": "#cb300a",
               "fontSize": 24,
             },
             undefined,

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

@@ -38,7 +38,7 @@ exports[`Skeleton renders correctly by default 1`] = `
       colors={
         Array [
           4294375159,
-          4294046451,
+          4292533214,
           4294375159,
         ]
       }
@@ -109,7 +109,7 @@ exports[`Skeleton renders correctly when intent is dark and variant is circular
       colors={
         Array [
           4294967295,
-          4294046451,
+          4292533214,
           4294967295,
         ]
       }
@@ -180,7 +180,7 @@ exports[`Skeleton renders correctly when intent is dark and variant is rectangul
       colors={
         Array [
           4294967295,
-          4294046451,
+          4292533214,
           4294967295,
         ]
       }
@@ -251,7 +251,7 @@ exports[`Skeleton renders correctly when intent is dark and variant is rounded 1
       colors={
         Array [
           4294967295,
-          4294046451,
+          4292533214,
           4294967295,
         ]
       }
@@ -322,7 +322,7 @@ exports[`Skeleton renders correctly when intent is light and variant is circular
       colors={
         Array [
           4294375159,
-          4294046451,
+          4292533214,
           4294375159,
         ]
       }
@@ -393,7 +393,7 @@ exports[`Skeleton renders correctly when intent is light and variant is rectangu
       colors={
         Array [
           4294375159,
-          4294046451,
+          4292533214,
           4294375159,
         ]
       }
@@ -464,7 +464,7 @@ exports[`Skeleton renders correctly when intent is light and variant is rounded
       colors={
         Array [
           4294375159,
-          4294046451,
+          4292533214,
           4294375159,
         ]
       }

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

@@ -3,6 +3,11 @@
 exports[`Swipeable renders correctly 1`] = `
 <View>
   <View
+    containerStyle={
+      Object {
+        "borderRadius": 8,
+      }
+    }
     onSwipeableClose={[Function]}
     onSwipeableLeftOpen={[Function]}
     onSwipeableRightOpen={[Function]}

package/src/components/Swipeable/index.tsx

@@ -7,11 +7,12 @@ import React, {
 } from 'react';
 import { Animated, useWindowDimensions } from 'react-native';
 import {
-  Swipeable as RnghSwipeable,
   GestureHandlerRootView,
   RectButton,
+  Swipeable as RnghSwipeable,
 } from 'react-native-gesture-handler';
 import SwipeableAction from './SwipeableAction';
+import { useTheme } from '../../theme';
 
 type State = 'closed' | 'leftOpen' | 'rightOpen';
 // We are supporting both v1 and v2 of RNGH at the same time.
@@ -102,6 +103,7 @@ const Swipeable = ({
   rightActionsWidth,
   ...swipeableProps
 }: SwipeableProps) => {
+  const theme = useTheme();
   const { width } = useWindowDimensions();
   const swipeableRef = useRef<RnghSwipeable>(null);
 
@@ -147,6 +149,9 @@ const Swipeable = ({
         onSwipeableLeftOpen={() => onStateChange?.('leftOpen')}
         onSwipeableRightOpen={() => onStateChange?.('rightOpen')}
         onSwipeableClose={() => onStateChange?.('closed')}
+        containerStyle={{
+          borderRadius: theme.__hd__.swipeable.radii.swipeableContainer,
+        }}
       >
         {children}
       </RnghSwipeable>

package/src/components/Switch/SelectorSwitch/StyledSelectorSwitch.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { View, Animated } from 'react-native';
+import { View, Animated, StyleSheet } from 'react-native';
 
 const AnimatedView = Animated.createAnimatedComponent(View);
 
@@ -9,7 +9,8 @@ export const StyledWrapper = styled(View)(({ theme }) => ({
   height: theme.__hd__.switch.sizes.selector.height,
   borderRadius: theme.__hd__.switch.radii.selector.default,
   backgroundColor: theme.__hd__.switch.colors.selector.background,
-  padding: theme.__hd__.switch.spaces.selector.wrapperPadding,
+  paddingHorizontal:
+    theme.__hd__.switch.spaces.selector.wrapperHorizontalPadding,
   position: 'relative',
 }));
 
@@ -29,11 +30,7 @@ export const StyledIconWrapper = styled(AnimatedView)(({ theme }) => ({
 }));
 
 export const StyledKnot = styled(AnimatedView)(({ theme }) => ({
+  ...StyleSheet.absoluteFillObject,
   borderRadius: theme.__hd__.switch.radii.selector.default,
   backgroundColor: theme.__hd__.switch.colors.selector.textBackground,
-  position: 'absolute',
-  top: theme.__hd__.switch.spaces.selector.wrapperPadding,
-  bottom: theme.__hd__.switch.spaces.selector.wrapperPadding,
-  left: theme.__hd__.switch.spaces.selector.wrapperPadding,
-  right: theme.__hd__.switch.spaces.selector.wrapperPadding,
 }));

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

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

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

@@ -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) => {