mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Fix rendering of long names in <DeliveryIssueNotification>

Browse source
This commit is contained in:
Evan Hahn 2021-09-02 12:34:00 -05:00 committed by GitHub
parent c7b7a355ba
commit 808ade2a8c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
ts/components/conversation/DeliveryIssueNotification.stories.tsx
View file

@ -10,33 +10,49 @@ import enMessages from '../../../_locales/en/messages.json';
import { DeliveryIssueNotification } from './DeliveryIssueNotification';
import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
const story = storiesOf(
'Components/Conversation/DeliveryIssueNotification',
module
);
const i18n = setupI18n('en', enMessages);
const sender = getDefaultConversation();
storiesOf('Components/Conversation/DeliveryIssueNotification', module).add(
'Default',
() => {
return (
<DeliveryIssueNotification
i18n={i18n}
inGroup={false}
learnMoreAboutDeliveryIssue={action('learnMoreAboutDeliveryIssue')}
sender={sender}
/>
);
}
);
story.add('Default', () => {
return (
<DeliveryIssueNotification
i18n={i18n}
inGroup={false}
learnMoreAboutDeliveryIssue={action('learnMoreAboutDeliveryIssue')}
sender={sender}
/>
);
});
storiesOf('Components/Conversation/DeliveryIssueNotification', module).add(
'In Group',
() => {
return (
<DeliveryIssueNotification
i18n={i18n}
inGroup
learnMoreAboutDeliveryIssue={action('learnMoreAboutDeliveryIssue')}
sender={sender}
/>
);
}
);
story.add('With a long name', () => {
const longName = '🤷🏽‍♀️❤️🐞'.repeat(50);
return (
<DeliveryIssueNotification
i18n={i18n}
inGroup={false}
learnMoreAboutDeliveryIssue={action('learnMoreAboutDeliveryIssue')}
sender={getDefaultConversation({
firstName: longName,
name: longName,
profileName: longName,
title: longName,
})}
/>
);
});
story.add('In Group', () => {
return (
<DeliveryIssueNotification
i18n={i18n}
inGroup
learnMoreAboutDeliveryIssue={action('learnMoreAboutDeliveryIssue')}
sender={sender}
/>
);
});

16
ts/components/conversation/DeliveryIssueNotification.tsx
View file

@ -49,13 +49,15 @@ export function DeliveryIssueNotification(
<div className="SystemMessage SystemMessage--multiline">
<div className="SystemMessage__line">
<span className="SystemMessage__icon SystemMessage__icon--info" />
<Intl
id="DeliveryIssue--notification"
components={{
sender: <Emojify text={sender.firstName || sender.title} />,
}}
i18n={i18n}
/>
<span>
<Intl
id="DeliveryIssue--notification"
components={{
sender: <Emojify text={sender.firstName || sender.title} />,
}}
i18n={i18n}
/>
</span>
</div>
<div className="SystemMessage__line">
<Button