Skip to content

Commit f4caa0e

Browse files
MartinCupelaMartinCupela
authored
feat: redesign message actions icons and message error badge (#3050)
BREAKING CHANGE: remove components ActionsIcon, ReactionIcon, ThreadIcon, MessageErrorIcon BREAKING CHANGE: replace class str-chat__message-error-icon with str-chat__message-error-indicator
1 parent 960c1f9 commit f4caa0e

File tree

12 files changed

+118
-150
lines changed

12 files changed

+118
-150
lines changed

‎src/components/Badge/Badge.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import clsx from 'clsx';
22
import React, { type ComponentProps } from 'react';
3+
import { IconExclamation } from '../Icons';
34

45
export type BadgeVariant =
56
| 'default'
@@ -41,3 +42,13 @@ export const Badge = ({
4142
{children}
4243
</div>
4344
);
45+
46+
export const ErrorBadge = ({
47+
className,
48+
size = 'sm',
49+
...rest
50+
}: Omit<BadgeProps, 'variant'>) => (
51+
<Badge {...rest} className={className} size={size} variant='error'>
52+
<IconExclamation />
53+
</Badge>
54+
);

‎src/components/Badge/styling/Badge.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,3 +104,20 @@
104104
padding-inline: var(--spacing-sm);
105105
}
106106
}
107+
108+
.str-chat__badge--variant-error {
109+
&.str-chat__badge--size-xs {
110+
min-width: 16px;
111+
min-height: 16px;
112+
}
113+
114+
&.str-chat__badge--size-sm {
115+
min-width: 20px;
116+
min-height: 20px;
117+
}
118+
119+
&.str-chat__badge--size-md {
120+
min-width: 24px;
121+
min-height: 24px;
122+
}
123+
}

‎src/components/Icons/icons.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -505,6 +505,16 @@ export const IconEmojiSmile = createIcon(
505505
</>,
506506
);
507507

508+
export const IconExclamation = createIcon(
509+
'IconExclamation',
510+
<>
511+
<g transform='translate(6.2222 0) scale(1.7778)'>
512+
<path d='M0 7.5C0 6.9477 0.4477 6.5 1 6.5C1.5523 6.5 2 6.9477 2 7.5C1.99989 8.05211 1.55223 8.5 1 8.5C0.447768 8.5 0.000110293 8.05211 0 7.5Z' />
513+
<path d='M0.25 0.75C0.25 0.33578 0.5858 0 1 0C1.4142 0 1.75 0.33578 1.75 0.75V4.75C1.74989 5.16411 1.41413 5.5 1 5.5C0.585868 5.5 0.25011 5.16411 0.25 4.75V0.75Z' />
514+
</g>
515+
</>,
516+
);
517+
508518
export const IconExclamationCircle1 = createIcon(
509519
'IconExclamationCircle1',
510520
<>

‎src/components/Message/MessageUI.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React, { useMemo, useState } from 'react';
22
import clsx from 'clsx';
3-
4-
import { MessageErrorIcon } from './icons';
53
import { MessageBouncePrompt as DefaultMessageBouncePrompt } from '../MessageBounce';
64
import { MessageDeletedBubble as DefaultMessageDeletedBubble } from './MessageDeletedBubble';
75
import { MessageBlocked as DefaultMessageBlocked } from './MessageBlocked';
@@ -46,6 +44,7 @@ import type { MessageUIComponentProps } from './types';
4644
import { PinIndicator as DefaultPinIndicator } from './PinIndicator';
4745
import { QuotedMessage as DefaultQuotedMessage } from './QuotedMessage';
4846
import { MessageBubble } from './MessageBubble';
47+
import { ErrorBadge } from '../Badge';
4948

5049
type MessageUIWithContextProps = MessageContextValue;
5150

@@ -237,7 +236,9 @@ const MessageUIWithContext = ({
237236
<div className='str-chat__message-reactions-host'>
238237
{hasReactions && <MessageReactions reverse />}
239238
</div>
240-
<MessageErrorIcon />
239+
<div className='str-chat__message-error-indicator'>
240+
<ErrorBadge />
241+
</div>
241242
</>
242243
)}
243244
</div>

‎src/components/Message/__tests__/MessageUI.test.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -736,8 +736,10 @@ describe('<MessageSimple />', () => {
736736
...bouncedMessageOptions,
737737
cid: channel.cid,
738738
});
739-
const { queryByTestId } = await renderMessageSimple({ message });
740-
expect(queryByTestId('error')).toBeInTheDocument();
739+
const { container } = await renderMessageSimple({ message });
740+
expect(
741+
container.querySelector('.str-chat__message-error-indicator'),
742+
).toBeInTheDocument();
741743
});
742744

743745
it('should render open bounce modal on click', async () => {

‎src/components/Message/__tests__/__snapshots__/MessageText.test.js.snap‎

Lines changed: 60 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -35,26 +35,28 @@ exports[`<MessageText /> should render with a custom inner class when one is set
3535
class="str-chat__message-reactions-host"
3636
/>
3737
<div
38-
class="str-chat__message-error-icon"
38+
class="str-chat__message-error-indicator"
3939
>
40-
<svg
41-
data-testid="error"
42-
fill="none"
43-
height="24"
44-
viewBox="0 0 24 24"
45-
width="24"
46-
xmlns="http://www.w3.org/2000/svg"
40+
<div
41+
class="str-chat__badge str-chat__badge--variant-error str-chat__badge--size-sm"
4742
>
48-
<path
49-
d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"
50-
fill="black"
51-
id="background"
52-
/>
53-
<path
54-
d="M13 17H11V15H13V17ZM13 13H11V7H13V13Z"
55-
fill="white"
56-
/>
57-
</svg>
43+
<svg
44+
class="str-chat__icon str-chat__icon--exclamation"
45+
viewBox="0 0 16 16"
46+
xmlns="http://www.w3.org/2000/svg"
47+
>
48+
<g
49+
transform="translate(6.2222 0) scale(1.7778)"
50+
>
51+
<path
52+
d="M0 7.5C0 6.9477 0.4477 6.5 1 6.5C1.5523 6.5 2 6.9477 2 7.5C1.99989 8.05211 1.55223 8.5 1 8.5C0.447768 8.5 0.000110293 8.05211 0 7.5Z"
53+
/>
54+
<path
55+
d="M0.25 0.75C0.25 0.33578 0.5858 0 1 0C1.4142 0 1.75 0.33578 1.75 0.75V4.75C1.74989 5.16411 1.41413 5.5 1 5.5C0.585868 5.5 0.25011 5.16411 0.25 4.75V0.75Z"
56+
/>
57+
</g>
58+
</svg>
59+
</div>
5860
</div>
5961
</div>
6062
<div
@@ -99,26 +101,28 @@ exports[`<MessageText /> should render with a custom wrapper class when one is s
99101
class="str-chat__message-reactions-host"
100102
/>
101103
<div
102-
class="str-chat__message-error-icon"
104+
class="str-chat__message-error-indicator"
103105
>
104-
<svg
105-
data-testid="error"
106-
fill="none"
107-
height="24"
108-
viewBox="0 0 24 24"
109-
width="24"
110-
xmlns="http://www.w3.org/2000/svg"
106+
<div
107+
class="str-chat__badge str-chat__badge--variant-error str-chat__badge--size-sm"
111108
>
112-
<path
113-
d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"
114-
fill="black"
115-
id="background"
116-
/>
117-
<path
118-
d="M13 17H11V15H13V17ZM13 13H11V7H13V13Z"
119-
fill="white"
120-
/>
121-
</svg>
109+
<svg
110+
class="str-chat__icon str-chat__icon--exclamation"
111+
viewBox="0 0 16 16"
112+
xmlns="http://www.w3.org/2000/svg"
113+
>
114+
<g
115+
transform="translate(6.2222 0) scale(1.7778)"
116+
>
117+
<path
118+
d="M0 7.5C0 6.9477 0.4477 6.5 1 6.5C1.5523 6.5 2 6.9477 2 7.5C1.99989 8.05211 1.55223 8.5 1 8.5C0.447768 8.5 0.000110293 8.05211 0 7.5Z"
119+
/>
120+
<path
121+
d="M0.25 0.75C0.25 0.33578 0.5858 0 1 0C1.4142 0 1.75 0.33578 1.75 0.75V4.75C1.74989 5.16411 1.41413 5.5 1 5.5C0.585868 5.5 0.25011 5.16411 0.25 4.75V0.75Z"
122+
/>
123+
</g>
124+
</svg>
125+
</div>
122126
</div>
123127
</div>
124128
<div
@@ -163,26 +167,28 @@ exports[`<MessageText /> should render with custom theme identifier in generated
163167
class="str-chat__message-reactions-host"
164168
/>
165169
<div
166-
class="str-chat__message-error-icon"
170+
class="str-chat__message-error-indicator"
167171
>
168-
<svg
169-
data-testid="error"
170-
fill="none"
171-
height="24"
172-
viewBox="0 0 24 24"
173-
width="24"
174-
xmlns="http://www.w3.org/2000/svg"
172+
<div
173+
class="str-chat__badge str-chat__badge--variant-error str-chat__badge--size-sm"
175174
>
176-
<path
177-
d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"
178-
fill="black"
179-
id="background"
180-
/>
181-
<path
182-
d="M13 17H11V15H13V17ZM13 13H11V7H13V13Z"
183-
fill="white"
184-
/>
185-
</svg>
175+
<svg
176+
class="str-chat__icon str-chat__icon--exclamation"
177+
viewBox="0 0 16 16"
178+
xmlns="http://www.w3.org/2000/svg"
179+
>
180+
<g
181+
transform="translate(6.2222 0) scale(1.7778)"
182+
>
183+
<path
184+
d="M0 7.5C0 6.9477 0.4477 6.5 1 6.5C1.5523 6.5 2 6.9477 2 7.5C1.99989 8.05211 1.55223 8.5 1 8.5C0.447768 8.5 0.000110293 8.05211 0 7.5Z"
185+
/>
186+
<path
187+
d="M0.25 0.75C0.25 0.33578 0.5858 0 1 0C1.4142 0 1.75 0.33578 1.75 0.75V4.75C1.74989 5.16411 1.41413 5.5 1 5.5C0.585868 5.5 0.25011 5.16411 0.25 4.75V0.75Z"
188+
/>
189+
</g>
190+
</svg>
191+
</div>
186192
</div>
187193
</div>
188194
<div

‎src/components/Message/icons.tsx‎

Lines changed: 0 additions & 71 deletions
This file was deleted.

‎src/components/Message/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
export * from './hooks';
2-
export * from './icons';
32
export * from './Message';
43
export * from './MessageBlocked';
54
export * from './MessageDeletedBubble';

‎src/components/Message/styling/Message.scss‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
--str-chat__message-box-shadow: none;
2323
--str-chat__message-active-background-color: transparent;
2424

25-
--str-chat__message-options-color: var(--str-chat__text-low-emphasis-color);
25+
--str-chat__message-options-color: var(--button-secondary-text);
2626
--str-chat__message-options-hover-background-color: var(
2727
--str-chat__tertiary-surface-color
2828
);
@@ -544,14 +544,8 @@
544544
width: 1.25em;
545545
}
546546

547-
.str-chat__message-error-icon {
547+
.str-chat__message-error-indicator {
548548
display: none;
549-
--str-chat-icon-color: var(--str-chat__message-error-message-color);
550-
551-
/* stylelint-disable-next-line selector-max-id */
552-
svg #background {
553-
fill: var(--str-chat__message-error-message-color);
554-
}
555549
}
556550

557551
.str-chat__message-inner--error {
@@ -574,16 +568,11 @@
574568
&.str-chat__message--failed {
575569
$icon-size: calc(var(--str-chat__spacing-px) * 18);
576570

577-
.str-chat__message-error-icon {
571+
.str-chat__message-error-indicator {
578572
display: block;
579573
position: absolute;
580574
top: 8px;
581575
inset-inline-end: calc(-1 * calc(#{$icon-size} / 2));
582-
583-
svg {
584-
width: $icon-size;
585-
height: $icon-size;
586-
}
587576
}
588577
}
589578
}

0 commit comments

Comments
 (0)