@hero-design/rn 8.34.2-alpha.0 → 8.34.2

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,

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

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": 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 {
@@ -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 {
@@ -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 {
@@ -1375,7 +1375,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "flex": 1,
                       "transform": Array [
                         Object {
@@ -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 {
@@ -2194,7 +2194,7 @@ exports[`useIsFocused renders correctly 1`] = `
                   style={
                     Object {
                       "backgroundColor": undefined,
-                      "borderRadius": 8,
+                      "borderRadius": 16,
                       "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": 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 {
@@ -468,7 +468,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                 style={
                   Object {
                     "backgroundColor": undefined,
-                    "borderRadius": 8,
+                    "borderRadius": 16,
                     "flex": 1,
                     "transform": Array [
                       Object {

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

@@ -467,6 +467,7 @@ Object {
         "actionItemPressedBackground": "#664780",
         "actionItemText": "#ffffff",
         "backdropBackground": "#000000",
+        "buttonActiveBackground": "#664780",
         "buttonBackground": "#401960",
         "buttonPressedBackground": "#664780",
         "headerText": "#001f23",
@@ -566,8 +567,8 @@ Object {
       },
       "radii": Object {
         "basicItem": 4,
-        "card": 8,
         "cardShadow": 4,
+        "item": 8,
         "leadingStatus": 999,
       },
       "shadows": Object {
@@ -675,8 +676,8 @@ Object {
         "default": 999,
       },
       "sizes": Object {
-        "barHeight": 4,
-        "circleCompletenessHeight": 4,
+        "barHeight": 8,
+        "circleCompletenessHeight": 8,
         "circleDiameter": 72,
       },
     },
@@ -856,8 +857,8 @@ Object {
           "unchecked": "#808f91",
         },
         "selector": Object {
-          "background": "#f6f6f7",
-          "textBackground": "#ffffff",
+          "background": "#ffffff",
+          "textBackground": "#ccd2d3",
         },
         "thumb": "#ffffff",
       },
@@ -870,7 +871,7 @@ Object {
       "sizes": Object {
         "height": 24,
         "selector": Object {
-          "height": 56,
+          "height": 40,
         },
         "thumb": 16,
         "width": 48,
@@ -879,7 +880,7 @@ Object {
         "paddingHorizontal": 4,
         "selector": Object {
           "iconPadding": 16,
-          "wrapperPadding": 4,
+          "wrapperHorizontalPadding": 4,
         },
       },
     },
@@ -896,7 +897,7 @@ Object {
         "text": "#001f23",
       },
       "radii": Object {
-        "outline": 8,
+        "outline": 16,
       },
       "sizes": Object {
         "indicator": 2,

package/src/theme/components/fab.ts

@@ -4,6 +4,7 @@ const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
     buttonBackground: theme.colors.primary,
     buttonPressedBackground: theme.colors.pressedSurface,
+    buttonActiveBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.secondary,

package/src/theme/components/list.ts

@@ -21,7 +21,7 @@ const getListTheme = (theme: GlobalTheme) => {
   };
 
   const radii = {
-    card: theme.radii.medium,
+    item: theme.radii.medium,
     basicItem: theme.radii.base,
     cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded,

package/src/theme/components/progress.ts

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

package/src/theme/components/switch.ts

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

package/src/theme/components/tabs.ts

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

package/src/theme/global/colors/__tests__/__snapshots__/work.spec.ts.snap

@@ -13,7 +13,7 @@ Object {
   "disabledOutline": "#bfc1c5",
   "error": "#f46363",
   "errorSurface": "#fcebe7",
-  "highlightedSurface": "#eaecf0",
+  "highlightedSurface": "#e6e6e6",
   "inactiveOnDefaultGlobalSurface": "#808f91",
   "inactiveOutline": "#808f91",
   "info": "#b5c3fd",
@@ -35,10 +35,10 @@ Object {
   "onSuccessSurface": "#017d6d",
   "onWarningSurface": "#ffa234",
   "overlayGlobalSurface": "#000000",
-  "pressedSurface": "#586a8a",
-  "primary": "#2e456d",
+  "pressedSurface": "#000000",
+  "primary": "#000000",
   "primaryOutline": "#001f23",
-  "secondary": "#627492",
+  "secondary": "#4d4d4d",
   "secondaryOutline": "#e8e9ea",
   "success": "#5ace7d",
   "successSurface": "#f0fef4",

package/src/theme/global/colors/work.ts

@@ -3,13 +3,13 @@ import swag from './swag';
 import type { SystemPalette, BrandSystemPalette } from './types';
 
 const workBrandSystemPallete: BrandSystemPalette = {
-  primary: palette.policeBlue,
+  primary: palette.black,
   onPrimary: palette.white,
-  secondary: palette.policeBlueLight25,
+  secondary: palette.blackLight30,
   onSecondary: palette.white,
   defaultSurface: palette.white,
-  highlightedSurface: palette.policeBlueLight90,
-  pressedSurface: palette.policeBlueLight20,
+  highlightedSurface: palette.blackLight90,
+  pressedSurface: palette.black,
 
   decorativePrimary: palette.gold,
   decorativePrimarySurface: palette.goldLight80,