diff --git a/client/components/command-palette/README.md b/client/components/command-palette/README.md index 6b27be56e313a..15d321ab43853 100644 --- a/client/components/command-palette/README.md +++ b/client/components/command-palette/README.md @@ -37,7 +37,7 @@ Please consider carefully before adding a new command to the palette. We aim to - Command labels should be short and descriptive and use sentence case. For example, "Add new site" instead of "Add New Site". - Commands should start with a verb. For example, "Add new site" instead of "New site". - Picking the correct verb is important. `Open` is the more generic verb, if the page has a list of elements, we can use `View`, if the user is expected to take an action we can use `Manage` or `Change`. We prefer specific verbs over generic ones. -- We prefer to use [Gutenberg icons](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library) for root commands. +- We prefer to use [Gutenberg icons](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library) for root commands. The icon should relate to the object (e.g. "Cache"), not the type of page (e.g. "Settings"). - It's important to keep the same terminology and icons used elsewhere in the interace or in core. - We can introduce aliases, and keywords using `searchLabel`. For example. "Import a site" would be an alias of "Migrate a site" because the navigation it's under Tools → Import. - Most commands navigate to other pages. We can also navigate to a specific section/card inside a page. For example, "Manage cache settings" in addition to "Manage hosting configuration". diff --git a/client/my-sites/hosting/cache-card/index.js b/client/my-sites/hosting/cache-card/index.js index d3bc16961eff2..d6dd1ad623de2 100644 --- a/client/my-sites/hosting/cache-card/index.js +++ b/client/my-sites/hosting/cache-card/index.js @@ -2,11 +2,11 @@ import { recordTracksEvent } from '@automattic/calypso-analytics'; import { Button, Card } from '@automattic/components'; import styled from '@emotion/styled'; import { ToggleControl } from '@wordpress/components'; +import { Icon, reusableBlock as cacheIcon } from '@wordpress/icons'; import { localize } from 'i18n-calypso'; import { connect } from 'react-redux'; import CardHeading from 'calypso/components/card-heading'; import InlineSupportLink from 'calypso/components/inline-support-link'; -import MaterialIcon from 'calypso/components/material-icon'; import { clearWordPressCache } from 'calypso/state/hosting/actions'; import getRequest from 'calypso/state/selectors/get-request'; import isPrivateSite from 'calypso/state/selectors/is-private-site'; @@ -152,7 +152,7 @@ export const CacheCard = ( { //autorenew return ( - + { translate( 'Cache' ) } diff --git a/client/my-sites/hosting/style.scss b/client/my-sites/hosting/style.scss index 0d9c260e32547..0130e02279b14 100644 --- a/client/my-sites/hosting/style.scss +++ b/client/my-sites/hosting/style.scss @@ -6,6 +6,7 @@ margin-top: 0; } + .card > .card-icon, .card > .material-icon, .card > .gridicon { display: inline-block; @@ -66,6 +67,7 @@ .card { padding-left: 72px; + > .card-icon, > .material-icon, > .gridicon { display: block; diff --git a/client/sites-dashboard/components/wpcom-smp-commands.tsx b/client/sites-dashboard/components/wpcom-smp-commands.tsx index 349f3ad6f8362..9c4d29aa30b2c 100644 --- a/client/sites-dashboard/components/wpcom-smp-commands.tsx +++ b/client/sites-dashboard/components/wpcom-smp-commands.tsx @@ -6,7 +6,6 @@ import { backup as backupIcon, brush as brushIcon, chartBar as statsIcon, - cog as settingsIcon, commentAuthorAvatar as profileIcon, commentAuthorName as subscriberIcon, download as downloadIcon, @@ -21,14 +20,14 @@ import { plugins as pluginsIcon, plus as plusIcon, postComments as postCommentsIcon, - settings as accountSettingsIcon, + settings as settingsIcon, tool as toolIcon, wordpress as wordpressIcon, + reusableBlock as cacheIcon, help as helpIcon, } from '@wordpress/icons'; import { useI18n } from '@wordpress/react-i18n'; import { CommandCallBackParams } from 'calypso/components/command-palette/use-command-palette'; -import MaterialIcon from 'calypso/components/material-icon'; import { SiteExcerptData } from 'calypso/data/sites/site-excerpt-types'; import { navigate } from 'calypso/lib/navigate'; import { useAddNewSiteUrl } from 'calypso/lib/paths/use-add-new-site-url'; @@ -294,7 +293,7 @@ export const useCommandsArrayWpcom = ( { }, filter: ( site: SiteExcerptData ) => site?.is_wpcom_atomic, }, - icon: , + icon: cacheIcon, }, { name: 'enableEdgeCache', @@ -308,7 +307,7 @@ export const useCommandsArrayWpcom = ( { filter: ( site: SiteExcerptData ) => site?.is_wpcom_atomic && ! site?.is_coming_soon && ! site?.is_private, }, - icon: , + icon: cacheIcon, }, { name: 'disableEdgeCache', @@ -322,7 +321,7 @@ export const useCommandsArrayWpcom = ( { filter: ( site: SiteExcerptData ) => site?.is_wpcom_atomic && ! site?.is_coming_soon && ! site?.is_private, }, - icon: , + icon: cacheIcon, }, { name: 'openSiteDashboard', @@ -476,7 +475,7 @@ export const useCommandsArrayWpcom = ( { close(); navigate( `/me/account` ); }, - icon: accountSettingsIcon, + icon: profileIcon, }, { name: 'accessPurchases', @@ -758,7 +757,7 @@ export const useCommandsArrayWpcom = ( { }, filter: ( site: SiteExcerptData ) => site?.is_wpcom_atomic, }, - icon: toolIcon, + icon: cacheIcon, }, { name: 'changeAdminInterfaceStyle',