[Chat] Error message update for edit message component

change-beta/@azure-communication-react-f72193d8-516e-47d3-a5ec-4151ef92adc5.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "FluentUI",
+  "comment": "Error message position and font update for edit message component",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-f72193d8-516e-47d3-a5ec-4151ef92adc5.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "FluentUI",
+  "comment": "Error message position and font update for edit message component",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { concatStyleSets, Icon, ITextField, mergeStyles } from '@fluentui/react';
+import { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';
 import { ChatMyMessage } from '@fluentui-contrib/react-chat';
 import { mergeClasses } from '@fluentui/react-components';
 import { _formatString } from '@internal/acs-ui-common';
@@ -15,7 +15,12 @@ import { useChatMyMessageStyles } from '../styles/MessageThread.styles';
 import { ChatMessage } from '../../types';
 import { _FileUploadCards } from '../FileUploadCards';
 import { FileMetadata } from '../FileDownloadCards';
-import { chatMessageFailedTagStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';
+import {
+  chatMessageFailedTagStyle,
+  chatMessageFailedTagStackItemStyle,
+  editChatMessageButtonsStackStyle,
+  useChatMessageEditContainerStyles
+} from '../styles/ChatMessageComponent.styles';
 /* @conditional-compile-remove(mention) */
 import { MentionLookupOptions } from '../MentionPopover';
 
@@ -119,7 +124,6 @@ export const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditB
     return (
       <>
         <InputBoxComponent
-          inlineChildren={false}
           id={'editbox'}
           textFieldRef={editTextFieldRef}
           inputClassName={editBoxStyle}
@@ -143,7 +147,18 @@ export const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditB
           styles={editBoxStyles}
           /* @conditional-compile-remove(mention) */
           mentionLookupOptions={mentionLookupOptions}
+        ></InputBoxComponent>
+        <Stack
+          horizontal
+          verticalAlign="start"
+          className={editChatMessageButtonsStackStyle}
+          tokens={{ childrenGap: '0.25rem' }}
         >
+          {message.failureReason && (
+            <Stack.Item grow className={chatMessageFailedTagStackItemStyle}>
+              <div className={chatMessageFailedTagStyle(theme)}>{message.failureReason}</div>
+            </Stack.Item>
+          )}
           <InputBoxButton
             className={editingButtonStyle}
             ariaLabel={strings.editBoxCancelButton}
@@ -168,12 +183,7 @@ export const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditB
             }}
             id={'submitIconWrapper'}
           />
-        </InputBoxComponent>
-        {message.failureReason && (
-          <div className={mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' })}>
-            {message.failureReason}
-          </div>
-        )}
+        </Stack>
         {onRenderFileUploads()}
       </>
     );

packages/react-components/src/components/InputBoxComponent.test.tsx

@@ -14,7 +14,6 @@ describe('InputBoxComponent should call onChange', () => {
     let changedValue = '';
     render(
       <InputBoxComponent
-        inlineChildren={true}
         textValue={changedValue}
         placeholderText="Enter a message"
         onChange={(_, newValue) => {
@@ -53,7 +52,6 @@ describe('InputBoxComponent should show mention popover', () => {
   const renderInputBoxComponent = (): void => {
     render(
       <InputBoxComponent
-        inlineChildren={true}
         textValue=""
         placeholderText="Enter a message"
         onChange={() => {
@@ -133,7 +131,6 @@ describe('InputBoxComponent should show mention popover for a custom trigger', (
   const renderInputBoxComponent = (): void => {
     render(
       <InputBoxComponent
-        inlineChildren={true}
         textValue=""
         placeholderText="Enter a message"
         onChange={() => {
@@ -196,7 +193,6 @@ describe('InputBoxComponent should not show mention popover', () => {
     const trigger = '@';
     render(
       <InputBoxComponent
-        inlineChildren={true}
         textValue=""
         placeholderText="Enter a message"
         onChange={() => {
@@ -248,7 +244,6 @@ describe('InputBoxComponent should hide mention popover', () => {
   const renderInputBoxComponent = (): void => {
     render(
       <InputBoxComponent
-        inlineChildren={true}
         textValue=""
         placeholderText="Enter a message"
         onChange={() => {

packages/react-components/src/components/InputBoxComponent.tsx

@@ -24,9 +24,6 @@ import {
   inputButtonStyle,
   textFieldStyle,
   textContainerStyle,
-  newLineButtonsContainerStyle,
-  sameLineButtonsContainerStyle,
-  inputBoxNewLineSpaceAffordance,
   inputButtonTooltipStyle,
   iconWrapperStyle
 } from './styles/InputBoxComponent.style';
@@ -53,11 +50,7 @@ export interface InputBoxStylesProps extends BaseCustomStyles {
 }
 
 type InputBoxComponentProps = {
-  children: ReactNode;
-  /**
-   * Inline child elements passed in. Setting to false will mean they are on a new line.
-   */
-  inlineChildren: boolean;
+  children?: ReactNode;
   'data-ui-id'?: string;
   id?: string;
   textValue: string; // This could be plain text or HTML.
@@ -98,11 +91,7 @@ export const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element =>
     children
   } = props;
   const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);
-  const mergedInputFieldStyle = mergeStyles(
-    inputBoxStyle,
-    inputClassName,
-    props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance
-  );
+  const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);
 
   const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);
   const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {
@@ -114,10 +103,6 @@ export const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element =>
     }
   });
 
-  const mergedChildrenStyle = mergeStyles(
-    props.inlineChildren ? sameLineButtonsContainerStyle : newLineButtonsContainerStyle
-  );
-
   const onTextFieldKeyDown = useCallback(
     (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       if (isEnterKeyEventFromCompositionSession(ev)) {
@@ -133,11 +118,7 @@ export const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element =>
   );
 
   const onRenderChildren = (): JSX.Element => {
-    return (
-      <Stack horizontal className={mergedChildrenStyle}>
-        {children}
-      </Stack>
-    );
+    return <>{children}</>;
   };
 
   const renderTextField = (): JSX.Element => {
@@ -155,7 +136,7 @@ export const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element =>
       styles: mergedTextFieldStyle,
       disabled,
       errorMessage,
-      onRenderSuffix: onRenderChildren
+      onRenderSuffix: props.children ? onRenderChildren : undefined
     };
 
     /* @conditional-compile-remove(mention) */

packages/react-components/src/components/SendBox.tsx

@@ -365,7 +365,6 @@ export const SendBox = (props: SendBoxProps): JSX.Element => {
         <InputBoxComponent
           autoFocus={autoFocus}
           data-ui-id={ids.sendboxTextField}
-          inlineChildren={true}
           disabled={disabled}
           errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage}
           textFieldRef={sendTextFieldRef}

packages/react-components/src/components/styles/ChatMessageComponent.styles.ts

@@ -82,7 +82,27 @@ export const chatMessageEditedTagStyle = (theme: Theme): string =>
  * @private
  */
 export const chatMessageFailedTagStyle = (theme: Theme): string =>
-  mergeStyles({ fontWeight: FontWeights.regular, color: theme.semanticColors.errorText });
+  mergeStyles({
+    fontWeight: FontWeights.regular,
+    color: theme.semanticColors.errorText,
+    fontSize: theme.fonts.smallPlus.fontSize,
+    lineHeight: '1rem'
+  });
+
+/**
+ * @private
+ */
+export const chatMessageFailedTagStackItemStyle = mergeStyles({
+  alignSelf: 'end',
+  paddingBottom: '0.25rem'
+});
+
+/**
+ * @private
+ */
+export const editChatMessageButtonsStackStyle = mergeStyles({
+  padding: '0 0.5rem 0.5rem 0.5rem'
+});
 
 /**
  * @private
@@ -104,17 +124,19 @@ export const useChatMessageEditContainerStyles = makeStyles({
   body: {
     ...shorthands.padding(0),
     backgroundColor: 'transparent',
-    width: '100%',
     boxSizing: 'border-box',
     ...shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid'),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     // The border thickness changes on hover, to prevent the border thickness change causing the
     // input box to shift we apply a margin to compensate. This margin is then removed on hover when the border is thicker.
     ...shorthands.margin(`${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`),
+    // Width should be updated on hover to include the border width change
+    width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`,
 
     '&:hover, &:active, &:focus, &:focus-within': {
       ...shorthands.margin('0rem'),
-      ...shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)
+      ...shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`),
+      width: '100%'
     }
   },
   bodyError: {

packages/react-components/src/components/styles/EditBox.styles.ts

@@ -15,10 +15,10 @@ export const editBoxStyle = mergeStyles({
  * @private
  */
 export const editingButtonStyle = mergeStyles({
-  margin: 'auto 0',
+  margin: '0',
   width: '2.125rem',
   height: '2.125rem',
-  padding: '0.25rem 0 0 0'
+  padding: '0.375rem 0 0 0'
 });
 
 /**

packages/react-components/src/components/styles/InputBoxComponent.style.ts

@@ -90,16 +90,6 @@ export const inputButtonStyle = mergeStyles({
   }
 });
 
-/**
- * @private
- */
-export const newLineButtonsContainerStyle: IStyle = {
-  position: 'absolute',
-  right: '0.8rem',
-  bottom: '0.6rem',
-  gap: '0'
-};
-
 /**
  * @private
  */