@hero-design/rn 8.12.1 → 8.12.3

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -716,7 +716,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
                         }
                       }
                       accessible={true}
-                      collapsable={false}
                       focusable={true}
                       onClick={[Function]}
                       onResponderGrant={[Function]}
@@ -726,14 +725,18 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       onResponderTerminationRequest={[Function]}
                       onStartShouldSetResponder={[Function]}
                       style={
-                        Object {
-                          "alignItems": "center",
-                          "borderWidth": 0,
-                          "flexDirection": "row",
-                          "justifyContent": "center",
-                          "opacity": 1,
-                          "padding": 16,
-                        }
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                            "borderWidth": 0,
+                            "flexDirection": "row",
+                            "justifyContent": "center",
+                            "padding": 12,
+                          },
+                          undefined,
+                        ]
                       }
                     >
                       <Text

package/src/components/Typography/Text/StyledText.tsx

@@ -9,6 +9,7 @@ const FONTWEIGHT_MAP = {
 
 const StyledText = styled(Text)<{
   themeFontSize:
+    | 'xsmall'
     | 'small'
     | 'medium'
     | 'large'

package/src/components/Typography/Text/__tests__/StyledText.spec.tsx

@@ -5,6 +5,7 @@ import { StyledText } from '../StyledText';
 describe('StyledText', () => {
   it.each`
     fontSize
+    ${'xsmall'}
     ${'small'}
     ${'medium'}
     ${'large'}

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -391,6 +391,29 @@ exports[`StyledText has xlarge fontSize style 1`] = `
 </Text>
 `;
 
+exports[`StyledText has xsmall fontSize style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 10,
+        "letterSpacing": 0.3,
+        "lineHeight": 18,
+      },
+      undefined,
+    ]
+  }
+  themeFontSize="xsmall"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeTypeface="neutral"
+>
+  This is a test
+</Text>
+`;
+
 exports[`StyledText has xxxlarge fontSize style 1`] = `
 <Text
   style={

package/src/components/Typography/Text/index.tsx

@@ -16,6 +16,7 @@ export interface TextProps extends NativeTextProps {
    * Size of the text.
    */
   fontSize?:
+    | 'xsmall'
     | 'small'
     | 'medium'
     | 'large'

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

@@ -183,8 +183,20 @@ Object {
         "disabledBorder": "#bfc1c5",
         "disabledText": "#bfc1c5",
         "invertedText": "#ffffff",
+        "pressedBackground": Object {
+          "filledDanger": "#fcebe7",
+          "filledPrimary": "#664780",
+          "filledSecondary": "#664780",
+          "outlineDanger": "#fcebe7",
+          "outlinedPrimary": "#ece8ef",
+          "outlinedSecondary": "#ece8ef",
+          "textDanger": "#fcebe7",
+          "textPrimary": "#ece8ef",
+          "textSecondary": "#ece8ef",
+        },
         "primary": "#401960",
         "secondary": "#795e90",
+        "textLoadingBackground": "#ece8ef",
         "utilityBackground": "#f6f6f7",
       },
       "fontSize": Object {
@@ -201,6 +213,7 @@ Object {
       },
       "radii": Object {
         "default": 32,
+        "text": 4,
         "utilityRadii": 8,
       },
       "sizes": Object {
@@ -209,6 +222,7 @@ Object {
       "space": Object {
         "buttonPadding": 16,
         "iconPadding": 12,
+        "textButtonPadding": 12,
         "utilityPadding": 8,
       },
     },
@@ -396,9 +410,11 @@ Object {
     "fab": Object {
       "colors": Object {
         "actionItemBackground": "#401960",
+        "actionItemPressedBackground": "#664780",
         "actionItemText": "#ffffff",
         "backdropBackground": "#000000",
         "buttonBackground": "#401960",
+        "buttonPressedBackground": "#664780",
         "headerText": "#001f23",
         "icon": "#ffffff",
         "titleText": "#ffffff",
@@ -966,6 +982,7 @@ Object {
         "medium": 14,
         "small": 12,
         "xlarge": 18,
+        "xsmall": 10,
         "xxxlarge": 24,
         "xxxxlarge": 28,
         "xxxxxlarge": 32,
@@ -989,6 +1006,7 @@ Object {
         "medium": 22,
         "small": 20,
         "xlarge": 26,
+        "xsmall": 18,
         "xxxlarge": 32,
         "xxxxlarge": 36,
         "xxxxxlarge": 40,
@@ -1082,6 +1100,7 @@ Object {
     "xxxxxlarge": 40,
   },
   "radii": Object {
+    "5xlarge": 32,
     "base": 4,
     "large": 12,
     "medium": 8,

package/src/theme/components/button.ts

@@ -22,6 +22,7 @@ const getButtonTheme = (theme: GlobalTheme) => {
 
   const space = {
     buttonPadding: theme.space.medium,
+    textButtonPadding: theme.space.smallMedium,
     iconPadding: theme.space.smallMedium,
     utilityPadding: theme.space.small,
   };
@@ -31,8 +32,9 @@ const getButtonTheme = (theme: GlobalTheme) => {
   };
 
   const radii = {
-    default: theme.space.xlarge,
-    utilityRadii: theme.space.small,
+    default: theme.radii['5xlarge'],
+    utilityRadii: theme.radii.medium,
+    text: theme.radii.base,
   };
 
   const colors = {
@@ -45,6 +47,18 @@ const getButtonTheme = (theme: GlobalTheme) => {
     disabledBackground: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
     utilityBackground: theme.colors.neutralGlobalSurface,
+    textLoadingBackground: theme.colors.highlightedSurface,
+    pressedBackground: {
+      filledPrimary: theme.colors.pressedSurface,
+      filledSecondary: theme.colors.pressedSurface,
+      filledDanger: theme.colors.errorSurface,
+      outlinedPrimary: theme.colors.highlightedSurface,
+      outlinedSecondary: theme.colors.highlightedSurface,
+      outlineDanger: theme.colors.errorSurface,
+      textPrimary: theme.colors.highlightedSurface,
+      textSecondary: theme.colors.highlightedSurface,
+      textDanger: theme.colors.errorSurface,
+    },
   };
 
   return {

package/src/theme/components/fab.ts

@@ -3,9 +3,11 @@ import type { GlobalTheme } from '../global';
 const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
     buttonBackground: theme.colors.primary,
+    buttonPressedBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.primary,
+    actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary,

package/src/theme/components/typography.ts

@@ -15,6 +15,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
   };
 
   const fontSizes = {
+    xsmall: theme.fontSizes.xsmall,
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
@@ -27,6 +28,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
   };
 
   const lineHeights = {
+    xsmall: theme.lineHeights.xsmall,
     small: theme.lineHeights.small,
     medium: theme.lineHeights.medium,
     large: theme.lineHeights.large,

package/src/theme/global/borders.ts

@@ -11,6 +11,7 @@ interface Radii {
   xlarge: number;
   xxlarge: number;
   xxxlarge: number;
+  '5xlarge': number;
 }
 
 const getBorderWidths = (baseBorderWidth: number): BorderWidths => ({
@@ -26,6 +27,7 @@ const getRadii = (baseRadius: number): Radii => ({
   xlarge: baseRadius * 4, // 16
   xxlarge: baseRadius * 5, // 20
   xxxlarge: baseRadius * 6, // 24
+  '5xlarge': baseRadius * 8, // 32
 });
 
 export { getBorderWidths, getRadii };

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

@@ -13,7 +13,7 @@ Object {
   "disabledOutline": "#bfc1c5",
   "error": "#f46363",
   "errorSurface": "#fcebe7",
-  "highlightedSurface": "#f1e9fb",
+  "highlightedSurface": "#f3e6f6",
   "inactiveOnDefaultGlobalSurface": "#808f91",
   "inactiveOutline": "#808f91",
   "info": "#b5c3fd",
@@ -35,10 +35,10 @@ Object {
   "onSuccessSurface": "#017d6d",
   "onWarningSurface": "#ffa234",
   "overlayGlobalSurface": "#000000",
-  "pressedSurface": "#914edf",
-  "primary": "#7622d7",
+  "pressedSurface": "#9d37b5",
+  "primary": "#8505a2",
   "primaryOutline": "#001f23",
-  "secondary": "#9f64e3",
+  "secondary": "#aa50be",
   "secondaryOutline": "#e8e9ea",
   "success": "#5ace7d",
   "successSurface": "#f0fef4",

package/types/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import type { ReactChild } from 'react';
+import { ReactChild } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 import type { Intent, ThemeVariant } from './StyledButton';

package/types/components/Button/StyledButton.d.ts

@@ -1,16 +1,17 @@
 /// <reference types="react" />
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 import type { Theme } from '@emotion/react';
 declare type Intent = 'primary' | 'secondary' | 'danger';
 declare type ThemeVariant = 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
-declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     disabled?: boolean | undefined;
     themeVariant: ThemeVariant;
+    loading?: boolean | undefined;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableHighlight> | undefined;
 }>;
 declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: Theme | undefined;

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { TouchableOpacity } from 'react-native';
+import { TouchableHighlight } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
 import type { IconProps } from '../../Icon';
-declare const StyledActionItem: import("@emotion/native").StyledComponent<TouchableOpacityProps & {
+declare const StyledActionItem: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableHighlight> | undefined;
 }>;
 declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;

package/types/components/Typography/Text/StyledText.d.ts

@@ -4,7 +4,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
+    themeFontSize: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
     themeIntent: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived';
     themeTypeface: 'neutral' | 'playful';

package/types/components/Typography/Text/index.d.ts

@@ -8,7 +8,7 @@ export interface TextProps extends NativeTextProps {
     /**
      * Size of the text.
      */
-    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
+    fontSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     /**
      * Font weight of the text.
      */

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

@@ -18,6 +18,7 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
     radii: {
         default: number;
         utilityRadii: number;
+        text: number;
     };
     colors: {
         primary: string;
@@ -29,12 +30,25 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
         disabledBackground: string;
         invertedText: string;
         utilityBackground: string;
+        textLoadingBackground: string;
+        pressedBackground: {
+            filledPrimary: string;
+            filledSecondary: string;
+            filledDanger: string;
+            outlinedPrimary: string;
+            outlinedSecondary: string;
+            outlineDanger: string;
+            textPrimary: string;
+            textSecondary: string;
+            textDanger: string;
+        };
     };
     lineHeight: {
         default: number;
     };
     space: {
         buttonPadding: number;
+        textButtonPadding: number;
         iconPadding: number;
         utilityPadding: number;
     };

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

@@ -15,9 +15,11 @@ declare const getFABTheme: (theme: GlobalTheme) => {
     };
     colors: {
         buttonBackground: string;
+        buttonPressedBackground: string;
         icon: string;
         headerText: string;
         actionItemBackground: string;
+        actionItemPressedBackground: string;
         backdropBackground: string;
         titleText: string;
         actionItemText: string;

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

@@ -14,6 +14,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
     };
     fonts: import("../global/typography").Fonts;
     fontSizes: {
+        xsmall: number;
         small: number;
         medium: number;
         large: number;
@@ -25,6 +26,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         '7xlarge': number;
     };
     lineHeights: {
+        xsmall: number;
         small: number;
         medium: number;
         large: number;

package/types/theme/global/borders.d.ts

@@ -10,6 +10,7 @@ interface Radii {
     xlarge: number;
     xxlarge: number;
     xxxlarge: number;
+    '5xlarge': number;
 }
 declare const getBorderWidths: (baseBorderWidth: number) => BorderWidths;
 declare const getRadii: (baseRadius: number) => Radii;