Add status message for v8 icon renames (#11461)

This PR:

- Adds a status message to inform user to use the newly named icon in
`@shopify/polaris-icons@8.0.0`
- Displays the Icon `id` rather than the `name` to better distinguish
from the old `Major|Minor` suffix

<img width="1788" alt="Screenshot 2024-01-17 at 3 59 45 PM"
src="https://github.com/Shopify/polaris/assets/11774595/4a3d7fa2-2bd8-4935-94dc-cc6765c650c0">

.changeset/modern-carrots-yell.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Added deprecation warning to old icon names informing users to use the new icon name

polaris.shopify.com/src/components/IconDetails/IconDetails.tsx

@@ -8,7 +8,7 @@ import * as polarisIcons from '@shopify/polaris-icons';
 interface Props {
   fileName: string;
   iconData: {
-    name: string;
+    id: string;
     description: string;
     keywords: string[];
   };
@@ -31,7 +31,7 @@ function IconDetails({fileName, iconData}: Props) {
 
   if (!fileName) return <EmptyState />;
 
-  const {description, name, keywords} = iconData;
+  const {id, description, keywords} = iconData;
 
   const reactExamples = {
     imports: `import {\n  ${fileName}\n} from '@shopify/polaris-icons';`,
@@ -54,7 +54,7 @@ function IconDetails({fileName, iconData}: Props) {
           <Icon source={(polarisIcons as any)[fileName]} />
         </div>
 
-        <h2 className={styles.Title}>{name}</h2>
+        <h2 className={styles.Title}>{id}</h2>
 
         {description !== 'N/A' && (
           <p className={styles.IconDescription}>

polaris.shopify.com/src/components/IconGrid/IconGrid.tsx

@@ -8,14 +8,12 @@ import * as polarisIcons from '@shopify/polaris-icons';
 import SearchResultHighlight from '../SearchResultHighlight';
 
 interface IconGridProps {
-  title?: string;
   children: React.ReactNode;
 }
 
-function IconGrid({title, children}: IconGridProps) {
+function IconGrid({children}: IconGridProps) {
   return (
     <>
-      {title ? <h2 className={styles.SectionHeading}>{title}</h2> : null}
       <div className={styles.IconGrid}>
         <ul className={styles.IconGridInner}>{children}</ul>
       </div>
@@ -42,7 +40,7 @@ function IconGridItem({
   searchTerm,
   uuid,
 }: IconGridItemProps) {
-  const {id, name} = icon;
+  const {id} = icon;
   const searchAttributes = useGlobalSearchResult();
 
   return (
@@ -74,7 +72,7 @@ function IconGridItem({
         >
           <SearchResultHighlight />
           <Icon source={(polarisIcons as any)[id]} />
-          <p>{name}</p>
+          <p>{id}</p>
         </a>
       </Link>
     </li>

polaris.shopify.com/src/components/IconsPage/IconsPage.module.scss

@@ -9,6 +9,12 @@
   align-items: flex-start;
 }
 
+.IconGrids {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
 .Modal {
   position: fixed;
   top: 2rem;

polaris.shopify.com/src/components/IconsPage/IconsPage.tsx

@@ -14,6 +14,8 @@ import IconDetails from '../IconDetails';
 import PageMeta from '../PageMeta';
 import {className} from '../../utils/various';
 import Page from '../Page';
+import StatusBanner from '../StatusBanner';
+import {iconRenamesV7toV8} from './icon-renames-v7-to-v8';
 
 const fuse = new Fuse(Object.values(iconMetadata), {
   threshold: 0.25,
@@ -70,8 +72,12 @@ function IconsPage() {
   const iconQueryParam = Array.isArray(router.query.icon)
     ? router.query.icon[0]
     : router.query.icon ?? '';
-  const activeIcon = Object.keys(iconMetadata).includes(iconQueryParam)
-    ? iconQueryParam
+  const isRenamedIcon = Object.keys(iconRenamesV7toV8).includes(iconQueryParam);
+  const iconName = isRenamedIcon
+    ? iconRenamesV7toV8[iconQueryParam as keyof typeof iconRenamesV7toV8]
+    : iconQueryParam;
+  const activeIcon = Object.keys(iconMetadata).includes(iconName)
+    ? iconName
     : '';
   const currentSearchText = router.query.q ? `${router.query.q}` : '';
 
@@ -120,8 +126,15 @@ function IconsPage() {
             placeholder="Search icons"
           />
 
+          {isRenamedIcon ? (
+            <StatusBanner status="Deprecated">
+              The <code>{iconQueryParam}</code> icon is no longer supported.
+              Please use the <code>{iconName}</code> icon instead.
+            </StatusBanner>
+          ) : null}
+
           {icons.length > 0 && (
-            <IconGrid title=" ">
+            <IconGrid>
               {icons.map((icon) => (
                 <IconGrid.Item
                   key={icon.id}