[Chat] Added Styling to Disabled Attachment Card Group

change-beta/@azure-communication-react-addb0020-f90d-43a0-9157-3df97f7f3db2.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "File Sharing",
+  "comment": "Added Disable Styling to Attachment Cards",
+  "packageName": "@azure/communication-react",
+  "email": "109105353+jpeng-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-addb0020-f90d-43a0-9157-3df97f7f3db2.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "File Sharing",
+  "comment": "Added Disable Styling to Attachment Cards",
+  "packageName": "@azure/communication-react",
+  "email": "109105353+jpeng-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/Attachment/AttachmentCardGroup.tsx

@@ -8,7 +8,8 @@ import { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from '..
 import {
   attachmentCardBaseStyles,
   attachmentCardFlexLayout,
-  attachmentCardGirdLayout
+  attachmentCardGirdLayout,
+  attachmentGroupDisabled
 } from '../styles/AttachmentCardGroup.styles';
 
 /**
@@ -34,6 +35,7 @@ export interface _AttachmentCardGroupProps {
   children: React.ReactNode;
   ariaLabel?: string;
   attachmentGroupLayout?: _AttachmentCardGroupLayout;
+  disabled?: boolean;
 }
 
 /**
@@ -42,14 +44,15 @@ export interface _AttachmentCardGroupProps {
  * Renders the children equally spaced in multiple rows.
  */
 export const _AttachmentCardGroup = (props: _AttachmentCardGroupProps): JSX.Element => {
-  const { children, ariaLabel, attachmentGroupLayout } = props;
+  const { children, ariaLabel, attachmentGroupLayout, disabled } = props;
   if (!children) {
     return <></>;
   }
   return (
     <Stack
       horizontal
       className={mergeStyles(
+        disabled && attachmentGroupDisabled,
         attachmentCardBaseStyles,
         attachmentGroupLayout === _AttachmentCardGroupLayout.Grid ? attachmentCardGirdLayout : attachmentCardFlexLayout
       )}

packages/react-components/src/components/Attachment/AttachmentUploadCards.tsx

@@ -41,6 +41,10 @@ export interface AttachmentUploadCardsProps {
    * Optional arialabel strings for attachment upload cards
    */
   strings?: _AttachmentUploadCardsStrings;
+  /**
+   * Optional flag to disable attachment cards.
+   */
+  disabled?: boolean;
 }
 
 const actionIconStyle = { height: '1rem' };
@@ -63,7 +67,7 @@ export const _AttachmentUploadCards = (props: AttachmentUploadCardsProps): JSX.E
   }
 
   return (
-    <_AttachmentCardGroup attachmentGroupLayout={_AttachmentCardGroupLayout.Flex}>
+    <_AttachmentCardGroup attachmentGroupLayout={_AttachmentCardGroupLayout.Flex} disabled={props.disabled}>
       {attachments &&
         attachments
           .filter((attachment) => !attachment.error)

packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx

@@ -7,6 +7,8 @@ import { Icon, Stack } from '@fluentui/react';
 import { useLocale } from '../../localization';
 import { SendBoxStrings } from '../SendBox';
 import { sendIconStyle } from '../styles/SendBox.styles';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { useV9CustomStyles } from '../styles/SendBox.styles';
 import { InputBoxButton } from '../InputBoxButton';
 import { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';
 import { isMessageTooLong, isSendBoxButtonAriaDisabled, sanitizeText } from '../utils/SendBoxUtils';
@@ -219,6 +221,9 @@ export const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {
   );
   const editorComponentRef = useRef<RichTextEditorComponentRef>(null);
 
+  /* @conditional-compile-remove(file-sharing-acs) */
+  const customV9Styles = useV9CustomStyles();
+
   const contentTooLongMessage = useMemo(
     () => (contentValueOverflow ? strings.textTooLong : undefined),
     [contentValueOverflow, strings.textTooLong]
@@ -369,7 +374,7 @@ export const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {
   const onRenderAttachmentUploads = useCallback(() => {
     return (
       <Stack className={attachmentUploadCardsStyles}>
-        <FluentV9ThemeProvider v8Theme={theme}>
+        <FluentV9ThemeProvider v8Theme={theme} className={customV9Styles.clearBackground}>
           <_AttachmentUploadCards
             attachments={attachments}
             onCancelAttachmentUpload={onCancelAttachmentUpload}
@@ -379,18 +384,21 @@ export const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {
               uploadCompleted: strings.uploadCompleted,
               attachmentMoreMenu: strings.attachmentMoreMenu
             }}
+            disabled={disabled}
           />
         </FluentV9ThemeProvider>
       </Stack>
     );
   }, [
+    theme,
+    customV9Styles.clearBackground,
     attachments,
     onCancelAttachmentUpload,
     strings.removeAttachment,
-    strings.uploadCompleted,
     strings.uploading,
+    strings.uploadCompleted,
     strings.attachmentMoreMenu,
-    theme
+    disabled
   ]);
 
   const isSendBoxButtonAriaDisabledValue = useMemo(() => {

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

@@ -4,6 +4,8 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';
 import { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';
+/* @conditional-compile-remove(file-sharing-acs) */
+import { useV9CustomStyles } from './styles/SendBox.styles';
 import { BaseCustomStyles } from '../types';
 import { useTheme } from '../theming';
 import { useLocale } from '../localization';
@@ -220,6 +222,9 @@ export const SendBox = (props: SendBoxProps): JSX.Element => {
 
   const sendTextFieldRef = React.useRef<ITextField>(null);
 
+  /* @conditional-compile-remove(file-sharing-acs) */
+  const customV9Styles = useV9CustomStyles();
+
   /* @conditional-compile-remove(file-sharing-acs) */
   const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(
     undefined
@@ -369,7 +374,7 @@ export const SendBox = (props: SendBoxProps): JSX.Element => {
       props.onRenderAttachmentUploads()
     ) : (
       <Stack className={attachmentUploadCardsStyles}>
-        <FluentV9ThemeProvider v8Theme={theme}>
+        <FluentV9ThemeProvider v8Theme={theme} className={customV9Styles.clearBackground}>
           <_AttachmentUploadCards
             attachments={attachments}
             onCancelAttachmentUpload={props.onCancelAttachmentUpload}
@@ -379,6 +384,7 @@ export const SendBox = (props: SendBoxProps): JSX.Element => {
               uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted,
               attachmentMoreMenu: props.strings?.attachmentMoreMenu ?? localeStrings.attachmentMoreMenu
             }}
+            disabled={disabled}
           />
         </FluentV9ThemeProvider>
       </Stack>
@@ -387,10 +393,12 @@ export const SendBox = (props: SendBoxProps): JSX.Element => {
     attachments,
     props,
     theme,
+    customV9Styles.clearBackground,
     localeStrings.removeAttachment,
     localeStrings.uploading,
     localeStrings.uploadCompleted,
-    localeStrings.attachmentMoreMenu
+    localeStrings.attachmentMoreMenu,
+    disabled
   ]);
 
   return (

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

@@ -51,3 +51,12 @@ export const attachmentCardFlexLayout = mergeStyles({
   display: 'flex',
   flexWrap: 'wrap'
 });
+
+/**
+ * @private
+ */
+export const attachmentGroupDisabled = mergeStyles({
+  opacity: '0.5',
+  userSelect: 'none',
+  pointerEvents: 'none'
+});

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

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 
 import { IStyle, mergeStyles, Theme } from '@fluentui/react';
+import { makeStyles } from '@fluentui/react-components';
 
 /**
  * @private
@@ -81,6 +82,15 @@ export const attachmentUploadCardsStyles = mergeStyles({
   overflow: 'auto'
 });
 
+/**
+ * @private
+ */
+export const useV9CustomStyles = makeStyles({
+  clearBackground: {
+    backgroundColor: 'transparent'
+  }
+});
+
 /**
  * @private
  */

packages/react-components/src/theming/FluentV9ThemeProvider.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import React from 'react';
-import { makeStyles, shorthands, FluentProvider, FluentProviderProps } from '@fluentui/react-components';
+import { makeStyles, shorthands, FluentProvider, FluentProviderProps, mergeClasses } from '@fluentui/react-components';
 import { Theme as ThemeV8 } from '@fluentui/react';
 import { createV9Theme } from './v9ThemeShim';
 import { TextDirectionProvider } from '@griffel/react';
@@ -17,6 +17,7 @@ export interface FluentV9ThemeProviderProps {
   children: React.ReactNode;
   /** FluentUI v8 theme to be mapped to FluentUI v9 theme */
   v8Theme: ThemeV8;
+  className?: string;
 }
 
 /**
@@ -36,15 +37,14 @@ export const useFluentV9Wrapper = makeStyles({
  * @private
  */
 export const FluentV9ThemeProvider = (props: FluentV9ThemeProviderProps): JSX.Element => {
-  const { v8Theme, children } = props;
+  const { v8Theme, children, className } = props;
   const v9Theme = createV9Theme(v8Theme);
   const dir = v8Theme.rtl ? 'rtl' : 'ltr';
-
   return (
     // TextDirectionProvider is needed to fix issue with direction value update in FluentProvider
     <TextDirectionProvider dir={dir}>
       {/* Wrapper is required to call "useClasses" hook with proper context values */}
-      <FluentProviderWithStylesOverrides theme={v9Theme} dir={dir}>
+      <FluentProviderWithStylesOverrides theme={v9Theme} dir={dir} className={className}>
         {children}
       </FluentProviderWithStylesOverrides>
     </TextDirectionProvider>
@@ -53,6 +53,7 @@ export const FluentV9ThemeProvider = (props: FluentV9ThemeProviderProps): JSX.El
 
 const FluentProviderWithStylesOverrides: React.FC<FluentProviderProps> = (props) => {
   const classes = useFluentV9Wrapper();
-
-  return <FluentProvider {...props} className={classes.body} applyStylesToPortals={false} />;
+  return (
+    <FluentProvider {...props} className={mergeClasses(props.className, classes.body)} applyStylesToPortals={false} />
+  );
 };