@hero-design/rn 8.34.1 → 8.34.2

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/index.spec.tsx.snap

@@ -34,7 +34,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#48000a",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 32,
         "left": 0,
@@ -111,7 +111,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#737479",
+        "backgroundColor": "#0d2a2e",
         "borderRadius": 999,
         "height": 32,
         "left": 22.4,
@@ -188,7 +188,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#193539",
         "borderRadius": 999,
         "height": 32,
         "left": 44.8,
@@ -265,7 +265,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#353957",
+        "backgroundColor": "#264144",
         "borderRadius": 999,
         "height": 32,
         "left": 67.19999999999999,
@@ -342,7 +342,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#25006e",
+        "backgroundColor": "#334c4f",
         "borderRadius": 999,
         "height": 32,
         "left": 89.6,
@@ -438,7 +438,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#48000a",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 40,
         "left": 0,
@@ -515,7 +515,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#737479",
+        "backgroundColor": "#0d2a2e",
         "borderRadius": 999,
         "height": 40,
         "left": 28,
@@ -592,7 +592,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#193539",
         "borderRadius": 999,
         "height": 40,
         "left": 56,
@@ -669,7 +669,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#353957",
+        "backgroundColor": "#264144",
         "borderRadius": 999,
         "height": 40,
         "left": 84,

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -764,7 +764,7 @@ exports[`ActionGroup has active true 1`] = `
         "backgroundColor": "#000000",
         "bottom": 0,
         "left": 0,
-        "opacity": 0.4,
+        "opacity": 0.25,
         "position": "absolute",
         "right": 0,
         "top": 0,
@@ -1373,7 +1373,7 @@ exports[`ActionGroup has active true 1`] = `
         Object {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
+          "backgroundColor": "#664780",
           "borderRadius": 999,
           "elevation": 2,
           "flexDirection": "row",

package/src/components/FAB/ActionGroup/index.tsx

@@ -114,7 +114,7 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
     const interpolatedBackdropOpacityAnimation =
       tranlateXAnimation.current.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, 0.4],
+        outputRange: [0, 0.25],
       });
 
     const interpolatedActionGroupOpacityAnimation =

package/src/components/FAB/FAB.tsx

@@ -175,6 +175,7 @@ const FAB = forwardRef<FABHandles, FABProps>(
           },
         ]}
         testID={testID}
+        themeActive={active}
       >
         {isIconOnly ? (
           <IconOnlyContent

package/src/components/FAB/StyledFAB.tsx

@@ -6,22 +6,26 @@ import Icon from '../Icon';
 import Typography from '../Typography';
 import Box from '../Box';
 
-const StyledFAB = styled(TouchableHighlight)<TouchableHighlightProps>(
-  ({ theme }) => ({
-    backgroundColor: theme.__hd__.fab.colors.buttonBackground,
-    borderRadius: theme.radii.rounded,
-    alignItems: 'center',
-    justifyContent: 'center',
-    alignSelf: 'flex-start',
-    padding: theme.__hd__.fab.space.containerPadding,
-    flexDirection: 'row',
-    elevation: theme.__hd__.fab.shadows.elevation,
-    shadowColor: theme.__hd__.fab.colors.shadow,
-    shadowOffset: theme.__hd__.fab.shadows.offset,
-    shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity,
-  })
-);
+const StyledFAB = styled(TouchableHighlight)<
+  TouchableHighlightProps & {
+    themeActive?: boolean;
+  }
+>(({ theme, themeActive }) => ({
+  backgroundColor: themeActive
+    ? theme.__hd__.fab.colors.buttonActiveBackground
+    : theme.__hd__.fab.colors.buttonBackground,
+  borderRadius: theme.radii.rounded,
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start',
+  padding: theme.__hd__.fab.space.containerPadding,
+  flexDirection: 'row',
+  elevation: theme.__hd__.fab.shadows.elevation,
+  shadowColor: theme.__hd__.fab.colors.shadow,
+  shadowOffset: theme.__hd__.fab.shadows.offset,
+  shadowRadius: theme.__hd__.fab.shadows.radius,
+  shadowOpacity: theme.__hd__.fab.shadows.opacity,
+}));
 
 const StyledFABIcon = styled(Icon)<IconProps>(({ theme }) => ({
   color: theme.__hd__.fab.colors.icon,

package/src/components/FAB/__tests__/StyledFAB.spec.tsx

@@ -6,7 +6,17 @@ import { StyledFAB, StyledFABIcon } from '../StyledFAB';
 describe('StyledFAB', () => {
   it('renders correctly', () => {
     const { toJSON } = renderWithTheme(
-      <StyledFAB>
+      <StyledFAB themeActive={false}>
+        <Typography.Body variant="small"> button </Typography.Body>
+      </StyledFAB>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledFAB themeActive>
         <Typography.Body variant="small"> button </Typography.Body>
       </StyledFAB>
     );

package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap

@@ -57,6 +57,63 @@ exports[`StyledFAB renders correctly 1`] = `
 </View>
 `;
 
+exports[`StyledFAB renders correctly 2`] = `
+<View
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#664780",
+        "borderRadius": 999,
+        "elevation": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 20,
+        "shadowColor": "#001f23",
+        "shadowOffset": Object {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 8,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+     button 
+  </Text>
+</View>
+`;
+
 exports[`StyledFABIcon renders correctly 1`] = `
 <HeroIcon
   name="add"

package/src/components/List/StyledListItem.tsx

@@ -19,6 +19,7 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
       ? theme.__hd__.list.colors.checkedListItemContainerBackground
       : theme.__hd__.list.colors.listItemContainerBackground,
     padding: theme.__hd__.list.space.listItemContainerPadding,
+    borderRadius: theme.__hd__.list.radii.item,
   };
 
   switch (themeVariant) {
@@ -28,7 +29,6 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
       return {
         ...sharedStyles,
         alignItems: 'center',
-        borderRadius: theme.__hd__.list.radii.card,
         shadowColor: theme.colors.secondaryOutline,
         shadowRadius: theme.__hd__.list.radii.cardShadow,
         shadowOffset: theme.__hd__.list.shadows.cardOffset,

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -20,6 +20,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -346,6 +347,7 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -474,6 +476,7 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -597,6 +600,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -155,6 +155,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant fu
     Array [
       Object {
         "backgroundColor": "#ffffff",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },
@@ -255,6 +256,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
     Array [
       Object {
         "backgroundColor": "#ece8ef",
+        "borderRadius": 8,
         "flexDirection": "row",
         "padding": 16,
       },

package/src/components/Progress/StyledProgressBar.tsx

@@ -13,6 +13,7 @@ const StyledWrapper = styled(View)<ViewProps & { themeIntent: ThemeIntent }>(
         THEME_INTENT_MAP[themeIntent]
       ],
     overflow: 'hidden',
+    borderRadius: theme.__hd__.progress.radii.default,
   })
 );
 

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/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__/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%",
       },
@@ -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,