mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-52979]: Remove code around abandoned MUI modal migration (#23556)

Просмотр исходного кода
Этот коммит содержится в:
M-ZubairAhmed
2023-06-05 18:40:38 +05:30
коммит произвёл GitHub
родитель b6a407c392
Коммит f4f420dd93
97 изменённых файлов: 122 добавлений и 1836 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

1
webapp/channels/package.json
Просмотреть файл

@@ -16,7 +16,6 @@
"@mui/base": "5.0.0-alpha.127",
"@mui/material": "5.11.16",
"@mui/styled-engine-sc": "5.11.11",
"@mui/system": "5.11.16",
"@stripe/react-stripe-js": "1.13.0",
"@stripe/stripe-js": "1.41.0",
"@tippyjs/react": "4.2.6",

245
webapp/channels/src/components/__snapshots__/generic_modal.test.tsx.snap
Просмотреть файл

@@ -1,245 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/GenericModal should match snapshot for base case 1`] = `
<Modal
animation={true}
aria-labelledby="genericModalLabel"
autoFocus={true}
backdrop={true}
bsClass="modal"
dialogClassName="a11y__modal GenericModal"
dialogComponentClass={[Function]}
enforceFocus={true}
id="genericModal"
keyboard={true}
manager={
ModalManager {
"add": [Function],
"containers": Array [],
"data": Array [],
"handleContainerOverflow": true,
"hideSiblingNodes": true,
"isTopModal": [Function],
"modals": Array [],
"remove": [Function],
}
}
onExited={[MockFunction]}
onHide={[Function]}
onShow={[Function]}
renderBackdrop={[Function]}
restoreFocus={true}
role="dialog"
show={true}
>
<FocusTrap
active={false}
>
<div
className="GenericModal__wrapper-enter-key-press-catcher"
onKeyDown={[Function]}
tabIndex={0}
>
<ModalHeader
bsClass="modal-header"
closeButton={true}
closeLabel="Close"
/>
<ModalBody
bsClass="modal-body"
componentClass="div"
>
<div
className="GenericModal__header"
>
<h1
id="genericModalLabel"
>
Modal Header Text
</h1>
</div>
<div
className="GenericModal__body padding"
/>
</ModalBody>
</div>
</FocusTrap>
</Modal>
`;
exports[`components/GenericModal should match snapshot with both buttons 1`] = `
<Modal
animation={true}
aria-labelledby="genericModalLabel"
autoFocus={true}
backdrop={true}
bsClass="modal"
dialogClassName="a11y__modal GenericModal"
dialogComponentClass={[Function]}
enforceFocus={true}
id="genericModal"
keyboard={true}
manager={
ModalManager {
"add": [Function],
"containers": Array [],
"data": Array [],
"handleContainerOverflow": true,
"hideSiblingNodes": true,
"isTopModal": [Function],
"modals": Array [],
"remove": [Function],
}
}
onExited={[MockFunction]}
onHide={[Function]}
onShow={[Function]}
renderBackdrop={[Function]}
restoreFocus={true}
role="dialog"
show={true}
>
<FocusTrap
active={false}
>
<div
className="GenericModal__wrapper-enter-key-press-catcher"
onKeyDown={[Function]}
tabIndex={0}
>
<ModalHeader
bsClass="modal-header"
closeButton={true}
closeLabel="Close"
/>
<ModalBody
bsClass="modal-body"
componentClass="div"
>
<div
className="GenericModal__header"
>
<h1
id="genericModalLabel"
>
Modal Header Text
</h1>
</div>
<div
className="GenericModal__body padding"
/>
</ModalBody>
<ModalFooter
bsClass="modal-footer"
className=""
componentClass="div"
>
<button
className="GenericModal__button cancel"
onClick={[Function]}
type="button"
>
<MemoizedFormattedMessage
defaultMessage="Cancel"
id="generic_modal.cancel"
/>
</button>
<button
className="GenericModal__button confirm"
onClick={[Function]}
type="submit"
>
<MemoizedFormattedMessage
defaultMessage="Confirm"
id="generic_modal.confirm"
/>
</button>
</ModalFooter>
</div>
</FocusTrap>
</Modal>
`;
exports[`components/GenericModal should match snapshot with disabled confirm button 1`] = `
<Modal
animation={true}
aria-labelledby="genericModalLabel"
autoFocus={true}
backdrop={true}
bsClass="modal"
dialogClassName="a11y__modal GenericModal"
dialogComponentClass={[Function]}
enforceFocus={true}
id="genericModal"
keyboard={true}
manager={
ModalManager {
"add": [Function],
"containers": Array [],
"data": Array [],
"handleContainerOverflow": true,
"hideSiblingNodes": true,
"isTopModal": [Function],
"modals": Array [],
"remove": [Function],
}
}
onExited={[MockFunction]}
onHide={[Function]}
onShow={[Function]}
renderBackdrop={[Function]}
restoreFocus={true}
role="dialog"
show={true}
>
<FocusTrap
active={false}
>
<div
className="GenericModal__wrapper-enter-key-press-catcher"
onKeyDown={[Function]}
tabIndex={0}
>
<ModalHeader
bsClass="modal-header"
closeButton={true}
closeLabel="Close"
/>
<ModalBody
bsClass="modal-body"
componentClass="div"
>
<div
className="GenericModal__header"
>
<h1
id="genericModalLabel"
>
Modal Header Text
</h1>
</div>
<div
className="GenericModal__body padding"
/>
</ModalBody>
<ModalFooter
bsClass="modal-footer"
className=""
componentClass="div"
>
<button
className="GenericModal__button confirm disabled"
disabled={true}
onClick={[Function]}
type="submit"
>
<MemoizedFormattedMessage
defaultMessage="Confirm"
id="generic_modal.confirm"
/>
</button>
</ModalFooter>
</div>
</FocusTrap>
</Modal>
`;

6
webapp/channels/src/components/admin_console/billing/delete_workspace/delete_workspace_modal.tsx
Просмотреть файл

@@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
import {useDispatch, useSelector} from 'react-redux';
import {LegacyGenericModal} from '@mattermost/components';
import {GenericModal} from '@mattermost/components';
import LaptopAlertSVG from 'components/common/svg_images_components/laptop_alert_svg';
import {closeModal, openModal} from 'actions/views/modals';
@@ -180,7 +180,7 @@ export default function DeleteWorkspaceModal(props: Props) {
}
return (
<LegacyGenericModal
<GenericModal
className='DeleteWorkspaceModal'
onExited={handleClickCancel}
>
@@ -249,6 +249,6 @@ export default function DeleteWorkspaceModal(props: Props) {
/>
</button>
</div>
</LegacyGenericModal>
</GenericModal>
);
}

4
webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React, {memo} from 'react';
import {FormattedMessage} from 'react-intl';
import {ClientLicense} from '@mattermost/types/config';
@@ -160,4 +160,4 @@ const EnterpriseEditionRightPanel = ({
);
};
export default React.memo(EnterpriseEditionRightPanel);
export default memo(EnterpriseEditionRightPanel);

2
webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.tsx
Просмотреть файл

@@ -11,7 +11,7 @@ import {GlobalState} from 'types/store';
import {isModalOpen} from 'selectors/views/modals';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import AlertSvg from 'components/common/svg_images_components/alert_svg';
import {ModalIdentifiers} from 'utils/constants';

2
webapp/channels/src/components/admin_console/license_settings/modals/ee_license_modal.tsx
Просмотреть файл

@@ -10,7 +10,7 @@ import {GlobalState} from 'types/store';
import {isModalOpen} from 'selectors/views/modals';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {ModalIdentifiers} from 'utils/constants';

2
webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx
Просмотреть файл

@@ -19,7 +19,7 @@ import {GlobalState} from 'types/store';
import {isModalOpen} from 'selectors/views/modals';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import WomanArmOnTable from 'components/common/svg_images_components/woman_arm_on_table_svg';
import HandsSvg from 'components/common/svg_images_components/hands_svg';
import FileSvg from 'components/common/svg_images_components/file_svg';

6
webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx
Просмотреть файл

@@ -1,14 +1,14 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React, {memo} from 'react';
import {FormattedMessage} from 'react-intl';
import WomanUpArrowsAndCloudsSvg from 'components/common/svg_images_components/woman_up_arrows_and_clouds_svg';
import PurchaseLink from 'components/announcement_bar/purchase_link/purchase_link';
import ContactUsButton from 'components/announcement_bar/contact_sales/contact_us';
const StarterRightPanel: React.FC = () => {
const StarterRightPanel = () => {
const upgradeAdvantages = [
'OneLogin/ADFS SAML 2.0',
'OpenID Connect',
@@ -61,4 +61,4 @@ const StarterRightPanel: React.FC = () => {
);
};
export default React.memo(StarterRightPanel);
export default memo(StarterRightPanel);

2
webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
import {FormattedMessage} from 'react-intl';
import LoadingWrapper from 'components/widgets/loading/loading_wrapper';

6
webapp/channels/src/components/air_gapped_self_hosted_purchase_modal/index.tsx
Просмотреть файл

@@ -4,7 +4,7 @@
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {LegacyGenericModal} from '@mattermost/components';
import {GenericModal} from '@mattermost/components';
import {CloudLinks} from 'utils/constants';
import CreditCardSvg from 'components/common/svg_images_components/credit_card_svg';
import {useControlAirGappedSelfHostedPurchaseModal} from 'components/common/hooks/useControlModal';
@@ -15,7 +15,7 @@ export default function AirGappedSelfHostedPurhcaseModal() {
const {close} = useControlAirGappedSelfHostedPurchaseModal();
return (
<LegacyGenericModal
<GenericModal
onExited={close}
show={true}
className='air-gapped-purchase-modal'
@@ -39,6 +39,6 @@ export default function AirGappedSelfHostedPurhcaseModal() {
</span>
<a href={CloudLinks.SELF_HOSTED_PRICING}>{CloudLinks.SELF_HOSTED_PRICING}</a>
</div>
</LegacyGenericModal>
</GenericModal>
);
}

2
webapp/channels/src/components/announcement_bar/no_internet_connection/no_internet_connection.tsx
Просмотреть файл

@@ -6,7 +6,7 @@ import {FormattedMessage} from 'react-intl';
import FormattedMarkdownMessage from 'components/formatted_markdown_message';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import './no_internet_connection.scss';
import NoInternetConnectionSvg from './no-internet-connection-svg';

2
webapp/channels/src/components/at_sum_members_mention/notification_from_members_modal.tsx
Просмотреть файл

@@ -25,7 +25,7 @@ import {mapFeatureIdToTranslation} from 'utils/notify_admin_utils';
import {ModalIdentifiers} from 'utils/constants';
import {ListItemType} from 'components/channel_members_rhs/channel_members_rhs';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import MemberList from '../channel_members_rhs/member_list';
import {ChannelMembership} from '@mattermost/types/channels';

2
webapp/channels/src/components/cloud_start_trial/request_business_email_modal.test.tsx
Просмотреть файл

@@ -10,7 +10,7 @@ import {shallow} from 'enzyme';
import * as cloudActions from 'actions/cloud';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {mountWithIntl} from 'tests/helpers/intl-test-helper';
import mockStore from 'tests/test_store';

2
webapp/channels/src/components/cloud_start_trial/request_business_email_modal.tsx
Просмотреть файл

@@ -16,7 +16,7 @@ import {validateBusinessEmail} from 'actions/cloud';
import {ItemStatus, TELEMETRY_CATEGORIES, ModalIdentifiers, LicenseLinks, AboutLinks} from 'utils/constants';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {CustomMessageInputType} from 'components/widgets/inputs/input/input';
import ExternalLink from 'components/external_link';

2
webapp/channels/src/components/cloud_usage_modal/index.tsx
Просмотреть файл

@@ -10,7 +10,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {Message} from 'utils/i18n';
import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import useGetLimits from 'components/common/hooks/useGetLimits';
import useGetUsage from 'components/common/hooks/useGetUsage';

2
webapp/channels/src/components/cloud_usage_modal/mini_modal.tsx
Просмотреть файл

@@ -10,7 +10,7 @@ import {Limits, CloudUsage} from '@mattermost/types/cloud';
import {Message} from 'utils/i18n';
import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import WorkspaceLimitsPanel, {messageToElement} from './workspace_limits_panel';

2
webapp/channels/src/components/common/svg_images_components/access_problem_svg.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
<svg

2
webapp/channels/src/components/common/svg_images_components/bulls_eye_svg.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

2
webapp/channels/src/components/common/svg_images_components/clipboard_svg.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

2
webapp/channels/src/components/common/svg_images_components/gears_svg.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

2
webapp/channels/src/components/common/svg_images_components/handshake_svg.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

2
webapp/channels/src/components/common/svg_images_components/phone_svg.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

2
webapp/channels/src/components/common/svg_images_components/security_svg.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

2
webapp/channels/src/components/common/svg_images_components/sunglasses_svg.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

2
webapp/channels/src/components/common/svg_images_components/wrench_svg.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
type SvgProps = {
width?: number;

2
webapp/channels/src/components/custom_status/custom_status_modal.tsx
Просмотреть файл

@@ -15,7 +15,7 @@ import {getCurrentTimezone} from 'mattermost-redux/selectors/entities/timezone';
import {loadCustomEmojisIfNeeded} from 'actions/emoji_actions';
import {closeModal} from 'actions/views/modals';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import EmojiIcon from 'components/widgets/icons/emoji_icon';
import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay';
import RenderEmoji from 'components/emoji/render_emoji';

12
webapp/channels/src/components/delete_category_modal/delete_category_modal.tsx
Просмотреть файл

@@ -6,10 +6,12 @@ import {FormattedMessage} from 'react-intl';
import {ChannelCategory} from '@mattermost/types/channel_categories';
import {GenericModal} from '@mattermost/components';
import FormattedMarkdownMessage from 'components/formatted_markdown_message';
import GenericModal from 'components/generic_modal';
import {localizeMessage} from 'utils/utils';
import {t} from 'utils/i18n';
import '../category_modal.scss';
@@ -72,3 +74,11 @@ export default class DeleteCategoryModal extends React.PureComponent<Props, Stat
);
}
}
// TODO MM-52680 These strings are properly defined in @mattermost/components, but the i18n tooling currently can't
// find them there, so we've had to redefine them here
t('generic_modal.cancel');
t('generic_modal.confirm');
t('footer_pagination.count');
t('footer_pagination.prev');
t('footer_pagination.next');

2
webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx
Просмотреть файл

@@ -14,7 +14,7 @@ import {DateTime} from 'luxon';
import {ActionFunc} from 'mattermost-redux/types/actions';
import {UserStatus} from '@mattermost/types/users';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
import Constants, {A11yCustomEventTypes, A11yFocusEventDetail, UserStatuses} from 'utils/constants';

8
webapp/channels/src/components/drafts/draft_actions/__snapshots__/delete_draft_modal.test.tsx.snap
Просмотреть файл

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/drafts/draft_actions/delete_draft_modal should have called onConfirm 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={true}
autoCloseOnConfirmButton={true}
bodyPadding={true}
@@ -39,11 +39,11 @@ exports[`components/drafts/draft_actions/delete_draft_modal should have called o
}
}
/>
</LegacyGenericModal>
</GenericModal>
`;
exports[`components/drafts/draft_actions/delete_draft_modal should have called onExited 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={true}
autoCloseOnConfirmButton={true}
bodyPadding={true}
@@ -81,7 +81,7 @@ exports[`components/drafts/draft_actions/delete_draft_modal should have called o
}
}
/>
</LegacyGenericModal>
</GenericModal>
`;
exports[`components/drafts/draft_actions/delete_draft_modal should match snapshot 1`] = `

8
webapp/channels/src/components/drafts/draft_actions/__snapshots__/send_draft_modal.test.tsx.snap
Просмотреть файл

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/drafts/draft_actions/send_draft_modal should have called onConfirm 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={true}
autoCloseOnConfirmButton={true}
bodyPadding={true}
@@ -38,11 +38,11 @@ exports[`components/drafts/draft_actions/send_draft_modal should have called onC
}
}
/>
</LegacyGenericModal>
</GenericModal>
`;
exports[`components/drafts/draft_actions/send_draft_modal should have called onExited 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={true}
autoCloseOnConfirmButton={true}
bodyPadding={true}
@@ -79,7 +79,7 @@ exports[`components/drafts/draft_actions/send_draft_modal should have called onE
}
}
/>
</LegacyGenericModal>
</GenericModal>
`;
exports[`components/drafts/draft_actions/send_draft_modal should match snapshot 1`] = `

2
webapp/channels/src/components/drafts/draft_actions/delete_draft_modal.test.tsx
Просмотреть файл

@@ -5,7 +5,7 @@ import React from 'react';
import {shallow} from 'enzyme';
import {Provider} from 'react-redux';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import mockStore from 'tests/test_store';

2
webapp/channels/src/components/drafts/draft_actions/delete_draft_modal.tsx
Просмотреть файл

@@ -4,7 +4,7 @@
import React from 'react';
import {FormattedMessage, useIntl} from 'react-intl';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
type Props = {
displayName: string;

2
webapp/channels/src/components/drafts/draft_actions/send_draft_modal.test.tsx
Просмотреть файл

@@ -5,7 +5,7 @@ import React from 'react';
import {shallow} from 'enzyme';
import {Provider} from 'react-redux';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import mockStore from 'tests/test_store';

2
webapp/channels/src/components/drafts/draft_actions/send_draft_modal.tsx
Просмотреть файл

@@ -4,7 +4,7 @@
import React from 'react';
import {FormattedMessage, useIntl} from 'react-intl';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
type Props = {
displayName: string;

2
webapp/channels/src/components/edit_category_modal/edit_category_modal.tsx
Просмотреть файл

@@ -9,7 +9,7 @@ import {ChannelCategory} from '@mattermost/types/channel_categories';
import {trackEvent} from 'actions/telemetry_actions';
import QuickInput, {MaxLengthInput} from 'components/quick_input';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {localizeMessage} from 'utils/utils';

2
webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.tsx
Просмотреть файл

@@ -17,7 +17,7 @@ import {deprecateCloudFree} from 'mattermost-redux/selectors/entities/preference
import CloudStartTrialButton from 'components/cloud_start_trial/cloud_start_trial_btn';
import StartTrialBtn from 'components/learn_more_trial_modal/start_trial_btn';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {NotifyStatus} from 'components/common/hooks/useGetNotifyAdmin';
import {useNotifyAdmin} from 'components/notify_admin_cta/notify_admin_cta';

6
webapp/channels/src/components/feedback_modal/feedback.tsx
Просмотреть файл

@@ -6,7 +6,7 @@ import React, {useState} from 'react';
import {injectIntl, WrappedComponentProps} from 'react-intl';
import {useDispatch} from 'react-redux';
import {LegacyGenericModal} from '@mattermost/components';
import {GenericModal} from '@mattermost/components';
import {Feedback} from '@mattermost/types/cloud';
import {closeModal} from 'actions/views/modals';
import RadioButtonGroup from 'components/common/radio_group';
@@ -59,7 +59,7 @@ function FeedbackModal(props: Props) {
};
return (
<LegacyGenericModal
<GenericModal
compassDesign={true}
onExited={handleCancel}
className='FeedbackModal__Container'
@@ -102,7 +102,7 @@ function FeedbackModal(props: Props) {
</span>
</>
}
</LegacyGenericModal>
</GenericModal>
);
}

2
webapp/channels/src/components/forward_post_modal/forward_post_modal.tsx
Просмотреть файл

@@ -26,7 +26,7 @@ import {General, Permissions} from 'mattermost-redux/constants';
import Constants from 'utils/constants';
import PostMessagePreview from 'components/post_view/post_message_preview';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {PostPreviewMetadata} from '@mattermost/types/posts';
import {getSiteURL} from '../../utils/url';

89
webapp/channels/src/components/generic_modal.test.tsx
Просмотреть файл

@@ -1,89 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {shallow} from 'enzyme';
import GenericModal from 'components/generic_modal';
import {mountWithIntl} from 'tests/helpers/intl-test-helper';
describe('components/GenericModal', () => {
const requiredProps = {
onExited: jest.fn(),
modalHeaderText: 'Modal Header Text',
children: <></>,
};
test('should match snapshot for base case', () => {
const wrapper = shallow(
<GenericModal {...requiredProps}/>,
);
expect(wrapper).toMatchSnapshot();
});
test('should match snapshot with both buttons', () => {
const props = {
...requiredProps,
handleConfirm: jest.fn(),
handleCancel: jest.fn(),
};
const wrapper = shallow(
<GenericModal {...props}/>,
);
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.GenericModal__button.confirm')).toHaveLength(1);
expect(wrapper.find('.GenericModal__button.cancel')).toHaveLength(1);
});
test('should match snapshot with disabled confirm button', () => {
const props = {
...requiredProps,
handleConfirm: jest.fn(),
isConfirmDisabled: true,
};
const wrapper = shallow(
<GenericModal {...props}/>,
);
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.GenericModal__button.confirm.disabled')).toHaveLength(1);
});
test('should hide and run handleConfirm on confirm button click', (done) => {
requiredProps.onExited.mockImplementation(() => done());
const props = {
...requiredProps,
handleConfirm: jest.fn(),
};
const wrapper = mountWithIntl(
<GenericModal {...props}/>,
);
wrapper.find('.GenericModal__button.confirm').simulate('click');
expect(props.handleConfirm).toHaveBeenCalled();
});
test('should hide and run handleCancel on cancel button click', (done) => {
requiredProps.onExited.mockImplementation(() => done());
const props = {
...requiredProps,
handleCancel: jest.fn(),
};
const wrapper = mountWithIntl(
<GenericModal {...props}/>,
);
wrapper.find('.GenericModal__button.cancel').simulate('click');
expect(props.handleCancel).toHaveBeenCalled();
});
});

18
webapp/channels/src/components/generic_modal.tsx
Просмотреть файл

@@ -1,18 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {LegacyGenericModal} from '@mattermost/components';
import {t} from 'utils/i18n';
import './generic_modal.scss';
// TODO MM-51399 These strings are properly defined in @mattermost/components, but the i18n tooling currently can't
// find them there, so we've had to redefine them here
t('generic_modal.cancel');
t('generic_modal.confirm');
t('footer_pagination.count');
t('footer_pagination.prev');
t('footer_pagination.next');
export default LegacyGenericModal;

2
webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.test.tsx
Просмотреть файл

@@ -9,7 +9,7 @@ import {shallow} from 'enzyme';
import Carousel from 'components/common/carousel/carousel';
import LearnMoreTrialModal from 'components/learn_more_trial_modal/learn_more_trial_modal';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {mountWithIntl} from 'tests/helpers/intl-test-helper';
import mockStore from 'tests/test_store';

2
webapp/channels/src/components/learn_more_trial_modal/learn_more_trial_modal.tsx
Просмотреть файл

@@ -10,7 +10,7 @@ import {trackEvent} from 'actions/telemetry_actions';
import {ConsolePages, ModalIdentifiers, TELEMETRY_CATEGORIES} from 'utils/constants';
import Carousel from 'components/common/carousel/carousel';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import GuestAccessSvg from 'components/common/svg_images_components/guest_access_svg';
import MonitorImacLikeSVG from 'components/common/svg_images_components/monitor_imaclike_svg';
import SystemRolesSVG from 'components/admin_console/feature_discovery/features/images/system_roles_svg';

2
webapp/channels/src/components/menu/menu.tsx
Просмотреть файл

@@ -25,7 +25,7 @@ import {isKeyPressed} from 'utils/keyboard';
import CompassDesignProvider from 'components/compass_design_provider';
import Tooltip from 'components/tooltip';
import OverlayTrigger from 'components/overlay_trigger';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {MuiMenuStyled} from './menu_styled';

2
webapp/channels/src/components/menu/sub_menu.tsx
Просмотреть файл

@@ -17,7 +17,7 @@ import Constants, {A11yClassNames} from 'utils/constants';
import {isKeyPressed} from 'utils/keyboard';
import CompassDesignProvider from 'components/compass_design_provider';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {MuiMenuStyled} from './menu_styled';
import {MenuItem as ParentMenuItem, Props as MenuItemProps} from './menu_item';

2
webapp/channels/src/components/new_channel_modal/new_channel_modal.tsx
Просмотреть файл

@@ -10,7 +10,7 @@ import classNames from 'classnames';
import crypto from 'crypto';
import OverlayTrigger from 'components/overlay_trigger';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import Input from 'components/widgets/inputs/input/input';
import PublicPrivateSelector from 'components/widgets/public-private-selector/public-private-selector';
import URLInput from 'components/widgets/inputs/url_input/url_input';

2
webapp/channels/src/components/persist_notification_confirm_modal.tsx
Просмотреть файл

@@ -11,7 +11,7 @@ import {GlobalState} from 'types/store';
import {makeGetUserOrGroupMentionCountFromMessage} from 'utils/post_utils';
import Constants from 'utils/constants';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {UserProfile} from '@mattermost/types/users';
import {Channel} from '@mattermost/types/channels';

3
webapp/channels/src/components/plugin_marketplace/marketplace_modal.tsx
Просмотреть файл

@@ -10,7 +10,7 @@ import debounce from 'lodash/debounce';
import {MagnifyIcon} from '@mattermost/compass-icons/components';
import {FooterPagination} from '@mattermost/components';
import {FooterPagination, GenericModal} from '@mattermost/components';
import {getPluginStatuses} from 'mattermost-redux/actions/admin';
import {setFirstAdminVisitMarketplaceStatus} from 'mattermost-redux/actions/general';
import {getFirstAdminVisitMarketplaceStatus} from 'mattermost-redux/selectors/entities/general';
@@ -20,7 +20,6 @@ import {fetchListing, filterListing} from 'actions/marketplace';
import {trackEvent} from 'actions/telemetry_actions.jsx';
import {closeModal} from 'actions/views/modals';
import GenericModal from 'components/generic_modal';
import LoadingScreen from 'components/loading_screen';
import Input, {SIZE} from 'components/widgets/inputs/input/input';

2
webapp/channels/src/components/post_edit_history/restore_post_modal.tsx
Просмотреть файл

@@ -6,7 +6,7 @@ import {defineMessages, useIntl} from 'react-intl';
import {Post} from '@mattermost/types/posts';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import PostMessageView from 'components/post_view/post_message_view';
const modalMessages = defineMessages({

2
webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.tsx
Просмотреть файл

@@ -5,7 +5,7 @@ import React, {useCallback, useEffect, useState} from 'react';
import {FormattedMessage} from 'react-intl';
import {Moment} from 'moment-timezone';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {isKeyPressed} from 'utils/keyboard';
import {localizeMessage} from 'utils/utils';
import DateTimeInput, {getRoundedTime} from 'components/custom_status/date_time_input';

2
webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {Reaction as ReactionType} from '@mattermost/types/reactions';

12
webapp/channels/src/components/product_notices_modal/__snapshots__/product_notices.test.tsx.snap
Просмотреть файл

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ProductNoticesModal Match snapshot for single notice 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={false}
autoCloseOnConfirmButton={true}
bodyPadding={true}
@@ -38,11 +38,11 @@ exports[`ProductNoticesModal Match snapshot for single notice 1`] = `
<div
className="productNotices__info"
/>
</LegacyGenericModal>
</GenericModal>
`;
exports[`ProductNoticesModal Match snapshot for user notice 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={false}
autoCloseOnConfirmButton={true}
bodyPadding={true}
@@ -117,11 +117,11 @@ exports[`ProductNoticesModal Match snapshot for user notice 1`] = `
/>
</span>
</div>
</LegacyGenericModal>
</GenericModal>
`;
exports[`ProductNoticesModal Should match snapshot for system admin notice 1`] = `
<LegacyGenericModal
<GenericModal
autoCloseOnCancelButton={false}
autoCloseOnConfirmButton={false}
bodyPadding={true}
@@ -200,7 +200,7 @@ exports[`ProductNoticesModal Should match snapshot for system admin notice 1`] =
id="inProduct_notices.adminOnlyMessage"
/>
</div>
</LegacyGenericModal>
</GenericModal>
`;
exports[`ProductNoticesModal Should match snapshot when there are no notices 1`] = `""`;

2
webapp/channels/src/components/product_notices_modal/product_notices.test.tsx
Просмотреть файл

@@ -4,7 +4,7 @@
import React from 'react';
import {shallow} from 'enzyme';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {isDesktopApp, getDesktopVersion} from 'utils/user_agent';
import ProductNoticesModal from './product_notices_modal';

2
webapp/channels/src/components/product_notices_modal/product_notices_modal.tsx
Просмотреть файл

@@ -10,7 +10,7 @@ import {trackEvent} from 'actions/telemetry_actions.jsx';
import ExternalLink from 'components/external_link';
import Markdown from 'components/markdown';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import NextIcon from 'components/widgets/icons/fa_next_icon';
import PreviousIcon from 'components/widgets/icons/fa_previous_icon';
import AdminEyeIcon from 'components/widgets/icons/admin_eye_icon';

8
webapp/channels/src/components/purchase_in_progress_modal/index.tsx
Просмотреть файл

@@ -5,7 +5,7 @@ import React from 'react';
import {useSelector} from 'react-redux';
import {FormattedMessage} from 'react-intl';
import {LegacyGenericModal, LegacyGenericModalProps} from '@mattermost/components';
import {GenericModal, GenericModalProps} from '@mattermost/components';
import {getCurrentUser} from 'mattermost-redux/selectors/entities/common';
import {getUserByEmail} from 'mattermost-redux/selectors/entities/users';
@@ -48,7 +48,7 @@ export default function PurchaseInProgressModal(props: Props) {
/>
);
let actionToTake;
const genericModalProps: Partial<LegacyGenericModalProps> = {};
const genericModalProps: Partial<GenericModalProps> = {};
if (sameUserAlreadyPurchasing) {
description = (
<FormattedMessage
@@ -76,7 +76,7 @@ export default function PurchaseInProgressModal(props: Props) {
);
}
return (
<LegacyGenericModal
<GenericModal
onExited={close}
show={true}
modalHeaderText={header}
@@ -98,6 +98,6 @@ export default function PurchaseInProgressModal(props: Props) {
</div>
}
</div>
</LegacyGenericModal>
</GenericModal>
);
}

2
webapp/channels/src/components/root/root_provider.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
import WebSocketClient from 'client/web_websocket_client';

6
webapp/channels/src/components/screening_in_progress_modal/index.tsx
Просмотреть файл

@@ -4,7 +4,7 @@
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {LegacyGenericModal} from '@mattermost/components';
import {GenericModal} from '@mattermost/components';
import AccessDeniedHappySvg from 'components/common/svg_images_components/access_denied_happy_svg';
import {useControlScreeningInProgressModal} from 'components/common/hooks/useControlModal';
@@ -14,7 +14,7 @@ export default function ScreeningInProgressModal() {
const {close} = useControlScreeningInProgressModal();
return (
<LegacyGenericModal
<GenericModal
onExited={close}
show={true}
className='ScreeningInProgressModal'
@@ -49,6 +49,6 @@ export default function ScreeningInProgressModal() {
/>
</div>
</div>
</LegacyGenericModal>
</GenericModal>
);
}

2
webapp/channels/src/components/switch_to_yearly_plan_confirm_modal/index.tsx
Просмотреть файл

@@ -11,7 +11,7 @@ import {GlobalState} from 'types/store';
import {isModalOpen} from 'selectors/views/modals';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import Svg from 'components/common/svg_images_components/woman_credit_card_and_laptop_svg';
import {ModalIdentifiers, TELEMETRY_CATEGORIES} from 'utils/constants';

8
webapp/channels/src/components/threading/global_threads/mark_all_threads_as_read_modal/mark_all_threads_as_read_modal.tsx
Просмотреть файл

@@ -1,10 +1,10 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
import {useIntl} from 'react-intl';
import {LegacyGenericModal} from '@mattermost/components';
import {GenericModal} from '@mattermost/components';
import './mark_all_threads_as_read_modal.scss';
@@ -20,7 +20,7 @@ function MarkAllThreadsAsReadModal({
const {formatMessage} = useIntl();
return (
<LegacyGenericModal
<GenericModal
className='mark-all-threads-as-read'
id='mark-all-threads-as-read-modal'
compassDesign={true}
@@ -48,7 +48,7 @@ function MarkAllThreadsAsReadModal({
})}
</span>
</div>
</LegacyGenericModal>
</GenericModal>
);
}

2
webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.test.tsx
Просмотреть файл

@@ -8,7 +8,7 @@ import {Provider} from 'react-redux';
import {shallow} from 'enzyme';
import ThreeDaysLeftTrialModal from 'components/three_days_left_trial_modal/three_days_left_trial_modal';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {mountWithIntl} from 'tests/helpers/intl-test-helper';
import mockStore from 'tests/test_store';

2
webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.tsx
Просмотреть файл

@@ -14,7 +14,7 @@ import {DispatchFunc} from 'mattermost-redux/types/actions';
import {ConsolePages, DocLinks, ModalIdentifiers} from 'utils/constants';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import GuestAccessSvg from 'components/common/svg_images_components/guest_access_svg';
import MonitorImacLikeSVG from 'components/common/svg_images_components/monitor_imaclike_svg';
import SystemRolesSVG from 'components/admin_console/feature_discovery/features/images/system_roles_svg';

2
webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal/collapsed_reply_threads_modal.tsx
Просмотреть файл

@@ -9,7 +9,7 @@ import crtInProductImg from 'images/crt-in-product.gif';
import {savePreferences} from 'mattermost-redux/actions/preferences';
import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
import {closeModal} from 'actions/views/modals';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import NextIcon from 'components/widgets/icons/fa_next_icon';
import FormattedMarkdownMessage from 'components/formatted_markdown_message';
import {Constants, ModalIdentifiers, Preferences} from 'utils/constants';

2
webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.test.tsx
Просмотреть файл

@@ -11,7 +11,7 @@ import {trackEvent} from 'actions/telemetry_actions.jsx';
import Carousel from 'components/common/carousel/carousel';
import TrialBenefitsModal from 'components/trial_benefits_modal/trial_benefits_modal';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import {mountWithIntl} from 'tests/helpers/intl-test-helper';
import mockStore from 'tests/test_store';

2
webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.tsx
Просмотреть файл

@@ -19,7 +19,7 @@ import {isModalOpen} from 'selectors/views/modals';
import {GlobalState} from 'types/store';
import Carousel from 'components/common/carousel/carousel';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
import HandsSvg from 'components/common/svg_images_components/hands_svg';
import GuestAccessSvg from 'components/common/svg_images_components/guest_access_svg';
import MonitorImacLikeSVG from 'components/common/svg_images_components/monitor_imaclike_svg';

2
webapp/channels/src/components/work_templates/components/modal.tsx
Просмотреть файл

@@ -3,7 +3,7 @@
import styled from 'styled-components';
import GenericModal from 'components/generic_modal';
import {GenericModal} from '@mattermost/components';
const Modal = styled(GenericModal)`
width: 960px;

20
webapp/package-lock.json сгенерированный
Просмотреть файл

@@ -3390,7 +3390,6 @@
"@mui/base": "5.0.0-alpha.127",
"@mui/material": "5.11.16",
"@mui/styled-engine-sc": "5.11.11",
"@mui/system": "5.11.16",
"@stripe/react-stripe-js": "1.13.0",
"@stripe/stripe-js": "1.41.0",
"@tippyjs/react": "4.2.6",
@@ -33254,9 +33253,6 @@
"platform/components": {
"name": "@mattermost/components",
"version": "8.0.0",
"dependencies": {
"color-blend": "4.0.0"
},
"devDependencies": {
"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.7",
@@ -33296,7 +33292,6 @@
"@mui/base": "5.0.0-alpha.127",
"@mui/material": "5.11.16",
"@mui/styled-engine-sc": "5.11.11",
"@mui/system": "5.11.16",
"@tippyjs/react": "^4.2.6",
"classnames": "^2.3.1",
"lodash": "^4.17.21",
@@ -33636,14 +33631,6 @@
"styled-components": ">= 2"
}
},
"platform/components/node_modules/color-blend": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/color-blend/-/color-blend-4.0.0.tgz",
"integrity": "sha512-fYODTHhI/NG+B5GnzvuL3kiFrK/UnkUezWFTgEPBTY5V+kpyfAn95Vn9sJeeCX6omrCOdxnqCL3CvH+6sXtIbw==",
"engines": {
"node": ">=10.0.0"
}
},
"platform/components/node_modules/css-loader": {
"version": "6.7.3",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
@@ -39303,7 +39290,6 @@
"babel-loader": "^8.2.3",
"babel-plugin-formatjs": "10.3.14",
"babel-plugin-styled-components": "^2.0.6",
"color-blend": "4.0.0",
"css-loader": "^6.7.1",
"rollup": "^2.75.7",
"rollup-plugin-auto-external": "^2.0.0",
@@ -39570,11 +39556,6 @@
"picomatch": "^2.3.0"
}
},
"color-blend": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/color-blend/-/color-blend-4.0.0.tgz",
"integrity": "sha512-fYODTHhI/NG+B5GnzvuL3kiFrK/UnkUezWFTgEPBTY5V+kpyfAn95Vn9sJeeCX6omrCOdxnqCL3CvH+6sXtIbw=="
},
"css-loader": {
"version": "6.7.3",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
@@ -53252,7 +53233,6 @@
"@mui/base": "5.0.0-alpha.127",
"@mui/material": "5.11.16",
"@mui/styled-engine-sc": "5.11.11",
"@mui/system": "5.11.16",
"@redux-devtools/extension": "3.2.3",
"@stripe/react-stripe-js": "1.13.0",
"@stripe/stripe-js": "1.41.0",

4
webapp/platform/components/package.json
Просмотреть файл

@@ -50,7 +50,6 @@
"@mui/base": "5.0.0-alpha.127",
"@mui/material": "5.11.16",
"@mui/styled-engine-sc": "5.11.11",
"@mui/system": "5.11.16",
"@tippyjs/react": "^4.2.6",
"classnames": "^2.3.1",
"lodash": "^4.17.21",
@@ -61,8 +60,5 @@
"shallow-equals": "^1.0.0",
"styled-components": "^5.3.5",
"tippy.js": "^6.3.7"
},
"dependencies": {
"color-blend": "4.0.0"
}
}

139
webapp/platform/components/src/common/constants/theme.ts
Просмотреть файл

@@ -1,139 +0,0 @@
import {Theme, ThemeKey} from '@mattermost/types/theme';
export const THEMES: Record<ThemeKey, Theme> = {
denim: {
type: 'Denim',
sidebarBg: '#1e325c',
sidebarText: '#ffffff',
sidebarUnreadText: '#ffffff',
sidebarTextHoverBg: '#28427b',
sidebarTextActiveBorder: '#5d89ea',
sidebarTextActiveColor: '#ffffff',
sidebarHeaderBg: '#192a4d',
sidebarHeaderTextColor: '#ffffff',
sidebarTeamBarBg: '#14213e',
onlineIndicator: '#3db887',
awayIndicator: '#ffbc1f',
dndIndicator: '#d24b4e',
mentionBg: '#ffffff',
mentionColor: '#1e325c',
centerChannelBg: '#ffffff',
centerChannelColor: '#3f4350',
newMessageSeparator: '#cc8f00',
linkColor: '#386fe5',
buttonBg: '#1c58d9',
buttonColor: '#ffffff',
errorTextColor: '#d24b4e',
mentionHighlightBg: '#ffd470',
mentionHighlightLink: '#1b1d22',
codeTheme: 'github',
},
sapphire: {
type: 'Sapphire',
sidebarBg: '#174ab5',
sidebarText: '#ffffff',
sidebarUnreadText: '#ffffff',
sidebarTextHoverBg: '#2a58ba',
sidebarTextActiveBorder: '#57b5f0',
sidebarTextActiveColor: '#ffffff',
sidebarHeaderBg: '#1542a2',
sidebarHeaderTextColor: '#ffffff',
sidebarTeamBarBg: '#133a91',
onlineIndicator: '#3db887',
awayIndicator: '#ffbc1f',
dndIndicator: '#d24b4e',
mentionBg: '#ffffff',
mentionColor: '#174ab5',
centerChannelBg: '#ffffff',
centerChannelColor: '#3f4350',
newMessageSeparator: '#15b7b7',
linkColor: '#1c58d9',
buttonBg: '#1c58d9',
buttonColor: '#ffffff',
errorTextColor: '#d24b4e',
mentionHighlightBg: '#7ff0f0',
mentionHighlightLink: '#0d6e6e',
codeTheme: 'github',
},
quartz: {
type: 'Quartz',
sidebarBg: '#f4f4f6',
sidebarText: '#090a0b',
sidebarUnreadText: '#2d3039',
sidebarTextHoverBg: '#ebebed',
sidebarTextActiveBorder: '#32a4ec',
sidebarTextActiveColor: '#2d3039',
sidebarHeaderBg: '#e8e9ed',
sidebarHeaderTextColor: '#2d3039',
sidebarTeamBarBg: '#dddfe4',
onlineIndicator: '#3db887',
awayIndicator: '#f5ab07',
dndIndicator: '#d24b4e',
mentionBg: '#1c58d9',
mentionColor: '#ffffff',
centerChannelBg: '#ffffff',
centerChannelColor: '#3f4350',
newMessageSeparator: '#15b7b7',
linkColor: '#1c58d9',
buttonBg: '#1c58d9',
buttonColor: '#ffffff',
errorTextColor: '#d24b4e',
mentionHighlightBg: '#7ff0f0',
mentionHighlightLink: '#0d6e6e',
codeTheme: 'github',
},
indigo: {
type: 'Indigo',
sidebarBg: '#0f1a2e',
sidebarText: '#ffffff',
sidebarUnreadText: '#ffffff',
sidebarTextHoverBg: '#222c3f',
sidebarTextActiveBorder: '#1279ba',
sidebarTextActiveColor: '#ffffff',
sidebarHeaderBg: '#152231',
sidebarHeaderTextColor: '#dddfe4',
sidebarTeamBarBg: '#05080f',
onlineIndicator: '#3db887',
awayIndicator: '#f5ab00',
dndIndicator: '#d24b4e',
mentionBg: '#1c58d9',
mentionColor: '#ffffff',
centerChannelBg: '#0a111f',
centerChannelColor: '#dddfe4',
newMessageSeparator: '#81a3ef',
linkColor: '#5d89ea',
buttonBg: '#386fe5',
buttonColor: '#ffffff',
errorTextColor: '#d24b4e',
mentionHighlightBg: '#133a91',
mentionHighlightLink: '#a4f4f4',
codeTheme: 'solarized-dark',
},
onyx: {
type: 'Onyx',
sidebarBg: '#121317',
sidebarText: '#ffffff',
sidebarUnreadText: '#ffffff',
sidebarTextHoverBg: '#25262a',
sidebarTextActiveBorder: '#1592e0',
sidebarTextActiveColor: '#ffffff',
sidebarHeaderBg: '#1b1d22',
sidebarHeaderTextColor: '#dddfe4',
sidebarTeamBarBg: '#000000',
onlineIndicator: '#3db887',
awayIndicator: '#f5ab00',
dndIndicator: '#d24b4e',
mentionBg: '#1c58d9',
mentionColor: '#ffffff',
centerChannelBg: '#090a0b',
centerChannelColor: '#dddfe4',
newMessageSeparator: '#1adbdb',
linkColor: '#5d89ea',
buttonBg: '#386fe5',
buttonColor: '#ffffff',
errorTextColor: '#da6c6e',
mentionHighlightBg: '#0d6e6e',
mentionHighlightLink: '#a4f4f4',
codeTheme: 'monokai',
},
};

4
webapp/platform/components/src/common/hooks/useMeasurePunchouts.ts
Просмотреть файл

@@ -11,7 +11,7 @@ export type Coords = {
y?: string;
}
export type PunchOutCoordsHeightAndWidth = Coords & {
export type Props = Coords & {
width: string;
height: string;
}
@@ -23,7 +23,7 @@ type PunchOutOffset = {
height: number;
}
export const useMeasurePunchouts = (elementIds: string[], additionalDeps: any[], offset?: PunchOutOffset): PunchOutCoordsHeightAndWidth | null => {
export const useMeasurePunchouts = (elementIds: string[], additionalDeps: any[], offset?: PunchOutOffset): Props | null => {
const elementsAvailable = useElementAvailable(elementIds);
const [size, setSize] = useState({x: window.innerWidth, y: window.innerHeight});
const updateSize = throttle(() => {

59
webapp/platform/components/src/compass/components/base_modal/base_modal.tsx
Просмотреть файл

@@ -1,59 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {memo} from 'react';
import {styled} from '@mui/material/styles';
import Dialog from '@mui/material/Dialog';
import MUIPaper, {PaperProps} from '@mui/material/Paper';
import Slide from '@mui/material/Slide';
import {TransitionProps} from '@mui/material/transitions';
const Transition = React.forwardRef((
{children, ...props}: TransitionProps & {
children: React.ReactElement<any, any>;
},
ref: React.Ref<unknown>,
) => {
return (
<Slide
direction='up'
ref={ref}
{...props}
>
{children}
</Slide>
);
});
const Paper = styled(MUIPaper)<PaperProps>(() => ({
border: '1px solid rgba(var(--center-channel-color-rgb), 0.16)',
borderRadius: 12,
backgroundColor: 'var(--center-channel-bg)',
boxShadow: '0 20px 32px 0 rgba(0, 0, 0, 0.12)',
minWidth: 600,
}));
type ModalProps = {
children: React.ReactNode | React.ReactNodeArray;
isOpen: boolean;
dialogClassName?: string;
dialogId?: string;
onClose?: () => void;
}
const BaseModal = ({children, isOpen, onClose, dialogClassName = '', dialogId = ''}: ModalProps) => (
<Dialog
open={isOpen}
TransitionComponent={Transition}
PaperComponent={Paper}
keepMounted={true}
onClose={onClose}
aria-describedby='alert-dialog-slide-description'
role='dialog'
className={dialogClassName}
id={dialogId}
>{children}
</Dialog>
);
export default BaseModal;

71
webapp/platform/components/src/compass/components/base_modal/modal_title.tsx
Просмотреть файл

@@ -1,71 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {styled} from '@mui/material/styles';
import MUIDialogTitle, {DialogTitleProps as MUIDialogTitleProps} from '@mui/material/DialogTitle';
import {CloseIcon} from '@mattermost/compass-icons/components';
import Icon_button from '../icon_button/icon_button';
type DialogTitleProps = MUIDialogTitleProps & { hasCloseButton: boolean };
const StyledModalTitle = styled(MUIDialogTitle, {
shouldForwardProp: (prop) => prop !== 'hasCloseButton',
})<DialogTitleProps>(({hasCloseButton}) => ({
display: 'grid',
gridTemplateColumns: '1fr max-content max-content',
gap: 12,
fontFamily: 'Metropolis',
fontStyle: 'normal',
fontWeight: 600,
fontSize: 22,
lineHeight: '28px',
color: 'var(--center-channel-color)',
alignItems: 'center',
padding: hasCloseButton ? '22px 26px 24px 32px' : '28px 32px 24px',
}));
const StyledModalTitleSection = styled('div')(() => ({
padding: '0 32px 24px 32px',
borderBottom: '1px solid rgba(var(--center-channel-text-rgb), 0.12)',
}));
type ModalTitleProps = {
title: string;
rightSection?: React.ReactNode | React.ReactNode[];
children?: React.ReactNode | React.ReactNode[];
onClose?: React.MouseEventHandler;
}
const ModalTitle = ({title, onClose, children, rightSection = null}: ModalTitleProps) => {
const hasCloseButton = Boolean(onClose);
return (
<>
<StyledModalTitle
hasCloseButton={hasCloseButton}
component={'div'}
>
{title}
{rightSection}
{hasCloseButton && (
<Icon_button
compact={true}
type='button'
onClick={onClose}
IconComponent={CloseIcon}
/>
)}
</StyledModalTitle>
{children && (
<StyledModalTitleSection>
{children}
</StyledModalTitleSection>
)}
</>
);
};
export default ModalTitle;

173
webapp/platform/components/src/compass/components/button/button.overrides.ts
Просмотреть файл

@@ -1,173 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {alpha, ComponentsProps, ComponentsVariants, emphasize, Theme} from '@mui/material';
import {ComponentsOverrides} from '@mui/material/styles/overrides';
import {blend} from '../../utils/color';
const componentName = 'MuiButton';
declare module '@mui/material/Button' {
interface ButtonPropsSizeOverrides {
'x-small': true;
}
interface ButtonPropsVariantOverrides {
quaternary: true;
}
}
const defaultProps: ComponentsProps[typeof componentName] = {
disableElevation: true,
disableRipple: true,
disableTouchRipple: true,
disableFocusRipple: true,
};
const getFocusStyles = (color: string) => ({
'&:not(.Mui-disabled)': {
'&:focus': {
boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
},
'&:focus:not(:focus-visible)': {
boxShadow: 'none',
},
'&:focus:focus-visible': {
boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
},
},
});
const styleOverrides: ComponentsOverrides<Theme>[typeof componentName] = {
containedPrimary: ({theme, ownerState}) => ({
backgroundColor: ownerState.inverted ? theme.palette.text.primary : theme.palette.primary.main,
color: ownerState.inverted ? theme.palette.primary.main : theme.palette.primary.contrastText,
'&:hover': {
backgroundColor: ownerState.inverted ? blend(theme.palette.text.primary, alpha(theme.palette.primary.main, 0.08)) : emphasize(theme.palette.primary.main, 0.1),
},
'&:active': {
backgroundColor: ownerState.inverted ? blend(theme.palette.text.primary, alpha(theme.palette.primary.main, 0.16)) : emphasize(theme.palette.primary.main, 0.2),
},
...getFocusStyles(theme.palette.primary.main),
}),
containedError: ({theme}) => ({
'&:hover': {
backgroundColor: emphasize(theme.palette.error.dark, 0.1),
},
'&:active': {
backgroundColor: emphasize(theme.palette.error.dark, 0.2),
},
...getFocusStyles(theme.palette.error.main),
}),
outlinedPrimary: ({theme}) => ({
backgroundColor: alpha(theme.palette.primary.main, 0),
'&:hover': {
backgroundColor: alpha(theme.palette.primary.main, 0.08),
},
'&:active': {
backgroundColor: alpha(theme.palette.primary.main, 0.16),
},
...getFocusStyles(theme.palette.primary.main),
}),
outlinedError: ({theme}) => ({
backgroundColor: alpha(theme.palette.error.main, 0),
'&:hover': {
backgroundColor: alpha(theme.palette.error.main, 0.08),
},
'&:active': {
backgroundColor: alpha(theme.palette.error.main, 0.16),
},
...getFocusStyles(theme.palette.error.main),
}),
textPrimary: ({theme}) => ({
backgroundColor: alpha(theme.palette.primary.main, 0.08),
'&:hover': {
backgroundColor: alpha(theme.palette.primary.main, 0.12),
},
'&:active': {
backgroundColor: alpha(theme.palette.primary.main, 0.16),
},
...getFocusStyles(theme.palette.primary.main),
}),
textError: ({theme, ownerState}) => ({
backgroundColor: ownerState.disabled ? theme.palette.action.disabledBackground : alpha(theme.palette.error.main, 0.12),
'&:hover': {
backgroundColor: alpha(theme.palette.error.main, 0.12),
},
'&:active': {
backgroundColor: alpha(theme.palette.error.main, 0.16),
},
...getFocusStyles(theme.palette.error.main),
}),
};
const variants: ComponentsVariants[typeof componentName] = [
{
props: {size: 'x-small'},
style: ({theme}) => ({
padding: '0.4rem 1rem',
...theme.typography.b50,
margin: 0,
textTransform: 'none',
}),
},
{
props: {size: 'small'},
style: ({theme}) => ({
padding: '0.8rem 1.6rem',
...theme.typography.b75,
margin: 0,
textTransform: 'none',
}),
},
{
props: {size: 'medium'},
style: ({theme}) => ({
padding: '1rem 2rem',
...theme.typography.b100,
margin: 0,
textTransform: 'none',
}),
},
{
props: {size: 'large'},
style: ({theme}) => ({
padding: '1.2rem 2.4rem',
...theme.typography.b200,
margin: 0,
textTransform: 'none',
}),
},
{
props: {variant: 'quaternary'},
style: () => ({
backgroundColor: 'red',
}),
},
];
const buttonOverrides = {
variants,
defaultProps,
styleOverrides,
};
export default buttonOverrides;

39
webapp/platform/components/src/compass/components/button/button.tsx
Просмотреть файл

@@ -1,39 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import MuiButton, {ButtonProps as MuiButtonProps} from '@mui/material/Button';
type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
const variantMap: Record<ButtonVariant, Exclude<MuiButtonProps['variant'], undefined>> = {
primary: 'contained',
secondary: 'outlined',
tertiary: 'text',
};
type ExcludedMuiProps =
| 'sx'
| 'classes'
| 'variant'
| 'disableElevation'
| 'disableRipple'
| 'disableFocusRipple';
export type ButtonProps = Omit<MuiButtonProps, ExcludedMuiProps> & {
destructive?: boolean;
disabled?: boolean;
inverted?: boolean;
variant?: ButtonVariant;
children: React.ReactNode | React.ReactNode[];
}
export const Button = ({variant = 'primary', destructive, ...rest}: ButtonProps) => (
<MuiButton
{...rest}
color={destructive ? 'error' : 'primary'}
variant={variantMap[variant]}
/>
);
export default Button;

80
webapp/platform/components/src/compass/components/generic_modal/generic_modal.tsx
Просмотреть файл

@@ -1,80 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {memo} from 'react';
import {styled} from '@mui/material/styles';
import Button from '@mui/material/Button';
import MUIPaper, {PaperProps} from '@mui/material/Paper';
import DialogActions from '@mui/material/DialogActions';
import Slide from '@mui/material/Slide';
import {TransitionProps} from '@mui/material/transitions';
import BaseModal from "../base_modal/base_modal";
const Transition = React.forwardRef((
{children, ...props}: TransitionProps & {
children: React.ReactElement<any, any>;
},
ref: React.Ref<unknown>,
) => {
return (
<Slide
direction='up'
ref={ref}
{...props}
>
{children}
</Slide>
);
});
const Paper = styled(MUIPaper)<PaperProps>(() => ({
border: '1px solid rgba(var(--center-channel-color-rgb), 0.16)',
borderRadius: 12,
backgroundColor: 'var(--center-channel-bg)',
boxShadow: '0 20px 32px 0 rgba(0, 0, 0, 0.12)',
minWidth: 600,
}));
type ModalProps = {
children: React.ReactNode | React.ReactNodeArray;
isOpen: boolean;
dialogClassName?: string;
dialogId?: string;
onClose?: () => void;
onConfirm?: () => void;
onCancel?: () => void;
}
const GenericModal = ({children, isOpen, onClose, onConfirm, onCancel, dialogClassName = '', dialogId = ''}: ModalProps) => {
const hasActions = Boolean(onConfirm || onCancel);
const handleConfirmAction = () => {
onConfirm?.();
onClose?.();
};
const handleCancelAction = () => {
onCancel?.();
onClose?.();
};
return (
<BaseModal
isOpen={isOpen}
onClose={onClose}
aria-describedby='alert-dialog-slide-description'
dialogClassName={dialogClassName}
dialogId={dialogId}
>
{children}
{hasActions && (
<DialogActions>
{onCancel && <Button onClick={handleCancelAction}>{'Cancel'}</Button>}
{onConfirm && <Button onClick={handleConfirmAction}>{'Confirm'}</Button>}
</DialogActions>
)}
</BaseModal>
);
};
export default memo(GenericModal);

206
webapp/platform/components/src/compass/components/icon_button/icon_button.overrides.ts
Просмотреть файл

@@ -1,206 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {alpha, ComponentsProps, emphasize, Theme} from '@mui/material';
import type {ComponentsVariants} from '@mui/material';
import type {ComponentsOverrides} from '@mui/material/styles/overrides';
const componentName = 'MuiIconButton';
declare module '@mui/material/IconButton' {
interface IconButtonPropsSizeOverrides {
'x-small': true;
}
interface IconButtonPropsOverrides {
destructive: boolean;
compact: boolean;
}
}
const defaultProps: ComponentsProps[typeof componentName] = {
disableRipple: true,
disableTouchRipple: true,
disableFocusRipple: true,
};
export const getFocusStyles = (color: string) => ({
'&:not(.Mui-disabled)': {
'&:focus': {
boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
},
'&:focus:not(:focus-visible)': {
boxShadow: 'none',
},
'&:focus:focus-visible': {
boxShadow: `inset 0 0 0 2px ${emphasize(color, 0.05)}`,
},
},
});
const styleOverrides: ComponentsOverrides<Theme>[typeof componentName] = {
root: ({theme, ownerState}) => ({
backgroundColor: 'transparent',
color: ownerState.color === 'error' ? theme.palette.error.main : alpha(theme.palette.text.primary, 0.56),
borderRadius: 4,
margin: 0,
'&:hover': {
backgroundColor: alpha(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.text.primary, 0.08),
color: ownerState.color === 'error' ? theme.palette.error.main : alpha(theme.palette.text.primary, 0.72),
},
'&:active': {
backgroundColor: alpha(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main, 0.16),
color: ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main,
},
svg: {
margin: 0,
fill: 'currentColor',
},
...getFocusStyles(ownerState.color === 'error' ? theme.palette.error.main : theme.palette.primary.main),
...(ownerState.color !== 'error' && {
'&.toggled:not(.inverted):not(.Mui-disabled)': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
'&:hover': {
backgroundColor: alpha(theme.palette.primary.main, 0.92),
color: theme.palette.primary.contrastText,
},
'&:active': {
backgroundColor: alpha(theme.palette.primary.main, 0.16),
color: theme.palette.primary.main,
},
},
'&.inverted:not(.Mui-disabled)': {
backgroundColor: 'transparent',
color: alpha(theme.palette.text.primary, 0.56),
'&:hover': {
backgroundColor: alpha(theme.palette.text.primary, 0.08),
color: theme.palette.text.primary,
},
'&:active': {
backgroundColor: alpha(theme.palette.text.primary, 0.16),
color: theme.palette.text.primary,
},
'&.toggled': {
backgroundColor: theme.palette.text.primary,
color: alpha(theme.palette.background.default, 0.56),
'&:hover': {
backgroundColor: alpha(theme.palette.text.primary, 0.92),
color: alpha(theme.palette.background.default, 0.56),
},
'&:active': {
backgroundColor: alpha(theme.palette.text.primary, 0.16),
color: theme.palette.text.primary,
},
},
},
}),
transition: theme.transitions.create(['background-color', 'color'], {duration: theme.transitions.duration.shorter}),
}),
};
const variants: ComponentsVariants[typeof componentName] = [
{
props: {size: 'x-small'},
style: ({theme}) => ({
padding: theme.spacing(0.5),
svg: {
width: '12px',
height: '12px',
},
...theme.typography.b75,
lineHeight: 0,
fontWeight: 600,
'.MuiGrid-container': {
gap: theme.spacing(0.25),
maxHeight: theme.spacing(1.5),
},
}),
},
{
props: {size: 'small'},
style: ({theme}) => ({
padding: theme.spacing(0.75),
svg: {
width: '16px',
height: '16px',
},
...theme.typography.b100,
lineHeight: 0,
fontWeight: 600,
'.MuiGrid-container': {
gap: theme.spacing(0.5),
maxHeight: theme.spacing(2),
},
}),
},
{
props: {size: 'medium'},
style: ({theme}) => ({
padding: theme.spacing(1),
svg: {
width: '20px',
height: '20px',
},
...theme.typography.b200,
lineHeight: 0,
fontWeight: 600,
'.MuiGrid-container': {
gap: theme.spacing(0.75),
maxHeight: theme.spacing(2.5),
},
}),
},
{
props: {size: 'large'},
style: ({theme}) => ({
padding: theme.spacing(1),
svg: {
width: '28px',
height: '28px',
},
...theme.typography.b300,
lineHeight: 0,
fontWeight: 600,
'.MuiGrid-container': {
gap: theme.spacing(0.75),
maxHeight: theme.spacing(3.5),
},
}),
},
];
const overrides = {
variants,
defaultProps,
styleOverrides,
};
export default overrides;

51
webapp/platform/components/src/compass/components/icon_button/icon_button.tsx
Просмотреть файл

@@ -1,51 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {Grid} from '@mui/material';
import classNames from 'classnames';
import React from 'react';
import MuiIconButton, {IconButtonProps as MuiIconButtonProps} from '@mui/material/IconButton';
type ExcludedMuiProps = 'sx' | 'disableFocusRipple' | 'disableRipple' | 'color' | 'classes';
type CustomProps = {
IconComponent: React.FC;
compact?: boolean;
toggled?: boolean;
inverted?: boolean;
destructive?: boolean;
label?: string;
}
type IconButtonProps = Omit<MuiIconButtonProps, ExcludedMuiProps> & CustomProps;
const IconButton = ({IconComponent, label, destructive = false, compact = false, toggled = false, inverted = false, ...props}: IconButtonProps) => {
return (
<MuiIconButton
{...props}
className={classNames({compact, toggled, inverted})}
color={destructive ? 'error' : 'primary'}
>
<Grid
container={true}
m={compact ? 0 : 0.25}
alignItems='center'
alignContent='center'
>
<Grid item={true}>
<IconComponent/>
</Grid>
{label && (
<Grid
item={true}
pt={0.25}
>
{label}
</Grid>
)}
</Grid>
</MuiIconButton>
);
};
export default IconButton;

16
webapp/platform/components/src/compass/components/index.ts
Просмотреть файл

@@ -1,16 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import Typography from './typography/typography';
import Button, {ButtonProps} from './button/button';
import IconButton from './icon_button/icon_button';
export {
IconButton,
Button,
Typography,
};
export type {
ButtonProps,
};

285
webapp/platform/components/src/compass/components/typography/typography.overrides.ts
Просмотреть файл

@@ -1,285 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {TypographyOptions} from '@mui/material/styles/createTypography';
import {getFontMargin} from '../../utils/font';
declare module '@mui/material/styles' {
interface TypographyVariants {
// body text variants
b25: React.CSSProperties;
b50: React.CSSProperties;
b75: React.CSSProperties;
b100: React.CSSProperties;
b200: React.CSSProperties;
b300: React.CSSProperties;
// heading variants
h25: React.CSSProperties;
h50: React.CSSProperties;
h75: React.CSSProperties;
h100: React.CSSProperties;
h200: React.CSSProperties;
h300: React.CSSProperties;
h400: React.CSSProperties;
h500: React.CSSProperties;
h600: React.CSSProperties;
h700: React.CSSProperties;
h800: React.CSSProperties;
h900: React.CSSProperties;
h1000: React.CSSProperties;
}
// allow configuration using `createTheme`
interface TypographyVariantsOptions {
// body text style properties
b25?: React.CSSProperties;
b50?: React.CSSProperties;
b75?: React.CSSProperties;
b100?: React.CSSProperties;
b200?: React.CSSProperties;
b300?: React.CSSProperties;
// heading style properties
h25?: React.CSSProperties;
h50?: React.CSSProperties;
h75?: React.CSSProperties;
h100?: React.CSSProperties;
h200?: React.CSSProperties;
h300?: React.CSSProperties;
h400?: React.CSSProperties;
h500?: React.CSSProperties;
h600?: React.CSSProperties;
h700?: React.CSSProperties;
h800?: React.CSSProperties;
h900?: React.CSSProperties;
h1000?: React.CSSProperties;
}
}
// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
interface TypographyPropsVariantOverrides {
// enable our custom body text variants
b25: true;
b50: true;
b75: true;
b100: true;
b200: true;
b300: true;
// enable our custom heading variants
h25: true;
h50: true;
h75: true;
h100: true;
h200: true;
h300: true;
h400: true;
h500: true;
h600: true;
h700: true;
h800: true;
h900: true;
h1000: true;
// disable the MUI variants
h1: false;
h2: false;
h3: false;
h4: false;
h5: false;
h6: false;
body1: false;
body2: false;
button: false;
caption: false;
inherit: false;
overline: false;
subtitle1: false;
subtitle2: false;
}
}
const baseBodyStyles = {
fontFamily: 'Open Sans, sans-serif',
fontStyle: 'normal',
fontWeight: 400,
};
const b25 = {
fontSize: '1rem',
lineHeight: '1.6rem',
marginTop: getFontMargin(10, 0.75),
marginBottom: getFontMargin(10, 0.75),
...baseBodyStyles,
};
const b50 = {
fontSize: '1.1rem',
lineHeight: '1.6rem',
marginTop: getFontMargin(11, 0.75),
marginBottom: getFontMargin(11, 0.75),
...baseBodyStyles,
};
const b75 = {
fontSize: '1.2rem',
lineHeight: '1.6rem',
marginTop: getFontMargin(12, 0.75),
marginBottom: getFontMargin(12, 0.75),
...baseBodyStyles,
};
const b100 = {
fontSize: '1.4rem',
lineHeight: '2rem',
marginTop: getFontMargin(14, 0.75),
marginBottom: getFontMargin(14, 0.75),
...baseBodyStyles,
};
const b200 = {
fontSize: '1.6rem',
lineHeight: '2.4rem',
marginTop: getFontMargin(16, 0.75),
marginBottom: getFontMargin(16, 0.75),
...baseBodyStyles,
};
const b300 = {
fontSize: '1.8rem',
lineHeight: '2.8rem',
marginTop: getFontMargin(18, 0.75),
marginBottom: getFontMargin(18, 0.75),
...baseBodyStyles,
};
const baseHeadingStyles = {
fontFamily: 'Metropolis, sans-serif',
fontStyle: 'normal',
fontWeight: 600,
'&:first-of-type': {
marginTop: 0,
},
};
const h25 = {
fontSize: '1rem',
lineHeight: '1.6rem',
marginTop: getFontMargin(10, 8 / 9),
marginBottom: getFontMargin(10, 0.5),
...baseHeadingStyles,
fontFamily: 'Open Sans, sans-serif',
};
const h50 = {
fontSize: '1.1rem',
lineHeight: '1.6rem',
marginTop: getFontMargin(11, 8 / 9),
marginBottom: getFontMargin(11, 0.5),
...baseHeadingStyles,
fontFamily: 'Open Sans, sans-serif',
};
const h75 = {
fontSize: '1.2rem',
lineHeight: '1.6rem',
marginTop: getFontMargin(12, 8 / 9),
marginBottom: getFontMargin(12, 0.5),
...baseHeadingStyles,
fontFamily: 'Open Sans, sans-serif',
};
const h100 = {
fontSize: '1.4rem',
lineHeight: '2rem',
marginTop: getFontMargin(14, 8 / 9),
marginBottom: getFontMargin(14, 0.5),
...baseHeadingStyles,
fontFamily: 'Open Sans, sans-serif',
};
const h200 = {
fontSize: '1.6rem',
lineHeight: '2.4rem',
marginTop: getFontMargin(16, 8 / 9),
marginBottom: getFontMargin(16, 0.5),
...baseHeadingStyles,
};
const h300 = {
fontSize: '1.8rem',
lineHeight: '2.4rem',
marginTop: getFontMargin(18, 8 / 9),
marginBottom: getFontMargin(18, 0.5),
...baseHeadingStyles,
};
const h400 = {
fontSize: '2rem',
lineHeight: '2.8rem',
marginTop: getFontMargin(18, 8 / 9),
marginBottom: getFontMargin(18, 0.5),
...baseHeadingStyles,
};
const h500 = {
fontSize: '2.2rem',
lineHeight: '2.8rem',
marginTop: getFontMargin(22, 8 / 9),
marginBottom: getFontMargin(22, 0.5),
...baseHeadingStyles,
};
const h600 = {
fontSize: '2.5rem',
lineHeight: '3rem',
marginTop: getFontMargin(25, 8 / 9),
marginBottom: getFontMargin(25, 0.5),
...baseHeadingStyles,
};
const h700 = {
fontSize: '2.8rem',
lineHeight: '3.6rem',
marginTop: getFontMargin(28, 8 / 9),
marginBottom: getFontMargin(28, 0.5),
...baseHeadingStyles,
};
const h800 = {
fontSize: '3.2rem',
lineHeight: '4rem',
marginTop: getFontMargin(32, 8 / 9),
marginBottom: getFontMargin(32, 0.5),
...baseHeadingStyles,
};
const h900 = {
fontSize: '3.6rem',
lineHeight: '4.4rem',
marginTop: getFontMargin(36, 8 / 9),
marginBottom: getFontMargin(36, 0.5),
...baseHeadingStyles,
};
const h1000 = {
fontSize: '4rem',
lineHeight: '4.8rem',
marginTop: getFontMargin(40, 8 / 9),
marginBottom: getFontMargin(40, 0.5),
...baseHeadingStyles,
};
const typographyOverrides: TypographyOptions = {
b25,
b50,
b75,
b100,
b200,
b300,
h25,
h50,
h75,
h100,
h200,
h300,
h400,
h500,
h600,
h700,
h800,
h900,
h1000,
};
export default typographyOverrides;

44
webapp/platform/components/src/compass/components/typography/typography.tsx
Просмотреть файл

@@ -1,44 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {Typography as MuiTypography, TypographyProps as MuiTypographyProps} from '@mui/material';
type Props = Omit<MuiTypographyProps, 'variantMapping' | 'paragraph'> & {
gutterTop?: boolean;
}
const Typography = ({variant = 'b100', ...props}: Props) => {
const variantMap = {
b25: 'p',
b50: 'p',
b75: 'p',
b100: 'p',
b200: 'p',
b300: 'p',
h25: 'h6',
h50: 'h6',
h75: 'h6',
h100: 'h5',
h200: 'h5',
h300: 'h4',
h400: 'h4',
h500: 'h3',
h600: 'h3',
h700: 'h2',
h800: 'h2',
h900: 'h1',
h1000: 'h1',
};
return (
<MuiTypography
{...props}
variant={variant}
variantMapping={variantMap}
/>
);
};
export default Typography;

10
webapp/platform/components/src/compass/index.ts
Просмотреть файл

@@ -1,10 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
export * from './components';
import ThemeProvider from './theme_provider/theme_provider';
export {
ThemeProvider,
};

23
webapp/platform/components/src/compass/theme_provider/overrides.ts
Просмотреть файл

@@ -1,23 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {ThemeOptions} from '@mui/material/styles/createTheme';
import MuiButton from '../components/button/button.overrides';
import MuiIconButton from '../components/icon_button/icon_button.overrides';
import typographyOverrides from '../components/typography/typography.overrides';
const components: ThemeOptions['components'] = {
MuiButton,
MuiIconButton,
};
const overrides: ThemeOptions = {
components,
typography: {
...typographyOverrides,
htmlFontSize: 10,
},
};
export default overrides;

31
webapp/platform/components/src/compass/theme_provider/theme_provider.tsx
Просмотреть файл

@@ -1,31 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {createTheme, ThemeProvider as MUIThemeProvider} from '@mui/material/styles';
import {Theme} from "@mattermost/types/theme";
import {createMUIThemeFromMMTheme} from './themes';
import {THEMES} from '../../common/constants/theme';
import overrides from './overrides';
type Props = {
theme: Theme;
}
const ThemeProvider = ({theme = THEMES.onyx}: Props) => {
const MUITheme = createMUIThemeFromMMTheme(theme);
const combinedTheme = createTheme({
...MUITheme,
...overrides,
});
return (
<MUIThemeProvider
theme={combinedTheme}
/>
);
};
export default ThemeProvider;

47
webapp/platform/components/src/compass/theme_provider/themes.ts
Просмотреть файл

@@ -1,47 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {alpha} from '@mui/material';
import {createTheme} from '@mui/material/styles';
import {Theme} from '@mattermost/types/theme';
import {THEMES} from '../../common/constants/theme';
declare module '@mui/material/styles' {
interface Palette {
mention?: Palette['primary'];
}
interface PaletteOptions {
mention?: PaletteOptions['primary'];
}
interface PaletteColor {
darker?: string;
}
interface SimplePaletteColorOptions {
darker?: string;
}
}
export const createMUIThemeFromMMTheme = (theme: Theme) => createTheme({
palette: {
primary: {main: theme.buttonBg},
secondary: {main: theme.linkColor},
error: {main: theme.dndIndicator},
warning: {main: theme.awayIndicator},
info: {main: theme.mentionHighlightBg},
success: {main: theme.onlineIndicator},
text: {
primary: theme.centerChannelColor,
},
background: {
default: theme.centerChannelBg,
},
action: {
disabled: alpha(theme.centerChannelColor, 0.32),
disabledBackground: alpha(theme.centerChannelColor, 0.08),
},
tonalOffset: 0.05,
},
});

32
webapp/platform/components/src/compass/utils/color.ts
Просмотреть файл

@@ -1,32 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {decomposeColor, hslToRgb} from '@mui/material';
import {normal} from 'color-blend';
export const decomposeColorToRgb = (color: string) => {
if (color.startsWith('hsl')) {
return decomposeColor(hslToRgb(color));
}
return decomposeColor(color);
};
export const blend = (background: string, foreground: string) => {
const bg = decomposeColorToRgb(background);
const fg = decomposeColorToRgb(foreground);
const blended = normal({
r: bg.values[0],
g: bg.values[1],
b: bg.values[2],
a: bg.values[3] || 1,
}, {
r: fg.values[0],
g: fg.values[1],
b: fg.values[2],
a: fg.values[3] || 1,
});
return `rgba(${blended.r}, ${blended.g}, ${blended.b}, ${blended.a})`;
};

5
webapp/platform/components/src/compass/utils/font.ts
Просмотреть файл

@@ -1,5 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
export const getFontMargin = (fontSize: number, multiplier: number): number =>
Math.max(Math.round((fontSize * multiplier) / 4) * 4, 8);

0
webapp/platform/components/src/legacy_generic_modal/footer_content/__snapshots__/footer_pagination.test.tsx.snap → webapp/platform/components/src/footer_pagination/__snapshots__/footer_pagination.test.tsx.snap
Просмотреть файл

2
webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.scss → webapp/platform/components/src/footer_pagination/footer_pagination.scss
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
@import '../../../../../channels/src/sass/utils/mixins';
@import '../../../../channels/src/sass/utils/mixins';
.footer-pagination {
display: flex;

2
webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.test.tsx → webapp/platform/components/src/footer_pagination/footer_pagination.test.tsx
Просмотреть файл

@@ -5,7 +5,7 @@ import React from 'react';
import {render, screen} from '@testing-library/react';
import {FooterPagination} from './footer_pagination';
import {wrapIntl} from '../../testUtils'
import {wrapIntl} from '../testUtils'
describe('LegacyGenericModal/FooterPagination', () => {
const baseProps = {

4
webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.tsx → webapp/platform/components/src/footer_pagination/footer_pagination.tsx
Просмотреть файл

@@ -11,7 +11,7 @@ import './footer_pagination.scss';
const BUTTON_ICON_SIZE = 16;
type FooterPaginationProps = {
type Props = {
page: number;
total: number;
itemsPerPage: number;
@@ -25,7 +25,7 @@ export const FooterPagination = ({
itemsPerPage,
onNextPage,
onPreviousPage,
}: FooterPaginationProps) => {
}: Props) => {
const {formatMessage} = useIntl();
const startCount = page * itemsPerPage;

0
webapp/platform/components/src/legacy_generic_modal/__snapshots__/legacy_generic_modal.test.tsx.snap → webapp/platform/components/src/generic_modal/__snapshots__/legacy_generic_modal.test.tsx.snap
Просмотреть файл

4
webapp/channels/src/components/generic_modal.scss → webapp/platform/components/src/generic_modal/generic_modal.scss
Просмотреть файл

@@ -3,8 +3,8 @@
@charset 'UTF-8';
@import 'utils/variables';
@import 'utils/mixins';
@import '../../../../channels/src/sass/utils/variables';
@import '../../../../channels/src/sass/utils/mixins';
.console__body .modal .GenericModal,
.app__body .modal .GenericModal {

8
webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.test.tsx → webapp/platform/components/src/generic_modal/generic_modal.test.tsx
Просмотреть файл

@@ -4,10 +4,10 @@
import React from 'react';
import {render, screen} from '@testing-library/react';
import {LegacyGenericModal} from './legacy_generic_modal';
import {GenericModal} from './generic_modal';
import {wrapIntl} from '../testUtils';
describe('LegacyGenericModal', () => {
describe('GenericModal', () => {
const baseProps = {
onExited: jest.fn(),
modalHeaderText: 'Modal Header Text',
@@ -16,7 +16,7 @@ describe('LegacyGenericModal', () => {
test('should match snapshot for base case', () => {
const wrapper = render(
wrapIntl(<LegacyGenericModal {...baseProps}/>),
wrapIntl(<GenericModal {...baseProps}/>),
);
expect(wrapper).toMatchSnapshot();
@@ -30,7 +30,7 @@ describe('LegacyGenericModal', () => {
};
render(
wrapIntl(<LegacyGenericModal {...props}/>),
wrapIntl(<GenericModal {...props}/>),
);
expect(screen.getByText('Confirm')).toBeInTheDocument();

3
webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.tsx → webapp/platform/components/src/generic_modal/generic_modal.tsx
Просмотреть файл

@@ -7,6 +7,7 @@ import {Modal} from 'react-bootstrap';
import {FormattedMessage} from 'react-intl';
import {FocusTrap} from '../focus_trap';
import './generic_modal.scss';
export type Props = {
className?: string;
@@ -53,7 +54,7 @@ type State = {
isFocalTrapActive: boolean;
}
export class LegacyGenericModal extends React.PureComponent<Props, State> {
export class GenericModal extends React.PureComponent<Props, State> {
static defaultProps: Partial<Props> = {
show: true,
id: 'genericModal',

15
webapp/platform/components/src/index.tsx
Просмотреть файл

@@ -2,20 +2,21 @@
// See LICENSE.txt for license information.
// type
export type {Props as LegacyGenericModalProps} from './legacy_generic_modal/legacy_generic_modal';
export type {Props as GenericModalProps} from './generic_modal/generic_modal';
export type {CircleSkeletonLoaderProps, RectangleSkeletonLoaderProps} from './skeleton_loader';
export type {Props as FocusTrapProps} from './focus_trap';
export type {Props as PunchOutCoordsHeightAndWidth} from './common/hooks/useMeasurePunchouts';
// components
export * from './compass';
export * from './legacy_generic_modal/footer_content';
export {LegacyGenericModal} from './legacy_generic_modal/legacy_generic_modal';
export {GenericModal} from './generic_modal/generic_modal';
export {FooterPagination} from './footer_pagination/footer_pagination';
export {CircleSkeletonLoader, RectangleSkeletonLoader} from './skeleton_loader';
export * from './tour_tip';
export * from './pulsating_dot';
export {TourTip} from './tour_tip/tour_tip';
export {TourTipBackdrop} from './tour_tip/tour_tip_backdrop';
export {PulsatingDot} from './pulsating_dot';
export {FocusTrap} from './focus_trap';
// hooks
export * from './common/hooks/useMeasurePunchouts';
export {useMeasurePunchouts} from './common/hooks/useMeasurePunchouts';
export {useElementAvailable} from './common/hooks/useElementAvailable';
export {useFollowElementDimensions} from './common/hooks/useFollowElementDimensions';

4
webapp/platform/components/src/legacy_generic_modal/footer_content/index.ts
Просмотреть файл

@@ -1,4 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
export * from './footer_pagination';

2
webapp/platform/components/src/tour_tip/tour_tip.tsx
Просмотреть файл

@@ -7,7 +7,7 @@ import Tippy from '@tippyjs/react';
import {Placement} from 'tippy.js';
import classNames from 'classnames';
import {PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
import type {Props as PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
import 'tippy.js/dist/tippy.css';
import 'tippy.js/themes/light-border.css';

2
webapp/platform/components/src/tour_tip/tour_tip_backdrop.tsx
Просмотреть файл

@@ -4,7 +4,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import {PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
import type {Props as PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
type Props = {
overlayPunchOut: PunchOutCoordsHeightAndWidth | null;

33
webapp/platform/types/src/theme.ts
Просмотреть файл

@@ -1,33 +0,0 @@
export type ThemeKey = 'denim' | 'sapphire' | 'quartz' | 'indigo' | 'onyx';
export type LegacyThemeType = 'Mattermost' | 'Organization' | 'Mattermost Dark' | 'Windows Dark';
export type ThemeType = 'Denim' | 'Sapphire' | 'Quartz' | 'Indigo' | 'Onyx';
export type Theme = {
type?: ThemeType | 'custom';
sidebarBg: string;
sidebarText: string;
sidebarUnreadText: string;
sidebarTextHoverBg: string;
sidebarTextActiveBorder: string;
sidebarTextActiveColor: string;
sidebarHeaderBg: string;
sidebarTeamBarBg: string;
sidebarHeaderTextColor: string;
onlineIndicator: string;
awayIndicator: string;
dndIndicator: string;
mentionBg: string;
mentionColor: string;
centerChannelBg: string;
centerChannelColor: string;
newMessageSeparator: string;
linkColor: string;
buttonBg: string;
buttonColor: string;
errorTextColor: string;
mentionHighlightBg: string;
mentionHighlightLink: string;
codeTheme: string;
};