Skip to content

Commit c40cbeb

Browse files
tassoevantassoevan
authored
chore: Remove references to deprecated Modal.* components (#36396)
1 parent 68426bd commit c40cbeb

File tree

53 files changed

+1134
-563
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1134
-563
lines changed

‎apps/meteor/app/livechat-enterprise/client/components/modals/PlaceChatOnHoldModal.tsx‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
1-
import { Button, Modal } from '@rocket.chat/fuselage';
1+
import {
2+
Button,
3+
Modal,
4+
ModalClose,
5+
ModalContent,
6+
ModalFooter,
7+
ModalFooterControllers,
8+
ModalHeader,
9+
ModalIcon,
10+
ModalTitle,
11+
} from '@rocket.chat/fuselage';
212
import { useTranslation } from 'react-i18next';
313

414
type PlaceChatOnHoldModalProps = {
@@ -12,20 +22,20 @@ const PlaceChatOnHoldModal = ({ onCancel, onOnHoldChat, confirm = onOnHoldChat,
1222

1323
return (
1424
<Modal {...props} data-qa-id='on-hold-modal'>
15-
<Modal.Header>
16-
<Modal.Icon name='pause-unfilled' />
17-
<Modal.Title>{t('Omnichannel_onHold_Chat')}</Modal.Title>
18-
<Modal.Close onClick={onCancel} />
19-
</Modal.Header>
20-
<Modal.Content fontScale='p2'>{t('Would_you_like_to_place_chat_on_hold')}</Modal.Content>
21-
<Modal.Footer>
22-
<Modal.FooterControllers>
25+
<ModalHeader>
26+
<ModalIcon name='pause-unfilled' />
27+
<ModalTitle>{t('Omnichannel_onHold_Chat')}</ModalTitle>
28+
<ModalClose onClick={onCancel} />
29+
</ModalHeader>
30+
<ModalContent fontScale='p2'>{t('Would_you_like_to_place_chat_on_hold')}</ModalContent>
31+
<ModalFooter>
32+
<ModalFooterControllers>
2333
<Button onClick={onCancel}>{t('Cancel')}</Button>
2434
<Button primary onClick={confirm}>
2535
{t('Omnichannel_onHold_Chat')}
2636
</Button>
27-
</Modal.FooterControllers>
28-
</Modal.Footer>
37+
</ModalFooterControllers>
38+
</ModalFooter>
2939
</Modal>
3040
);
3141
};

‎apps/meteor/client/NavBarV2/NavBarPagesGroup/actions/CreateChannelModal.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ import {
1414
FieldDescription,
1515
Accordion,
1616
AccordionItem,
17+
ModalHeader,
18+
ModalTitle,
19+
ModalClose,
20+
ModalContent,
21+
ModalFooter,
22+
ModalFooterControllers,
1723
} from '@rocket.chat/fuselage';
1824
import type { TranslationKey } from '@rocket.chat/ui-contexts';
1925
import {
@@ -206,11 +212,11 @@ const CreateChannelModal = ({ teamId = '', onClose, reload }: CreateChannelModal
206212
<Box is='form' id={createChannelFormId} onSubmit={handleSubmit(handleCreateChannel)} {...props} />
207213
)}
208214
>
209-
<Modal.Header>
210-
<Modal.Title id={`${createChannelFormId}-title`}>{t('Create_channel')}</Modal.Title>
211-
<Modal.Close tabIndex={-1} title={t('Close')} onClick={onClose} />
212-
</Modal.Header>
213-
<Modal.Content mbe={2}>
215+
<ModalHeader>
216+
<ModalTitle id={`${createChannelFormId}-title`}>{t('Create_channel')}</ModalTitle>
217+
<ModalClose tabIndex={-1} title={t('Close')} onClick={onClose} />
218+
</ModalHeader>
219+
<ModalContent mbe={2}>
214220
<FieldGroup mbe={24}>
215221
<Field>
216222
<FieldLabel required htmlFor={nameId}>
@@ -370,15 +376,15 @@ const CreateChannelModal = ({ teamId = '', onClose, reload }: CreateChannelModal
370376
</FieldGroup>
371377
</AccordionItem>
372378
</Accordion>
373-
</Modal.Content>
374-
<Modal.Footer>
375-
<Modal.FooterControllers>
379+
</ModalContent>
380+
<ModalFooter>
381+
<ModalFooterControllers>
376382
<Button onClick={onClose}>{t('Cancel')}</Button>
377383
<Button type='submit' primary data-qa-type='create-channel-confirm-button'>
378384
{t('Create')}
379385
</Button>
380-
</Modal.FooterControllers>
381-
</Modal.Footer>
386+
</ModalFooterControllers>
387+
</ModalFooter>
382388
</Modal>
383389
);
384390
};

‎apps/meteor/client/NavBarV2/NavBarPagesGroup/actions/CreateDirectMessage.tsx‎

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
import type { IUser } from '@rocket.chat/core-typings';
2-
import { Box, Modal, Button, FieldGroup, Field, FieldRow, FieldError, FieldHint } from '@rocket.chat/fuselage';
2+
import {
3+
Box,
4+
Modal,
5+
Button,
6+
FieldGroup,
7+
Field,
8+
FieldRow,
9+
FieldError,
10+
FieldHint,
11+
ModalHeader,
12+
ModalTitle,
13+
ModalClose,
14+
ModalContent,
15+
ModalFooter,
16+
ModalFooterControllers,
17+
} from '@rocket.chat/fuselage';
318
import { useTranslation, useEndpoint, useToastMessageDispatch, useSetting } from '@rocket.chat/ui-contexts';
419
import { useMutation } from '@tanstack/react-query';
520
import { useId, memo } from 'react';
@@ -43,11 +58,11 @@ const CreateDirectMessage = ({ onClose }: CreateDirectMessageProps) => {
4358

4459
return (
4560
<Modal data-qa='create-direct-modal' wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}>
46-
<Modal.Header>
47-
<Modal.Title>{t('Create_direct_message')}</Modal.Title>
48-
<Modal.Close tabIndex={-1} onClick={onClose} />
49-
</Modal.Header>
50-
<Modal.Content mbe={2}>
61+
<ModalHeader>
62+
<ModalTitle>{t('Create_direct_message')}</ModalTitle>
63+
<ModalClose tabIndex={-1} onClick={onClose} />
64+
</ModalHeader>
65+
<ModalContent mbe={2}>
5166
<FieldGroup>
5267
<Field>
5368
<Box htmlFor={membersFieldId}>{t('Direct_message_creation_description')}</Box>
@@ -84,15 +99,15 @@ const CreateDirectMessage = ({ onClose }: CreateDirectMessageProps) => {
8499
<FieldHint id={`${membersFieldId}-hint`}>{t('Direct_message_creation_description_hint')}</FieldHint>
85100
</Field>
86101
</FieldGroup>
87-
</Modal.Content>
88-
<Modal.Footer>
89-
<Modal.FooterControllers>
102+
</ModalContent>
103+
<ModalFooter>
104+
<ModalFooterControllers>
90105
<Button onClick={onClose}>{t('Cancel')}</Button>
91106
<Button loading={isSubmitting || isValidating} type='submit' primary>
92107
{t('Create')}
93108
</Button>
94-
</Modal.FooterControllers>
95-
</Modal.Footer>
109+
</ModalFooterControllers>
110+
</ModalFooter>
96111
</Modal>
97112
);
98113
};

‎apps/meteor/client/NavBarV2/NavBarPagesGroup/actions/CreateTeamModal.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@ import {
1616
Accordion,
1717
AccordionItem,
1818
Divider,
19+
ModalHeader,
20+
ModalTitle,
21+
ModalClose,
22+
ModalContent,
23+
ModalFooter,
24+
ModalFooterControllers,
1925
} from '@rocket.chat/fuselage';
2026
import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
2127
import {
@@ -178,11 +184,11 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
178184
<Box is='form' id={createTeamFormId} onSubmit={handleSubmit(handleCreateTeam)} {...props} />
179185
)}
180186
>
181-
<Modal.Header>
182-
<Modal.Title id={`${createTeamFormId}-title`}>{t('Teams_New_Title')}</Modal.Title>
183-
<Modal.Close title={t('Close')} onClick={onClose} tabIndex={-1} />
184-
</Modal.Header>
185-
<Modal.Content mbe={2}>
187+
<ModalHeader>
188+
<ModalTitle id={`${createTeamFormId}-title`}>{t('Teams_New_Title')}</ModalTitle>
189+
<ModalClose title={t('Close')} onClick={onClose} tabIndex={-1} />
190+
</ModalHeader>
191+
<ModalContent mbe={2}>
186192
<Box fontScale='p2' mbe={16}>
187193
{t('Teams_new_description')}
188194
</Box>
@@ -367,15 +373,15 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
367373
</FieldGroup>
368374
</AccordionItem>
369375
</Accordion>
370-
</Modal.Content>
371-
<Modal.Footer>
372-
<Modal.FooterControllers>
376+
</ModalContent>
377+
<ModalFooter>
378+
<ModalFooterControllers>
373379
<Button onClick={onClose}>{t('Cancel')}</Button>
374380
<Button disabled={!canCreateTeam} loading={isSubmitting} type='submit' primary>
375381
{t('Create')}
376382
</Button>
377-
</Modal.FooterControllers>
378-
</Modal.Footer>
383+
</ModalFooterControllers>
384+
</ModalFooter>
379385
</Modal>
380386
);
381387
};

‎apps/meteor/client/NavBarV2/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,23 @@
11
import type { IUser } from '@rocket.chat/core-typings';
2-
import { Field, TextInput, FieldGroup, Modal, Button, Box, FieldLabel, FieldRow, FieldError, FieldHint } from '@rocket.chat/fuselage';
2+
import {
3+
Field,
4+
TextInput,
5+
FieldGroup,
6+
Modal,
7+
Button,
8+
Box,
9+
FieldLabel,
10+
FieldRow,
11+
FieldError,
12+
FieldHint,
13+
ModalHeader,
14+
ModalIcon,
15+
ModalTitle,
16+
ModalClose,
17+
ModalContent,
18+
ModalFooter,
19+
ModalFooterControllers,
20+
} from '@rocket.chat/fuselage';
321
import { useEffectEvent, useLocalStorage } from '@rocket.chat/fuselage-hooks';
422
import { useToastMessageDispatch, useSetting, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
523
import type { ReactElement, ChangeEvent, ComponentProps, FormEvent } from 'react';
@@ -49,7 +67,7 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa
4967
}
5068

5169
onClose();
52-
}, [dispatchToastMessage, setUserStatus, statusText, statusType, onClose, t]);
70+
}, [onClose, setUserStatus, statusText, statusType, setCustomStatus, dispatchToastMessage, t]);
5371

5472
return (
5573
<Modal
@@ -64,12 +82,12 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa
6482
/>
6583
)}
6684
>
67-
<Modal.Header>
68-
<Modal.Icon name='info' />
69-
<Modal.Title>{t('Edit_Status')}</Modal.Title>
70-
<Modal.Close onClick={onClose} />
71-
</Modal.Header>
72-
<Modal.Content fontScale='p2'>
85+
<ModalHeader>
86+
<ModalIcon name='info' />
87+
<ModalTitle>{t('Edit_Status')}</ModalTitle>
88+
<ModalClose onClick={onClose} />
89+
</ModalHeader>
90+
<ModalContent fontScale='p2'>
7391
<FieldGroup>
7492
<Field>
7593
<FieldLabel>{t('StatusMessage')}</FieldLabel>
@@ -88,17 +106,17 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa
88106
<FieldError>{statusTextError}</FieldError>
89107
</Field>
90108
</FieldGroup>
91-
</Modal.Content>
92-
<Modal.Footer>
93-
<Modal.FooterControllers>
109+
</ModalContent>
110+
<ModalFooter>
111+
<ModalFooterControllers>
94112
<Button secondary onClick={onClose}>
95113
{t('Cancel')}
96114
</Button>
97115
<Button primary type='submit' disabled={!!statusTextError}>
98116
{t('Save')}
99117
</Button>
100-
</Modal.FooterControllers>
101-
</Modal.Footer>
118+
</ModalFooterControllers>
119+
</ModalFooter>
102120
</Modal>
103121
);
104122
};

‎apps/meteor/client/components/Backdrop.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Modal } from '@rocket.chat/fuselage';
2-
import type { ComponentProps, ReactElement } from 'react';
1+
import { ModalBackdrop } from '@rocket.chat/fuselage';
2+
import type { ComponentProps } from 'react';
33

4-
type BackdropProps = ComponentProps<typeof Modal.Backdrop>;
4+
type BackdropProps = ComponentProps<typeof ModalBackdrop>;
55

6-
export const Backdrop = (props: BackdropProps): ReactElement => <Modal.Backdrop bg='transparent' {...props} />;
6+
export const Backdrop = (props: BackdropProps) => <ModalBackdrop bg='transparent' {...props} />;

‎apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ import {
1313
FieldLabel,
1414
FieldRow,
1515
FieldError,
16+
ModalHeader,
17+
ModalTitle,
18+
ModalClose,
19+
ModalContent,
20+
ModalFooter,
21+
ModalFooterControllers,
1622
} from '@rocket.chat/fuselage';
1723
import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
1824
import { useMutation } from '@tanstack/react-query';
@@ -98,11 +104,11 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
98104
aria-labelledby={`${modalId}-title`}
99105
wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}
100106
>
101-
<Modal.Header>
102-
<Modal.Title id={`${modalId}-title`}>{t('Discussion_title')}</Modal.Title>
103-
<Modal.Close tabIndex={-1} onClick={onClose} />
104-
</Modal.Header>
105-
<Modal.Content>
107+
<ModalHeader>
108+
<ModalTitle id={`${modalId}-title`}>{t('Discussion_title')}</ModalTitle>
109+
<ModalClose tabIndex={-1} onClick={onClose} />
110+
</ModalHeader>
111+
<ModalContent>
106112
<Box mbe={24}>{t('Discussion_description')}</Box>
107113
<FieldGroup>
108114
<Field>
@@ -243,15 +249,15 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
243249
)}
244250
</Field>
245251
</FieldGroup>
246-
</Modal.Content>
247-
<Modal.Footer>
248-
<Modal.FooterControllers>
252+
</ModalContent>
253+
<ModalFooter>
254+
<ModalFooterControllers>
249255
<Button onClick={onClose}>{t('Cancel')}</Button>
250256
<Button type='submit' primary loading={createDiscussionMutation.isPending}>
251257
{t('Create')}
252258
</Button>
253-
</Modal.FooterControllers>
254-
</Modal.Footer>
259+
</ModalFooterControllers>
260+
</ModalFooter>
255261
</Modal>
256262
);
257263
};

‎apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { Box, Modal } from '@rocket.chat/fuselage';
1+
import { Box, ModalHeroImage } from '@rocket.chat/fuselage';
22
import { GenericModal } from '@rocket.chat/ui-client';
33
import type { ReactElement, ComponentProps } from 'react';
44
import { useTranslation } from 'react-i18next';
55

66
type GenericUpsellModalProps = Omit<ComponentProps<typeof GenericModal>, 'variant' | 'children' | 'onClose' | 'onDismiss'> & {
77
subtitle?: string | ReactElement;
88
description?: string | ReactElement;
9-
img: ComponentProps<typeof Modal.HeroImage>['src'];
9+
img: ComponentProps<typeof ModalHeroImage>['src'];
1010

11-
imgWidth?: ComponentProps<typeof Modal.HeroImage>['width'];
12-
imgHeight?: ComponentProps<typeof Modal.HeroImage>['height'];
11+
imgWidth?: ComponentProps<typeof ModalHeroImage>['width'];
12+
imgHeight?: ComponentProps<typeof ModalHeroImage>['height'];
1313
imgAlt?: string;
1414
onClose: () => void;
1515
onConfirm?: () => void;
@@ -37,7 +37,7 @@ const GenericUpsellModal = ({
3737
variant='upsell'
3838
confirmText={confirmText ?? t('Upgrade')}
3939
>
40-
<Modal.HeroImage src={img} alt={imgAlt} width={imgWidth} height={imgHeight} />
40+
<ModalHeroImage src={img} alt={imgAlt} width={imgWidth} height={imgHeight} />
4141
{subtitle && (
4242
<Box is='h3' fontScale='h3'>
4343
{subtitle}

0 commit comments

Comments
 (0)