@hero-design/rn 8.34.2 → 8.35.0-alpha.1

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

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

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

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { View, Animated, StyleSheet } from 'react-native';
+import { View, Animated } from 'react-native';
 
 const AnimatedView = Animated.createAnimatedComponent(View);
 
@@ -9,8 +9,7 @@ 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,
-  paddingHorizontal:
-    theme.__hd__.switch.spaces.selector.wrapperHorizontalPadding,
+  padding: theme.__hd__.switch.spaces.selector.wrapperPadding,
   position: 'relative',
 }));
 
@@ -30,7 +29,11 @@ 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": "#ffffff",
+        "backgroundColor": "#f6f6f7",
         "borderRadius": 999,
         "flexDirection": "row",
-        "height": 40,
-        "paddingHorizontal": 4,
+        "height": 56,
+        "padding": 4,
         "position": "relative",
         "width": "100%",
       },
@@ -132,13 +132,13 @@ exports[`SelectorSwitch renders correctly 1`] = `
     collapsable={false}
     style={
       Object {
-        "backgroundColor": "#ccd2d3",
+        "backgroundColor": "#ffffff",
         "borderRadius": 999,
-        "bottom": 0,
-        "left": 0,
+        "bottom": 4,
+        "left": 4,
         "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "right": 4,
+        "top": 4,
         "transform": Array [
           Object {
             "translateX": 0,

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

@@ -7,13 +7,14 @@ 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';
@@ -60,13 +61,17 @@ 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)],
+    outputRange: [
+      0,
+      Math.floor(containerWidth - knotWidth - theme.space.small),
+    ],
   });
 
   useEffect(() => {
@@ -76,11 +81,14 @@ const SelectorSwitch = <T,>({
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
     }).start();
-  }, [value, animatedValue, options]);
+  }, [value]);
 
-  const onContainerLayout = useCallback((e: LayoutChangeEvent) => {
-    setContainerWidth(e.nativeEvent.layout.width);
-  }, []);
+  const onContainerLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      setContainerWidth(e.nativeEvent.layout.width);
+    },
+    [options]
+  );
 
   const onItemLayout = useCallback(
     (e: LayoutChangeEvent, optionValue: T) => {

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

@@ -238,7 +238,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": "#ccd2d3",
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -339,7 +339,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -434,7 +434,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -556,7 +556,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1057,7 +1057,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": "#ccd2d3",
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1158,7 +1158,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1253,7 +1253,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1375,7 +1375,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1876,7 +1876,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": "#ccd2d3",
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -1977,7 +1977,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -2072,7 +2072,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -2194,7 +2194,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 16,
+                      "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
                         Object {

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

@@ -150,7 +150,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": "#ccd2d3",
-                    "borderRadius": 16,
+                    "borderRadius": 8,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -251,7 +251,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "borderRadius": 16,
+                    "borderRadius": 8,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -346,7 +346,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "borderRadius": 16,
+                    "borderRadius": 8,
                     "flex": 1,
                     "transform": Array [
                       Object {
@@ -468,7 +468,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "borderRadius": 16,
+                    "borderRadius": 8,
                     "flex": 1,
                     "transform": Array [
                       Object {

package/src/index.ts

@@ -60,6 +60,7 @@ import Rate from './components/Rate';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
+import FABModal from './components/FAB/ActionGroup/FABModal';
 
 export {
   theme,
@@ -123,6 +124,7 @@ export {
   Rate,
   RefreshControl,
   RichTextEditor,
+  FABModal,
 };
 
 export * from './types';

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -676,8 +676,8 @@ Object {
         "default": 999,
       },
       "sizes": Object {
-        "barHeight": 8,
-        "circleCompletenessHeight": 8,
+        "barHeight": 4,
+        "circleCompletenessHeight": 4,
         "circleDiameter": 72,
       },
     },
@@ -857,8 +857,8 @@ Object {
           "unchecked": "#808f91",
         },
         "selector": Object {
-          "background": "#ffffff",
-          "textBackground": "#ccd2d3",
+          "background": "#f6f6f7",
+          "textBackground": "#ffffff",
         },
         "thumb": "#ffffff",
       },
@@ -871,7 +871,7 @@ Object {
       "sizes": Object {
         "height": 24,
         "selector": Object {
-          "height": 40,
+          "height": 56,
         },
         "thumb": 16,
         "width": 48,
@@ -880,7 +880,7 @@ Object {
         "paddingHorizontal": 4,
         "selector": Object {
           "iconPadding": 16,
-          "wrapperHorizontalPadding": 4,
+          "wrapperPadding": 4,
         },
       },
     },
@@ -897,7 +897,7 @@ Object {
         "text": "#001f23",
       },
       "radii": Object {
-        "outline": 16,
+        "outline": 8,
       },
       "sizes": Object {
         "indicator": 2,

package/src/theme/components/progress.ts

@@ -41,8 +41,8 @@ const getProgressTheme = (theme: GlobalTheme) => {
 
   const sizes = {
     circleDiameter: theme.sizes['6xlarge'],
-    circleCompletenessHeight: theme.sizes.small,
-    barHeight: theme.sizes.small,
+    circleCompletenessHeight: theme.sizes.xsmall,
+    barHeight: theme.sizes.xsmall,
   };
 
   const radii = {

package/src/theme/components/switch.ts

@@ -10,8 +10,8 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     },
     thumb: theme.colors.onSecondary,
     selector: {
-      background: theme.colors.defaultGlobalSurface,
-      textBackground: theme.colors.decorativePrimarySurface,
+      background: theme.colors.neutralGlobalSurface,
+      textBackground: theme.colors.decorativePrimary,
     },
   };
 
@@ -20,7 +20,7 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     width: theme.sizes.xxxlarge,
     height: theme.sizes.large,
     selector: {
-      height: theme.sizes.xxlarge,
+      height: theme.sizes.xxxxlarge,
     },
   };
 
@@ -28,7 +28,7 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     paddingHorizontal: theme.space.xsmall,
     selector: {
       iconPadding: theme.space.medium,
-      wrapperHorizontalPadding: theme.space.xsmall,
+      wrapperPadding: theme.space.xsmall,
     },
   };
 

package/src/theme/components/tabs.ts

@@ -20,7 +20,7 @@ const getTabsTheme = (theme: GlobalTheme) => {
   };
 
   const radii = {
-    outline: theme.radii.xlarge,
+    outline: theme.radii.medium,
   };
 
   const borderWidths = {