@hero-design/rn 8.36.2 → 8.37.0

package/src/theme/components/fab.ts

@@ -6,13 +6,11 @@ const getFABTheme = (theme: GlobalTheme) => {
     buttonPressedBackground: theme.colors.pressedSurface,
     buttonActiveBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
-    headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.secondary,
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary,
-    shadow: theme.colors.primaryOutline,
   };
 
   const sizes = {
@@ -23,29 +21,27 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const fonts = {
-    header: theme.fonts.neutral.semiBold,
     actionItemText: theme.fonts.neutral.regular,
     title: theme.fonts.neutral.semiBold,
   };
 
   const fontSizes = {
-    header: theme.fontSizes.xxxlarge,
     actionItemText: theme.fontSizes.large,
     title: theme.fontSizes.large,
   };
 
   const lineHeights = {
-    header: theme.lineHeights.xxxlarge,
     actionItemText: theme.lineHeights.medium,
     title: theme.lineHeights.large,
     icon: theme.lineHeights.large,
   };
 
   const shadows = {
-    offset: { width: 0, height: 2 },
-    opacity: 0.12,
-    radius: theme.radii.medium,
-    elevation: 2,
+    offset: theme.shadows.default.shadowOffset,
+    opacity: theme.shadows.default.shadowOpacity,
+    radius: theme.shadows.default.shadowRadius,
+    elevation: theme.shadows.default.elevation,
+    color: theme.shadows.default.shadowColor,
   };
 
   const space = {
@@ -55,8 +51,6 @@ const getFABTheme = (theme: GlobalTheme) => {
     actionItemTextPaddingLeft: theme.space.xsmall,
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
-    headerTextMarginRight: theme.space.large,
-    headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
     titleMarginHorizontal: theme.space.small,
   };

package/src/theme/components/list.ts

@@ -23,13 +23,17 @@ const getListTheme = (theme: GlobalTheme) => {
   const radii = {
     item: theme.radii.medium,
     basicItem: theme.radii.base,
-    cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded,
   };
 
   const shadows = {
-    cardOffset: theme.shadows.default.shadowOffset,
-    cardElevation: theme.shadows.default.elevation,
+    card: {
+      offset: theme.shadows.default.shadowOffset,
+      elevation: theme.shadows.default.elevation,
+      color: theme.shadows.default.shadowColor,
+      radius: theme.shadows.default.shadowRadius,
+      opacity: theme.shadows.default.shadowOpacity,
+    },
   };
 
   const widths = {
@@ -39,7 +43,6 @@ const getListTheme = (theme: GlobalTheme) => {
   const opacity = {
     disabled: 0.38,
     enabled: 1,
-    cardShadow: theme.shadows.default.shadowOpacity,
   };
 
   return { colors, space, radii, widths, opacity, shadows };

package/src/theme/components/toast.ts

@@ -9,7 +9,6 @@ const getToastTheme = (theme: GlobalTheme) => {
     notification: theme.colors.defaultGlobalSurface,
     snackbar: theme.colors.darkGlobalSurface,
     divider: theme.colors.secondaryOutline,
-    shadow: theme.colors.primaryOutline,
   };
 
   const sizes = {
@@ -34,10 +33,11 @@ const getToastTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    offset: { width: 0, height: 2 },
-    opacity: 0.12,
-    radius: 4,
-    elevation: 4,
+    offset: theme.shadows.default.shadowOffset,
+    opacity: theme.shadows.default.shadowOpacity,
+    radius: theme.shadows.default.shadowRadius,
+    elevation: theme.shadows.default.elevation,
+    color: theme.shadows.default.shadowColor,
   };
 
   return { colors, radii, sizes, space, borderWidths, shadows };

package/src/theme/global/shadows.ts

@@ -6,10 +6,10 @@ const getShadows = (systemPalette: SystemPalette) => ({
       width: 0,
       height: 2,
     },
-    shadowColor: systemPalette.secondaryOutline,
-    shadowOpacity: 1,
+    shadowColor: systemPalette.primaryOutline,
+    shadowOpacity: 0.12,
     shadowRadius: 4,
-    elevation: 10,
+    elevation: 3,
   },
 });
 

package/types/components/Checkbox/StyledCheckbox.d.ts

@@ -5,7 +5,6 @@ export declare const StyledWrapper: import("@emotion/native").StyledComponent<im
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeWithBorder: boolean;
     themeState: CheckboxThemeState;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;

package/types/components/Checkbox/index.d.ts

@@ -9,6 +9,7 @@ export interface CheckboxProps {
      */
     description?: string;
     /**
+     * @deprecated This prop will be removed in the next major release. Checkboxes will always have border.
      * Whether the border is shown.
      */
     withBorder?: boolean;

package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { Animated, View } from 'react-native';
 import type { ViewProps } from 'react-native';
-import type { TextProps } from '../../Typography/Text';
 declare const StyledContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -24,14 +23,10 @@ declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FA
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").PressableProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledHeaderText: import("@emotion/native").StyledComponent<import("../../Typography/Title").TitleProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & TextProps, {}, {}>;
-export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledContainerInModal, StyledActionGroupContainer, StyledFAB, };
+export { StyledActionGroupContainer, StyledBackdrop, StyledContainer, StyledContainerInModal, StyledFAB, };

package/types/components/FAB/ActionGroup/index.d.ts

@@ -9,6 +9,7 @@ export type ActionGroupHandles = {
 };
 export interface ActionGroupProps {
     /**
+     * @deprecated headerTitle will be removed in the next major release.
      * Title of the action group header.
      */
     headerTitle?: string;
@@ -16,6 +17,10 @@ export interface ActionGroupProps {
      * This function is called on pressing the FAB button.
      * */
     onPress?: () => void;
+    /**
+     * This function is called on pressing the FAB backdrop.
+     * */
+    onBackdropPress?: () => void;
     /**
      * Specify if the FAB button is in active state and the action group is shown.
      * */

package/types/theme/components/cardCarousel.d.ts

@@ -1,6 +1,7 @@
 import type { GlobalTheme } from '../global';
 declare const getCardCarouselTheme: (theme: GlobalTheme) => {
     shadows: {
+        color: string;
         offset: {
             width: number;
             height: number;
@@ -10,7 +11,6 @@ declare const getCardCarouselTheme: (theme: GlobalTheme) => {
         elevation: number;
     };
     colors: {
-        shadow: string;
         carouselItemBackground: string;
     };
     space: {

package/types/theme/components/fab.d.ts

@@ -4,12 +4,10 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         actionItem: number;
     };
     fonts: {
-        header: string;
         actionItemText: string;
         title: string;
     };
     fontSizes: {
-        header: number;
         actionItemText: number;
         title: number;
     };
@@ -18,13 +16,11 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         buttonPressedBackground: string;
         buttonActiveBackground: string;
         icon: string;
-        headerText: string;
         actionItemBackground: string;
         actionItemPressedBackground: string;
         backdropBackground: string;
         titleText: string;
         actionItemText: string;
-        shadow: string;
     };
     sizes: {
         width: number;
@@ -33,7 +29,6 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         iconContainerHeight: number;
     };
     lineHeights: {
-        header: number;
         actionItemText: number;
         title: number;
         icon: number;
@@ -46,6 +41,7 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         opacity: number;
         radius: number;
         elevation: number;
+        color: string;
     };
     space: {
         actionItemPadding: number;
@@ -54,8 +50,6 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         actionItemTextPaddingLeft: number;
         buttonMarginTop: number;
         buttonMarginRight: number;
-        headerTextMarginRight: number;
-        headerTextMarginBottom: number;
         containerPadding: number;
         titleMarginHorizontal: number;
     };

package/types/theme/components/list.d.ts

@@ -20,7 +20,6 @@ declare const getListTheme: (theme: GlobalTheme) => {
     radii: {
         item: number;
         basicItem: number;
-        cardShadow: number;
         leadingStatus: number;
     };
     widths: {
@@ -29,14 +28,18 @@ declare const getListTheme: (theme: GlobalTheme) => {
     opacity: {
         disabled: number;
         enabled: number;
-        cardShadow: number;
     };
     shadows: {
-        cardOffset: {
-            width: number;
-            height: number;
+        card: {
+            offset: {
+                width: number;
+                height: number;
+            };
+            elevation: number;
+            color: string;
+            radius: number;
+            opacity: number;
         };
-        cardElevation: number;
     };
 };
 export default getListTheme;

package/types/theme/components/toast.d.ts

@@ -8,7 +8,6 @@ declare const getToastTheme: (theme: GlobalTheme) => {
         notification: string;
         snackbar: string;
         divider: string;
-        shadow: string;
     };
     radii: {
         default: number;
@@ -35,6 +34,7 @@ declare const getToastTheme: (theme: GlobalTheme) => {
         opacity: number;
         radius: number;
         elevation: number;
+        color: string;
     };
 };
 export default getToastTheme;