fix: remove unnecessary variant prop

Author: szuperaz

src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadProgressIndicator.tsx

@@ -5,21 +5,17 @@ import { ProgressIndicator as DefaultProgressIndicator } from '../../Loading';
 import { useComponentContext } from '../../../context';
 import { LoadingIndicatorIcon } from '../icons';
 
-export type AttachmentUploadProgressVariant = 'inline' | 'overlay';
-
 export type AttachmentUploadProgressIndicatorProps = {
   className?: string;
   /** Shown when `uploadProgress` is `undefined` (e.g. progress tracking disabled). */
   fallback?: ReactNode;
   uploadProgress?: number;
-  variant: AttachmentUploadProgressVariant;
 };
 
 export const AttachmentUploadProgressIndicator = ({
   className,
   fallback,
   uploadProgress,
-  variant,
 }: AttachmentUploadProgressIndicatorProps) => {
   const { ProgressIndicator = DefaultProgressIndicator } = useComponentContext();
 
@@ -28,13 +24,7 @@ export const AttachmentUploadProgressIndicator = ({
   }
 
   return (
-    <div
-      className={clsx(
-        'str-chat__attachment-upload-progress',
-        `str-chat__attachment-upload-progress--${variant}`,
-        className,
-      )}
-    >
+    <div className={clsx('str-chat__attachment-upload-progress', className)}>
       <ProgressIndicator percent={uploadProgress} />
     </div>
   );

src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx

@@ -10,7 +10,6 @@ import clsx from 'clsx';
 import { AttachmentUploadProgressIndicator } from './AttachmentUploadProgressIndicator';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';
-import { FileSizeIndicator } from '../../Attachment';
 import { IconExclamationMark, IconExclamationTriangleFill } from '../../Icons';
 import { PlayButton } from '../../Button';
 import {
@@ -95,10 +94,7 @@ export const AudioAttachmentPreview = ({
         </div>
         <div className='str-chat__attachment-preview-file__data'>
           {uploadState === 'uploading' && (
-            <AttachmentUploadProgressIndicator
-              uploadProgress={uploadProgress}
-              variant='inline'
-            />
+            <AttachmentUploadProgressIndicator uploadProgress={uploadProgress} />
           )}
           {showProgressControls ? (
             <>

src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx

@@ -43,10 +43,7 @@ export const FileAttachmentPreview = ({
         </div>
         <div className='str-chat__attachment-preview-file__data'>
           {uploadState === 'uploading' && (
-            <AttachmentUploadProgressIndicator
-              uploadProgress={uploadProgress}
-              variant='inline'
-            />
+            <AttachmentUploadProgressIndicator uploadProgress={uploadProgress} />
           )}
           <AttachmentUploadedSizeIndicator attachment={attachment} />
           {hasFatalError && (

src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx

@@ -100,7 +100,6 @@ export const MediaAttachmentPreview = ({
             <AttachmentUploadProgressIndicator
               fallback={<LoadingIndicator />}
               uploadProgress={uploadProgress}
-              variant='overlay'
             />
           )}
 

src/components/MessageComposer/styling/AttachmentPreview.scss

@@ -215,7 +215,7 @@
     }
 
     .str-chat__loading-indicator,
-    .str-chat__attachment-upload-progress.str-chat__attachment-upload-progress--overlay,
+    .str-chat__attachment-upload-progress,
     .str-chat__icon--exclamation-circle {
       width: var(--icon-size-sm);
       height: var(--icon-size-sm);
@@ -241,9 +241,10 @@
       color: var(--badge-text-on-accent);
     }
 
-    .str-chat__attachment-upload-progress.str-chat__attachment-upload-progress--overlay {
+    .str-chat__attachment-upload-progress {
       border: none;
       border-radius: 0;
+      background: transparent;
     }
   }
 
@@ -295,15 +296,11 @@
       line-height: var(--typography-line-height-tight);
 
       .str-chat__loading-indicator,
-      .str-chat__attachment-upload-progress.str-chat__attachment-upload-progress--inline {
+      .str-chat__attachment-upload-progress {
         width: var(--icon-size-sm);
         height: var(--icon-size-sm);
       }
 
-      .str-chat__attachment-upload-progress.str-chat__attachment-upload-progress--inline {
-        flex-shrink: 0;
-      }
-
       .str-chat__attachment-preview-file__upload-size-fraction {
         white-space: nowrap;
       }