Skip to content

Commit a9e3040

Browse files
nkrantznkrantz
authored
chore(chat-composer): adjust spacing, make icon optional (#4292)
1 parent 3a9bb7c commit a9e3040

File tree

7 files changed

+70
-28
lines changed

7 files changed

+70
-28
lines changed

‎.changeset/soft-berries-roll.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/chat-composer": patch
3+
"@twilio-paste/core": patch
4+
---
5+
6+
[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.

‎packages/paste-core/components/chat-composer/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@
5353
"@twilio-paste/design-tokens": "^10.13.0",
5454
"@twilio-paste/icons": "^13.0.1",
5555
"@twilio-paste/lexical-library": "^5.0.1",
56-
"@twilio-paste/media-object": "^11.0.1",
5756
"@twilio-paste/screen-reader-only": "^14.0.1",
5857
"@twilio-paste/stack": "^9.0.1",
5958
"@twilio-paste/style-props": "^10.0.1",

‎packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
22
import type { BoxProps, BoxStyleProps } from "@twilio-paste/box";
33
import { Button } from "@twilio-paste/button";
44
import { ClearIcon } from "@twilio-paste/icons/esm/ClearIcon";
5-
import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object";
65
import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
76
import { Stack } from "@twilio-paste/stack";
87
import type { HTMLPasteProps } from "@twilio-paste/types";
@@ -60,7 +59,7 @@ export interface ChatComposerAttachmentCardProps extends HTMLPasteProps<"div"> {
6059
* @type {NonNullable<React.ReactNode>}
6160
* @memberof ChatComposerAttachmentProps
6261
*/
63-
attachmentIcon: NonNullable<React.ReactNode>;
62+
attachmentIcon?: NonNullable<React.ReactNode>;
6463
}
6564

6665
const ChatComposerAttachmentCard = React.forwardRef<HTMLDivElement, ChatComposerAttachmentCardProps>(
@@ -81,27 +80,24 @@ const ChatComposerAttachmentCard = React.forwardRef<HTMLDivElement, ChatComposer
8180
<Box
8281
{...safelySpreadBoxProps(props)}
8382
ref={ref}
84-
paddingY="space30"
85-
paddingX="space40"
83+
padding="space40"
8684
borderRadius="borderRadius30"
8785
backgroundColor="colorBackgroundBodyElevation"
8886
position="relative"
89-
display="inline-block"
87+
display="inline-flex"
88+
columnGap="space30"
89+
alignItems="center"
9090
width="100%"
9191
element={element}
9292
>
93-
<MediaObject as="div" ref={ref} verticalAlign="center" element={`${element}_MEDIA_OBJECT`}>
94-
<MediaFigure as="div" spacing="space30">
95-
<Box color="colorTextIcon" element={`${element}_ICON`}>
96-
{attachmentIcon}
97-
</Box>
98-
</MediaFigure>
99-
<MediaBody as="div" element={`${element}_BODY`}>
100-
<Stack orientation="vertical" spacing="space10">
101-
{children}
102-
</Stack>
103-
</MediaBody>
104-
</MediaObject>
93+
{attachmentIcon && (
94+
<Box color="colorTextIcon" element={`${element}_ICON`}>
95+
{attachmentIcon}
96+
</Box>
97+
)}
98+
<Stack orientation="vertical" spacing="space10">
99+
{children}
100+
</Stack>
105101
{onDismiss && (
106102
<Box
107103
position="absolute"

‎packages/paste-core/components/chat-composer/stories/container.stories.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,48 @@ export const ContainedVariantWithAttachments: StoryFn = () => {
110110
);
111111
};
112112

113+
export const ContainedVariantWithAttachmentsNoIcons: StoryFn = () => {
114+
return (
115+
<ChatComposerContainer variant="contained">
116+
<ChatComposer config={defaultConfig} ariaLabel="Basic chat composer" placeholder="Type here..." />
117+
<ChatComposerActionGroup>
118+
<Button variant="secondary_icon" size="reset">
119+
<AttachIcon decorative={false} title="attach a file to your message" />
120+
</Button>
121+
<Button variant="primary_icon" size="reset">
122+
<SendIcon decorative={false} title="Send" />
123+
</Button>
124+
</ChatComposerActionGroup>
125+
<ChatComposerAttachmentGroup>
126+
<ChatComposerAttachmentCard onDismiss={() => {}}>
127+
<ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
128+
<ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
129+
</ChatComposerAttachmentCard>
130+
<ChatComposerAttachmentCard onDismiss={() => {}}>
131+
<ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
132+
<ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
133+
</ChatComposerAttachmentCard>
134+
<ChatComposerAttachmentCard onDismiss={() => {}}>
135+
<ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
136+
<ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
137+
</ChatComposerAttachmentCard>
138+
<ChatComposerAttachmentCard onDismiss={() => {}}>
139+
<ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
140+
<ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
141+
</ChatComposerAttachmentCard>
142+
<ChatComposerAttachmentCard onDismiss={() => {}}>
143+
<ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
144+
<ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
145+
</ChatComposerAttachmentCard>
146+
<ChatComposerAttachmentCard onDismiss={() => {}}>
147+
<ChatComposerAttachmentLink href="www.google.com">Document-FINAL.doc</ChatComposerAttachmentLink>
148+
<ChatComposerAttachmentDescription>123 MB</ChatComposerAttachmentDescription>
149+
</ChatComposerAttachmentCard>
150+
</ChatComposerAttachmentGroup>
151+
</ChatComposerContainer>
152+
);
153+
};
154+
113155
ContainedVariantWithAttachments.storyName = "Contained Variant with Attachments";
114156

115157
export const ResponsiveContainedVariantWithAttachments: StoryFn = () => {

‎packages/paste-core/components/chat-composer/type-docs.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2464,13 +2464,6 @@
24642464
}
24652465
},
24662466
"ChatComposerAttachmentCard": {
2467-
"attachmentIcon": {
2468-
"type": "NonNullable<ReactNode>",
2469-
"defaultValue": "null",
2470-
"required": true,
2471-
"externalProp": false,
2472-
"description": "Pass an icon to use for the attachment message. DownloadIcon recommended"
2473-
},
24742467
"about": {
24752468
"type": "string",
24762469
"defaultValue": null,
@@ -2853,6 +2846,13 @@
28532846
"externalProp": true,
28542847
"description": "Defines the human readable text alternative of aria-valuenow for a range widget."
28552848
},
2849+
"attachmentIcon": {
2850+
"type": "NonNullable<ReactNode>",
2851+
"defaultValue": "null",
2852+
"required": false,
2853+
"externalProp": false,
2854+
"description": "Pass an icon to use for the attachment message. DownloadIcon recommended"
2855+
},
28562856
"autoCapitalize": {
28572857
"type": "| \"off\"\n | \"none\"\n | \"on\"\n | \"sentences\"\n | \"words\"\n | \"characters\"\n | (string & {})",
28582858
"defaultValue": null,

‎packages/paste-website/src/pages/components/chat-composer/index.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -182,9 +182,9 @@ Set a rich text value using one of the Lexical formatting APIs such as [`toggleF
182182
{RichTextExample}
183183
</LivePreview>
184184

185-
### Chat Composer with responsive attachments
185+
### Chat Composer with attachments
186186

187-
For responsive attachment cards when using the Chat Composer component suite, use the `columns` prop.
187+
Use `ChatComposerAttachmentGroup` and `ChatComposerAttachmentCard` to display attached files. For responsive cards, use the `columns` prop on `ChatComposerAttachmentGroup`.
188188

189189
<LivePreview
190190
noInline

‎yarn.lock‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11556,7 +11556,6 @@ __metadata:
1155611556
"@twilio-paste/design-tokens": ^10.13.0
1155711557
"@twilio-paste/icons": ^13.0.1
1155811558
"@twilio-paste/lexical-library": ^5.0.1
11559-
"@twilio-paste/media-object": ^11.0.1
1156011559
"@twilio-paste/screen-reader-only": ^14.0.1
1156111560
"@twilio-paste/stack": ^9.0.1
1156211561
"@twilio-paste/style-props": ^10.0.1

0 commit comments

Comments
 (0)