feat: redesign UnsupportedAttachment (#3099)

Author: MartinCupela

src/components/Attachment/AttachmentContainer.tsx

@@ -330,7 +330,7 @@ export const UnsupportedAttachmentContainer = ({
   attachment,
   UnsupportedAttachment = DefaultUnsupportedAttachment,
 }: RenderAttachmentProps) => (
-  <>
+  <AttachmentWithinContainer attachment={attachment} componentType='unsupported'>
     <UnsupportedAttachment attachment={attachment} />
-  </>
+  </AttachmentWithinContainer>
 );

src/components/Attachment/UnsupportedAttachment.tsx

@@ -2,20 +2,26 @@ import React from 'react';
 import type { Attachment } from 'stream-chat';
 
 import { FileIcon } from '../FileIcon';
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext } from '../../context';
 
 export type UnsupportedAttachmentProps = {
   attachment: Attachment;
 };
 
 export const UnsupportedAttachment = ({ attachment }: UnsupportedAttachmentProps) => {
   const { t } = useTranslationContext('UnsupportedAttachment');
+  const { AttachmentFileIcon } = useComponentContext();
+  const FileIconComponent = AttachmentFileIcon ?? FileIcon;
   return (
     <div
       className='str-chat__message-attachment-unsupported'
       data-testid='attachment-unsupported'
     >
-      <FileIcon className='str-chat__file-icon' />
+      <FileIconComponent
+        className='str-chat__file-icon'
+        fileName={attachment.title}
+        mimeType={attachment.mime_type}
+      />
       <div className='str-chat__message-attachment-unsupported__metadata'>
         <div
           className='str-chat__message-attachment-unsupported__title'

src/components/Attachment/__tests__/UnsupportedAttachment.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import type { Attachment } from 'stream-chat';
+
+import { UnsupportedAttachment } from '../UnsupportedAttachment';
+import { ComponentProvider } from '../../../context/ComponentContext';
+import { TranslationProvider } from '../../../context';
+import {
+  mockComponentContext,
+  mockTranslationContextValue,
+} from '../../../mock-builders';
+import type { FileIconProps } from '../../FileIcon/FileIcon';
+
+const renderUnsupported = (
+  attachment: Attachment,
+  componentOverrides: Record<string, unknown> = {},
+) =>
+  render(
+    <TranslationProvider value={mockTranslationContextValue()}>
+      <ComponentProvider value={mockComponentContext(componentOverrides)}>
+        <UnsupportedAttachment attachment={attachment} />
+      </ComponentProvider>
+    </TranslationProvider>,
+  );
+
+describe('UnsupportedAttachment', () => {
+  it('renders attachment title when title is set', () => {
+    renderUnsupported({
+      mime_type: 'application/x-custom',
+      title: 'Custom payload',
+      type: 'unknown',
+    } as Attachment);
+
+    expect(screen.getByTestId('unsupported-attachment-title')).toHaveTextContent(
+      'Custom payload',
+    );
+  });
+
+  it('falls back to translated label when title is missing', () => {
+    renderUnsupported({ type: 'weird' } as Attachment);
+
+    expect(screen.getByTestId('unsupported-attachment-title')).toHaveTextContent(
+      'Unsupported attachment',
+    );
+  });
+
+  it('uses AttachmentFileIcon from context when provided', () => {
+    const CustomAttachmentFileIcon = ({ fileName, mimeType }: FileIconProps) => (
+      <span
+        data-file-name={fileName}
+        data-mime-type={mimeType}
+        data-testid='custom-attachment-file-icon'
+      />
+    );
+
+    renderUnsupported(
+      {
+        mime_type: 'application/octet-stream',
+        title: 'data.bin',
+        type: 'file',
+      } as Attachment,
+      { AttachmentFileIcon: CustomAttachmentFileIcon },
+    );
+
+    const icon = screen.getByTestId('custom-attachment-file-icon');
+    expect(icon).toHaveAttribute('data-file-name', 'data.bin');
+    expect(icon).toHaveAttribute('data-mime-type', 'application/octet-stream');
+  });
+});

src/components/Attachment/styling/Attachment.scss

@@ -338,34 +338,6 @@
     }
   }
 
-  .str-chat__message-attachment-unsupported {
-    @include utils.component-layer-overrides('file-attachment');
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--space-8);
-    column-gap: var(--space-16);
-    //margin: var(--str-chat__attachment-margin);
-
-    .str-chat__file-icon {
-      width: calc(var(--str-chat__spacing-px) * 30);
-    }
-
-    .str-chat__message-attachment-unsupported__metadata {
-      min-width: 0;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: center;
-    }
-
-    .str-chat__message-attachment-unsupported__title {
-      @include utils.ellipsis-text;
-      max-width: 100%;
-    }
-  }
-
   .str-chat__message-attachment-file--item,
   .str-chat__message-attachment-audio-widget {
     @include utils.flex-row-center;

src/components/Attachment/styling/UnsupportedAttachment.scss

@@ -0,0 +1,66 @@
+@use '../../../styling/utils';
+@use '../../../styling/variables/font' as font;
+
+.str-chat {
+  /* The border radius used for the borders of file attachments */
+  --str-chat__unsupported-attachment-border-radius: calc(
+    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
+  );
+
+  /* The text/icon color of file attachments */
+  --str-chat__unsupported-attachment-color: var(--str-chat__text-color);
+
+  /* The text/icon color of file attachments for low emphasis texts (for example file size) */
+  --str-chat__unsupported-attachment-secondary-color: var(
+    --str-chat__text-low-emphasis-color
+  );
+
+  /* The background color of file attachments */
+  --str-chat__unsupported-attachment-background-color: transparent;
+
+  /* Top border of file attachments */
+  --str-chat__unsupported-attachment-border-block-start: none;
+
+  /* Bottom border of file attachments */
+  --str-chat__unsupported-attachment-border-block-end: none;
+
+  /* Left (right in RTL layout) border of file attachments */
+  --str-chat__unsupported-attachment-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of file attachments */
+  --str-chat__unsupported-attachment-border-inline-end: none;
+
+  /* Box shadow applied to file attachments */
+  --str-chat__unsupported-attachment-box-shadow: none;
+}
+
+.str-chat__message-attachment-unsupported {
+  @include utils.component-layer-overrides('unsupported-attachment');
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-sm);
+  column-gap: var(--spacing-sm);
+  // todo: keep a single variable for attachment min width
+  min-width: 300px;
+
+  .str-chat__file-icon {
+    width: calc(var(--str-chat__spacing-px) * 30);
+  }
+
+  .str-chat__message-attachment-unsupported__metadata {
+    min-width: 0;
+    flex: 1;
+    height: stretch;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  .str-chat__message-attachment-unsupported__title {
+    @include utils.ellipsis-text;
+    @include font.text-caption-emphasis;
+    max-width: 100%;
+  }
+}

src/components/Attachment/styling/index.scss

@@ -6,3 +6,4 @@
 @use 'Giphy';
 @use 'LinkPreview';
 @use 'ModalGallery';
+@use 'UnsupportedAttachment';

src/styling/index.scss

@@ -4,7 +4,8 @@
 @use 'global-layout-variables';
 @use 'global-theme-variables';
 @use 'palette-variables';
-@use './variables.css';
+@use './variables-tokens.css';
+@use 'variables/font';
 @use 'base';
 @use 'fonts';