diff --git a/.changeset/soft-berries-roll.md b/.changeset/soft-berries-roll.md new file mode 100644 index 0000000000..1c92dbf64d --- /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. 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. 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} * @memberof ChatComposerAttachmentProps */ - attachmentIcon: NonNullable; + attachmentIcon?: NonNullable; } const ChatComposerAttachmentCard = React.forwardRef( @@ -81,27 +80,24 @@ const ChatComposerAttachmentCard = React.forwardRef - - - - {attachmentIcon} - - - - - {children} - - - + {attachmentIcon && ( + + {attachmentIcon} + + )} + + {children} + {onDismiss && ( { ); }; +export const ContainedVariantWithAttachmentsNoIcons: StoryFn = () => { + return ( + + + + + + + + {}}> + Document-FINAL.doc + 123 MB + + {}}> + Document-FINAL.doc + 123 MB + + {}}> + Document-FINAL.doc + 123 MB + + {}}> + Document-FINAL.doc + 123 MB + + {}}> + Document-FINAL.doc + 123 MB + + {}}> + Document-FINAL.doc + 123 MB + + + + ); +}; + 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", - "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", + "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, 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} -### 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`.