Improve CallingScreenSharingController for long text

This commit is contained in:
Josh Perez 2021-06-17 14:41:16 -04:00 committed by GitHub
parent 65a1e82857
commit 93bc094342
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 4 deletions

View File

@ -15,7 +15,14 @@
text-overflow: ellipsis;
user-select: none;
white-space: nowrap;
width: 212px;
width: 350px;
}
&__button {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&__buttons {

View File

@ -15,11 +15,11 @@ import enMessages from '../../_locales/en/messages.json';
const i18n = setupI18n('en', enMessages);
const createProps = (): PropsType => ({
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
i18n,
onCloseController: action('on-close-controller'),
onStopSharing: action('on-stop-sharing'),
presentedSourceName: 'Application',
presentedSourceName: overrideProps.presentedSourceName || 'Application',
});
const story = storiesOf('Components/CallingScreenSharingController', module);
@ -27,3 +27,14 @@ const story = storiesOf('Components/CallingScreenSharingController', module);
story.add('Controller', () => {
return <CallingScreenSharingController {...createProps()} />;
});
story.add('Really long app name', () => {
return (
<CallingScreenSharingController
{...createProps({
presentedSourceName:
'A really long application name that is super long',
})}
/>
);
});

View File

@ -24,7 +24,11 @@ export const CallingScreenSharingController = ({
{i18n('calling__presenting--info', [presentedSourceName])}
</div>
<div className="module-CallingScreenSharingController__buttons">
<Button onClick={onStopSharing} variant={ButtonVariant.Destructive}>
<Button
className="module-CallingScreenSharingController__button"
onClick={onStopSharing}
variant={ButtonVariant.Destructive}
>
{i18n('calling__presenting--stop')}
</Button>
<button