From a410cb13bab93308c9812b659842215ee07f2f8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Mon, 31 Mar 2025 12:15:55 -0400
Subject: [PATCH 1/4] chore: update spacing, make icon optional

---
 .changeset/soft-berries-roll.md               |  6 +++
 .../components/chat-composer/package.json     |  1 -
 .../src/ChatComposerAttachmentCard.tsx        | 30 ++++++-------
 .../stories/container.stories.tsx             | 42 +++++++++++++++++++
 .../components/chat-composer/type-docs.json   | 14 +++----
 5 files changed, 68 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/soft-berries-roll.md

diff --git a/.changeset/soft-berries-roll.md b/.changeset/soft-berries-roll.md
new file mode 100644
index 0000000000..c178f8f291
--- /dev/null
+++ b/.changeset/soft-berries-roll.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/chat-composer": patch
+"@twilio-paste/core": patch
+---
+
+[Chat Composer] Make `attachmentIcon` optional for the attachment card, adjust spacing slightly
diff --git a/packages/paste-core/components/chat-composer/package.json b/packages/paste-core/components/chat-composer/package.json
index 6157111628..67a7d460bf 100644
--- a/packages/paste-core/components/chat-composer/package.json
+++ b/packages/paste-core/components/chat-composer/package.json
@@ -53,7 +53,6 @@
     "@twilio-paste/design-tokens": "^10.13.0",
     "@twilio-paste/icons": "^13.0.1",
     "@twilio-paste/lexical-library": "^5.0.1",
-    "@twilio-paste/media-object": "^11.0.1",
     "@twilio-paste/screen-reader-only": "^14.0.1",
     "@twilio-paste/stack": "^9.0.1",
     "@twilio-paste/style-props": "^10.0.1",
diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
index 595cb75d65..ad754decfe 100644
--- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
+++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
@@ -2,7 +2,6 @@ import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
 import type { BoxProps, BoxStyleProps } from "@twilio-paste/box";
 import { Button } from "@twilio-paste/button";
 import { ClearIcon } from "@twilio-paste/icons/esm/ClearIcon";
-import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object";
 import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
 import { Stack } from "@twilio-paste/stack";
 import type { HTMLPasteProps } from "@twilio-paste/types";
@@ -60,7 +59,7 @@ export interface ChatComposerAttachmentCardProps extends HTMLPasteProps<"div"> {
    * @type {NonNullable<React.ReactNode>}
    * @memberof ChatComposerAttachmentProps
    */
-  attachmentIcon: NonNullable<React.ReactNode>;
+  attachmentIcon?: NonNullable<React.ReactNode>;
 }
 
 const ChatComposerAttachmentCard = React.forwardRef<HTMLDivElement, ChatComposerAttachmentCardProps>(
@@ -81,27 +80,24 @@ const ChatComposerAttachmentCard = React.forwardRef<HTMLDivElement, ChatComposer
       <Box
         {...safelySpreadBoxProps(props)}
         ref={ref}
-        paddingY="space30"
-        paddingX="space40"
+        padding="space40"
         borderRadius="borderRadius30"
         backgroundColor="colorBackgroundBodyElevation"
         position="relative"
-        display="inline-block"
+        display="inline-flex"
+        columnGap="space30"
+        alignItems="center"
         width="100%"
         element={element}
       >
-        <MediaObject as="div" ref={ref} verticalAlign="center" element={`${element}_MEDIA_OBJECT`}>
-          <MediaFigure as="div" spacing="space30">
-            <Box color="colorTextIcon" element={`${element}_ICON`}>
-              {attachmentIcon}
-            </Box>
-          </MediaFigure>
-          <MediaBody as="div" element={`${element}_BODY`}>
-            <Stack orientation="vertical" spacing="space10">
-              {children}
-            </Stack>
-          </MediaBody>
-        </MediaObject>
+        {attachmentIcon && (
+          <Box color="colorTextIcon" element={`${element}_ICON`}>
+            {attachmentIcon}
+          </Box>
+        )}
+        <Stack orientation="vertical" spacing="space10">
+          {children}
+        </Stack>
         {onDismiss && (
           <Box
             position="absolute"
diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx
index 399dbb7a46..20941bbc73 100644
--- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx
+++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx
@@ -110,6 +110,48 @@ export const ContainedVariantWithAttachments: StoryFn = () => {
   );
 };
 
+export const ContainedVariantWithAttachmentsNoIcons: StoryFn = () => {
+  return (
+    <ChatComposerContainer variant="contained">
+      <ChatComposer config={defaultConfig} ariaLabel="Basic chat composer" placeholder="Type here..." />
+      <ChatComposerActionGroup>
+        <Button variant="secondary_icon" size="reset">
+          <AttachIcon decorative={false} title="attach a file to your message" />
+        </Button>
+        <Button variant="primary_icon" size="reset">
+          <SendIcon decorative={false} title="Send" />
+        </Button>
+      </ChatComposerActionGroup>
+      <ChatComposerAttachmentGroup>
+        <ChatComposerAttachmentCard onDismiss={() => {}}>
+          <ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
+          <ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
+        </ChatComposerAttachmentCard>
+        <ChatComposerAttachmentCard onDismiss={() => {}}>
+          <ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
+          <ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
+        </ChatComposerAttachmentCard>
+        <ChatComposerAttachmentCard onDismiss={() => {}}>
+          <ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
+          <ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
+        </ChatComposerAttachmentCard>
+        <ChatComposerAttachmentCard onDismiss={() => {}}>
+          <ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
+          <ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
+        </ChatComposerAttachmentCard>
+        <ChatComposerAttachmentCard onDismiss={() => {}}>
+          <ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
+          <ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
+        </ChatComposerAttachmentCard>
+        <ChatComposerAttachmentCard onDismiss={() => {}}>
+          <ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
+          <ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
+        </ChatComposerAttachmentCard>
+      </ChatComposerAttachmentGroup>
+    </ChatComposerContainer>
+  );
+};
+
 ContainedVariantWithAttachments.storyName = "Contained Variant with Attachments";
 
 export const ResponsiveContainedVariantWithAttachments: StoryFn = () => {
diff --git a/packages/paste-core/components/chat-composer/type-docs.json b/packages/paste-core/components/chat-composer/type-docs.json
index f762a1f2c2..2c0fb35ed0 100644
--- a/packages/paste-core/components/chat-composer/type-docs.json
+++ b/packages/paste-core/components/chat-composer/type-docs.json
@@ -2464,13 +2464,6 @@
     }
   },
   "ChatComposerAttachmentCard": {
-    "attachmentIcon": {
-      "type": "NonNullable<ReactNode>",
-      "defaultValue": "null",
-      "required": true,
-      "externalProp": false,
-      "description": "Pass an icon to use for the attachment message. DownloadIcon recommended"
-    },
     "about": {
       "type": "string",
       "defaultValue": null,
@@ -2853,6 +2846,13 @@
       "externalProp": true,
       "description": "Defines the human readable text alternative of aria-valuenow for a range widget."
     },
+    "attachmentIcon": {
+      "type": "NonNullable<ReactNode>",
+      "defaultValue": "null",
+      "required": false,
+      "externalProp": false,
+      "description": "Pass an icon to use for the attachment message. DownloadIcon recommended"
+    },
     "autoCapitalize": {
       "type": "| \"off\"\n  | \"none\"\n  | \"on\"\n  | \"sentences\"\n  | \"words\"\n  | \"characters\"\n  | (string & {})",
       "defaultValue": null,

From 65546f31f3b92ff13deb848814516f22ce60965e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Mon, 31 Mar 2025 12:16:05 -0400
Subject: [PATCH 2/4] chore: docs

---
 .../src/pages/components/chat-composer/index.mdx              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/paste-website/src/pages/components/chat-composer/index.mdx b/packages/paste-website/src/pages/components/chat-composer/index.mdx
index c602ae4351..345de20dc4 100644
--- a/packages/paste-website/src/pages/components/chat-composer/index.mdx
+++ b/packages/paste-website/src/pages/components/chat-composer/index.mdx
@@ -182,9 +182,9 @@ Set a rich text value using one of the Lexical formatting APIs such as [`toggleF
   {RichTextExample}
 </LivePreview>
 
-### Chat Composer with responsive attachments
+### Chat Composer with attachments
 
-For responsive attachment cards when using the Chat Composer component suite, use the `columns` prop.
+Use `ChatComposerAttachmentGroup` and `ChatComposerAttachmentCard` to display attached files. For responsive cards, use the `columns` prop on `ChatComposerAttachmentGroup`.
 
 <LivePreview
   noInline

From aa0ba77ba5e5e2627889425a8fdc98008f834a7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Mon, 31 Mar 2025 12:17:25 -0400
Subject: [PATCH 3/4] chore: yarn lock file

---
 yarn.lock | 1 -
 1 file changed, 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 31e811706a..3d8c09d623 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11556,7 +11556,6 @@ __metadata:
     "@twilio-paste/design-tokens": ^10.13.0
     "@twilio-paste/icons": ^13.0.1
     "@twilio-paste/lexical-library": ^5.0.1
-    "@twilio-paste/media-object": ^11.0.1
     "@twilio-paste/screen-reader-only": ^14.0.1
     "@twilio-paste/stack": ^9.0.1
     "@twilio-paste/style-props": ^10.0.1

From 8e50f9bd501b32f28ddbd13c6d02712dfd756681 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cnora?= <nkrantz@twilio.com>
Date: Mon, 31 Mar 2025 12:20:56 -0400
Subject: [PATCH 4/4] chore: update changeset

---
 .changeset/soft-berries-roll.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/soft-berries-roll.md b/.changeset/soft-berries-roll.md
index c178f8f291..1c92dbf64d 100644
--- a/.changeset/soft-berries-roll.md
+++ b/.changeset/soft-berries-roll.md
@@ -3,4 +3,4 @@
 "@twilio-paste/core": patch
 ---
 
-[Chat Composer] Make `attachmentIcon` optional for the attachment card, adjust spacing slightly
+[Chat Composer] Make `attachmentIcon` optional for the attachment card, adjust spacing slightly. NOTE: if you are using the Customization Provider to target "CHAT_COMPOSER_MEDIA_OBJECT", you will need to update your styles as Media Object is no longer being used in the Chat Composer package.