Skip to content

chore(chat-composer): adjust spacing, make icon optional #4292

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 1, 2025
Merged

chore(chat-composer): adjust spacing, make icon optional #4292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a410cb1
chore: update spacing, make icon optional
nkrantz Mar 31, 2025
65546f3
chore: docs
nkrantz Mar 31, 2025
aa0ba77
chore: yarn lock file
nkrantz Mar 31, 2025
8e50f9b
chore: update changeset
nkrantz Mar 31, 2025
ada014a
Merge branch 'main' into attachment-card/updates
nkrantz Apr 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/soft-berries-roll.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏 great communication for potential changes needed

1 change: 0 additions & 1 deletion packages/paste-core/components/chat-composer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
30 changes: 13 additions & 17 deletions packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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>(
Expand All @@ -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"
Expand Down
42 changes: 42 additions & 0 deletions packages/paste-core/components/chat-composer/stories/container.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down
14 changes: 7 additions & 7 deletions packages/paste-core/components/chat-composer/type-docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-website/src/pages/components/chat-composer/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading