@hero-design/rn 8.75.0 → 8.76.0

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarMessage.spec.tsx.snap

@@ -0,0 +1,382 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToolbarMessage disabled renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 64,
+          "justifyContent": "space-between",
+          "paddingHorizontal": 8,
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-message"
+  >
+    <View
+      pointerEvents="none"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#f6f6f7",
+            "borderRadius": 999,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 40,
+            "paddingHorizontal": 12,
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-input-container"
+    >
+      <TextInput
+        editable={true}
+        onChangeText={[MockFunction]}
+        placeholder="Message"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="toolbar-message-input"
+        value="Jisoo"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`ToolbarMessage filled renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 64,
+          "justifyContent": "space-between",
+          "paddingHorizontal": 8,
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-message"
+  >
+    <View
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#f6f6f7",
+            "borderRadius": 999,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 40,
+            "paddingHorizontal": 12,
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-input-container"
+    >
+      <TextInput
+        editable={true}
+        placeholder="Message"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="toolbar-message-input"
+        value="Jennie Kim"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`ToolbarMessage idle renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 64,
+          "justifyContent": "space-between",
+          "paddingHorizontal": 8,
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-message"
+  >
+    <View
+      style={
+        [
+          {
+            "marginRight": 16,
+            "maxHeight": "100%",
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-prefix"
+    >
+      prefix
+    </View>
+    <View
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#f6f6f7",
+            "borderRadius": 999,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 40,
+            "paddingHorizontal": 12,
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-input-container"
+    >
+      <TextInput
+        editable={true}
+        placeholder="Message"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="toolbar-message-input"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "marginLeft": 16,
+            "maxHeight": "100%",
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-suffix"
+    >
+      suffix
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`ToolbarMessage readonly renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 64,
+          "justifyContent": "space-between",
+          "paddingHorizontal": 8,
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-message"
+  >
+    <View
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#f6f6f7",
+            "borderRadius": 999,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 40,
+            "paddingHorizontal": 12,
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-input-container"
+    >
+      <TextInput
+        editable={true}
+        onChangeText={[MockFunction]}
+        placeholder="Message"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="toolbar-message-input"
+        value="Lalisa"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

package/src/components/Toolbar/index.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import { ViewProps } from 'react-native';
 import { ToolbarWrapper } from './StyledToolbar';
 import ToolbarGroup from './ToolbarGroup';
+import ToolbarMessage from './ToolbarMessage';
 
 export interface ToolbarProps extends Omit<ViewProps, 'style'> {
   /**
@@ -17,4 +18,5 @@ const Toolbar = ({ children, ...rest }: ToolbarProps) => (
 
 export default Object.assign(Toolbar, {
   Group: ToolbarGroup,
+  Message: ToolbarMessage,
 });

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

@@ -1316,20 +1316,36 @@ exports[`theme returns correct theme object 1`] = `
         "error": "#f46363",
         "iconButtonBackground": "#ece8ef",
         "info": "#b5c3fd",
+        "inputContainerBackground": "#f6f6f7",
         "primary": "#401960",
         "secondary": "#4d6265",
         "success": "#5ace7d",
       },
+      "fontSizes": {
+        "text": 16,
+      },
+      "fonts": {
+        "text": "BeVietnamPro-Regular",
+      },
       "radii": {
         "iconButtonWrapperBorderRadius": 24,
+        "messageContainer": 999,
       },
       "sizes": {
         "itemWrapperHeight": 64,
+        "messageInputHeight": 40,
+        "messageWrapperHeight": 64,
       },
       "space": {
+        "affixInnerMargin": 16,
         "horizontalPadding": 8,
         "iconButtonLabelMarginLeft": 8,
         "iconButtonWrapperPadding": 12,
+        "messageInputPaddingHorizontal": 12,
+        "messageInputPaddingVertical": 8,
+        "messageWrapperMarginHorizontal": 8,
+        "messageWrapperPaddingHorizontal": 8,
+        "messageWrapperPaddingVertical": 12,
         "verticalPadding": 8,
       },
     },

package/src/theme/components/toolbar.ts

@@ -13,6 +13,7 @@ const getToolbarTheme = (theme: GlobalTheme) => {
     error: theme.colors.error,
     disabled: theme.colors.disabledOnDefaultGlobalSurface,
     iconButtonBackground: theme.colors.highlightedSurface,
+    inputContainerBackground: theme.colors.neutralGlobalSurface,
   };
 
   const space = {
@@ -20,6 +21,12 @@ const getToolbarTheme = (theme: GlobalTheme) => {
     horizontalPadding: theme.space.small,
     iconButtonLabelMarginLeft: theme.space.small,
     iconButtonWrapperPadding: theme.space.smallMedium,
+    messageWrapperMarginHorizontal: theme.space.small,
+    messageWrapperPaddingVertical: theme.space.smallMedium,
+    messageWrapperPaddingHorizontal: theme.space.small,
+    messageInputPaddingHorizontal: theme.space.smallMedium,
+    messageInputPaddingVertical: theme.space.small,
+    affixInnerMargin: theme.space.medium,
   };
 
   const borderWidths = {
@@ -28,13 +35,24 @@ const getToolbarTheme = (theme: GlobalTheme) => {
 
   const sizes = {
     itemWrapperHeight: scale(64),
+    messageWrapperHeight: scale(64),
+    messageInputHeight: 40,
   };
 
   const radii = {
     iconButtonWrapperBorderRadius: theme.radii.xxxlarge,
+    messageContainer: theme.radii.rounded,
   };
 
-  return { colors, space, borderWidths, sizes, radii };
+  const fontSizes = {
+    text: theme.fontSizes.large,
+  };
+
+  const fonts = {
+    text: theme.fonts.neutral.regular,
+  };
+
+  return { colors, space, borderWidths, sizes, radii, fontSizes, fonts };
 };
 
 export default getToolbarTheme;