add missing icons from mdi to compass (#1474)

Migrate mdi icons that have been created at mattermost/compass-icons#47 Fixes https://mattermost.atlassian.net/browse/MM-46942
mattermost · Sep 16, 2022 · 8d86c46 · 8d86c46
1 parent e26a8c3
commit 8d86c46
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 105 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -105,7 +105,7 @@
     "@apollo/client": "3.5.10",
     "@floating-ui/react-dom-interactions": "0.6.3",
     "@mattermost/client": "7.1.0",
-    "@mattermost/compass-icons": "0.1.25",
+    "@mattermost/compass-icons": "0.1.26",
     "@mattermost/types": "7.1.0",
     "@mdi/js": "^6.5.95",
     "@mdi/react": "1.5.0",

diff --git a/webapp/src/components/backstage/playbook_editor/controls.tsx b/webapp/src/components/backstage/playbook_editor/controls.tsx
@@ -6,9 +6,6 @@ import React, {PropsWithChildren, useEffect, useMemo} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {Link} from 'react-router-dom';
 
-import Icon from '@mdi/react';
-import {mdiClipboardPlayOutline, mdiRestore} from '@mdi/js';
-
 import {
     PlusIcon,
     CloseIcon,
@@ -20,6 +17,8 @@ import {
     StarOutlineIcon,
     StarIcon,
     LinkVariantIcon,
+    RestoreIcon,
+    PlayOutlineIcon,
 } from '@mattermost/compass-icons/components';
 
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
@@ -263,10 +262,7 @@ export const RunPlaybook = ({playbook}: ControlProps) => {
             title={enableRunPlaybook ? formatMessage({defaultMessage: 'Run Playbook'}) : formatMessage({defaultMessage: 'You do not have permissions'})}
             data-testid='run-playbook'
         >
-            <Icon
-                path={mdiClipboardPlayOutline}
-                size={1.25}
-            />
+            <PlayOutlineIcon size={20}/>
             {isTutorialPlaybook ? (
                 <FormattedMessage defaultMessage='Start a test run'/>
             ) : (
@@ -456,10 +452,7 @@ const TitleMenuImpl = ({playbook, children, className, editTitle, refetch}: Titl
                             <DropdownMenuItem
                                 onClick={() => openConfirmRestoreModal(playbook, () => refetch())}
                             >
-                                <Icon
-                                    path={mdiRestore}
-                                    size={'18px'}
-                                />
+                                <RestoreIcon size={18}/>
                                 <FormattedMessage defaultMessage='Restore'/>
                             </DropdownMenuItem>
                         ) : (

diff --git a/webapp/src/components/backstage/playbook_editor/outline/scroll_nav.tsx b/webapp/src/components/backstage/playbook_editor/outline/scroll_nav.tsx
@@ -7,8 +7,7 @@ import {FormattedMessage} from 'react-intl';
 
 import {useLocation} from 'react-router-dom';
 
-import Icon from '@mdi/react';
-import {mdiTextBoxOutline} from '@mdi/js';
+import {TextBoxOutlineIcon} from '@mattermost/compass-icons/components';
 
 import {telemetryEventForPlaybook} from 'src/client';
 import {BackstageID} from 'src/components/backstage/backstage';
@@ -118,10 +117,7 @@ const ScrollNav = ({playbookId, items, ...attrs}: Props & Attrs) => {
             {...attrs}
         >
             <Header>
-                <Icon
-                    path={mdiTextBoxOutline}
-                    size={1}
-                />
+                <TextBoxOutlineIcon size={16}/>
                 <FormattedMessage defaultMessage='Contents'/>
             </Header>
             <Items>

diff --git a/webapp/src/components/backstage/playbook_editor/outline/section_actions.tsx b/webapp/src/components/backstage/playbook_editor/outline/section_actions.tsx
@@ -9,9 +9,7 @@ import {useDispatch} from 'react-redux';
 import {getProfilesInTeam, searchProfiles} from 'mattermost-redux/actions/users';
 
 import styled from 'styled-components';
-import {PlayIcon} from '@mattermost/compass-icons/components';
-import Icon from '@mdi/react';
-import {mdiAccountCheckOutline} from '@mdi/js';
+import {PlayIcon, AccountPlusOutlineIcon} from '@mattermost/compass-icons/components';
 
 import {FullPlaybook, Loaded, useUpdatePlaybook} from 'src/graphql/hooks';
 
@@ -173,10 +171,7 @@ const LegacyActionsEdit = ({playbook}: Props) => {
             </StyledSection>
             <StyledSection>
                 <StyledSectionTitle>
-                    <Icon
-                        path={mdiAccountCheckOutline}
-                        size={1.75}
-                    />
+                    <AccountPlusOutlineIcon size={22}/>
                     <FormattedMessage defaultMessage='When a new member joins the channel'/>
                 </StyledSectionTitle>
                 <Setting id={'user-joins-message'}>

diff --git a/webapp/src/components/backstage/playbook_list_row.tsx b/webapp/src/components/backstage/playbook_list_row.tsx
@@ -7,42 +7,26 @@ import styled from 'styled-components';
 import {getTeam} from 'mattermost-redux/selectors/entities/teams';
 import {useSelector, useDispatch} from 'react-redux';
 import {FormattedMessage, useIntl} from 'react-intl';
-
-import {PlayOutlineIcon, ArchiveOutlineIcon, ExportVariantIcon, ContentCopyIcon, PencilOutlineIcon, CloseIcon, EyeOutlineIcon, AccountPlusOutlineIcon, DotsVerticalIcon} from '@mattermost/compass-icons/components';
-
-import Icon from '@mdi/react';
-import {mdiRestore} from '@mdi/js';
-
+import {PlayOutlineIcon, RestoreIcon, ArchiveOutlineIcon, ExportVariantIcon, ContentCopyIcon, PencilOutlineIcon, CloseIcon, EyeOutlineIcon, AccountPlusOutlineIcon, DotsVerticalIcon} from '@mattermost/compass-icons/components';
 import {Client4} from 'mattermost-redux/client';
-
 import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
-
 import {GlobalState} from '@mattermost/types/store';
 
 import {useHasPlaybookPermission, useHasTeamPermission} from 'src/hooks';
 import {Playbook} from 'src/types/playbook';
 import TextWithTooltip from 'src/components/widgets/text_with_tooltip';
-
 import DotMenu, {DropdownMenuItem as DropdownMenuItemBase, DropdownMenuItemStyled, iconSplitStyling} from 'src/components/dot_menu';
-
 import Tooltip from 'src/components/widgets/tooltip';
-
 import {createPlaybookRun, playbookExportProps, telemetryEventForPlaybook} from 'src/client';
-
 import {PlaybookPermissionGeneral} from 'src/types/permissions';
-
 import {TertiaryButton, SecondaryButton} from 'src/components/assets/buttons';
-
 import {navigateToUrl} from 'src/browser_routing';
-
-import {DotMenuButton} from '../dot_menu';
-
 import {usePlaybookMembership} from 'src/graphql/hooks';
-
 import {Timestamp} from 'src/webapp_globals';
-
 import {openPlaybookRunModal} from 'src/actions';
 
+import {DotMenuButton} from '../dot_menu';
+
 import {InfoLine} from './styles';
 import {playbookIsTutorialPlaybook} from './playbook_editor/controls';
 
@@ -304,10 +288,7 @@ const PlaybookListRow = (props: Props) => {
                                 <DropdownMenuItem
                                     onClick={props.onRestore}
                                 >
-                                    <Icon
-                                        path={mdiRestore}
-                                        size='18px'
-                                    />
+                                    <RestoreIcon size={18}/>
                                     <FormattedMessage defaultMessage='Restore'/>
                                 </DropdownMenuItem>
                             ) : (

diff --git a/...src/components/backstage/playbook_runs/playbook_run/retrospective/timeline_event_item.tsx b/...src/components/backstage/playbook_runs/playbook_run/retrospective/timeline_event_item.tsx
@@ -9,9 +9,7 @@ import {useIntl} from 'react-intl';
 
 import {DateTime} from 'luxon';
 
-import Icon from '@mdi/react';
-
-import {mdiClockOutline} from '@mdi/js';
+import {ClockOutlineIcon} from '@mattermost/compass-icons/components';
 
 import {TimelineEvent, TimelineEventType} from 'src/types/rhs';
 import {isMobile} from 'src/mobile';
@@ -309,10 +307,7 @@ const TimelineEventItem = (props: Props) => {
                             </>
                         )}
                     >
-                        <Icon
-                            path={mdiClockOutline}
-                            size={0.85}
-                        />
+                        <ClockOutlineIcon size={12}/>
                     </Tooltip>
                 </TimeStamp>
                 <SummaryTitle

diff --git a/webapp/src/components/rhs/rhs_about_buttons.tsx b/webapp/src/components/rhs/rhs_about_buttons.tsx
@@ -5,10 +5,7 @@ import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import styled from 'styled-components';
 
-import Icon from '@mdi/react';
-import {mdiClipboardPlayOutline} from '@mdi/js';
-
-import {NotebookOutlineIcon, PencilOutlineIcon} from '@mattermost/compass-icons/components';
+import {PlayOutlineIcon, NotebookOutlineIcon, PencilOutlineIcon} from '@mattermost/compass-icons/components';
 
 import {PlaybookRun} from 'src/types/playbook_run';
 import {navigateToPluginUrl} from 'src/browser_routing';
@@ -67,10 +64,9 @@ const RHSAboutButtons = (props: Props) => {
                 </StyledDropdownMenuItem>
                 <Separator/>
                 <StyledDropdownMenuItem onClick={() => navigateToPluginUrl(overviewURL)}>
-                    <DropdownIcon
-                        path={mdiClipboardPlayOutline}
-                        size={1.25}
-                    />
+                    <IconWrapper>
+                        <PlayOutlineIcon size={22}/>
+                    </IconWrapper>
                     <FormattedMessage defaultMessage='Go to run overview'/>
                 </StyledDropdownMenuItem>
                 <StyledDropdownMenuItem onClick={() => navigateToPluginUrl(playbookURL)}>
@@ -101,11 +97,6 @@ const ThreeDotsIcon = styled(HamburgerButton)`
     margin-left: 1px;
 `;
 
-const DropdownIcon = styled(Icon)`
-    color: rgba(var(--center-channel-color-rgb), 0.56);
-    margin-right: 11px;
-`;
-
 const IconWrapper = styled.div`
     margin-right: 11px;
     color: rgba(var(--center-channel-color-rgb), 0.56);

diff --git a/webapp/src/components/rhs/rhs_home_item.tsx b/webapp/src/components/rhs/rhs_home_item.tsx
@@ -7,9 +7,7 @@ import styled from 'styled-components';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {Link} from 'react-router-dom';
 
-import Icon from '@mdi/react';
-import {mdiClipboardPlayOutline} from '@mdi/js';
-import {CheckAllIcon, SyncIcon, OpenInNewIcon} from '@mattermost/compass-icons/components';
+import {CheckAllIcon, SyncIcon, OpenInNewIcon, PlayOutlineIcon} from '@mattermost/compass-icons/components';
 
 import {GlobalState} from '@mattermost/types/store';
 import {Team} from '@mattermost/types/teams';
@@ -254,10 +252,7 @@ export const RHSHomePlaybook = ({playbook}: RHSHomePlaybookProps) => {
                     ));
                 }}
             >
-                <Icon
-                    path={mdiClipboardPlayOutline}
-                    size={1.5}
-                />
+                <PlayOutlineIcon/>
                 <FormattedMessage defaultMessage='Run'/>
             </RunButton>
             }

diff --git a/webapp/src/components/sidebar/create_playbook_dropdown.tsx b/webapp/src/components/sidebar/create_playbook_dropdown.tsx
@@ -4,8 +4,7 @@ import {useDispatch, useSelector} from 'react-redux';
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 import {useIntl} from 'react-intl';
 import {getMyTeams} from 'mattermost-redux/selectors/entities/teams';
-import {mdiClipboardPlayMultipleOutline, mdiImport} from '@mdi/js';
-import Icon from '@mdi/react';
+import {ImportIcon, PlayBoxMultipleOutlineIcon, PlusIcon, GlobeIcon} from '@mattermost/compass-icons/components';
 
 import {displayPlaybookCreateModal} from 'src/actions';
 import {useImportPlaybook} from 'src/components/backstage/import_playbook';
@@ -45,7 +44,7 @@ const CreatePlaybookDropdown = (props: CreatePlaybookDropdownProps) => {
                 onClick={() => {
                     navigateToPluginUrl('/playbooks');
                 }}
-                icon={<StyledIcon className='icon-globe'/>}
+                icon={<IconWrapper><GlobeIcon size={18}/></IconWrapper>}
                 text={formatMessage({defaultMessage: 'Browse Playbooks'})}
             />
         );
@@ -55,7 +54,7 @@ const CreatePlaybookDropdown = (props: CreatePlaybookDropdownProps) => {
                 id='createPlaybook'
                 show={true}
                 onClick={() => dispatch(displayPlaybookCreateModal({}))}
-                icon={<StyledIcon className='icon-plus'/>}
+                icon={<IconWrapper><PlusIcon size={18}/></IconWrapper>}
                 text={formatMessage({defaultMessage: 'Create New Playbook'})}
             />
         );
@@ -69,10 +68,7 @@ const CreatePlaybookDropdown = (props: CreatePlaybookDropdownProps) => {
                         fileInputRef?.current?.click();
                     }}
                     icon={
-                        <StyledMDIIcon
-                            path={mdiImport}
-                            size={'18px'}
-                        />
+                        <IconWrapper><ImportIcon size={18}/></IconWrapper>
                     }
                     text={formatMessage({defaultMessage: 'Import Playbook'})}
                 />
@@ -87,10 +83,7 @@ const CreatePlaybookDropdown = (props: CreatePlaybookDropdownProps) => {
                     navigateToPluginUrl('/runs');
                 }}
                 icon={
-                    <StyledMDIIcon
-                        path={mdiClipboardPlayMultipleOutline}
-                        size={'18px'}
-                    />
+                    <IconWrapper><PlayBoxMultipleOutlineIcon size={18}/></IconWrapper>
                 }
                 text={formatMessage({defaultMessage: 'Browse Runs'})}
             />
@@ -119,7 +112,7 @@ const CreatePlaybookDropdown = (props: CreatePlaybookDropdownProps) => {
             >
                 <>
                     <Button aria-label={formatMessage({defaultMessage: 'Create Playbook Dropdown'})}>
-                        <i className='icon-plus'/>
+                        <PlusIcon size={18}/>
                     </Button>
                     {inputImportPlaybook}
                 </>
@@ -161,22 +154,18 @@ const Button = styled.button`
     min-width: 28px;
     height: 28px;
     font-size: 18px;
-    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
 
     &.disabled {
         background: rgba(255, 255, 255, 0.08);
     }
 `;
 
-const StyledMDIIcon = styled(Icon)`
-    width: 25px;
-    height: 22px;
+const IconWrapper = styled.div`
     margin-right: 7px;
     margin-left: 4px;
-`;
-
-const StyledIcon = styled.i`
-    width: 25px;
-    height: 22px;
-    margin-right: 3px;
+    display: flex;
+    justify-items: center;
 `;