Use theme.semanticColors for error text and border of SendBox (#1861)

* using theme.semanticColors.errorText for error border and error message

* Removed unnecessary error message styling of text field

* Change files

* using theme.semanticColors.errorBackground  to style background of failed messages

* remove unused import

* Revert "using theme.semanticColors.errorBackground  to style background of failed messages"

This reverts commit f961b80.

Author: mgamis-msft

change/@internal-react-components-b18685d9-2db0-4c02-994e-9e6ce9405e19.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Added error text color in light and dark themes in semanticColors property.",
+  "packageName": "@internal/react-components",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -10,7 +10,6 @@ import { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from
 import { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';
 import { MessageThreadStrings } from '../MessageThread';
 import { borderAndBoxShadowStyle } from '../styles/SendBox.styles';
-import { isDarkThemed } from '../../theming/themeUtils';
 import { ChatMessage } from '../../types';
 /* @conditional-compile-remove(file-sharing) */
 import { _FileUploadCards } from '../FileUploadCards';
@@ -103,7 +102,6 @@ export const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditB
       className={mergeStyles(
         borderAndBoxShadowStyle({
           theme,
-          errorColor: isDarkThemed(theme) ? '#f1707b' : '#a80000',
           hasErrorMessage: false,
           disabled: false
         })

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

@@ -87,7 +87,6 @@ export const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element =>
     children
   } = props;
 
-  const theme = useTheme();
   const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);
   const mergedTextFiledStyle = mergeStyles(
     inputBoxStyle,
@@ -96,7 +95,7 @@ export const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element =>
   );
 
   const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);
-  const mergedTextFieldStyle = concatStyleSets(textFieldStyle(isDarkThemed(theme) ? '#f1707b' : '#a80000'), {
+  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {
     fieldGroup: styles?.textField,
     errorMessage: styles?.systemMessage
   });

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

@@ -16,7 +16,6 @@ import { useLocale } from '../localization';
 import { useIdentifiers } from '../identifiers';
 import { InputBoxButton, InputBoxComponent } from './InputBoxComponent';
 
-import { isDarkThemed } from '../theming/themeUtils';
 /* @conditional-compile-remove(file-sharing) */
 import { SendBoxErrors } from './SendBoxErrors';
 /* @conditional-compile-remove(file-sharing) */
@@ -332,7 +331,6 @@ export const SendBox = (props: SendBoxProps): JSX.Element => {
         className={mergeStyles(
           borderAndBoxShadowStyle({
             theme,
-            errorColor: isDarkThemed(theme) ? '#f1707b' : '#a80000',
             hasErrorMessage: !!errorMessage,
             disabled: !!disabled
           })

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

@@ -11,7 +11,6 @@ import {
   IIconStyles
 } from '@fluentui/react';
 import { _pxToRem } from '@internal/acs-ui-common';
-import { isDarkThemed } from '../../theming/themeUtils';
 
 const MINIMUM_TOUCH_TARGET_HEIGHT_REM = 3;
 
@@ -65,7 +64,7 @@ export const chatMessageEditedTagStyle = (theme: Theme): string =>
  * @private
  */
 export const chatMessageFailedTagStyle = (theme: Theme): string =>
-  mergeStyles({ fontWeight: FontWeights.light, color: isDarkThemed(theme) ? '#f1707b' : '#a80000' });
+  mergeStyles({ fontWeight: FontWeights.light, color: theme.semanticColors.errorText });
 
 /**
  * @private

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

@@ -53,31 +53,26 @@ export const textContainerStyle: IStyle = {
 /**
  * @private
  */
-export const textFieldStyle = (errorColor: string): IStyle => {
-  return {
-    root: {
-      width: '100%',
-      minHeight: '0',
-      fontSize: '8.25rem'
-    },
-    wrapper: {},
-    fieldGroup: {
-      outline: 'none',
-      border: 'none',
-      height: 'auto',
-      minHeight: '0',
-      /**
-       * Removing fieldGroup border to make sure no border is rendered around the text area in sendbox.
-       */
-      ':after': { border: 'none' }
-    },
-    field: {
-      borderRadius: '0.25rem'
-    },
-    errorMessage: {
-      color: errorColor
-    }
-  };
+export const textFieldStyle: IStyle = {
+  root: {
+    width: '100%',
+    minHeight: '0',
+    fontSize: '8.25rem'
+  },
+  wrapper: {},
+  fieldGroup: {
+    outline: 'none',
+    border: 'none',
+    height: 'auto',
+    minHeight: '0',
+    /**
+     * Removing fieldGroup border to make sure no border is rendered around the text area in sendbox.
+     */
+    ':after': { border: 'none' }
+  },
+  field: {
+    borderRadius: '0.25rem'
+  }
 };
 
 /**

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

@@ -66,13 +66,12 @@ const defaultSendBoxActiveBorderThicknessREM = 0.125;
  */
 export const borderAndBoxShadowStyle = (props: {
   theme: Theme;
-  errorColor: string;
   hasErrorMessage: boolean;
   disabled: boolean;
 }): IStyle => {
-  const { theme, errorColor, hasErrorMessage, disabled } = props;
-  const borderColor = hasErrorMessage ? errorColor : theme.palette.neutralSecondary;
-  const borderColorActive = hasErrorMessage ? errorColor : theme.palette.themePrimary;
+  const { theme, hasErrorMessage, disabled } = props;
+  const borderColor = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.neutralSecondary;
+  const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;
 
   const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;
   const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;

packages/react-components/src/theming/themes.ts

@@ -52,6 +52,9 @@ export const lightTheme: PartialTheme & CallingTheme = {
     callRedDark: '#8b2c3d',
     callRedDarker: '#772a38',
     iconWhite: '#ffffff'
+  },
+  semanticColors: {
+    errorText: '#a80000'
   }
 };
 
@@ -90,5 +93,8 @@ export const darkTheme: PartialTheme & CallingTheme = {
     callRedDark: '#a42e43',
     callRedDarker: '#8b2c3d',
     iconWhite: '#ffffff'
+  },
+  semanticColors: {
+    errorText: '#f1707b'
   }
 };