diff --git a/.changeset/modern-carrots-yell.md b/.changeset/modern-carrots-yell.md
new file mode 100644
index 00000000000..ad197525170
--- /dev/null
+++ b/.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
diff --git a/polaris.shopify.com/src/components/IconDetails/IconDetails.tsx b/polaris.shopify.com/src/components/IconDetails/IconDetails.tsx
index edca05799e6..78385af8a0d 100644
--- a/polaris.shopify.com/src/components/IconDetails/IconDetails.tsx
+++ b/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
diff --git a/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx b/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx index 7f5f85f0d80..b40501315a2 100644 --- a/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx +++ b/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 ?
{name}
+{id}
diff --git a/polaris.shopify.com/src/components/IconsPage/IconsPage.module.scss b/polaris.shopify.com/src/components/IconsPage/IconsPage.module.scss index ff4af38303c..59ef7f89ae8 100644 --- a/polaris.shopify.com/src/components/IconsPage/IconsPage.module.scss +++ b/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; diff --git a/polaris.shopify.com/src/components/IconsPage/IconsPage.tsx b/polaris.shopify.com/src/components/IconsPage/IconsPage.tsx index e19189ac56a..6f73e6e1227 100644 --- a/polaris.shopify.com/src/components/IconsPage/IconsPage.tsx +++ b/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 ? ( +{iconQueryParam}
icon is no longer supported.
+ Please use the {iconName}
icon instead.
+